@twobirds/microcomponents 0.2.3 → 0.2.5

package/README.md

@@ -1,8 +1,8 @@
 ![logo](https://twobirds.gitlab.io/microcomponents/MicroComponents.svg)
 
-## MICRO COMPONENTS
+# MICRO COMPONENTS
 
-**MCs are function blocks that you attach to DOM nodes.** These are re-usable in any framework, and you can have any number of MCs in one DOM node.
+**MCs are function blocks that you attach to DOM nodes.** These are re-usable in any frontend framework.
 
 There are helpers for the following functionalities:
 
@@ -12,33 +12,40 @@ There are helpers for the following functionalities:
 - **Communication** between DOM micro components is ensured via direct selected or directional bubbling CustomEvent's.
 - **Autoloading** allows for build-free websites that dynamically load JS requirements into DOM HTMLElements.
 
-The distinguishing feature - compared to other frameworks - is its **minimalism**, **portability** and **granular modularization**. In an almost literal sense MCs work like childrens building blocks, where a chest full of unassuming parts lets you compose whatever functionality lies in your imagination.
+The distinguishing feature is its **minimalism**, **portability** and **granular modularization**. In an almost literal sense MCs work like childrens building blocks, where a chest full of unassuming parts lets you compose whatever functionality lies in your imagination.
 
 **You work with one of the established frameworks?** You can still put this hands-on tool in your tool belt. You then have a plugin fallback solution for when your FW fails you or lacks functionality.
 
----
+## Prominent Features
+
+- No-build development
+- Very shallow learning curve - easy on newbies
+- Strictly web standards compliant
+- Very little abstraction
+
 ## Status
----
 
-Automatic tests added. Typedoc needs some work still.
+- API stable
+- Typedoc documentation needs some brushing
+
+## Links
 
-[demo shop (on-demand loading)](https://twobirds.gitlab.io/microcomponents/shop/index.html) loads every component as a single file. Nice to check the code, it is readable.
+[demo shop (on-demand loading)](https://twobirds.gitlab.io/microcomponents/shop/index.html). No build, on-demand loading elements. Check code in debugger.
 
 [demo shop (bundled in one JS file)](https://twobirds.gitlab.io/microcomponents/shop/index-bundled.html). 9 kB including the library.
 
 Check the [typedoc API reference](https://twobirds.gitlab.io/microcomponents/typedoc/index.html) if you want to drill into the source code.
 
-The progress of coding is being streamed on [twitch](https://twitch.tv/frankieth) and [youtube](https://www.youtube.com/@FrankieThu).
+The progress of coding is occasionally being streamed on [twitch](https://twitch.tv/frankieth).
 
 ## Examples
 
----
 ### **Functional Principle**
----
 
-- *The following code only shows the priciple: how Micro Components are stored in the DOM*
-
-- *Web Components / Custom Elements follow below*
+- *This section only shows the priciple: how Micro Components are stored in the DOM*
+- *The section after this shows Web Components / Custom Elements*
+- *All examples on this page are **Javascript**.*
+- *The package has full **Typescript** support*
 
 html before:
 
@@ -51,10 +58,6 @@ code:
 ```javascript
 // create a custom micro component class
 class MyMC extends DC {
-	constructor(target) {
-		super(target);
-	}
-
 	helloWorld() {
 		console.log('Hello World');
 	}
@@ -79,31 +82,19 @@ html after:
 <div data-mc></div>
 ```
 
-The `data-mc` **attribute** indicates that this **HTML element contains at least one micro component**. This is needed for the selectors.
-
-The `_mc` **property** is the only interference with the DOM, so any other system should be happy to work with this.
+- The `data-mc` **attribute** indicates that this **HTML element contains at least one micro component**. This is needed for the selectors.
+- The `_mc` **property** is the only interference with the DOM, so any other system should be happy to work with this.
 
----
 ### **Web Components / Custom Elements**
----
 
 You can define a custom element using a micro component as its primary functional instance.  You are still free to add many more micro components to the custom element at runtime.
 
 code:
 
 ```javascript
-// create a custom micro component class
-class MyComponent extends DC {
-	constructor(target) {
-		super(target);
-	}
-
-	// this event handler is attached automatically
-	onClick() {
-		console.log('<my-component> clicked!');
-	}
-}
-
+// create a micro component class
+class MyComponent extends DC {}
+// define it as a web component
 defineCE('my-component', MyComponent);
 ```
 
@@ -113,57 +104,54 @@ after: you can use ...
 <my-component></my-component>
 ```
 
-... in your template.
+... in your template. The custom element will auto-attach.
 
 Or you can construct it programmatically:
 
 ```javascript
-const myComponentClass = getCE('my-component');
+const ctor = getCE('my-component');
 const body = document.body;
-body.append(new myComponentClass());
+body.append(new ctor());
 ```
 
-For more examples regarding web components, go to the [docs](https://twobirds.gitlab.io/microcomponents/typedoc/modules/core_elements.html) 
-and check the loaded sources from the [demo shop](https://twobirds.gitlab.io/microcomponents/shop/index.html). 
-There is a lot to see...
+- For more examples regarding web components, go to the [typedocs](https://twobirds.gitlab.io/microcomponents/typedoc/) 
+- Check the sources of the [demo shop](https://twobirds.gitlab.io/microcomponents/shop/index.html) in the browser debugger 
 
----
 ### **State and 1-way-binding**
----
 
-Declare states and directly connect them to DOM placeholders:
+Declare states and directly connect them to DOM placeholders.
+
 code:
 
 ```javascript
-observPlugin(DC);
+observePlugin(DC);
 // create a custom micro component class
 class MyMC extends DC {
+
 	state = { text: 'Hello world!' };
 
 	constructor(target) {
 		super(target);
 
-		this.target.innerHTML = '{text}';
+		this.target.innerHTML = '{text}'; // simplicity, there are other methods
 
 		this
-		// one way binding
-		.bind( 'state', target );
-		// attach your own callbacks
-		.subscribe( 'state', (value) => {
+		.bind( 'state', target ) // one way binding
+		.subscribe( 'state', (value) => { // attach your own callbacks
 			console.log(value);
 		});
 
-		// now simply changing the state will change the DOM
-		this.state.text = 'Hallo Welt'; // replaces DOM placeholder, also triggers console.log()
+		// changing the state will change the DOM
+		this.state.text = 'Hallo Welt'; // also triggers console.log()
 	}
 }
 ```
 
----
 ### **Forms and 2-way-binding**
----
 
-Similar to observables above, you can 2-way-bind an observable object to form input fields. Changes in the object properties trigger input field changes and vice versa.
+Similar to observables above, you can 2-way-bind an observable object to form input fields. 
+
+Changes in the object properties trigger input field changes and vice versa.
 
 code:
 
@@ -172,22 +160,21 @@ formValuesPlugin(DC);
 // create a custom micro component class
 targetHtml = /*HTML*/ `
 <form>
-	<input name="textinput" value="Hallo Welt!"/>
+	<input name="textInput" value="Hallo Welt!"/>
 </form>
 `;
 class MyMC extends DC {
 	constructor(target) {
 		super(target);
 
-		this.target.innerHTML = targetHtml; 
+		this.target.innerHTML = targetHtml;
 
-		this.formData = { text: '' };
+		this.formData = { textInput: '' };
 
 		this
-		// link the form property to the DOM input fields
-		.formValues(target, 'formData')
-		.subscribe( 'formData', (form) => {
-			console.log(form); // the form data object
+		.formValues(target, 'formData')// link the form property to the DOM input fields
+		.subscribe( 'formData', (data) => {
+			console.log(data); // the form data object
 		});
 
 		// now simply changing the form property will change the DOM input fields
@@ -198,13 +185,13 @@ class MyMC extends DC {
 }
 ```
 
----
 ### **Event Handlers**
----
 
 #### Native Events
 
-Events and there handlers are defined and triggered inside the system automatically. You can use events separately in vanilla JS to communicate with micro components.
+Events and there handlers are defined and triggered inside the system automatically. 
+
+You can use events separately in vanilla JS to communicate with micro components.
 
 code:
 
@@ -261,9 +248,7 @@ class MyMC extends DC {
 }
 ```
 
----
-## Goal
----
+## Goals
 
 This code aims at improving Javascript modularity and encapsulation. Micro Components are built on **OOP** for structure, so you should embrace **DRY, KISS and SOLID** principles.
 
@@ -283,9 +268,7 @@ Most of all this system by design **allows for outsourcing without sharing the m
 
 Finally it allows for a clear distinction between `Junior`, `Senior` and `Architect` roles in a project. No more hiring junior programmers with 5 years experience in 50 tools under their belt. A junior in this system is somebody who likes HTML, CSS and JS/TS - nothing more. Teaching all of this system starting at zero takes 1 day. The rest is finger muscle memory and learning/knowing web standards.
 
----
 ## Distinguishing Features
----
 
 There are a few potentially unique aspects of this micro components system that might differentiate it from other framework or library:
 
@@ -301,9 +284,7 @@ There are a few potentially unique aspects of this micro components system that
 
 The strongest argument might be for developers who prefer OOP, want minimal framework lock-in, and need a lightweight solution that works well with existing code or other libraries.
 
----
 ## Contact
----
 
 Feel free to contact me for any questions or inquiries:
 
@@ -311,18 +292,12 @@ email [Frank Thürigen](mailto:fthuerigen@gmail.com?subject=Micro%20Components)
 
 You can [fund this](https://www.gofundme.com/f/nachhaltige-programmierung).
 
----
 ## Disclaimer
----
-
-I decided to extract this functionality from the [twoBirds framework](https://www.npmjs.com/package/twobirds-core), because it is a useful tool in itself and it is framework agnostic. It relies solely on the standard DOM and native javascript or typescript.
 
-Later this will be backported into twoBirds as a dependency, and twoBirds will become completely modularized on the base of MCs.
+I decided to extract this functionality from the now deprecated [twoBirds framework](https://www.npmjs.com/package/twobirds-core), because it is a useful tool in itself and it is framework agnostic.
 
-**This is a massive undertaking.** MCs are just the foundation of what I do. I am about to dump [20+ years of javascript programming](https://gitlab.com/twoBirds/microcomponents/-/blob/main/assets/documentation/magic.md?ref_type=heads#things-i-already-did-with-this-in-my-own-framework-twobirds-or-in-apps-that-i-developed-with-it) into open source libraries, so feel free to [fund this](https://www.gofundme.com/f/nachhaltige-programmierung). The better this is funded, the faster it will be done. Given enough resources, I will start a crowdfunded company that will develop a new open source ecosystem for javascript/typescript programming.
+Later this will be backported into twoBirds as a dependency, and twoBirds will become a completely modularized MC UI package on the base of MCs.
 
----
 ## Deprecated test:
----
 
-[manual testing](https://twobirds.gitlab.io/microcomponents/test/index.html) ( also a speed test).
+[manual testing](https://twobirds.gitlab.io/microcomponents/test/index.html) ( also a speed test ).

package/dist/MC.min.js

@@ -1 +1 @@
-function e(e,t){let n=t.toLowerCase();return`on`+n in e?n:`_mc`+t[0].toUpperCase()+t.substring(1)}function t(n,r,i){if(n){if(typeof n==`string`){document.querySelectorAll(n).forEach(e=>t(e,r,i));return}n.removeEventListener(e(n,r),i)}}function n(t,r,i,a=!1){if(t){if(typeof t==`string`){document.querySelectorAll(t).forEach(e=>n(e,r,i));return}return t.addEventListener(e(t,r),i,{capture:!1,once:a}),i}}function r(e,t,i){if(e){if(typeof e==`string`){document.querySelectorAll(e).forEach(e=>r(e,t,i));return}return n(e,t,i,!0),i}}var i=class{stopped=!1;constructor(){}stop(){this.stopped=!0}};function a(t,n,r={},o=`l`,s){if(!t)return;if(typeof t==`string`){document.querySelectorAll(t).forEach(e=>a(e,n,r,o));return}let c=/^_mc/.test(n)?n:e(t,n),l=s||new i,u=new CustomEvent(c,{detail:{data:r,control:l},bubbles:!1});l.stopped||/l/.test(o)&&(t.dispatchEvent(u),l.stopped)||/[ud]/.test(o)&&queueMicrotask(()=>{if(o.indexOf(`u`)>-1&&a(t.parentElement,c,r,`lu`,l),o.indexOf(`d`)>-1)for(let e of t.children)a(e,c,r,`ld`)})}function o(e,t){let n=new CSSStyleSheet;return n.replaceSync(t),e.adoptedStyleSheets.push(n),n}function s(e,t){let n=e.target,r=n.shadowRoot;!r&&Object.keys(t).some(e=>e.indexOf(`shadow`)===0)&&(r=n.attachShadow({mode:`open`})),Object.keys(t).forEach(i=>{switch(i){case`css`:o(document,t[i]);break;case`targetCss`:o(document,t[i]);break;case`shadowCss`:o(r,t[i]);break;case`shadowHtml`:r.innerHTML=t[i],l(r,e);break;case`targetHtml`:n.innerHTML=t[i],l(n,e);break}})}function c(e,t){let n=t=>{let n=t.match(/^([a-z]+)([A-Z][a-z]*)$/);return n?`./${e.replace(/-/g,`/`)}.${n[1]}.${n[2].toLowerCase()}`:`./${e.replace(/-/g,`/`)}.${t.toLowerCase()}`};return Promise.all(t.map(async e=>{let t=n(e);try{let n=await fetch(t);if(!n.ok)return`file not found: ${t}`;if(t.endsWith(`json`)){let r=await n.text();try{return JSON.parse(r)}catch{return console.error(`could not JSON.parse() asset '${e}' from ${t}:\n`,r),null}}return n.text()}catch{return`file not found: ${t}`}}))}function l(e,t){let r=[...e.querySelectorAll(`*`)];for(let e of r){if(!(e instanceof HTMLElement))continue;let r=[...e.attributes];for(let i of r){let r=i.name.toLowerCase();if(!(`on`+r in e))continue;let o=i.value.trim().split(`|`);if(o.length<2)continue;let[s,c,l]=o;e.removeAttribute(i.name);let u;if(l)try{u=JSON.parse(l)}catch{u=l}s===`this`||s===``?n(e,r,()=>t.trigger(c,u)):n(e,r,()=>a(s,c,u))}}}function u(e,t){return typeof HTMLElement<`u`&&e instanceof HTMLElement&&`_mc`in e&&(t===void 0||t in e._mc)}function d(e,t,n={}){let r=e;`_mc`in e||(r._mc=new y(e));let i=r._mc;return t.length&&!i[t]&&(i[t]=n,e instanceof HTMLElement&&!e.getAttribute(`data-mc`)&&e.setAttribute(`data-mc`,``)),r}function f(e,t){if(!t)return;let n=e._mc;n&&(n[t]&&delete n[t],!Object.keys(n).length&&e instanceof HTMLElement&&e.hasAttribute(`data-mc`)&&e.removeAttribute(`data-mc`))}function p(e){queueMicrotask(()=>{e.trigger(`Init`,null)})}function m(e){let t=e.target,r=Object.getPrototypeOf(e),i=e,a=Object.getOwnPropertyNames(r).filter(e=>/^(on[A-Z]|one[A-Z])/.test(e)&&typeof r[e]==`function`);for(let e of a){let r=/^one/.test(e);n(t,e.replace(/^one?/,``),t=>i[e](t),r)}}function h(e){return Array.from(e.querySelectorAll(`[data-mc]:not(:scope [data-mc] [data-mc])`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc)}function g(e,t){let n=e.parentElement?.closest(`[data-mc]`);for(;n instanceof HTMLElement;){if(`_mc`in n){let e=n._mc;if(t===void 0||t in e)return e}n=n.parentElement?.closest(`[data-mc]`)}return null}var _=class{_target;constructor(e){if(this._target=new WeakRef(e||{}),this instanceof y&&this.constructor!==y){m(this);let e=this.constructor.tag;(e===void 0||e.toUpperCase()===this.target.tagName)&&p(this)}}get target(){return this._target.deref()}},v=class extends _{constructor(e){super(e)}},y=class e extends _{static tag;static _assets={};static assets=[];static attributes={};constructor(t){super(t);let n=this.constructor;if(n===e)return;let r=this.target.tagName.toLowerCase();if(n.tag!==void 0&&r!==n.tag&&n.tag!==``){let t=document.createElement(n.tag);t.classList.add(r),e.add(t,n.name,new n(t)),r.includes(`-`)&&!this.target.isConnected?this.on(`connected`,()=>this.target.replaceWith(t)):this.target.replaceWith(t);return}let i=n.attributes;n.attributes&&Object.keys(n.attributes).forEach(e=>{this.target.setAttribute(e,i[e])});let a=n.assets.filter(e=>!n._assets[e]),o=this;if(n.hasOwnProperty(`_assets`)?s(this,n._assets):n.assets.length&&!n.hasOwnProperty(`_assets`)&&(n._assets={}),a.length?c(r,a).then(e=>{let t={};a.forEach((n,r)=>{t[n]=e[r]}),s(this,t),n._assets=Object.assign({},n._assets,t),o.trigger(`assets`,n._assets)}):[...Object.keys(n._assets)].length&&queueMicrotask(()=>o.trigger(`assets`,n._assets)),n.tag===``){this.target.remove();return}}getAssets(){return this.constructor._assets||{}}static add(e,t,n={}){return d(e,t,n)}static remove(e,t){f(e,t)}static get(e,t,n){if(!u(e))return;let r=e._mc[t];return r instanceof n?r:void 0}off(e,n){t(this.target,e,n)}on(e,t){return n(this.target,e,t)}one(e,t){return r(this.target,e,t)}trigger(e,t={},n=`l`,r){a(this.target,e,t,n,r)}ancestors(e){let t=[],n=g(this.target,e);for(;n;)t.push(n),n=g(n.target,e);return t}closest(e){return g(this.target,e)}children(e){let t=h(this.target);return e===void 0?t:t.filter(t=>e in t)}descendants(e){return Array.from(this.target.querySelectorAll(`[data-mc]`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc).filter(t=>e===void 0||e in t)}};export{y as DC,v as MC,_ as McBase,u as isMcHost};
+function e(e,t){let n=t.toLowerCase();return`on`+n in e?n:`_mc`+t[0].toUpperCase()+t.substring(1)}function t(n,r,i){if(n){if(typeof n==`string`){document.querySelectorAll(n).forEach(e=>t(e,r,i));return}n.removeEventListener(e(n,r),i)}}function n(t,r,i,a=!1){if(t){if(typeof t==`string`){document.querySelectorAll(t).forEach(e=>n(e,r,i));return}return t.addEventListener(e(t,r),i,{capture:!1,once:a}),i}}function r(e,t,i){if(e){if(typeof e==`string`){document.querySelectorAll(e).forEach(e=>r(e,t,i));return}return n(e,t,i,!0),i}}var i=class{stopped=!1;constructor(){}stop(){this.stopped=!0}};function a(t,n,r={},o=`l`,s){if(!t)return;if(typeof t==`string`){document.querySelectorAll(t).forEach(e=>a(e,n,r,o));return}let c=/^_mc/.test(n)?n:e(t,n),l=s||new i,u=new CustomEvent(c,{detail:{data:r,control:l},bubbles:!1});l.stopped||/l/.test(o)&&(t.dispatchEvent(u),l.stopped)||/[ud]/.test(o)&&queueMicrotask(()=>{if(o.indexOf(`u`)>-1&&a(t.parentElement,c,r,`lu`,l),o.indexOf(`d`)>-1)for(let e of t.children)a(e,c,r,`ld`)})}var o=new WeakMap;function s(e,t){let n=o.get(e)??new Set;if(n.has(t))return e.adoptedStyleSheets[0];n.add(t),o.set(e,n);let r=new CSSStyleSheet;return r.replaceSync(t),e.adoptedStyleSheets.push(r),r}function c(e,t){let n=e.target,r=n.shadowRoot;!r&&Object.keys(t).some(e=>e.indexOf(`shadow`)===0)&&(r=n.attachShadow({mode:`open`})),Object.keys(t).forEach(i=>{switch(i){case`css`:s(document,t[i]);break;case`targetCss`:s(document,t[i]);break;case`shadowCss`:s(r,t[i]);break;case`shadowHtml`:r.innerHTML=t[i],u(r,e);break;case`targetHtml`:n.innerHTML=t[i],u(n,e);break}})}function l(e,t){let n=t=>{let n=t.match(/^([a-z]+)([A-Z][a-z]*)$/);return n?`./${e.replace(/-/g,`/`)}.${n[1]}.${n[2].toLowerCase()}`:`./${e.replace(/-/g,`/`)}.${t.toLowerCase()}`};return Promise.all(t.map(async e=>{let t=n(e);try{let n=await fetch(t);if(!n.ok)return`file not found: ${t}`;if(t.endsWith(`json`)){let r=await n.text();try{return JSON.parse(r)}catch{return console.error(`could not JSON.parse() asset '${e}' from ${t}:\n`,r),null}}return n.text()}catch{return`file not found: ${t}`}}))}function u(e,t){let r=[...e.querySelectorAll(`*`)];for(let e of r){if(!(e instanceof HTMLElement))continue;let r=[...e.attributes];for(let i of r){let r=i.name.toLowerCase();if(!(`on`+r in e))continue;let o=i.value.trim().split(`|`);if(o.length<2)continue;let[s,c,l]=o;e.removeAttribute(i.name);let u;if(l)try{u=JSON.parse(l)}catch{u=l}s===`this`||s===``?n(e,r,()=>t.trigger(c,u)):n(e,r,()=>a(s,c,u))}}}function d(e,t){return typeof HTMLElement<`u`&&e instanceof HTMLElement&&`_mc`in e&&(t===void 0||t in e._mc)}function f(e,t,n={}){let r=e;`_mc`in e||(r._mc=new b(e));let i=r._mc;return t.length&&!i[t]&&(i[t]=n,e instanceof HTMLElement&&!e.getAttribute(`data-mc`)&&e.setAttribute(`data-mc`,``)),r}function p(e,t){if(!t)return;let n=e._mc;n&&(n[t]&&delete n[t],!Object.keys(n).length&&e instanceof HTMLElement&&e.hasAttribute(`data-mc`)&&e.removeAttribute(`data-mc`))}function m(e){queueMicrotask(()=>{e.trigger(`Init`,null)})}function h(e){let t=e.target,r=Object.getPrototypeOf(e),i=e,a=Object.getOwnPropertyNames(r).filter(e=>/^(on[A-Z]|one[A-Z])/.test(e)&&typeof r[e]==`function`);for(let e of a){let r=/^one/.test(e);n(t,e.replace(/^one?/,``),t=>i[e](t),r)}}function g(e){return Array.from(e.querySelectorAll(`[data-mc]:not(:scope [data-mc] [data-mc])`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc)}function _(e,t){let n=e.parentElement?.closest(`[data-mc]`);for(;n instanceof HTMLElement;){if(`_mc`in n){let e=n._mc;if(t===void 0||t in e)return e}n=n.parentElement?.closest(`[data-mc]`)}return null}var v=class{_target;constructor(e){if(this._target=new WeakRef(e||{}),this instanceof b&&this.constructor!==b){h(this);let e=this.constructor.tag;(e===void 0||e.toUpperCase()===this.target.tagName)&&m(this)}}get target(){return this._target.deref()}},y=class extends v{constructor(e){super(e)}},b=class e extends v{static tag;static _assets={};static assets=[];static attributes={};constructor(t){super(t);let n=this.constructor;if(n===e)return;let r=this.target.tagName.toLowerCase();if(n.tag!==void 0&&r!==n.tag&&n.tag!==``){let t=document.createElement(n.tag);t.classList.add(r),n._originalTag=r,e.add(t,n.name,new n(t)),delete n._originalTag,r.includes(`-`)&&!this.target.isConnected?this.on(`connected`,()=>this.target.replaceWith(t)):this.target.replaceWith(t);return}let i=n.attributes;n.attributes&&Object.keys(n.attributes).forEach(e=>{this.target.setAttribute(e,i[e])});let a=n.assets.filter(e=>!n._assets[e]),o=this;if(n.hasOwnProperty(`_assets`)?c(this,n._assets):n.assets.length&&!n.hasOwnProperty(`_assets`)&&(n._assets={}),a.length?l(n._originalTag||r,a).then(e=>{let t={};a.forEach((n,r)=>{t[n]=e[r]}),c(this,t),n._assets=Object.assign({},n._assets,t);for(let e of[`css`,`targetCss`])t[e]!==void 0&&delete n._assets[e];n.assets=n.assets.filter(e=>e!==`css`&&e!==`targetCss`),o.trigger(`assets`,n._assets)}):[...Object.keys(n._assets)].length&&queueMicrotask(()=>o.trigger(`assets`,n._assets)),n.tag===``){this.target.remove();return}}getAssets(){return this.constructor._assets||{}}static add(e,t,n={}){return f(e,t,n)}static remove(e,t){p(e,t)}static get(e,t,n){if(!d(e))return;let r=e._mc[t];return r instanceof n?r:void 0}off(e,n){t(this.target,e,n)}on(e,t){return n(this.target,e,t)}one(e,t){return r(this.target,e,t)}trigger(e,t={},n=`l`,r){a(this.target,e,t,n,r)}ancestors(e){let t=[],n=_(this.target,e);for(;n;)t.push(n),n=_(n.target,e);return t}closest(e){return _(this.target,e)}children(e){let t=g(this.target);return e===void 0?t:t.filter(t=>e in t)}descendants(e){return Array.from(this.target.querySelectorAll(`[data-mc]`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc).filter(t=>e===void 0||e in t)}};export{b as DC,y as MC,v as McBase,d as isMcHost};

package/dist/autoload.min.js

@@ -1 +1 @@
-function e(e,t){let n=t.toLowerCase();return`on`+n in e?n:`_mc`+t[0].toUpperCase()+t.substring(1)}function t(n,r,i){if(n){if(typeof n==`string`){document.querySelectorAll(n).forEach(e=>t(e,r,i));return}n.removeEventListener(e(n,r),i)}}function n(t,r,i,a=!1){if(t){if(typeof t==`string`){document.querySelectorAll(t).forEach(e=>n(e,r,i));return}return t.addEventListener(e(t,r),i,{capture:!1,once:a}),i}}function r(e,t,i){if(e){if(typeof e==`string`){document.querySelectorAll(e).forEach(e=>r(e,t,i));return}return n(e,t,i,!0),i}}var i=class{stopped=!1;constructor(){}stop(){this.stopped=!0}};function a(t,n,r={},o=`l`,s){if(!t)return;if(typeof t==`string`){document.querySelectorAll(t).forEach(e=>a(e,n,r,o));return}let c=/^_mc/.test(n)?n:e(t,n),l=s||new i,u=new CustomEvent(c,{detail:{data:r,control:l},bubbles:!1});l.stopped||/l/.test(o)&&(t.dispatchEvent(u),l.stopped)||/[ud]/.test(o)&&queueMicrotask(()=>{if(o.indexOf(`u`)>-1&&a(t.parentElement,c,r,`lu`,l),o.indexOf(`d`)>-1)for(let e of t.children)a(e,c,r,`ld`)})}function o(e,t){let n=new CSSStyleSheet;return n.replaceSync(t),e.adoptedStyleSheets.push(n),n}function s(e,t){let n=e.target,r=n.shadowRoot;!r&&Object.keys(t).some(e=>e.indexOf(`shadow`)===0)&&(r=n.attachShadow({mode:`open`})),Object.keys(t).forEach(i=>{switch(i){case`css`:o(document,t[i]);break;case`targetCss`:o(document,t[i]);break;case`shadowCss`:o(r,t[i]);break;case`shadowHtml`:r.innerHTML=t[i],l(r,e);break;case`targetHtml`:n.innerHTML=t[i],l(n,e);break}})}function c(e,t){let n=t=>{let n=t.match(/^([a-z]+)([A-Z][a-z]*)$/);return n?`./${e.replace(/-/g,`/`)}.${n[1]}.${n[2].toLowerCase()}`:`./${e.replace(/-/g,`/`)}.${t.toLowerCase()}`};return Promise.all(t.map(async e=>{let t=n(e);try{let n=await fetch(t);if(!n.ok)return`file not found: ${t}`;if(t.endsWith(`json`)){let r=await n.text();try{return JSON.parse(r)}catch{return console.error(`could not JSON.parse() asset '${e}' from ${t}:\n`,r),null}}return n.text()}catch{return`file not found: ${t}`}}))}function l(e,t){let r=[...e.querySelectorAll(`*`)];for(let e of r){if(!(e instanceof HTMLElement))continue;let r=[...e.attributes];for(let i of r){let r=i.name.toLowerCase();if(!(`on`+r in e))continue;let o=i.value.trim().split(`|`);if(o.length<2)continue;let[s,c,l]=o;e.removeAttribute(i.name);let u;if(l)try{u=JSON.parse(l)}catch{u=l}s===`this`||s===``?n(e,r,()=>t.trigger(c,u)):n(e,r,()=>a(s,c,u))}}}function u(e,t){return typeof HTMLElement<`u`&&e instanceof HTMLElement&&`_mc`in e&&(t===void 0||t in e._mc)}function d(e,t,n={}){let r=e;`_mc`in e||(r._mc=new v(e));let i=r._mc;return t.length&&!i[t]&&(i[t]=n,e instanceof HTMLElement&&!e.getAttribute(`data-mc`)&&e.setAttribute(`data-mc`,``)),r}function f(e,t){if(!t)return;let n=e._mc;n&&(n[t]&&delete n[t],!Object.keys(n).length&&e instanceof HTMLElement&&e.hasAttribute(`data-mc`)&&e.removeAttribute(`data-mc`))}function p(e){queueMicrotask(()=>{e.trigger(`Init`,null)})}function m(e){let t=e.target,r=Object.getPrototypeOf(e),i=e,a=Object.getOwnPropertyNames(r).filter(e=>/^(on[A-Z]|one[A-Z])/.test(e)&&typeof r[e]==`function`);for(let e of a){let r=/^one/.test(e);n(t,e.replace(/^one?/,``),t=>i[e](t),r)}}function h(e){return Array.from(e.querySelectorAll(`[data-mc]:not(:scope [data-mc] [data-mc])`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc)}function g(e,t){let n=e.parentElement?.closest(`[data-mc]`);for(;n instanceof HTMLElement;){if(`_mc`in n){let e=n._mc;if(t===void 0||t in e)return e}n=n.parentElement?.closest(`[data-mc]`)}return null}var _=class{_target;constructor(e){if(this._target=new WeakRef(e||{}),this instanceof v&&this.constructor!==v){m(this);let e=this.constructor.tag;(e===void 0||e.toUpperCase()===this.target.tagName)&&p(this)}}get target(){return this._target.deref()}},v=class e extends _{static tag;static _assets={};static assets=[];static attributes={};constructor(t){super(t);let n=this.constructor;if(n===e)return;let r=this.target.tagName.toLowerCase();if(n.tag!==void 0&&r!==n.tag&&n.tag!==``){let t=document.createElement(n.tag);t.classList.add(r),e.add(t,n.name,new n(t)),r.includes(`-`)&&!this.target.isConnected?this.on(`connected`,()=>this.target.replaceWith(t)):this.target.replaceWith(t);return}let i=n.attributes;n.attributes&&Object.keys(n.attributes).forEach(e=>{this.target.setAttribute(e,i[e])});let a=n.assets.filter(e=>!n._assets[e]),o=this;if(n.hasOwnProperty(`_assets`)?s(this,n._assets):n.assets.length&&!n.hasOwnProperty(`_assets`)&&(n._assets={}),a.length?c(r,a).then(e=>{let t={};a.forEach((n,r)=>{t[n]=e[r]}),s(this,t),n._assets=Object.assign({},n._assets,t),o.trigger(`assets`,n._assets)}):[...Object.keys(n._assets)].length&&queueMicrotask(()=>o.trigger(`assets`,n._assets)),n.tag===``){this.target.remove();return}}getAssets(){return this.constructor._assets||{}}static add(e,t,n={}){return d(e,t,n)}static remove(e,t){f(e,t)}static get(e,t,n){if(!u(e))return;let r=e._mc[t];return r instanceof n?r:void 0}off(e,n){t(this.target,e,n)}on(e,t){return n(this.target,e,t)}one(e,t){return r(this.target,e,t)}trigger(e,t={},n=`l`,r){a(this.target,e,t,n,r)}ancestors(e){let t=[],n=g(this.target,e);for(;n;)t.push(n),n=g(n.target,e);return t}closest(e){return g(this.target,e)}children(e){let t=h(this.target);return e===void 0?t:t.filter(t=>e in t)}descendants(e){return Array.from(this.target.querySelectorAll(`[data-mc]`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc).filter(t=>e===void 0||e in t)}},y=new Set;function b(e){return()=>{let t=Array.from(document.querySelectorAll(`[data-mc*="${e}"]`)).filter(e=>e instanceof HTMLElement);if(t.length===0)return;let n=customElements.get(e);for(let r of t){try{v.add(r,n.name,new n(r))}catch{if(`create`in n&&typeof n.create==`function`){let e=n.create(r);if(!u(e))throw`create() of Class ${n.name} did not return a McHost.`;e.setAttribute(`data-mc`,r.getAttribute(`data-mc`)??``),r.replaceWith(e),r=e}else throw`Class ${n.name} doesn't have a callable constructor AND class doesn't have a static .create() method.`}let t=r.getAttribute(`data-mc`).split(` `).filter(t=>t!==e&&t!==``).join(` `).trim();r.setAttribute(`data-mc`,t)}}}function x(e){if(y.has(e))return;y.add(e);let t=`./`+e.split(`-`).join(`/`)+`.js`,n=document.createElement(`script`);n.setAttribute(`src`,t),n.setAttribute(`blocking`,`render`),n.async=!0,n.setAttribute(`type`,`module`),n.setAttribute(`data-name`,e),n.setAttribute(`loading`,``),customElements.whenDefined(e).then(b(e)),n.addEventListener(`load`,t=>{y.delete(e),document.head.querySelector(`script[data-name="${e}"]`)?.remove()}),n.addEventListener(`error`,e=>{console.error(`could not load DC code from`,t)}),document.head.append(n)}function S(){[...document.querySelectorAll(`:not(:defined)`)].filter(e=>!!e&&!customElements.get(e.tagName.toLowerCase())&&!y.has(e.tagName.toLowerCase())).forEach(e=>{x(e.tagName.toLowerCase())}),[...document.querySelectorAll(`[data-mc]:not([data-mc=""]`)].filter(e=>!!e).forEach(e=>{(e.getAttribute(`data-mc`)?.split(` `).filter(e=>e!==``))?.forEach(e=>{let t=customElements.get(e);!y.has(e)&&!t?x(e):t&&b(e)()})})}var C=null;function w(e=!0){return e?C?!0:(C=new MutationObserver(S),setTimeout(()=>{C.observe(document.body,{childList:!0,subtree:!0}),S()},5),window.autoload??=w,!0):(C&&=(C.disconnect(),null),!1)}w.state=y;export{w as autoload};
+function e(e,t){let n=t.toLowerCase();return`on`+n in e?n:`_mc`+t[0].toUpperCase()+t.substring(1)}function t(n,r,i){if(n){if(typeof n==`string`){document.querySelectorAll(n).forEach(e=>t(e,r,i));return}n.removeEventListener(e(n,r),i)}}function n(t,r,i,a=!1){if(t){if(typeof t==`string`){document.querySelectorAll(t).forEach(e=>n(e,r,i));return}return t.addEventListener(e(t,r),i,{capture:!1,once:a}),i}}function r(e,t,i){if(e){if(typeof e==`string`){document.querySelectorAll(e).forEach(e=>r(e,t,i));return}return n(e,t,i,!0),i}}var i=class{stopped=!1;constructor(){}stop(){this.stopped=!0}};function a(t,n,r={},o=`l`,s){if(!t)return;if(typeof t==`string`){document.querySelectorAll(t).forEach(e=>a(e,n,r,o));return}let c=/^_mc/.test(n)?n:e(t,n),l=s||new i,u=new CustomEvent(c,{detail:{data:r,control:l},bubbles:!1});l.stopped||/l/.test(o)&&(t.dispatchEvent(u),l.stopped)||/[ud]/.test(o)&&queueMicrotask(()=>{if(o.indexOf(`u`)>-1&&a(t.parentElement,c,r,`lu`,l),o.indexOf(`d`)>-1)for(let e of t.children)a(e,c,r,`ld`)})}var o=new WeakMap;function s(e,t){let n=o.get(e)??new Set;if(n.has(t))return e.adoptedStyleSheets[0];n.add(t),o.set(e,n);let r=new CSSStyleSheet;return r.replaceSync(t),e.adoptedStyleSheets.push(r),r}function c(e,t){let n=e.target,r=n.shadowRoot;!r&&Object.keys(t).some(e=>e.indexOf(`shadow`)===0)&&(r=n.attachShadow({mode:`open`})),Object.keys(t).forEach(i=>{switch(i){case`css`:s(document,t[i]);break;case`targetCss`:s(document,t[i]);break;case`shadowCss`:s(r,t[i]);break;case`shadowHtml`:r.innerHTML=t[i],u(r,e);break;case`targetHtml`:n.innerHTML=t[i],u(n,e);break}})}function l(e,t){let n=t=>{let n=t.match(/^([a-z]+)([A-Z][a-z]*)$/);return n?`./${e.replace(/-/g,`/`)}.${n[1]}.${n[2].toLowerCase()}`:`./${e.replace(/-/g,`/`)}.${t.toLowerCase()}`};return Promise.all(t.map(async e=>{let t=n(e);try{let n=await fetch(t);if(!n.ok)return`file not found: ${t}`;if(t.endsWith(`json`)){let r=await n.text();try{return JSON.parse(r)}catch{return console.error(`could not JSON.parse() asset '${e}' from ${t}:\n`,r),null}}return n.text()}catch{return`file not found: ${t}`}}))}function u(e,t){let r=[...e.querySelectorAll(`*`)];for(let e of r){if(!(e instanceof HTMLElement))continue;let r=[...e.attributes];for(let i of r){let r=i.name.toLowerCase();if(!(`on`+r in e))continue;let o=i.value.trim().split(`|`);if(o.length<2)continue;let[s,c,l]=o;e.removeAttribute(i.name);let u;if(l)try{u=JSON.parse(l)}catch{u=l}s===`this`||s===``?n(e,r,()=>t.trigger(c,u)):n(e,r,()=>a(s,c,u))}}}function d(e,t){return typeof HTMLElement<`u`&&e instanceof HTMLElement&&`_mc`in e&&(t===void 0||t in e._mc)}function f(e,t,n={}){let r=e;`_mc`in e||(r._mc=new y(e));let i=r._mc;return t.length&&!i[t]&&(i[t]=n,e instanceof HTMLElement&&!e.getAttribute(`data-mc`)&&e.setAttribute(`data-mc`,``)),r}function p(e,t){if(!t)return;let n=e._mc;n&&(n[t]&&delete n[t],!Object.keys(n).length&&e instanceof HTMLElement&&e.hasAttribute(`data-mc`)&&e.removeAttribute(`data-mc`))}function m(e){queueMicrotask(()=>{e.trigger(`Init`,null)})}function h(e){let t=e.target,r=Object.getPrototypeOf(e),i=e,a=Object.getOwnPropertyNames(r).filter(e=>/^(on[A-Z]|one[A-Z])/.test(e)&&typeof r[e]==`function`);for(let e of a){let r=/^one/.test(e);n(t,e.replace(/^one?/,``),t=>i[e](t),r)}}function g(e){return Array.from(e.querySelectorAll(`[data-mc]:not(:scope [data-mc] [data-mc])`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc)}function _(e,t){let n=e.parentElement?.closest(`[data-mc]`);for(;n instanceof HTMLElement;){if(`_mc`in n){let e=n._mc;if(t===void 0||t in e)return e}n=n.parentElement?.closest(`[data-mc]`)}return null}var v=class{_target;constructor(e){if(this._target=new WeakRef(e||{}),this instanceof y&&this.constructor!==y){h(this);let e=this.constructor.tag;(e===void 0||e.toUpperCase()===this.target.tagName)&&m(this)}}get target(){return this._target.deref()}},y=class e extends v{static tag;static _assets={};static assets=[];static attributes={};constructor(t){super(t);let n=this.constructor;if(n===e)return;let r=this.target.tagName.toLowerCase();if(n.tag!==void 0&&r!==n.tag&&n.tag!==``){let t=document.createElement(n.tag);t.classList.add(r),n._originalTag=r,e.add(t,n.name,new n(t)),delete n._originalTag,r.includes(`-`)&&!this.target.isConnected?this.on(`connected`,()=>this.target.replaceWith(t)):this.target.replaceWith(t);return}let i=n.attributes;n.attributes&&Object.keys(n.attributes).forEach(e=>{this.target.setAttribute(e,i[e])});let a=n.assets.filter(e=>!n._assets[e]),o=this;if(n.hasOwnProperty(`_assets`)?c(this,n._assets):n.assets.length&&!n.hasOwnProperty(`_assets`)&&(n._assets={}),a.length?l(n._originalTag||r,a).then(e=>{let t={};a.forEach((n,r)=>{t[n]=e[r]}),c(this,t),n._assets=Object.assign({},n._assets,t);for(let e of[`css`,`targetCss`])t[e]!==void 0&&delete n._assets[e];n.assets=n.assets.filter(e=>e!==`css`&&e!==`targetCss`),o.trigger(`assets`,n._assets)}):[...Object.keys(n._assets)].length&&queueMicrotask(()=>o.trigger(`assets`,n._assets)),n.tag===``){this.target.remove();return}}getAssets(){return this.constructor._assets||{}}static add(e,t,n={}){return f(e,t,n)}static remove(e,t){p(e,t)}static get(e,t,n){if(!d(e))return;let r=e._mc[t];return r instanceof n?r:void 0}off(e,n){t(this.target,e,n)}on(e,t){return n(this.target,e,t)}one(e,t){return r(this.target,e,t)}trigger(e,t={},n=`l`,r){a(this.target,e,t,n,r)}ancestors(e){let t=[],n=_(this.target,e);for(;n;)t.push(n),n=_(n.target,e);return t}closest(e){return _(this.target,e)}children(e){let t=g(this.target);return e===void 0?t:t.filter(t=>e in t)}descendants(e){return Array.from(this.target.querySelectorAll(`[data-mc]`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc).filter(t=>e===void 0||e in t)}},b=new Set;function x(e){return()=>{let t=Array.from(document.querySelectorAll(`[data-mc*="${e}"]`)).filter(e=>e instanceof HTMLElement);if(t.length===0)return;let n=customElements.get(e);for(let r of t){try{y.add(r,n.name,new n(r))}catch{if(`create`in n&&typeof n.create==`function`){let e=n.create(r);if(!d(e))throw`create() of Class ${n.name} did not return a McHost.`;e.setAttribute(`data-mc`,r.getAttribute(`data-mc`)??``),r.replaceWith(e),r=e}else throw`Class ${n.name} doesn't have a callable constructor AND class doesn't have a static .create() method.`}let t=r.getAttribute(`data-mc`).split(` `).filter(t=>t!==e&&t!==``).join(` `).trim();r.setAttribute(`data-mc`,t)}}}function S(e){if(b.has(e))return;b.add(e);let t=`./`+e.split(`-`).join(`/`)+`.js`,n=document.createElement(`script`);n.setAttribute(`src`,t),n.setAttribute(`blocking`,`render`),n.async=!0,n.setAttribute(`type`,`module`),n.setAttribute(`data-name`,e),n.setAttribute(`loading`,``),customElements.whenDefined(e).then(x(e)),n.addEventListener(`load`,t=>{b.delete(e),document.head.querySelector(`script[data-name="${e}"]`)?.remove()}),n.addEventListener(`error`,e=>{console.error(`could not load DC code from`,t)}),document.head.append(n)}function C(){[...document.querySelectorAll(`:not(:defined)`)].filter(e=>!!e&&!customElements.get(e.tagName.toLowerCase())&&!b.has(e.tagName.toLowerCase())).forEach(e=>{S(e.tagName.toLowerCase())}),[...document.querySelectorAll(`[data-mc]:not([data-mc=""]`)].filter(e=>!!e).forEach(e=>{(e.getAttribute(`data-mc`)?.split(` `).filter(e=>e!==``))?.forEach(e=>{let t=customElements.get(e);!b.has(e)&&!t?S(e):t&&x(e)()})})}var w=null;function T(e=!0){return e?w?!0:(w=new MutationObserver(C),setTimeout(()=>{w.observe(document.body,{childList:!0,subtree:!0}),C()},5),window.autoload??=T,!0):(w&&=(w.disconnect(),null),!1)}T.state=b;export{T as autoload};

package/dist/core/MC.d.ts

@@ -164,6 +164,12 @@ last segment. For `<cart-container-checkout>`, assets load from `/cart/container
 When assets finish loading, an `'assets'` event fires so that `oneAssets(ev)` can
 process them. Everything ending in `Json` arrives parsed; all other files arrive as text.
 
+**One-time global styles**: Assets named `'css'` and `'targetCss'` inject CSS into the
+global document scope via `injectCSS(document, ...)`. Because these are idempotent
+global side effects, they are processed only once — after the first instance loads them,
+the entries are removed from both `static assets` and `static _assets`. Subsequent
+instances skip loading and re-processing them entirely.
+
 @example static assets with autoload
 
 ```ts
@@ -232,6 +238,7 @@ internal events that can be caught with handler methods:
 | `onAdopted()` | Element was moved to a new document (`adoptedCallback`) |
 | `onAttributeChanged()` | An observed attribute changed (`attributeChangedCallback`) |
 | `oneInit()` | Constructor finished; all synchronous setup complete (microtask) |
+| `oneAssets()` | Constructor finished; all assets loaded and available; ev contains assets object |
 
 @example Event handlers in action
 

package/dist/core/MC.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MC.d.ts","sourceRoot":"","sources":["../../src/core/MC.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"MC.d.ts","sourceRoot":"","sources":["../../src/core/MC.ts"],"names":[],"mappings":"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"}

package/dist/core/MC.js

@@ -306,6 +306,12 @@ last segment. For `<cart-container-checkout>`, assets load from `/cart/container
 When assets finish loading, an `'assets'` event fires so that `oneAssets(ev)` can
 process them. Everything ending in `Json` arrives parsed; all other files arrive as text.
 
+**One-time global styles**: Assets named `'css'` and `'targetCss'` inject CSS into the
+global document scope via `injectCSS(document, ...)`. Because these are idempotent
+global side effects, they are processed only once — after the first instance loads them,
+the entries are removed from both `static assets` and `static _assets`. Subsequent
+instances skip loading and re-processing them entirely.
+
 @example static assets with autoload
 
 ```ts
@@ -374,6 +380,7 @@ internal events that can be caught with handler methods:
 | `onAdopted()` | Element was moved to a new document (`adoptedCallback`) |
 | `onAttributeChanged()` | An observed attribute changed (`attributeChangedCallback`) |
 | `oneInit()` | Constructor finished; all synchronous setup complete (microtask) |
+| `oneAssets()` | Constructor finished; all assets loaded and available; ev contains assets object |
 
 @example Event handlers in action
 
@@ -520,7 +527,9 @@ class DC extends McBase {
         if (ctor['tag'] !== undefined && tagName !== ctor.tag && ctor.tag !== '') {
             const element = document.createElement(ctor.tag);
             element.classList.add(tagName);
+            ctor._originalTag = tagName;
             DC.add(element, ctor.name, new ctor(element));
+            delete ctor._originalTag;
             if (tagName.includes('-') && !this.target.isConnected) {
                 this.on('connected', () => this.target.replaceWith(element));
             }
@@ -552,7 +561,8 @@ class DC extends McBase {
         }
         // autoload and process remaining assets
         if (remainingAssets.length) {
-            loadAssets(tagName, remainingAssets)
+            const elementName = ctor._originalTag || tagName;
+            loadAssets(elementName, remainingAssets)
                 .then((res) => {
                 const loadedAssets = {};
                 remainingAssets.forEach((key, i) => {
@@ -560,6 +570,13 @@ class DC extends McBase {
                 });
                 processAssets(this, loadedAssets);
                 ctor._assets = Object.assign({}, ctor._assets, loadedAssets);
+                // one-time global styles: remove 'css' and 'targetCss' from both assets and _assets
+                for (const onceKey of ['css', 'targetCss']) {
+                    if (loadedAssets[onceKey] !== undefined) {
+                        delete ctor._assets[onceKey];
+                    }
+                }
+                ctor.assets = ctor.assets.filter((key) => key !== 'css' && key !== 'targetCss');
                 that.trigger('assets', ctor._assets);
             });
         }

package/dist/core/index.d.ts

@@ -11,7 +11,7 @@ In general, your code extends from either of these classes depending on whether
 
 The key distinction between the two base classes is their execution context:
 
-- **MC (MicroComponent)** – A general-purpose component that works in **any JavaScript environment**, including server-side runtimes (Node.js, Deno, etc.). It does not require a DOM and can be used for business logic, state management, or as a lightweight container. The `target` parameter is optional.
+- **MC (MicroComponent)** – A general-purpose component that works in **any JavaScript environment**, including server-side runtimes (Node.js, Deno, etc.). It does not require a DOM and can be used for business logic, state management, or as a lightweight container.
 
 - **DC (DOM Component)** – A DOM-centric component that operates wherever a real ( browser ) or simulated ( jsdom, etc. ) DOM exists. It attaches itself to an HTMLElement and provides event handling, DOM traversal, and lifecycle management. The `target` parameter is required and must be an HTMLElement.
 
@@ -21,10 +21,10 @@ The key distinction between the two base classes is their execution context:
 
 | Scenario | Recommended Class |
 |----------|-------------------|
-| Server-side rendering or logic | MC |
-| Pure data processing without DOM | MC |
+| Server-side rendering | DC |
 | Interactive UI elements in the browser | DC |
 | Event-driven components attached to HTML nodes | DC |
+| Pure logic without DOM | MC |
 
 ---
 
@@ -54,7 +54,7 @@ This `_mc` property is the **only** interference with the native DOM structure,
 
 ## Lifecycle
 
-- DC instances automatically trigger an `"Init"` lifecycle event asynchronously after construction.
+- DC instances automatically trigger an `"Init"` lifecycle event asynchronously - using queueMicrotask() - after construction. A component with a 'oneInit()' method will catch that lifecycle event, and when it runs it is guaranteed that the constructor() has run.
 - Methods prefixed with `on` or `one` (e.g., `onClick`, `oneUpdate`) are auto-attached as event listeners on the target element, supporting both native HTML events and custom microcomponent events.
 - When using the static `assets` property to on-demand load shadow/target templates and css
   - those are automatically attached to their respective target locations

package/dist/core/index.js

@@ -11,7 +11,7 @@ In general, your code extends from either of these classes depending on whether
 
 The key distinction between the two base classes is their execution context:
 
-- **MC (MicroComponent)** – A general-purpose component that works in **any JavaScript environment**, including server-side runtimes (Node.js, Deno, etc.). It does not require a DOM and can be used for business logic, state management, or as a lightweight container. The `target` parameter is optional.
+- **MC (MicroComponent)** – A general-purpose component that works in **any JavaScript environment**, including server-side runtimes (Node.js, Deno, etc.). It does not require a DOM and can be used for business logic, state management, or as a lightweight container.
 
 - **DC (DOM Component)** – A DOM-centric component that operates wherever a real ( browser ) or simulated ( jsdom, etc. ) DOM exists. It attaches itself to an HTMLElement and provides event handling, DOM traversal, and lifecycle management. The `target` parameter is required and must be an HTMLElement.
 
@@ -21,10 +21,10 @@ The key distinction between the two base classes is their execution context:
 
 | Scenario | Recommended Class |
 |----------|-------------------|
-| Server-side rendering or logic | MC |
-| Pure data processing without DOM | MC |
+| Server-side rendering | DC |
 | Interactive UI elements in the browser | DC |
 | Event-driven components attached to HTML nodes | DC |
+| Pure logic without DOM | MC |
 
 ---
 
@@ -54,7 +54,7 @@ This `_mc` property is the **only** interference with the native DOM structure,
 
 ## Lifecycle
 
-- DC instances automatically trigger an `"Init"` lifecycle event asynchronously after construction.
+- DC instances automatically trigger an `"Init"` lifecycle event asynchronously - using queueMicrotask() - after construction. A component with a 'oneInit()' method will catch that lifecycle event, and when it runs it is guaranteed that the constructor() has run.
 - Methods prefixed with `on` or `one` (e.g., `onClick`, `oneUpdate`) are auto-attached as event listeners on the target element, supporting both native HTML events and custom microcomponent events.
 - When using the static `assets` property to on-demand load shadow/target templates and css
   - those are automatically attached to their respective target locations

package/dist/elements.min.js

@@ -1 +1 @@
-function e(e,t){let n=t.toLowerCase();return`on`+n in e?n:`_mc`+t[0].toUpperCase()+t.substring(1)}function t(n,r,i){if(n){if(typeof n==`string`){document.querySelectorAll(n).forEach(e=>t(e,r,i));return}n.removeEventListener(e(n,r),i)}}function n(t,r,i,a=!1){if(t){if(typeof t==`string`){document.querySelectorAll(t).forEach(e=>n(e,r,i));return}return t.addEventListener(e(t,r),i,{capture:!1,once:a}),i}}function r(e,t,i){if(e){if(typeof e==`string`){document.querySelectorAll(e).forEach(e=>r(e,t,i));return}return n(e,t,i,!0),i}}var i=class{stopped=!1;constructor(){}stop(){this.stopped=!0}};function a(t,n,r={},o=`l`,s){if(!t)return;if(typeof t==`string`){document.querySelectorAll(t).forEach(e=>a(e,n,r,o));return}let c=/^_mc/.test(n)?n:e(t,n),l=s||new i,u=new CustomEvent(c,{detail:{data:r,control:l},bubbles:!1});l.stopped||/l/.test(o)&&(t.dispatchEvent(u),l.stopped)||/[ud]/.test(o)&&queueMicrotask(()=>{if(o.indexOf(`u`)>-1&&a(t.parentElement,c,r,`lu`,l),o.indexOf(`d`)>-1)for(let e of t.children)a(e,c,r,`ld`)})}function o(e){return e.split(`-`).map(e=>e.charAt(0).toUpperCase()+e.slice(1)).join(``)}function s(e,t){let n=new CSSStyleSheet;return n.replaceSync(t),e.adoptedStyleSheets.push(n),n}function c(e,t){let n=e.target,r=n.shadowRoot;!r&&Object.keys(t).some(e=>e.indexOf(`shadow`)===0)&&(r=n.attachShadow({mode:`open`})),Object.keys(t).forEach(i=>{switch(i){case`css`:s(document,t[i]);break;case`targetCss`:s(document,t[i]);break;case`shadowCss`:s(r,t[i]);break;case`shadowHtml`:r.innerHTML=t[i],u(r,e);break;case`targetHtml`:n.innerHTML=t[i],u(n,e);break}})}function l(e,t){let n=t=>{let n=t.match(/^([a-z]+)([A-Z][a-z]*)$/);return n?`./${e.replace(/-/g,`/`)}.${n[1]}.${n[2].toLowerCase()}`:`./${e.replace(/-/g,`/`)}.${t.toLowerCase()}`};return Promise.all(t.map(async e=>{let t=n(e);try{let n=await fetch(t);if(!n.ok)return`file not found: ${t}`;if(t.endsWith(`json`)){let r=await n.text();try{return JSON.parse(r)}catch{return console.error(`could not JSON.parse() asset '${e}' from ${t}:\n`,r),null}}return n.text()}catch{return`file not found: ${t}`}}))}function u(e,t){let r=[...e.querySelectorAll(`*`)];for(let e of r){if(!(e instanceof HTMLElement))continue;let r=[...e.attributes];for(let i of r){let r=i.name.toLowerCase();if(!(`on`+r in e))continue;let o=i.value.trim().split(`|`);if(o.length<2)continue;let[s,c,l]=o;e.removeAttribute(i.name);let u;if(l)try{u=JSON.parse(l)}catch{u=l}s===`this`||s===``?n(e,r,()=>t.trigger(c,u)):n(e,r,()=>a(s,c,u))}}}function d(e,t){return typeof HTMLElement<`u`&&e instanceof HTMLElement&&`_mc`in e&&(t===void 0||t in e._mc)}function f(e,t,n={}){let r=e;`_mc`in e||(r._mc=new y(e));let i=r._mc;return t.length&&!i[t]&&(i[t]=n,e instanceof HTMLElement&&!e.getAttribute(`data-mc`)&&e.setAttribute(`data-mc`,``)),r}function p(e,t){if(!t)return;let n=e._mc;n&&(n[t]&&delete n[t],!Object.keys(n).length&&e instanceof HTMLElement&&e.hasAttribute(`data-mc`)&&e.removeAttribute(`data-mc`))}function m(e){queueMicrotask(()=>{e.trigger(`Init`,null)})}function h(e){let t=e.target,r=Object.getPrototypeOf(e),i=e,a=Object.getOwnPropertyNames(r).filter(e=>/^(on[A-Z]|one[A-Z])/.test(e)&&typeof r[e]==`function`);for(let e of a){let r=/^one/.test(e);n(t,e.replace(/^one?/,``),t=>i[e](t),r)}}function g(e){return Array.from(e.querySelectorAll(`[data-mc]:not(:scope [data-mc] [data-mc])`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc)}function _(e,t){let n=e.parentElement?.closest(`[data-mc]`);for(;n instanceof HTMLElement;){if(`_mc`in n){let e=n._mc;if(t===void 0||t in e)return e}n=n.parentElement?.closest(`[data-mc]`)}return null}var v=class{_target;constructor(e){if(this._target=new WeakRef(e||{}),this instanceof y&&this.constructor!==y){h(this);let e=this.constructor.tag;(e===void 0||e.toUpperCase()===this.target.tagName)&&m(this)}}get target(){return this._target.deref()}},y=class e extends v{static tag;static _assets={};static assets=[];static attributes={};constructor(t){super(t);let n=this.constructor;if(n===e)return;let r=this.target.tagName.toLowerCase();if(n.tag!==void 0&&r!==n.tag&&n.tag!==``){let t=document.createElement(n.tag);t.classList.add(r),e.add(t,n.name,new n(t)),r.includes(`-`)&&!this.target.isConnected?this.on(`connected`,()=>this.target.replaceWith(t)):this.target.replaceWith(t);return}let i=n.attributes;n.attributes&&Object.keys(n.attributes).forEach(e=>{this.target.setAttribute(e,i[e])});let a=n.assets.filter(e=>!n._assets[e]),o=this;if(n.hasOwnProperty(`_assets`)?c(this,n._assets):n.assets.length&&!n.hasOwnProperty(`_assets`)&&(n._assets={}),a.length?l(r,a).then(e=>{let t={};a.forEach((n,r)=>{t[n]=e[r]}),c(this,t),n._assets=Object.assign({},n._assets,t),o.trigger(`assets`,n._assets)}):[...Object.keys(n._assets)].length&&queueMicrotask(()=>o.trigger(`assets`,n._assets)),n.tag===``){this.target.remove();return}}getAssets(){return this.constructor._assets||{}}static add(e,t,n={}){return f(e,t,n)}static remove(e,t){p(e,t)}static get(e,t,n){if(!d(e))return;let r=e._mc[t];return r instanceof n?r:void 0}off(e,n){t(this.target,e,n)}on(e,t){return n(this.target,e,t)}one(e,t){return r(this.target,e,t)}trigger(e,t={},n=`l`,r){a(this.target,e,t,n,r)}ancestors(e){let t=[],n=_(this.target,e);for(;n;)t.push(n),n=_(n.target,e);return t}closest(e){return _(this.target,e)}children(e){let t=g(this.target);return e===void 0?t:t.filter(t=>e in t)}descendants(e){return Array.from(this.target.querySelectorAll(`[data-mc]`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc).filter(t=>e===void 0||e in t)}};function b(e,t){return Object.defineProperty(t,"name",{value:e})}function x(e){return class extends e{constructor(...e){super(...e)}}}function S(e,t,n=[],r){if(customElements.get(e)){console.warn(`IGNORED: Custom element "${e}" is already defined!`);return}if(!e.includes(`-`))throw Error(`createCustomElement: tagName must contain at least one hyphen ("-").`);let i=HTMLElement;r&&(i=document.createElement(r).constructor);let a=o(e);if(!(t.prototype instanceof v))return customElements.define(e,t),t;let s=b(a,class extends x(i){constructor(e){super(),y.add(this,a,new t(this,e))}connectedCallback(){this.dispatchEvent(new CustomEvent(`_mcConnected`))}connectedMoveCallback(){this.dispatchEvent(new CustomEvent(`_mcConnectedMove`))}disconnectedCallback(){this.dispatchEvent(new CustomEvent(`_mcDisconnected`))}adoptedCallback(){this.dispatchEvent(new CustomEvent(`_mcAdopted`))}attributeChangedCallback(e,t,n){this.dispatchEvent(new CustomEvent(`_mcAttributeChanged`,{detail:{name:e,oldValue:t,newValue:n}}))}formResetCallback(){this.dispatchEvent(new CustomEvent(`_mcFormReset`))}static get observedAttributes(){return[...n]}});return customElements.define(e,s,{extends:r}),S.list||=[],S.list.push(e),s}function C(e){return customElements.get(e)}function w(){return S.list??[]}export{S as defineCE,C as getCE,w as listCE};
+function e(e,t){let n=t.toLowerCase();return`on`+n in e?n:`_mc`+t[0].toUpperCase()+t.substring(1)}function t(n,r,i){if(n){if(typeof n==`string`){document.querySelectorAll(n).forEach(e=>t(e,r,i));return}n.removeEventListener(e(n,r),i)}}function n(t,r,i,a=!1){if(t){if(typeof t==`string`){document.querySelectorAll(t).forEach(e=>n(e,r,i));return}return t.addEventListener(e(t,r),i,{capture:!1,once:a}),i}}function r(e,t,i){if(e){if(typeof e==`string`){document.querySelectorAll(e).forEach(e=>r(e,t,i));return}return n(e,t,i,!0),i}}var i=class{stopped=!1;constructor(){}stop(){this.stopped=!0}};function a(t,n,r={},o=`l`,s){if(!t)return;if(typeof t==`string`){document.querySelectorAll(t).forEach(e=>a(e,n,r,o));return}let c=/^_mc/.test(n)?n:e(t,n),l=s||new i,u=new CustomEvent(c,{detail:{data:r,control:l},bubbles:!1});l.stopped||/l/.test(o)&&(t.dispatchEvent(u),l.stopped)||/[ud]/.test(o)&&queueMicrotask(()=>{if(o.indexOf(`u`)>-1&&a(t.parentElement,c,r,`lu`,l),o.indexOf(`d`)>-1)for(let e of t.children)a(e,c,r,`ld`)})}function o(e){return e.split(`-`).map(e=>e.charAt(0).toUpperCase()+e.slice(1)).join(``)}var s=new WeakMap;function c(e,t){let n=s.get(e)??new Set;if(n.has(t))return e.adoptedStyleSheets[0];n.add(t),s.set(e,n);let r=new CSSStyleSheet;return r.replaceSync(t),e.adoptedStyleSheets.push(r),r}function l(e,t){let n=e.target,r=n.shadowRoot;!r&&Object.keys(t).some(e=>e.indexOf(`shadow`)===0)&&(r=n.attachShadow({mode:`open`})),Object.keys(t).forEach(i=>{switch(i){case`css`:c(document,t[i]);break;case`targetCss`:c(document,t[i]);break;case`shadowCss`:c(r,t[i]);break;case`shadowHtml`:r.innerHTML=t[i],d(r,e);break;case`targetHtml`:n.innerHTML=t[i],d(n,e);break}})}function u(e,t){let n=t=>{let n=t.match(/^([a-z]+)([A-Z][a-z]*)$/);return n?`./${e.replace(/-/g,`/`)}.${n[1]}.${n[2].toLowerCase()}`:`./${e.replace(/-/g,`/`)}.${t.toLowerCase()}`};return Promise.all(t.map(async e=>{let t=n(e);try{let n=await fetch(t);if(!n.ok)return`file not found: ${t}`;if(t.endsWith(`json`)){let r=await n.text();try{return JSON.parse(r)}catch{return console.error(`could not JSON.parse() asset '${e}' from ${t}:\n`,r),null}}return n.text()}catch{return`file not found: ${t}`}}))}function d(e,t){let r=[...e.querySelectorAll(`*`)];for(let e of r){if(!(e instanceof HTMLElement))continue;let r=[...e.attributes];for(let i of r){let r=i.name.toLowerCase();if(!(`on`+r in e))continue;let o=i.value.trim().split(`|`);if(o.length<2)continue;let[s,c,l]=o;e.removeAttribute(i.name);let u;if(l)try{u=JSON.parse(l)}catch{u=l}s===`this`||s===``?n(e,r,()=>t.trigger(c,u)):n(e,r,()=>a(s,c,u))}}}function f(e,t){return typeof HTMLElement<`u`&&e instanceof HTMLElement&&`_mc`in e&&(t===void 0||t in e._mc)}function p(e,t,n={}){let r=e;`_mc`in e||(r._mc=new b(e));let i=r._mc;return t.length&&!i[t]&&(i[t]=n,e instanceof HTMLElement&&!e.getAttribute(`data-mc`)&&e.setAttribute(`data-mc`,``)),r}function m(e,t){if(!t)return;let n=e._mc;n&&(n[t]&&delete n[t],!Object.keys(n).length&&e instanceof HTMLElement&&e.hasAttribute(`data-mc`)&&e.removeAttribute(`data-mc`))}function h(e){queueMicrotask(()=>{e.trigger(`Init`,null)})}function g(e){let t=e.target,r=Object.getPrototypeOf(e),i=e,a=Object.getOwnPropertyNames(r).filter(e=>/^(on[A-Z]|one[A-Z])/.test(e)&&typeof r[e]==`function`);for(let e of a){let r=/^one/.test(e);n(t,e.replace(/^one?/,``),t=>i[e](t),r)}}function _(e){return Array.from(e.querySelectorAll(`[data-mc]:not(:scope [data-mc] [data-mc])`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc)}function v(e,t){let n=e.parentElement?.closest(`[data-mc]`);for(;n instanceof HTMLElement;){if(`_mc`in n){let e=n._mc;if(t===void 0||t in e)return e}n=n.parentElement?.closest(`[data-mc]`)}return null}var y=class{_target;constructor(e){if(this._target=new WeakRef(e||{}),this instanceof b&&this.constructor!==b){g(this);let e=this.constructor.tag;(e===void 0||e.toUpperCase()===this.target.tagName)&&h(this)}}get target(){return this._target.deref()}},b=class e extends y{static tag;static _assets={};static assets=[];static attributes={};constructor(t){super(t);let n=this.constructor;if(n===e)return;let r=this.target.tagName.toLowerCase();if(n.tag!==void 0&&r!==n.tag&&n.tag!==``){let t=document.createElement(n.tag);t.classList.add(r),n._originalTag=r,e.add(t,n.name,new n(t)),delete n._originalTag,r.includes(`-`)&&!this.target.isConnected?this.on(`connected`,()=>this.target.replaceWith(t)):this.target.replaceWith(t);return}let i=n.attributes;n.attributes&&Object.keys(n.attributes).forEach(e=>{this.target.setAttribute(e,i[e])});let a=n.assets.filter(e=>!n._assets[e]),o=this;if(n.hasOwnProperty(`_assets`)?l(this,n._assets):n.assets.length&&!n.hasOwnProperty(`_assets`)&&(n._assets={}),a.length?u(n._originalTag||r,a).then(e=>{let t={};a.forEach((n,r)=>{t[n]=e[r]}),l(this,t),n._assets=Object.assign({},n._assets,t);for(let e of[`css`,`targetCss`])t[e]!==void 0&&delete n._assets[e];n.assets=n.assets.filter(e=>e!==`css`&&e!==`targetCss`),o.trigger(`assets`,n._assets)}):[...Object.keys(n._assets)].length&&queueMicrotask(()=>o.trigger(`assets`,n._assets)),n.tag===``){this.target.remove();return}}getAssets(){return this.constructor._assets||{}}static add(e,t,n={}){return p(e,t,n)}static remove(e,t){m(e,t)}static get(e,t,n){if(!f(e))return;let r=e._mc[t];return r instanceof n?r:void 0}off(e,n){t(this.target,e,n)}on(e,t){return n(this.target,e,t)}one(e,t){return r(this.target,e,t)}trigger(e,t={},n=`l`,r){a(this.target,e,t,n,r)}ancestors(e){let t=[],n=v(this.target,e);for(;n;)t.push(n),n=v(n.target,e);return t}closest(e){return v(this.target,e)}children(e){let t=_(this.target);return e===void 0?t:t.filter(t=>e in t)}descendants(e){return Array.from(this.target.querySelectorAll(`[data-mc]`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc).filter(t=>e===void 0||e in t)}};function x(e,t){return Object.defineProperty(t,"name",{value:e})}function S(e){return class extends e{constructor(...e){super(...e)}}}function C(e,t,n=[],r){if(customElements.get(e)){console.warn(`IGNORED: Custom element "${e}" is already defined!`);return}if(!e.includes(`-`))throw Error(`createCustomElement: tagName must contain at least one hyphen ("-").`);let i=HTMLElement;r&&(i=document.createElement(r).constructor);let a=o(e);if(!(t.prototype instanceof y))return customElements.define(e,t),t;let s=x(a,class extends S(i){constructor(e){super(),b.add(this,a,new t(this,e))}connectedCallback(){this.dispatchEvent(new CustomEvent(`_mcConnected`))}connectedMoveCallback(){this.dispatchEvent(new CustomEvent(`_mcConnectedMove`))}disconnectedCallback(){this.dispatchEvent(new CustomEvent(`_mcDisconnected`))}adoptedCallback(){this.dispatchEvent(new CustomEvent(`_mcAdopted`))}attributeChangedCallback(e,t,n){this.dispatchEvent(new CustomEvent(`_mcAttributeChanged`,{detail:{name:e,oldValue:t,newValue:n}}))}formResetCallback(){this.dispatchEvent(new CustomEvent(`_mcFormReset`))}static get observedAttributes(){return[...n]}});return customElements.define(e,s,{extends:r}),C.list||=[],C.list.push(e),s}function w(e){return customElements.get(e)}function T(){return C.list??[]}export{C as defineCE,w as getCE,T as listCE};

package/dist/formValues.min.js

@@ -1 +1 @@
-function e(e,t){let n=t.toLowerCase();return`on`+n in e?n:`_mc`+t[0].toUpperCase()+t.substring(1)}function t(n,r,i){if(n){if(typeof n==`string`){document.querySelectorAll(n).forEach(e=>t(e,r,i));return}n.removeEventListener(e(n,r),i)}}function n(t,r,i,a=!1){if(t){if(typeof t==`string`){document.querySelectorAll(t).forEach(e=>n(e,r,i));return}return t.addEventListener(e(t,r),i,{capture:!1,once:a}),i}}function r(e,t,i){if(e){if(typeof e==`string`){document.querySelectorAll(e).forEach(e=>r(e,t,i));return}return n(e,t,i,!0),i}}var i=class{stopped=!1;constructor(){}stop(){this.stopped=!0}};function a(t,n,r={},o=`l`,s){if(!t)return;if(typeof t==`string`){document.querySelectorAll(t).forEach(e=>a(e,n,r,o));return}let c=/^_mc/.test(n)?n:e(t,n),l=s||new i,u=new CustomEvent(c,{detail:{data:r,control:l},bubbles:!1});l.stopped||/l/.test(o)&&(t.dispatchEvent(u),l.stopped)||/[ud]/.test(o)&&queueMicrotask(()=>{if(o.indexOf(`u`)>-1&&a(t.parentElement,c,r,`lu`,l),o.indexOf(`d`)>-1)for(let e of t.children)a(e,c,r,`ld`)})}function o(){return typeof window<`u`&&window.document!==void 0}function s(e){return typeof e==`object`&&!!e&&e.constructor===Object}function c(e){let t={},n=Object.keys(e).sort();for(let r=0;r<n.length;r++){let i=n[r],a=e[i];s(a)?t[i]=c(a):t[i]=a}return t}function l(e,t=!0){let n={},r=e,i=Object.getOwnPropertyNames(e);for(let e=0;e<i.length;e++){let t=i[e],a=r[t];if(a instanceof Object){let e=l(a,!1);for(let r in e)n[t+`.`+r]=e[r]}else n[t]=a}return t?c(n):n}function u(e,t){if(e===t||e!==e&&t!==t)return!0;if(typeof e!=`object`||!e||typeof t!=`object`||!t||e.constructor!==t.constructor)return!1;if(e instanceof Date)return e.getTime()===t.getTime();if(e instanceof RegExp)return e.toString()===t.toString();if(Array.isArray(e)){let n=t;if(e.length!==n.length)return!1;for(let t=0;t<e.length;t++)if(!u(e[t],n[t]))return!1;return!0}let n=e,r=t,i=Object.keys(n);if(i.length!==Object.keys(r).length)return!1;for(let e=0;e<i.length;e++){let t=i[e];if(!Object.prototype.hasOwnProperty.call(r,t)||!u(n[t],r[t]))return!1}return!0}function d(e,t){let n=Object.getOwnPropertyDescriptors(e);for(let[e,r]of Object.entries(n))(`get`in r||`set`in r)&&Object.defineProperty(t,e,r)}function f(e,t){let n=new CSSStyleSheet;return n.replaceSync(t),e.adoptedStyleSheets.push(n),n}function p(e,t){let n=e.target,r=n.shadowRoot;!r&&Object.keys(t).some(e=>e.indexOf(`shadow`)===0)&&(r=n.attachShadow({mode:`open`})),Object.keys(t).forEach(i=>{switch(i){case`css`:f(document,t[i]);break;case`targetCss`:f(document,t[i]);break;case`shadowCss`:f(r,t[i]);break;case`shadowHtml`:r.innerHTML=t[i],h(r,e);break;case`targetHtml`:n.innerHTML=t[i],h(n,e);break}})}function m(e,t){let n=t=>{let n=t.match(/^([a-z]+)([A-Z][a-z]*)$/);return n?`./${e.replace(/-/g,`/`)}.${n[1]}.${n[2].toLowerCase()}`:`./${e.replace(/-/g,`/`)}.${t.toLowerCase()}`};return Promise.all(t.map(async e=>{let t=n(e);try{let n=await fetch(t);if(!n.ok)return`file not found: ${t}`;if(t.endsWith(`json`)){let r=await n.text();try{return JSON.parse(r)}catch{return console.error(`could not JSON.parse() asset '${e}' from ${t}:\n`,r),null}}return n.text()}catch{return`file not found: ${t}`}}))}function h(e,t){let r=[...e.querySelectorAll(`*`)];for(let e of r){if(!(e instanceof HTMLElement))continue;let r=[...e.attributes];for(let i of r){let r=i.name.toLowerCase();if(!(`on`+r in e))continue;let o=i.value.trim().split(`|`);if(o.length<2)continue;let[s,c,l]=o;e.removeAttribute(i.name);let u;if(l)try{u=JSON.parse(l)}catch{u=l}s===`this`||s===``?n(e,r,()=>t.trigger(c,u)):n(e,r,()=>a(s,c,u))}}}function g(e,t){return typeof HTMLElement<`u`&&e instanceof HTMLElement&&`_mc`in e&&(t===void 0||t in e._mc)}function _(e,t,n={}){let r=e;`_mc`in e||(r._mc=new w(e));let i=r._mc;return t.length&&!i[t]&&(i[t]=n,e instanceof HTMLElement&&!e.getAttribute(`data-mc`)&&e.setAttribute(`data-mc`,``)),r}function v(e,t){if(!t)return;let n=e._mc;n&&(n[t]&&delete n[t],!Object.keys(n).length&&e instanceof HTMLElement&&e.hasAttribute(`data-mc`)&&e.removeAttribute(`data-mc`))}function y(e){queueMicrotask(()=>{e.trigger(`Init`,null)})}function b(e){let t=e.target,r=Object.getPrototypeOf(e),i=e,a=Object.getOwnPropertyNames(r).filter(e=>/^(on[A-Z]|one[A-Z])/.test(e)&&typeof r[e]==`function`);for(let e of a){let r=/^one/.test(e);n(t,e.replace(/^one?/,``),t=>i[e](t),r)}}function x(e){return Array.from(e.querySelectorAll(`[data-mc]:not(:scope [data-mc] [data-mc])`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc)}function S(e,t){let n=e.parentElement?.closest(`[data-mc]`);for(;n instanceof HTMLElement;){if(`_mc`in n){let e=n._mc;if(t===void 0||t in e)return e}n=n.parentElement?.closest(`[data-mc]`)}return null}var C=class{_target;constructor(e){if(this._target=new WeakRef(e||{}),this instanceof w&&this.constructor!==w){b(this);let e=this.constructor.tag;(e===void 0||e.toUpperCase()===this.target.tagName)&&y(this)}}get target(){return this._target.deref()}},w=class e extends C{static tag;static _assets={};static assets=[];static attributes={};constructor(t){super(t);let n=this.constructor;if(n===e)return;let r=this.target.tagName.toLowerCase();if(n.tag!==void 0&&r!==n.tag&&n.tag!==``){let t=document.createElement(n.tag);t.classList.add(r),e.add(t,n.name,new n(t)),r.includes(`-`)&&!this.target.isConnected?this.on(`connected`,()=>this.target.replaceWith(t)):this.target.replaceWith(t);return}let i=n.attributes;n.attributes&&Object.keys(n.attributes).forEach(e=>{this.target.setAttribute(e,i[e])});let a=n.assets.filter(e=>!n._assets[e]),o=this;if(n.hasOwnProperty(`_assets`)?p(this,n._assets):n.assets.length&&!n.hasOwnProperty(`_assets`)&&(n._assets={}),a.length?m(r,a).then(e=>{let t={};a.forEach((n,r)=>{t[n]=e[r]}),p(this,t),n._assets=Object.assign({},n._assets,t),o.trigger(`assets`,n._assets)}):[...Object.keys(n._assets)].length&&queueMicrotask(()=>o.trigger(`assets`,n._assets)),n.tag===``){this.target.remove();return}}getAssets(){return this.constructor._assets||{}}static add(e,t,n={}){return _(e,t,n)}static remove(e,t){v(e,t)}static get(e,t,n){if(!g(e))return;let r=e._mc[t];return r instanceof n?r:void 0}off(e,n){t(this.target,e,n)}on(e,t){return n(this.target,e,t)}one(e,t){return r(this.target,e,t)}trigger(e,t={},n=`l`,r){a(this.target,e,t,n,r)}ancestors(e){let t=[],n=S(this.target,e);for(;n;)t.push(n),n=S(n.target,e);return t}closest(e){return S(this.target,e)}children(e){let t=x(this.target);return e===void 0?t:t.filter(t=>e in t)}descendants(e){return Array.from(this.target.querySelectorAll(`[data-mc]`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc).filter(t=>e===void 0||e in t)}};function T(e){let t=new Set,n=/\{[^\{\}]*\}/g;return(e.getAttributeNames?e.getAttributeNames():[]).filter(t=>e.getAttribute(t)?.match(n)).forEach(r=>{new Set(e.getAttribute(r)?.match(n)).forEach(e=>t.add(e.replace(/[\{\}]/g,``)))}),[...e.childNodes].filter(e=>e.nodeType===3&&(e.nodeValue||``).match(n)).forEach(e=>{(e?.nodeValue||``).match(n).forEach(e=>t.add(e.replace(/[\{\}]/g,``)))}),[...t]}var E=[`INPUT`,`SELECT`,`TEXTAREA`],D=class extends w{data={};oldDisplay=``;constructor(e){super(e),T(e).forEach(e=>this.data[e]=``),F(this),this.#attachCallbacks()}#attachCallbacks(){let e=this.target,t=!1;(e.getAttributeNames?e.getAttributeNames():[]).filter(t=>e.getAttribute(t)?.match(/\{[^\{\}]*\}/g)).forEach(t=>{let n=new Set(e.getAttribute(t)?.match(/\{[^\{\}]*\}/g));this.data.subscribe((r=>i=>{let a=r;n.forEach(e=>{a=a.replace(e,String(i[e.replace(/[\{\}]/g,``)]))}),e.setAttribute(t,a)})(e.getAttribute(t)??``))}),[...e.childNodes].filter(e=>e.nodeType===3&&(e.nodeValue||``).match(/\{[^\{\}]*\}/g)).forEach(n=>{t=!0;let r=new Set((n.nodeValue??``).match(/\{[^\{\}]*\}/g));this.data.subscribe((t=>i=>{let a=t;r.forEach(e=>{a=a.replace(e,String(i[e.replace(/[\{\}]/g,``)]))}),this.oldDisplay?e.style=this.oldDisplay:e.removeAttribute(`style`),delete this.oldDisplay,n.nodeValue=a})(n.nodeValue??``)),this.oldDisplay=e.getAttribute(`style`)||``,t&&!E.includes(e.tagName)&&e.tagName!==`FIELDSET`&&(e.style.display=`none`)})}onData(e){let t={};Object.keys(e.detail.data).forEach(n=>{this.data.hasOwnProperty(n)&&(t[n]=e.detail.data[n])}),JSON.stringify(t)!==JSON.stringify(this.data)&&Object.assign(this.data,t)}};function O(e){return[e,...e.querySelectorAll(`*`)].filter(e=>!!T(e).length).filter(e=>e?.tagName!==`STYLE`).reverse()}function k(e){O(e).forEach(e=>{e?._mc?._placeholders||w.add(e,`_placeholders`,new D(e))})}function A(e){return typeof e==`object`&&!!e}var j={};function M(e){let t=e.constructor,n=t.name,r=class extends t{#notify=!0;#callbacks=[];constructor(e){super(e);let t=this.constructor;t.callbacks=[],A(e)&&Object.getOwnPropertyNames(e).forEach(t=>{this[t]=e[t]})}get callbacks(){return this.#callbacks}set callbacks(e){this.#callbacks=e}[Symbol.toPrimitive](e){let t=this.valueOf();return e===`string`?String(t):e===`number`?Number(t):t}subscribe(e){return this.#callbacks.push(e),this}unsubscribe(e){return this.#callbacks=this.#callbacks.filter(t=>t!==e),this}bind(e){if(o()){if(A(this.valueOf())){k(e);let t=[e,...e.querySelectorAll(`[data-mc]`)].filter(e=>!!e?._mc?._placeholders);this.#callbacks.push(function(e){let n=l(e);t.forEach(e=>{e&&a(e,`data`,n)})}),this.notify()}else console.warn(`IGNORED - cannot bind a non-Object to the dom, IS:`,typeof this.valueOf(),this);return this}}notify(e){let t=A(this.valueOf())&&!(this.valueOf()instanceof Array)?structuredClone(Object.assign({},this)):this.valueOf();return e!==void 0&&(this.#notify=e),this.#notify&&this.#callbacks.forEach(e=>{e(t)}),this}};return j[n]=r,r}function N(e){return j[e.constructor.name]||M(e)}function P(e){return(typeof e==`object`||typeof e==`function`)&&e!==null&&`subscribe`in e}function F(e,t){let n=e;return(t?[t]:[...Object.getOwnPropertyNames(e)]).forEach(t=>{let r=n[t];if(Object.prototype.hasOwnProperty.call(e,t)&&typeof r!=`function`&&!P(r)){if(t[0]===`_`||r===void 0)return;let i=r,a=new(N(i))(i),o=function(){queueMicrotask(function(){a.notify()})};Object.defineProperty(e,t,{enumerable:!0,get(){if(A(a.valueOf())){let e=structuredClone(Object.assign({},a));queueMicrotask(function(){u(structuredClone(Object.assign({},a)),e)||o()})}return a},set(e){if(typeof e==typeof a.valueOf())if(A(a.valueOf())&&!(a.valueOf()instanceof Array))P(a)||(a=new(N(e))(structuredClone(Object.assign({},e))),d(e,a)),Object.assign(a,e),a.notify();else{let t=a.valueOf(),n=a.callbacks;e!==t&&(a=new(N(e))(e),a.callbacks=n,o())}else console.warn(`IGNORED - cannot change observable types, IS:`,typeof a.valueOf(),a,`- CANNOT BECOME:`,typeof e)}}),n[t]=i}}),e}function I(e){let t=Object.getPrototypeOf(e.prototype);function n(e,t){let n=e[t];P(n)||F(e,t)}Object.hasOwn(t,`notify`)||Object.assign(t,{notify:function(e){return n(this,e),this[e].notify(),this},subscribe:function(e,t){return n(this,e),this[e].subscribe(t),this},bind:function(e,t){return n(this,e),this[e].bind(t),this}})}I(w);var L=e=>e.tagName.toLowerCase(),R=class{constructor(e){}},z=class extends R{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.form?new FormData(this.#e.form).get(this.#e.name)??null:null}set val(e){let t=[...this.#e.form?.querySelectorAll(`input[type="radio"][name="${this.#e.name}"]`)??[]];t.filter(t=>t.getAttribute(`value`)===e).shift().checked=!0}},B=class extends R{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.checked}set val(e){this.#e.checked=e}},V=class extends R{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.value}set val(e){this.#e.value=e}},H=class extends R{#e;#multi=!1;constructor(e){super(e),this.#e=e,this.#multi=e.multiple}get val(){let e=[];return[...this.#e.querySelectorAll(`option`)].filter(e=>e.selected).forEach(t=>{e.push(t.value)}),this.#multi?e:e[0]}set val(e){e=typeof e==`string`?[e]:e,[...this.#e.querySelectorAll(`option`)].forEach(t=>{e.indexOf(t.value)>-1?t.selected=!0:t.selected=!1})}},U=class extends R{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.value||``}set val(e){this.#e.value=e}},W=e=>{let t=[...(e||document).querySelectorAll(`input,select,textarea`)],n={};return t.forEach(e=>{let t=e.getAttribute(`name`);if(t){let r=!1;switch(L(e)){case`input`:switch(e.type){case`radio`:r=new z(e);break;case`checkbox`:r=new B(e);break;default:r=new V(e)}break;case`select`:r=new H(e);break;case`textarea`:r=new U(e);break}if(r){let i=r;w.add(e,t,i),Object.defineProperty(n,t,{enumerable:!0,configurable:!0,get:()=>i.val,set:e=>{i.val!==e&&(i.val=e)}})}}}),n};function G(e,t,n){if(!o())return;let r=W(n),i=e;i[t]=Object.assign({},r),F(e,t);let a=i[t];d(r,a),[...n.querySelectorAll(`input, textarea, select`)].forEach(e=>{e.addEventListener(`input`,()=>{a.notify()})})}function K(e){let t=Object.getPrototypeOf(e.prototype);Object.hasOwn(t,`formValues`)||Object.assign(t,{formValues:function(e,t){return G(this,t,e),this}})}export{K as formValuePlugin,G as formValues};
+function e(e,t){let n=t.toLowerCase();return`on`+n in e?n:`_mc`+t[0].toUpperCase()+t.substring(1)}function t(n,r,i){if(n){if(typeof n==`string`){document.querySelectorAll(n).forEach(e=>t(e,r,i));return}n.removeEventListener(e(n,r),i)}}function n(t,r,i,a=!1){if(t){if(typeof t==`string`){document.querySelectorAll(t).forEach(e=>n(e,r,i));return}return t.addEventListener(e(t,r),i,{capture:!1,once:a}),i}}function r(e,t,i){if(e){if(typeof e==`string`){document.querySelectorAll(e).forEach(e=>r(e,t,i));return}return n(e,t,i,!0),i}}var i=class{stopped=!1;constructor(){}stop(){this.stopped=!0}};function a(t,n,r={},o=`l`,s){if(!t)return;if(typeof t==`string`){document.querySelectorAll(t).forEach(e=>a(e,n,r,o));return}let c=/^_mc/.test(n)?n:e(t,n),l=s||new i,u=new CustomEvent(c,{detail:{data:r,control:l},bubbles:!1});l.stopped||/l/.test(o)&&(t.dispatchEvent(u),l.stopped)||/[ud]/.test(o)&&queueMicrotask(()=>{if(o.indexOf(`u`)>-1&&a(t.parentElement,c,r,`lu`,l),o.indexOf(`d`)>-1)for(let e of t.children)a(e,c,r,`ld`)})}function o(){return typeof window<`u`&&window.document!==void 0}function s(e){return typeof e==`object`&&!!e&&e.constructor===Object}function c(e){let t={},n=Object.keys(e).sort();for(let r=0;r<n.length;r++){let i=n[r],a=e[i];s(a)?t[i]=c(a):t[i]=a}return t}function l(e,t=!0){let n={},r=e,i=Object.getOwnPropertyNames(e);for(let e=0;e<i.length;e++){let t=i[e],a=r[t];if(a instanceof Object){let e=l(a,!1);for(let r in e)n[t+`.`+r]=e[r]}else n[t]=a}return t?c(n):n}function u(e,t){if(e===t||e!==e&&t!==t)return!0;if(typeof e!=`object`||!e||typeof t!=`object`||!t||e.constructor!==t.constructor)return!1;if(e instanceof Date)return e.getTime()===t.getTime();if(e instanceof RegExp)return e.toString()===t.toString();if(Array.isArray(e)){let n=t;if(e.length!==n.length)return!1;for(let t=0;t<e.length;t++)if(!u(e[t],n[t]))return!1;return!0}let n=e,r=t,i=Object.keys(n);if(i.length!==Object.keys(r).length)return!1;for(let e=0;e<i.length;e++){let t=i[e];if(!Object.prototype.hasOwnProperty.call(r,t)||!u(n[t],r[t]))return!1}return!0}function d(e,t){let n=Object.getOwnPropertyDescriptors(e);for(let[e,r]of Object.entries(n))(`get`in r||`set`in r)&&Object.defineProperty(t,e,r)}var f=new WeakMap;function p(e,t){let n=f.get(e)??new Set;if(n.has(t))return e.adoptedStyleSheets[0];n.add(t),f.set(e,n);let r=new CSSStyleSheet;return r.replaceSync(t),e.adoptedStyleSheets.push(r),r}function m(e,t){let n=e.target,r=n.shadowRoot;!r&&Object.keys(t).some(e=>e.indexOf(`shadow`)===0)&&(r=n.attachShadow({mode:`open`})),Object.keys(t).forEach(i=>{switch(i){case`css`:p(document,t[i]);break;case`targetCss`:p(document,t[i]);break;case`shadowCss`:p(r,t[i]);break;case`shadowHtml`:r.innerHTML=t[i],g(r,e);break;case`targetHtml`:n.innerHTML=t[i],g(n,e);break}})}function h(e,t){let n=t=>{let n=t.match(/^([a-z]+)([A-Z][a-z]*)$/);return n?`./${e.replace(/-/g,`/`)}.${n[1]}.${n[2].toLowerCase()}`:`./${e.replace(/-/g,`/`)}.${t.toLowerCase()}`};return Promise.all(t.map(async e=>{let t=n(e);try{let n=await fetch(t);if(!n.ok)return`file not found: ${t}`;if(t.endsWith(`json`)){let r=await n.text();try{return JSON.parse(r)}catch{return console.error(`could not JSON.parse() asset '${e}' from ${t}:\n`,r),null}}return n.text()}catch{return`file not found: ${t}`}}))}function g(e,t){let r=[...e.querySelectorAll(`*`)];for(let e of r){if(!(e instanceof HTMLElement))continue;let r=[...e.attributes];for(let i of r){let r=i.name.toLowerCase();if(!(`on`+r in e))continue;let o=i.value.trim().split(`|`);if(o.length<2)continue;let[s,c,l]=o;e.removeAttribute(i.name);let u;if(l)try{u=JSON.parse(l)}catch{u=l}s===`this`||s===``?n(e,r,()=>t.trigger(c,u)):n(e,r,()=>a(s,c,u))}}}function _(e,t){return typeof HTMLElement<`u`&&e instanceof HTMLElement&&`_mc`in e&&(t===void 0||t in e._mc)}function v(e,t,n={}){let r=e;`_mc`in e||(r._mc=new T(e));let i=r._mc;return t.length&&!i[t]&&(i[t]=n,e instanceof HTMLElement&&!e.getAttribute(`data-mc`)&&e.setAttribute(`data-mc`,``)),r}function y(e,t){if(!t)return;let n=e._mc;n&&(n[t]&&delete n[t],!Object.keys(n).length&&e instanceof HTMLElement&&e.hasAttribute(`data-mc`)&&e.removeAttribute(`data-mc`))}function b(e){queueMicrotask(()=>{e.trigger(`Init`,null)})}function x(e){let t=e.target,r=Object.getPrototypeOf(e),i=e,a=Object.getOwnPropertyNames(r).filter(e=>/^(on[A-Z]|one[A-Z])/.test(e)&&typeof r[e]==`function`);for(let e of a){let r=/^one/.test(e);n(t,e.replace(/^one?/,``),t=>i[e](t),r)}}function S(e){return Array.from(e.querySelectorAll(`[data-mc]:not(:scope [data-mc] [data-mc])`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc)}function C(e,t){let n=e.parentElement?.closest(`[data-mc]`);for(;n instanceof HTMLElement;){if(`_mc`in n){let e=n._mc;if(t===void 0||t in e)return e}n=n.parentElement?.closest(`[data-mc]`)}return null}var w=class{_target;constructor(e){if(this._target=new WeakRef(e||{}),this instanceof T&&this.constructor!==T){x(this);let e=this.constructor.tag;(e===void 0||e.toUpperCase()===this.target.tagName)&&b(this)}}get target(){return this._target.deref()}},T=class e extends w{static tag;static _assets={};static assets=[];static attributes={};constructor(t){super(t);let n=this.constructor;if(n===e)return;let r=this.target.tagName.toLowerCase();if(n.tag!==void 0&&r!==n.tag&&n.tag!==``){let t=document.createElement(n.tag);t.classList.add(r),n._originalTag=r,e.add(t,n.name,new n(t)),delete n._originalTag,r.includes(`-`)&&!this.target.isConnected?this.on(`connected`,()=>this.target.replaceWith(t)):this.target.replaceWith(t);return}let i=n.attributes;n.attributes&&Object.keys(n.attributes).forEach(e=>{this.target.setAttribute(e,i[e])});let a=n.assets.filter(e=>!n._assets[e]),o=this;if(n.hasOwnProperty(`_assets`)?m(this,n._assets):n.assets.length&&!n.hasOwnProperty(`_assets`)&&(n._assets={}),a.length?h(n._originalTag||r,a).then(e=>{let t={};a.forEach((n,r)=>{t[n]=e[r]}),m(this,t),n._assets=Object.assign({},n._assets,t);for(let e of[`css`,`targetCss`])t[e]!==void 0&&delete n._assets[e];n.assets=n.assets.filter(e=>e!==`css`&&e!==`targetCss`),o.trigger(`assets`,n._assets)}):[...Object.keys(n._assets)].length&&queueMicrotask(()=>o.trigger(`assets`,n._assets)),n.tag===``){this.target.remove();return}}getAssets(){return this.constructor._assets||{}}static add(e,t,n={}){return v(e,t,n)}static remove(e,t){y(e,t)}static get(e,t,n){if(!_(e))return;let r=e._mc[t];return r instanceof n?r:void 0}off(e,n){t(this.target,e,n)}on(e,t){return n(this.target,e,t)}one(e,t){return r(this.target,e,t)}trigger(e,t={},n=`l`,r){a(this.target,e,t,n,r)}ancestors(e){let t=[],n=C(this.target,e);for(;n;)t.push(n),n=C(n.target,e);return t}closest(e){return C(this.target,e)}children(e){let t=S(this.target);return e===void 0?t:t.filter(t=>e in t)}descendants(e){return Array.from(this.target.querySelectorAll(`[data-mc]`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc).filter(t=>e===void 0||e in t)}};function E(e){let t=new Set,n=/\{[^\{\}]*\}/g;return(e.getAttributeNames?e.getAttributeNames():[]).filter(t=>e.getAttribute(t)?.match(n)).forEach(r=>{new Set(e.getAttribute(r)?.match(n)).forEach(e=>t.add(e.replace(/[\{\}]/g,``)))}),[...e.childNodes].filter(e=>e.nodeType===3&&(e.nodeValue||``).match(n)).forEach(e=>{(e?.nodeValue||``).match(n).forEach(e=>t.add(e.replace(/[\{\}]/g,``)))}),[...t]}var D=[`INPUT`,`SELECT`,`TEXTAREA`],O=class extends T{data={};oldDisplay=``;constructor(e){super(e),E(e).forEach(e=>this.data[e]=``),I(this),this.#e()}#e(){let e=this.target,t=!1;(e.getAttributeNames?e.getAttributeNames():[]).filter(t=>e.getAttribute(t)?.match(/\{[^\{\}]*\}/g)).forEach(t=>{let n=new Set(e.getAttribute(t)?.match(/\{[^\{\}]*\}/g));this.data.subscribe((r=>i=>{let a=r;n.forEach(e=>{a=a.replace(e,String(i[e.replace(/[\{\}]/g,``)]))}),e.setAttribute(t,a)})(e.getAttribute(t)??``))}),[...e.childNodes].filter(e=>e.nodeType===3&&(e.nodeValue||``).match(/\{[^\{\}]*\}/g)).forEach(n=>{t=!0;let r=new Set((n.nodeValue??``).match(/\{[^\{\}]*\}/g));this.data.subscribe((t=>i=>{let a=t;r.forEach(e=>{a=a.replace(e,String(i[e.replace(/[\{\}]/g,``)]))}),this.oldDisplay?e.style=this.oldDisplay:e.removeAttribute(`style`),delete this.oldDisplay,n.nodeValue=a})(n.nodeValue??``)),this.oldDisplay=e.getAttribute(`style`)||``,t&&!D.includes(e.tagName)&&e.tagName!==`FIELDSET`&&(e.style.display=`none`)})}onData(e){let t={};Object.keys(e.detail.data).forEach(n=>{this.data.hasOwnProperty(n)&&(t[n]=e.detail.data[n])}),JSON.stringify(t)!==JSON.stringify(this.data)&&Object.assign(this.data,t)}};function k(e){return[e,...e.querySelectorAll(`*`)].filter(e=>!!E(e).length).filter(e=>e?.tagName!==`STYLE`).reverse()}function A(e){k(e).forEach(e=>{e?._mc?._placeholders||T.add(e,`_placeholders`,new O(e))})}function j(e){return typeof e==`object`&&!!e}var M={};function N(e){let t=e.constructor,n=t.name,r=class extends t{#e=!0;#t=[];constructor(e){super(e);let t=this.constructor;t.callbacks=[],j(e)&&Object.getOwnPropertyNames(e).forEach(t=>{this[t]=e[t]})}get callbacks(){return this.#t}set callbacks(e){this.#t=e}[Symbol.toPrimitive](e){let t=this.valueOf();return e===`string`?String(t):e===`number`?Number(t):t}subscribe(e){return this.#t.push(e),this}unsubscribe(e){return this.#t=this.#t.filter(t=>t!==e),this}bind(e){if(o()){if(j(this.valueOf())){A(e);let t=[e,...e.querySelectorAll(`[data-mc]`)].filter(e=>!!e?._mc?._placeholders);this.#t.push(function(e){let n=l(e);t.forEach(e=>{e&&a(e,`data`,n)})}),this.notify()}else console.warn(`IGNORED - cannot bind a non-Object to the dom, IS:`,typeof this.valueOf(),this);return this}}notify(e){let t=j(this.valueOf())&&!(this.valueOf()instanceof Array)?structuredClone(Object.assign({},this)):this.valueOf();return e!==void 0&&(this.#e=e),this.#e&&this.#t.forEach(e=>{e(t)}),this}};return M[n]=r,r}function P(e){return M[e.constructor.name]||N(e)}function F(e){return(typeof e==`object`||typeof e==`function`)&&e!==null&&`subscribe`in e}function I(e,t){let n=e;return(t?[t]:[...Object.getOwnPropertyNames(e)]).forEach(t=>{let r=n[t];if(Object.prototype.hasOwnProperty.call(e,t)&&typeof r!=`function`&&!F(r)){if(t[0]===`_`||r===void 0)return;let i=r,a=new(P(i))(i),o=function(){queueMicrotask(function(){a.notify()})};Object.defineProperty(e,t,{enumerable:!0,get(){if(j(a.valueOf())){let e=structuredClone(Object.assign({},a));queueMicrotask(function(){u(structuredClone(Object.assign({},a)),e)||o()})}return a},set(e){if(typeof e==typeof a.valueOf())if(j(a.valueOf())&&!(a.valueOf()instanceof Array))F(a)||(a=new(P(e))(structuredClone(Object.assign({},e))),d(e,a)),Object.assign(a,e),a.notify();else{let t=a.valueOf(),n=a.callbacks;e!==t&&(a=new(P(e))(e),a.callbacks=n,o())}else console.warn(`IGNORED - cannot change observable types, IS:`,typeof a.valueOf(),a,`- CANNOT BECOME:`,typeof e)}}),n[t]=i}}),e}function L(e){let t=Object.getPrototypeOf(e.prototype);function n(e,t){let n=e[t];F(n)||I(e,t)}Object.hasOwn(t,`notify`)||Object.assign(t,{notify:function(e){return n(this,e),this[e].notify(),this},subscribe:function(e,t){return n(this,e),this[e].subscribe(t),this},bind:function(e,t){return n(this,e),this[e].bind(t),this}})}L(T);var R=e=>e.tagName.toLowerCase(),z=class{constructor(e){}},B=class extends z{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.form?new FormData(this.#e.form).get(this.#e.name)??null:null}set val(e){let t=[...this.#e.form?.querySelectorAll(`input[type="radio"][name="${this.#e.name}"]`)??[]];t.filter(t=>t.getAttribute(`value`)===e).shift().checked=!0}},V=class extends z{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.checked}set val(e){this.#e.checked=e}},H=class extends z{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.value}set val(e){this.#e.value=e}},U=class extends z{#e;#t=!1;constructor(e){super(e),this.#e=e,this.#t=e.multiple}get val(){let e=[];return[...this.#e.querySelectorAll(`option`)].filter(e=>e.selected).forEach(t=>{e.push(t.value)}),this.#t?e:e[0]}set val(e){e=typeof e==`string`?[e]:e,[...this.#e.querySelectorAll(`option`)].forEach(t=>{e.indexOf(t.value)>-1?t.selected=!0:t.selected=!1})}},W=class extends z{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.value||``}set val(e){this.#e.value=e}},G=e=>{let t=[...(e||document).querySelectorAll(`input,select,textarea`)],n={};return t.forEach(e=>{let t=e.getAttribute(`name`);if(t){let r=!1;switch(R(e)){case`input`:switch(e.type){case`radio`:r=new B(e);break;case`checkbox`:r=new V(e);break;default:r=new H(e)}break;case`select`:r=new U(e);break;case`textarea`:r=new W(e);break}if(r){let i=r;T.add(e,t,i),Object.defineProperty(n,t,{enumerable:!0,configurable:!0,get:()=>i.val,set:e=>{i.val!==e&&(i.val=e)}})}}}),n};function K(e,t,n){if(!o())return;let r=G(n),i=e;i[t]=Object.assign({},r),I(e,t);let a=i[t];d(r,a),[...n.querySelectorAll(`input, textarea, select`)].forEach(e=>{e.addEventListener(`input`,()=>{a.notify()})})}function q(e){let t=Object.getPrototypeOf(e.prototype);Object.hasOwn(t,`formValues`)||Object.assign(t,{formValues:function(e,t){return K(this,t,e),this}})}export{q as formValuePlugin,K as formValues};

package/dist/microcomponents.min.js

@@ -1 +1 @@
-function e(e){return`_mc`+e[0].toUpperCase()+e.substring(1)}function t(e,t){let n=t.toLowerCase();return`on`+n in e?n:`_mc`+t[0].toUpperCase()+t.substring(1)}function n(e,r,i){if(e){if(typeof e==`string`){document.querySelectorAll(e).forEach(e=>n(e,r,i));return}e.removeEventListener(t(e,r),i)}}function r(e,n,i,a=!1){if(e){if(typeof e==`string`){document.querySelectorAll(e).forEach(e=>r(e,n,i));return}return e.addEventListener(t(e,n),i,{capture:!1,once:a}),i}}function i(e,t,n){if(e){if(typeof e==`string`){document.querySelectorAll(e).forEach(e=>i(e,t,n));return}return r(e,t,n,!0),n}}var a=class{stopped=!1;constructor(){}stop(){this.stopped=!0}};function o(e,n,r={},i=`l`,s){if(!e)return;if(typeof e==`string`){document.querySelectorAll(e).forEach(e=>o(e,n,r,i));return}let c=/^_mc/.test(n)?n:t(e,n),l=s||new a,u=new CustomEvent(c,{detail:{data:r,control:l},bubbles:!1});l.stopped||/l/.test(i)&&(e.dispatchEvent(u),l.stopped)||/[ud]/.test(i)&&queueMicrotask(()=>{if(i.indexOf(`u`)>-1&&o(e.parentElement,c,r,`lu`,l),i.indexOf(`d`)>-1)for(let t of e.children)o(t,c,r,`ld`)})}function s(){return typeof window<`u`&&window.document!==void 0}function c(e){return typeof e==`object`&&!!e&&e.constructor===Object}function l(e){let t={},n=Object.keys(e).sort();for(let r=0;r<n.length;r++){let i=n[r],a=e[i];c(a)?t[i]=l(a):t[i]=a}return t}function u(e,t=!0){let n={},r=e,i=Object.getOwnPropertyNames(e);for(let e=0;e<i.length;e++){let t=i[e],a=r[t];if(a instanceof Object){let e=u(a,!1);for(let r in e)n[t+`.`+r]=e[r]}else n[t]=a}return t?l(n):n}function d(e,t){if(e===t||e!==e&&t!==t)return!0;if(typeof e!=`object`||!e||typeof t!=`object`||!t||e.constructor!==t.constructor)return!1;if(e instanceof Date)return e.getTime()===t.getTime();if(e instanceof RegExp)return e.toString()===t.toString();if(Array.isArray(e)){let n=t;if(e.length!==n.length)return!1;for(let t=0;t<e.length;t++)if(!d(e[t],n[t]))return!1;return!0}let n=e,r=t,i=Object.keys(n);if(i.length!==Object.keys(r).length)return!1;for(let e=0;e<i.length;e++){let t=i[e];if(!Object.prototype.hasOwnProperty.call(r,t)||!d(n[t],r[t]))return!1}return!0}function f(e,t={}){let n=t,r=typeof e==`string`?e.split(`.`):e;if(!(!n||!r[0]||!n[r[0]])){if(r.length>1){let e=n[r[0]];return c(e)?f(r.slice(1),e):void 0}return n[r[0]]}}function p(e,t,...n){let r=[e,t,...n];if(r.length>2){for(;r.length>1;)r[0]=p(r[0],r[1]),r.splice(1,1);return r[0]}if(typeof e==`string`){let n=e;return e.match(/\{[^\{\}]*\}/g)?.forEach(e=>{let r=f(e.substring(1,e.length-1),t);r!==void 0&&(n=n.replace(e,String(r)))}),n}else if(c(e)){let n=e;Object.keys(n).forEach(e=>{Object.prototype.hasOwnProperty.call(n,e)&&(n[e]=p(n[e],t))})}return e}function m(e){return e.split(`-`).map(e=>e.charAt(0).toUpperCase()+e.slice(1)).join(``)}function h(e,t){let n;return(...r)=>{clearTimeout(n),n=setTimeout(()=>{e(...r)},t)}}function g(e){let t=document.createElement(`template`);return e=e.replace(/<([A-Za-z0-9\-]*)([^>\/]*)(\/>)/gi,`<$1$2></$1>`),t.innerHTML=e,t.content.normalize(),Array.from(t.content.childNodes)}function _(e,t){let n=Object.getOwnPropertyDescriptors(e);for(let[e,r]of Object.entries(n))(`get`in r||`set`in r)&&Object.defineProperty(t,e,r)}function v(e,t){let n=new CSSStyleSheet;return n.replaceSync(t),e.adoptedStyleSheets.push(n),n}function y(e,t){let n=e.target,r=n.shadowRoot;!r&&Object.keys(t).some(e=>e.indexOf(`shadow`)===0)&&(r=n.attachShadow({mode:`open`})),Object.keys(t).forEach(i=>{switch(i){case`css`:v(document,t[i]);break;case`targetCss`:v(document,t[i]);break;case`shadowCss`:v(r,t[i]);break;case`shadowHtml`:r.innerHTML=t[i],x(r,e);break;case`targetHtml`:n.innerHTML=t[i],x(n,e);break}})}function b(e,t){let n=t=>{let n=t.match(/^([a-z]+)([A-Z][a-z]*)$/);return n?`./${e.replace(/-/g,`/`)}.${n[1]}.${n[2].toLowerCase()}`:`./${e.replace(/-/g,`/`)}.${t.toLowerCase()}`};return Promise.all(t.map(async e=>{let t=n(e);try{let n=await fetch(t);if(!n.ok)return`file not found: ${t}`;if(t.endsWith(`json`)){let r=await n.text();try{return JSON.parse(r)}catch{return console.error(`could not JSON.parse() asset '${e}' from ${t}:\n`,r),null}}return n.text()}catch{return`file not found: ${t}`}}))}function x(e,t){let n=[...e.querySelectorAll(`*`)];for(let e of n){if(!(e instanceof HTMLElement))continue;let n=[...e.attributes];for(let i of n){let n=i.name.toLowerCase();if(!(`on`+n in e))continue;let a=i.value.trim().split(`|`);if(a.length<2)continue;let[s,c,l]=a;e.removeAttribute(i.name);let u;if(l)try{u=JSON.parse(l)}catch{u=l}s===`this`||s===``?r(e,n,()=>t.trigger(c,u)):r(e,n,()=>o(s,c,u))}}}function S(e,t){return typeof HTMLElement<`u`&&e instanceof HTMLElement&&`_mc`in e&&(t===void 0||t in e._mc)}function C(e,t,n={}){let r=e;`_mc`in e||(r._mc=new k(e));let i=r._mc;return t.length&&!i[t]&&(i[t]=n,e instanceof HTMLElement&&!e.getAttribute(`data-mc`)&&e.setAttribute(`data-mc`,``)),r}function ee(e,t){if(!t)return;let n=e._mc;n&&(n[t]&&delete n[t],!Object.keys(n).length&&e instanceof HTMLElement&&e.hasAttribute(`data-mc`)&&e.removeAttribute(`data-mc`))}function w(e){queueMicrotask(()=>{e.trigger(`Init`,null)})}function T(e){let t=e.target,n=Object.getPrototypeOf(e),i=e,a=Object.getOwnPropertyNames(n).filter(e=>/^(on[A-Z]|one[A-Z])/.test(e)&&typeof n[e]==`function`);for(let e of a){let n=/^one/.test(e);r(t,e.replace(/^one?/,``),t=>i[e](t),n)}}function te(e){return Array.from(e.querySelectorAll(`[data-mc]:not(:scope [data-mc] [data-mc])`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc)}function E(e,t){let n=e.parentElement?.closest(`[data-mc]`);for(;n instanceof HTMLElement;){if(`_mc`in n){let e=n._mc;if(t===void 0||t in e)return e}n=n.parentElement?.closest(`[data-mc]`)}return null}var D=class{_target;constructor(e){if(this._target=new WeakRef(e||{}),this instanceof k&&this.constructor!==k){T(this);let e=this.constructor.tag;(e===void 0||e.toUpperCase()===this.target.tagName)&&w(this)}}get target(){return this._target.deref()}},O=class extends D{constructor(e){super(e)}},k=class e extends D{static tag;static _assets={};static assets=[];static attributes={};constructor(t){super(t);let n=this.constructor;if(n===e)return;let r=this.target.tagName.toLowerCase();if(n.tag!==void 0&&r!==n.tag&&n.tag!==``){let t=document.createElement(n.tag);t.classList.add(r),e.add(t,n.name,new n(t)),r.includes(`-`)&&!this.target.isConnected?this.on(`connected`,()=>this.target.replaceWith(t)):this.target.replaceWith(t);return}let i=n.attributes;n.attributes&&Object.keys(n.attributes).forEach(e=>{this.target.setAttribute(e,i[e])});let a=n.assets.filter(e=>!n._assets[e]),o=this;if(n.hasOwnProperty(`_assets`)?y(this,n._assets):n.assets.length&&!n.hasOwnProperty(`_assets`)&&(n._assets={}),a.length?b(r,a).then(e=>{let t={};a.forEach((n,r)=>{t[n]=e[r]}),y(this,t),n._assets=Object.assign({},n._assets,t),o.trigger(`assets`,n._assets)}):[...Object.keys(n._assets)].length&&queueMicrotask(()=>o.trigger(`assets`,n._assets)),n.tag===``){this.target.remove();return}}getAssets(){return this.constructor._assets||{}}static add(e,t,n={}){return C(e,t,n)}static remove(e,t){ee(e,t)}static get(e,t,n){if(!S(e))return;let r=e._mc[t];return r instanceof n?r:void 0}off(e,t){n(this.target,e,t)}on(e,t){return r(this.target,e,t)}one(e,t){return i(this.target,e,t)}trigger(e,t={},n=`l`,r){o(this.target,e,t,n,r)}ancestors(e){let t=[],n=E(this.target,e);for(;n;)t.push(n),n=E(n.target,e);return t}closest(e){return E(this.target,e)}children(e){let t=te(this.target);return e===void 0?t:t.filter(t=>e in t)}descendants(e){return Array.from(this.target.querySelectorAll(`[data-mc]`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc).filter(t=>e===void 0||e in t)}},A=new Set;function j(e){return()=>{let t=Array.from(document.querySelectorAll(`[data-mc*="${e}"]`)).filter(e=>e instanceof HTMLElement);if(t.length===0)return;let n=customElements.get(e);for(let r of t){try{k.add(r,n.name,new n(r))}catch{if(`create`in n&&typeof n.create==`function`){let e=n.create(r);if(!S(e))throw`create() of Class ${n.name} did not return a McHost.`;e.setAttribute(`data-mc`,r.getAttribute(`data-mc`)??``),r.replaceWith(e),r=e}else throw`Class ${n.name} doesn't have a callable constructor AND class doesn't have a static .create() method.`}let t=r.getAttribute(`data-mc`).split(` `).filter(t=>t!==e&&t!==``).join(` `).trim();r.setAttribute(`data-mc`,t)}}}function M(e){if(A.has(e))return;A.add(e);let t=`./`+e.split(`-`).join(`/`)+`.js`,n=document.createElement(`script`);n.setAttribute(`src`,t),n.setAttribute(`blocking`,`render`),n.async=!0,n.setAttribute(`type`,`module`),n.setAttribute(`data-name`,e),n.setAttribute(`loading`,``),customElements.whenDefined(e).then(j(e)),n.addEventListener(`load`,t=>{A.delete(e),document.head.querySelector(`script[data-name="${e}"]`)?.remove()}),n.addEventListener(`error`,e=>{console.error(`could not load DC code from`,t)}),document.head.append(n)}function N(){[...document.querySelectorAll(`:not(:defined)`)].filter(e=>!!e&&!customElements.get(e.tagName.toLowerCase())&&!A.has(e.tagName.toLowerCase())).forEach(e=>{M(e.tagName.toLowerCase())}),[...document.querySelectorAll(`[data-mc]:not([data-mc=""]`)].filter(e=>!!e).forEach(e=>{(e.getAttribute(`data-mc`)?.split(` `).filter(e=>e!==``))?.forEach(e=>{let t=customElements.get(e);!A.has(e)&&!t?M(e):t&&j(e)()})})}var P=null;function F(e=!0){return e?P?!0:(P=new MutationObserver(N),setTimeout(()=>{P.observe(document.body,{childList:!0,subtree:!0}),N()},5),window.autoload??=F,!0):(P&&=(P.disconnect(),null),!1)}F.state=A;function I(e,t){return Object.defineProperty(t,"name",{value:e})}function ne(e){return class extends e{constructor(...e){super(...e)}}}function L(e,t,n=[],r){if(customElements.get(e)){console.warn(`IGNORED: Custom element "${e}" is already defined!`);return}if(!e.includes(`-`))throw Error(`createCustomElement: tagName must contain at least one hyphen ("-").`);let i=HTMLElement;r&&(i=document.createElement(r).constructor);let a=m(e);if(!(t.prototype instanceof D))return customElements.define(e,t),t;let o=I(a,class extends ne(i){constructor(e){super(),k.add(this,a,new t(this,e))}connectedCallback(){this.dispatchEvent(new CustomEvent(`_mcConnected`))}connectedMoveCallback(){this.dispatchEvent(new CustomEvent(`_mcConnectedMove`))}disconnectedCallback(){this.dispatchEvent(new CustomEvent(`_mcDisconnected`))}adoptedCallback(){this.dispatchEvent(new CustomEvent(`_mcAdopted`))}attributeChangedCallback(e,t,n){this.dispatchEvent(new CustomEvent(`_mcAttributeChanged`,{detail:{name:e,oldValue:t,newValue:n}}))}formResetCallback(){this.dispatchEvent(new CustomEvent(`_mcFormReset`))}static get observedAttributes(){return[...n]}});return customElements.define(e,o,{extends:r}),L.list||=[],L.list.push(e),o}function R(e){return customElements.get(e)}function z(){return L.list??[]}function B(e){let t=new Set,n=/\{[^\{\}]*\}/g;return(e.getAttributeNames?e.getAttributeNames():[]).filter(t=>e.getAttribute(t)?.match(n)).forEach(r=>{new Set(e.getAttribute(r)?.match(n)).forEach(e=>t.add(e.replace(/[\{\}]/g,``)))}),[...e.childNodes].filter(e=>e.nodeType===3&&(e.nodeValue||``).match(n)).forEach(e=>{(e?.nodeValue||``).match(n).forEach(e=>t.add(e.replace(/[\{\}]/g,``)))}),[...t]}var V=[`INPUT`,`SELECT`,`TEXTAREA`],H=class extends k{data={};oldDisplay=``;constructor(e){super(e),B(e).forEach(e=>this.data[e]=``),X(this),this.#attachCallbacks()}#attachCallbacks(){let e=this.target,t=!1;(e.getAttributeNames?e.getAttributeNames():[]).filter(t=>e.getAttribute(t)?.match(/\{[^\{\}]*\}/g)).forEach(t=>{let n=new Set(e.getAttribute(t)?.match(/\{[^\{\}]*\}/g));this.data.subscribe((r=>i=>{let a=r;n.forEach(e=>{a=a.replace(e,String(i[e.replace(/[\{\}]/g,``)]))}),e.setAttribute(t,a)})(e.getAttribute(t)??``))}),[...e.childNodes].filter(e=>e.nodeType===3&&(e.nodeValue||``).match(/\{[^\{\}]*\}/g)).forEach(n=>{t=!0;let r=new Set((n.nodeValue??``).match(/\{[^\{\}]*\}/g));this.data.subscribe((t=>i=>{let a=t;r.forEach(e=>{a=a.replace(e,String(i[e.replace(/[\{\}]/g,``)]))}),this.oldDisplay?e.style=this.oldDisplay:e.removeAttribute(`style`),delete this.oldDisplay,n.nodeValue=a})(n.nodeValue??``)),this.oldDisplay=e.getAttribute(`style`)||``,t&&!V.includes(e.tagName)&&e.tagName!==`FIELDSET`&&(e.style.display=`none`)})}onData(e){let t={};Object.keys(e.detail.data).forEach(n=>{this.data.hasOwnProperty(n)&&(t[n]=e.detail.data[n])}),JSON.stringify(t)!==JSON.stringify(this.data)&&Object.assign(this.data,t)}};function U(e){return[e,...e.querySelectorAll(`*`)].filter(e=>!!B(e).length).filter(e=>e?.tagName!==`STYLE`).reverse()}function W(e){U(e).forEach(e=>{e?._mc?._placeholders||k.add(e,`_placeholders`,new H(e))})}function G(e){return typeof e==`object`&&!!e}var K={};function q(e){let t=e.constructor,n=t.name,r=class extends t{#notify=!0;#callbacks=[];constructor(e){super(e);let t=this.constructor;t.callbacks=[],G(e)&&Object.getOwnPropertyNames(e).forEach(t=>{this[t]=e[t]})}get callbacks(){return this.#callbacks}set callbacks(e){this.#callbacks=e}[Symbol.toPrimitive](e){let t=this.valueOf();return e===`string`?String(t):e===`number`?Number(t):t}subscribe(e){return this.#callbacks.push(e),this}unsubscribe(e){return this.#callbacks=this.#callbacks.filter(t=>t!==e),this}bind(e){if(s()){if(G(this.valueOf())){W(e);let t=[e,...e.querySelectorAll(`[data-mc]`)].filter(e=>!!e?._mc?._placeholders);this.#callbacks.push(function(e){let n=u(e);t.forEach(e=>{e&&o(e,`data`,n)})}),this.notify()}else console.warn(`IGNORED - cannot bind a non-Object to the dom, IS:`,typeof this.valueOf(),this);return this}}notify(e){let t=G(this.valueOf())&&!(this.valueOf()instanceof Array)?structuredClone(Object.assign({},this)):this.valueOf();return e!==void 0&&(this.#notify=e),this.#notify&&this.#callbacks.forEach(e=>{e(t)}),this}};return K[n]=r,r}function J(e){return K[e.constructor.name]||q(e)}function Y(e){return(typeof e==`object`||typeof e==`function`)&&e!==null&&`subscribe`in e}function X(e,t){let n=e;return(t?[t]:[...Object.getOwnPropertyNames(e)]).forEach(t=>{let r=n[t];if(Object.prototype.hasOwnProperty.call(e,t)&&typeof r!=`function`&&!Y(r)){if(t[0]===`_`||r===void 0)return;let i=r,a=new(J(i))(i),o=function(){queueMicrotask(function(){a.notify()})};Object.defineProperty(e,t,{enumerable:!0,get(){if(G(a.valueOf())){let e=structuredClone(Object.assign({},a));queueMicrotask(function(){d(structuredClone(Object.assign({},a)),e)||o()})}return a},set(e){if(typeof e==typeof a.valueOf())if(G(a.valueOf())&&!(a.valueOf()instanceof Array))Y(a)||(a=new(J(e))(structuredClone(Object.assign({},e))),_(e,a)),Object.assign(a,e),a.notify();else{let t=a.valueOf(),n=a.callbacks;e!==t&&(a=new(J(e))(e),a.callbacks=n,o())}else console.warn(`IGNORED - cannot change observable types, IS:`,typeof a.valueOf(),a,`- CANNOT BECOME:`,typeof e)}}),n[t]=i}}),e}function Z(e){let t=Object.getPrototypeOf(e.prototype);function n(e,t){let n=e[t];Y(n)||X(e,t)}Object.hasOwn(t,`notify`)||Object.assign(t,{notify:function(e){return n(this,e),this[e].notify(),this},subscribe:function(e,t){return n(this,e),this[e].subscribe(t),this},bind:function(e,t){return n(this,e),this[e].bind(t),this}})}Z(k);var re=e=>e.tagName.toLowerCase(),Q=class{constructor(e){}},ie=class extends Q{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.form?new FormData(this.#e.form).get(this.#e.name)??null:null}set val(e){let t=[...this.#e.form?.querySelectorAll(`input[type="radio"][name="${this.#e.name}"]`)??[]];t.filter(t=>t.getAttribute(`value`)===e).shift().checked=!0}},ae=class extends Q{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.checked}set val(e){this.#e.checked=e}},oe=class extends Q{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.value}set val(e){this.#e.value=e}},se=class extends Q{#e;#multi=!1;constructor(e){super(e),this.#e=e,this.#multi=e.multiple}get val(){let e=[];return[...this.#e.querySelectorAll(`option`)].filter(e=>e.selected).forEach(t=>{e.push(t.value)}),this.#multi?e:e[0]}set val(e){e=typeof e==`string`?[e]:e,[...this.#e.querySelectorAll(`option`)].forEach(t=>{e.indexOf(t.value)>-1?t.selected=!0:t.selected=!1})}},ce=class extends Q{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.value||``}set val(e){this.#e.value=e}},le=e=>{let t=[...(e||document).querySelectorAll(`input,select,textarea`)],n={};return t.forEach(e=>{let t=e.getAttribute(`name`);if(t){let r=!1;switch(re(e)){case`input`:switch(e.type){case`radio`:r=new ie(e);break;case`checkbox`:r=new ae(e);break;default:r=new oe(e)}break;case`select`:r=new se(e);break;case`textarea`:r=new ce(e);break}if(r){let i=r;k.add(e,t,i),Object.defineProperty(n,t,{enumerable:!0,configurable:!0,get:()=>i.val,set:e=>{i.val!==e&&(i.val=e)}})}}}),n};function $(e,t,n){if(!s())return;let r=le(n),i=e;i[t]=Object.assign({},r),X(e,t);let a=i[t];_(r,a),[...n.querySelectorAll(`input, textarea, select`)].forEach(e=>{e.addEventListener(`input`,()=>{a.notify()})})}function ue(e){let t=Object.getPrototypeOf(e.prototype);Object.hasOwn(t,`formValues`)||Object.assign(t,{formValues:function(e,t){return $(this,t,e),this}})}export{a as BubbleController,k as DC,O as MC,D as McBase,F as autoload,x as bindTemplateEvents,_ as copyGettersSetters,h as debounce,d as deepEqual,L as defineCE,u as flattenObject,ue as formValuePlugin,$ as formValues,R as getCE,e as getMcEventName,g as htmlToElements,v as injectCSS,Y as isAlreadyObserved,s as isBrowser,S as isMcHost,c as isNativeObject,m as kebabToPascal,z as listCE,b as loadAssets,f as nameSpace,X as observe,Z as observePlugin,n as off,r as on,i as one,p as parse,y as processAssets,l as sortObject,o as trigger,t as trueEventName};
+function e(e){return`_mc`+e[0].toUpperCase()+e.substring(1)}function t(e,t){let n=t.toLowerCase();return`on`+n in e?n:`_mc`+t[0].toUpperCase()+t.substring(1)}function n(e,r,i){if(e){if(typeof e==`string`){document.querySelectorAll(e).forEach(e=>n(e,r,i));return}e.removeEventListener(t(e,r),i)}}function r(e,n,i,a=!1){if(e){if(typeof e==`string`){document.querySelectorAll(e).forEach(e=>r(e,n,i));return}return e.addEventListener(t(e,n),i,{capture:!1,once:a}),i}}function i(e,t,n){if(e){if(typeof e==`string`){document.querySelectorAll(e).forEach(e=>i(e,t,n));return}return r(e,t,n,!0),n}}var a=class{stopped=!1;constructor(){}stop(){this.stopped=!0}};function o(e,n,r={},i=`l`,s){if(!e)return;if(typeof e==`string`){document.querySelectorAll(e).forEach(e=>o(e,n,r,i));return}let c=/^_mc/.test(n)?n:t(e,n),l=s||new a,u=new CustomEvent(c,{detail:{data:r,control:l},bubbles:!1});l.stopped||/l/.test(i)&&(e.dispatchEvent(u),l.stopped)||/[ud]/.test(i)&&queueMicrotask(()=>{if(i.indexOf(`u`)>-1&&o(e.parentElement,c,r,`lu`,l),i.indexOf(`d`)>-1)for(let t of e.children)o(t,c,r,`ld`)})}function s(){return typeof window<`u`&&window.document!==void 0}function c(e){return typeof e==`object`&&!!e&&e.constructor===Object}function l(e){let t={},n=Object.keys(e).sort();for(let r=0;r<n.length;r++){let i=n[r],a=e[i];c(a)?t[i]=l(a):t[i]=a}return t}function u(e,t=!0){let n={},r=e,i=Object.getOwnPropertyNames(e);for(let e=0;e<i.length;e++){let t=i[e],a=r[t];if(a instanceof Object){let e=u(a,!1);for(let r in e)n[t+`.`+r]=e[r]}else n[t]=a}return t?l(n):n}function d(e,t){if(e===t||e!==e&&t!==t)return!0;if(typeof e!=`object`||!e||typeof t!=`object`||!t||e.constructor!==t.constructor)return!1;if(e instanceof Date)return e.getTime()===t.getTime();if(e instanceof RegExp)return e.toString()===t.toString();if(Array.isArray(e)){let n=t;if(e.length!==n.length)return!1;for(let t=0;t<e.length;t++)if(!d(e[t],n[t]))return!1;return!0}let n=e,r=t,i=Object.keys(n);if(i.length!==Object.keys(r).length)return!1;for(let e=0;e<i.length;e++){let t=i[e];if(!Object.prototype.hasOwnProperty.call(r,t)||!d(n[t],r[t]))return!1}return!0}function f(e,t={}){let n=t,r=typeof e==`string`?e.split(`.`):e;if(!(!n||!r[0]||!n[r[0]])){if(r.length>1){let e=n[r[0]];return c(e)?f(r.slice(1),e):void 0}return n[r[0]]}}function p(e,t,...n){let r=[e,t,...n];if(r.length>2){for(;r.length>1;)r[0]=p(r[0],r[1]),r.splice(1,1);return r[0]}if(typeof e==`string`){let n=e;return e.match(/\{[^\{\}]*\}/g)?.forEach(e=>{let r=f(e.substring(1,e.length-1),t);r!==void 0&&(n=n.replace(e,String(r)))}),n}else if(c(e)){let n=e;Object.keys(n).forEach(e=>{Object.prototype.hasOwnProperty.call(n,e)&&(n[e]=p(n[e],t))})}return e}function m(e){return e.split(`-`).map(e=>e.charAt(0).toUpperCase()+e.slice(1)).join(``)}function h(e,t){let n;return(...r)=>{clearTimeout(n),n=setTimeout(()=>{e(...r)},t)}}function ee(e){let t=document.createElement(`template`);return e=e.replace(/<([A-Za-z0-9\-]*)([^>\/]*)(\/>)/gi,`<$1$2></$1>`),t.innerHTML=e,t.content.normalize(),Array.from(t.content.childNodes)}function g(e,t){let n=Object.getOwnPropertyDescriptors(e);for(let[e,r]of Object.entries(n))(`get`in r||`set`in r)&&Object.defineProperty(t,e,r)}var _=new WeakMap;function v(e,t){let n=_.get(e)??new Set;if(n.has(t))return e.adoptedStyleSheets[0];n.add(t),_.set(e,n);let r=new CSSStyleSheet;return r.replaceSync(t),e.adoptedStyleSheets.push(r),r}function y(e,t){let n=e.target,r=n.shadowRoot;!r&&Object.keys(t).some(e=>e.indexOf(`shadow`)===0)&&(r=n.attachShadow({mode:`open`})),Object.keys(t).forEach(i=>{switch(i){case`css`:v(document,t[i]);break;case`targetCss`:v(document,t[i]);break;case`shadowCss`:v(r,t[i]);break;case`shadowHtml`:r.innerHTML=t[i],x(r,e);break;case`targetHtml`:n.innerHTML=t[i],x(n,e);break}})}function b(e,t){let n=t=>{let n=t.match(/^([a-z]+)([A-Z][a-z]*)$/);return n?`./${e.replace(/-/g,`/`)}.${n[1]}.${n[2].toLowerCase()}`:`./${e.replace(/-/g,`/`)}.${t.toLowerCase()}`};return Promise.all(t.map(async e=>{let t=n(e);try{let n=await fetch(t);if(!n.ok)return`file not found: ${t}`;if(t.endsWith(`json`)){let r=await n.text();try{return JSON.parse(r)}catch{return console.error(`could not JSON.parse() asset '${e}' from ${t}:\n`,r),null}}return n.text()}catch{return`file not found: ${t}`}}))}function x(e,t){let n=[...e.querySelectorAll(`*`)];for(let e of n){if(!(e instanceof HTMLElement))continue;let n=[...e.attributes];for(let i of n){let n=i.name.toLowerCase();if(!(`on`+n in e))continue;let a=i.value.trim().split(`|`);if(a.length<2)continue;let[s,c,l]=a;e.removeAttribute(i.name);let u;if(l)try{u=JSON.parse(l)}catch{u=l}s===`this`||s===``?r(e,n,()=>t.trigger(c,u)):r(e,n,()=>o(s,c,u))}}}function S(e,t){return typeof HTMLElement<`u`&&e instanceof HTMLElement&&`_mc`in e&&(t===void 0||t in e._mc)}function C(e,t,n={}){let r=e;`_mc`in e||(r._mc=new k(e));let i=r._mc;return t.length&&!i[t]&&(i[t]=n,e instanceof HTMLElement&&!e.getAttribute(`data-mc`)&&e.setAttribute(`data-mc`,``)),r}function w(e,t){if(!t)return;let n=e._mc;n&&(n[t]&&delete n[t],!Object.keys(n).length&&e instanceof HTMLElement&&e.hasAttribute(`data-mc`)&&e.removeAttribute(`data-mc`))}function te(e){queueMicrotask(()=>{e.trigger(`Init`,null)})}function T(e){let t=e.target,n=Object.getPrototypeOf(e),i=e,a=Object.getOwnPropertyNames(n).filter(e=>/^(on[A-Z]|one[A-Z])/.test(e)&&typeof n[e]==`function`);for(let e of a){let n=/^one/.test(e);r(t,e.replace(/^one?/,``),t=>i[e](t),n)}}function E(e){return Array.from(e.querySelectorAll(`[data-mc]:not(:scope [data-mc] [data-mc])`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc)}function D(e,t){let n=e.parentElement?.closest(`[data-mc]`);for(;n instanceof HTMLElement;){if(`_mc`in n){let e=n._mc;if(t===void 0||t in e)return e}n=n.parentElement?.closest(`[data-mc]`)}return null}var O=class{_target;constructor(e){if(this._target=new WeakRef(e||{}),this instanceof k&&this.constructor!==k){T(this);let e=this.constructor.tag;(e===void 0||e.toUpperCase()===this.target.tagName)&&te(this)}}get target(){return this._target.deref()}},ne=class extends O{constructor(e){super(e)}},k=class e extends O{static tag;static _assets={};static assets=[];static attributes={};constructor(t){super(t);let n=this.constructor;if(n===e)return;let r=this.target.tagName.toLowerCase();if(n.tag!==void 0&&r!==n.tag&&n.tag!==``){let t=document.createElement(n.tag);t.classList.add(r),n._originalTag=r,e.add(t,n.name,new n(t)),delete n._originalTag,r.includes(`-`)&&!this.target.isConnected?this.on(`connected`,()=>this.target.replaceWith(t)):this.target.replaceWith(t);return}let i=n.attributes;n.attributes&&Object.keys(n.attributes).forEach(e=>{this.target.setAttribute(e,i[e])});let a=n.assets.filter(e=>!n._assets[e]),o=this;if(n.hasOwnProperty(`_assets`)?y(this,n._assets):n.assets.length&&!n.hasOwnProperty(`_assets`)&&(n._assets={}),a.length?b(n._originalTag||r,a).then(e=>{let t={};a.forEach((n,r)=>{t[n]=e[r]}),y(this,t),n._assets=Object.assign({},n._assets,t);for(let e of[`css`,`targetCss`])t[e]!==void 0&&delete n._assets[e];n.assets=n.assets.filter(e=>e!==`css`&&e!==`targetCss`),o.trigger(`assets`,n._assets)}):[...Object.keys(n._assets)].length&&queueMicrotask(()=>o.trigger(`assets`,n._assets)),n.tag===``){this.target.remove();return}}getAssets(){return this.constructor._assets||{}}static add(e,t,n={}){return C(e,t,n)}static remove(e,t){w(e,t)}static get(e,t,n){if(!S(e))return;let r=e._mc[t];return r instanceof n?r:void 0}off(e,t){n(this.target,e,t)}on(e,t){return r(this.target,e,t)}one(e,t){return i(this.target,e,t)}trigger(e,t={},n=`l`,r){o(this.target,e,t,n,r)}ancestors(e){let t=[],n=D(this.target,e);for(;n;)t.push(n),n=D(n.target,e);return t}closest(e){return D(this.target,e)}children(e){let t=E(this.target);return e===void 0?t:t.filter(t=>e in t)}descendants(e){return Array.from(this.target.querySelectorAll(`[data-mc]`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc).filter(t=>e===void 0||e in t)}},A=new Set;function j(e){return()=>{let t=Array.from(document.querySelectorAll(`[data-mc*="${e}"]`)).filter(e=>e instanceof HTMLElement);if(t.length===0)return;let n=customElements.get(e);for(let r of t){try{k.add(r,n.name,new n(r))}catch{if(`create`in n&&typeof n.create==`function`){let e=n.create(r);if(!S(e))throw`create() of Class ${n.name} did not return a McHost.`;e.setAttribute(`data-mc`,r.getAttribute(`data-mc`)??``),r.replaceWith(e),r=e}else throw`Class ${n.name} doesn't have a callable constructor AND class doesn't have a static .create() method.`}let t=r.getAttribute(`data-mc`).split(` `).filter(t=>t!==e&&t!==``).join(` `).trim();r.setAttribute(`data-mc`,t)}}}function M(e){if(A.has(e))return;A.add(e);let t=`./`+e.split(`-`).join(`/`)+`.js`,n=document.createElement(`script`);n.setAttribute(`src`,t),n.setAttribute(`blocking`,`render`),n.async=!0,n.setAttribute(`type`,`module`),n.setAttribute(`data-name`,e),n.setAttribute(`loading`,``),customElements.whenDefined(e).then(j(e)),n.addEventListener(`load`,t=>{A.delete(e),document.head.querySelector(`script[data-name="${e}"]`)?.remove()}),n.addEventListener(`error`,e=>{console.error(`could not load DC code from`,t)}),document.head.append(n)}function N(){[...document.querySelectorAll(`:not(:defined)`)].filter(e=>!!e&&!customElements.get(e.tagName.toLowerCase())&&!A.has(e.tagName.toLowerCase())).forEach(e=>{M(e.tagName.toLowerCase())}),[...document.querySelectorAll(`[data-mc]:not([data-mc=""]`)].filter(e=>!!e).forEach(e=>{(e.getAttribute(`data-mc`)?.split(` `).filter(e=>e!==``))?.forEach(e=>{let t=customElements.get(e);!A.has(e)&&!t?M(e):t&&j(e)()})})}var P=null;function F(e=!0){return e?P?!0:(P=new MutationObserver(N),setTimeout(()=>{P.observe(document.body,{childList:!0,subtree:!0}),N()},5),window.autoload??=F,!0):(P&&=(P.disconnect(),null),!1)}F.state=A;function re(e,t){return Object.defineProperty(t,"name",{value:e})}function ie(e){return class extends e{constructor(...e){super(...e)}}}function I(e,t,n=[],r){if(customElements.get(e)){console.warn(`IGNORED: Custom element "${e}" is already defined!`);return}if(!e.includes(`-`))throw Error(`createCustomElement: tagName must contain at least one hyphen ("-").`);let i=HTMLElement;r&&(i=document.createElement(r).constructor);let a=m(e);if(!(t.prototype instanceof O))return customElements.define(e,t),t;let o=re(a,class extends ie(i){constructor(e){super(),k.add(this,a,new t(this,e))}connectedCallback(){this.dispatchEvent(new CustomEvent(`_mcConnected`))}connectedMoveCallback(){this.dispatchEvent(new CustomEvent(`_mcConnectedMove`))}disconnectedCallback(){this.dispatchEvent(new CustomEvent(`_mcDisconnected`))}adoptedCallback(){this.dispatchEvent(new CustomEvent(`_mcAdopted`))}attributeChangedCallback(e,t,n){this.dispatchEvent(new CustomEvent(`_mcAttributeChanged`,{detail:{name:e,oldValue:t,newValue:n}}))}formResetCallback(){this.dispatchEvent(new CustomEvent(`_mcFormReset`))}static get observedAttributes(){return[...n]}});return customElements.define(e,o,{extends:r}),I.list||=[],I.list.push(e),o}function L(e){return customElements.get(e)}function R(){return I.list??[]}function z(e){let t=new Set,n=/\{[^\{\}]*\}/g;return(e.getAttributeNames?e.getAttributeNames():[]).filter(t=>e.getAttribute(t)?.match(n)).forEach(r=>{new Set(e.getAttribute(r)?.match(n)).forEach(e=>t.add(e.replace(/[\{\}]/g,``)))}),[...e.childNodes].filter(e=>e.nodeType===3&&(e.nodeValue||``).match(n)).forEach(e=>{(e?.nodeValue||``).match(n).forEach(e=>t.add(e.replace(/[\{\}]/g,``)))}),[...t]}var B=[`INPUT`,`SELECT`,`TEXTAREA`],V=class extends k{data={};oldDisplay=``;constructor(e){super(e),z(e).forEach(e=>this.data[e]=``),Y(this),this.#e()}#e(){let e=this.target,t=!1;(e.getAttributeNames?e.getAttributeNames():[]).filter(t=>e.getAttribute(t)?.match(/\{[^\{\}]*\}/g)).forEach(t=>{let n=new Set(e.getAttribute(t)?.match(/\{[^\{\}]*\}/g));this.data.subscribe((r=>i=>{let a=r;n.forEach(e=>{a=a.replace(e,String(i[e.replace(/[\{\}]/g,``)]))}),e.setAttribute(t,a)})(e.getAttribute(t)??``))}),[...e.childNodes].filter(e=>e.nodeType===3&&(e.nodeValue||``).match(/\{[^\{\}]*\}/g)).forEach(n=>{t=!0;let r=new Set((n.nodeValue??``).match(/\{[^\{\}]*\}/g));this.data.subscribe((t=>i=>{let a=t;r.forEach(e=>{a=a.replace(e,String(i[e.replace(/[\{\}]/g,``)]))}),this.oldDisplay?e.style=this.oldDisplay:e.removeAttribute(`style`),delete this.oldDisplay,n.nodeValue=a})(n.nodeValue??``)),this.oldDisplay=e.getAttribute(`style`)||``,t&&!B.includes(e.tagName)&&e.tagName!==`FIELDSET`&&(e.style.display=`none`)})}onData(e){let t={};Object.keys(e.detail.data).forEach(n=>{this.data.hasOwnProperty(n)&&(t[n]=e.detail.data[n])}),JSON.stringify(t)!==JSON.stringify(this.data)&&Object.assign(this.data,t)}};function H(e){return[e,...e.querySelectorAll(`*`)].filter(e=>!!z(e).length).filter(e=>e?.tagName!==`STYLE`).reverse()}function U(e){H(e).forEach(e=>{e?._mc?._placeholders||k.add(e,`_placeholders`,new V(e))})}function W(e){return typeof e==`object`&&!!e}var G={};function K(e){let t=e.constructor,n=t.name,r=class extends t{#e=!0;#t=[];constructor(e){super(e);let t=this.constructor;t.callbacks=[],W(e)&&Object.getOwnPropertyNames(e).forEach(t=>{this[t]=e[t]})}get callbacks(){return this.#t}set callbacks(e){this.#t=e}[Symbol.toPrimitive](e){let t=this.valueOf();return e===`string`?String(t):e===`number`?Number(t):t}subscribe(e){return this.#t.push(e),this}unsubscribe(e){return this.#t=this.#t.filter(t=>t!==e),this}bind(e){if(s()){if(W(this.valueOf())){U(e);let t=[e,...e.querySelectorAll(`[data-mc]`)].filter(e=>!!e?._mc?._placeholders);this.#t.push(function(e){let n=u(e);t.forEach(e=>{e&&o(e,`data`,n)})}),this.notify()}else console.warn(`IGNORED - cannot bind a non-Object to the dom, IS:`,typeof this.valueOf(),this);return this}}notify(e){let t=W(this.valueOf())&&!(this.valueOf()instanceof Array)?structuredClone(Object.assign({},this)):this.valueOf();return e!==void 0&&(this.#e=e),this.#e&&this.#t.forEach(e=>{e(t)}),this}};return G[n]=r,r}function q(e){return G[e.constructor.name]||K(e)}function J(e){return(typeof e==`object`||typeof e==`function`)&&e!==null&&`subscribe`in e}function Y(e,t){let n=e;return(t?[t]:[...Object.getOwnPropertyNames(e)]).forEach(t=>{let r=n[t];if(Object.prototype.hasOwnProperty.call(e,t)&&typeof r!=`function`&&!J(r)){if(t[0]===`_`||r===void 0)return;let i=r,a=new(q(i))(i),o=function(){queueMicrotask(function(){a.notify()})};Object.defineProperty(e,t,{enumerable:!0,get(){if(W(a.valueOf())){let e=structuredClone(Object.assign({},a));queueMicrotask(function(){d(structuredClone(Object.assign({},a)),e)||o()})}return a},set(e){if(typeof e==typeof a.valueOf())if(W(a.valueOf())&&!(a.valueOf()instanceof Array))J(a)||(a=new(q(e))(structuredClone(Object.assign({},e))),g(e,a)),Object.assign(a,e),a.notify();else{let t=a.valueOf(),n=a.callbacks;e!==t&&(a=new(q(e))(e),a.callbacks=n,o())}else console.warn(`IGNORED - cannot change observable types, IS:`,typeof a.valueOf(),a,`- CANNOT BECOME:`,typeof e)}}),n[t]=i}}),e}function X(e){let t=Object.getPrototypeOf(e.prototype);function n(e,t){let n=e[t];J(n)||Y(e,t)}Object.hasOwn(t,`notify`)||Object.assign(t,{notify:function(e){return n(this,e),this[e].notify(),this},subscribe:function(e,t){return n(this,e),this[e].subscribe(t),this},bind:function(e,t){return n(this,e),this[e].bind(t),this}})}X(k);var ae=e=>e.tagName.toLowerCase(),Z=class{constructor(e){}},oe=class extends Z{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.form?new FormData(this.#e.form).get(this.#e.name)??null:null}set val(e){let t=[...this.#e.form?.querySelectorAll(`input[type="radio"][name="${this.#e.name}"]`)??[]];t.filter(t=>t.getAttribute(`value`)===e).shift().checked=!0}},se=class extends Z{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.checked}set val(e){this.#e.checked=e}},Q=class extends Z{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.value}set val(e){this.#e.value=e}},ce=class extends Z{#e;#t=!1;constructor(e){super(e),this.#e=e,this.#t=e.multiple}get val(){let e=[];return[...this.#e.querySelectorAll(`option`)].filter(e=>e.selected).forEach(t=>{e.push(t.value)}),this.#t?e:e[0]}set val(e){e=typeof e==`string`?[e]:e,[...this.#e.querySelectorAll(`option`)].forEach(t=>{e.indexOf(t.value)>-1?t.selected=!0:t.selected=!1})}},le=class extends Z{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.value||``}set val(e){this.#e.value=e}},ue=e=>{let t=[...(e||document).querySelectorAll(`input,select,textarea`)],n={};return t.forEach(e=>{let t=e.getAttribute(`name`);if(t){let r=!1;switch(ae(e)){case`input`:switch(e.type){case`radio`:r=new oe(e);break;case`checkbox`:r=new se(e);break;default:r=new Q(e)}break;case`select`:r=new ce(e);break;case`textarea`:r=new le(e);break}if(r){let i=r;k.add(e,t,i),Object.defineProperty(n,t,{enumerable:!0,configurable:!0,get:()=>i.val,set:e=>{i.val!==e&&(i.val=e)}})}}}),n};function $(e,t,n){if(!s())return;let r=ue(n),i=e;i[t]=Object.assign({},r),Y(e,t);let a=i[t];g(r,a),[...n.querySelectorAll(`input, textarea, select`)].forEach(e=>{e.addEventListener(`input`,()=>{a.notify()})})}function de(e){let t=Object.getPrototypeOf(e.prototype);Object.hasOwn(t,`formValues`)||Object.assign(t,{formValues:function(e,t){return $(this,t,e),this}})}export{a as BubbleController,k as DC,ne as MC,O as McBase,F as autoload,x as bindTemplateEvents,g as copyGettersSetters,h as debounce,d as deepEqual,I as defineCE,u as flattenObject,de as formValuePlugin,$ as formValues,L as getCE,e as getMcEventName,ee as htmlToElements,v as injectCSS,J as isAlreadyObserved,s as isBrowser,S as isMcHost,c as isNativeObject,m as kebabToPascal,R as listCE,b as loadAssets,f as nameSpace,Y as observe,X as observePlugin,n as off,r as on,i as one,p as parse,y as processAssets,l as sortObject,o as trigger,t as trueEventName};

package/dist/observables.min.js

@@ -1 +1 @@
-function e(e,t){let n=t.toLowerCase();return`on`+n in e?n:`_mc`+t[0].toUpperCase()+t.substring(1)}function t(n,r,i){if(n){if(typeof n==`string`){document.querySelectorAll(n).forEach(e=>t(e,r,i));return}n.removeEventListener(e(n,r),i)}}function n(t,r,i,a=!1){if(t){if(typeof t==`string`){document.querySelectorAll(t).forEach(e=>n(e,r,i));return}return t.addEventListener(e(t,r),i,{capture:!1,once:a}),i}}function r(e,t,i){if(e){if(typeof e==`string`){document.querySelectorAll(e).forEach(e=>r(e,t,i));return}return n(e,t,i,!0),i}}var i=class{stopped=!1;constructor(){}stop(){this.stopped=!0}};function a(t,n,r={},o=`l`,s){if(!t)return;if(typeof t==`string`){document.querySelectorAll(t).forEach(e=>a(e,n,r,o));return}let c=/^_mc/.test(n)?n:e(t,n),l=s||new i,u=new CustomEvent(c,{detail:{data:r,control:l},bubbles:!1});l.stopped||/l/.test(o)&&(t.dispatchEvent(u),l.stopped)||/[ud]/.test(o)&&queueMicrotask(()=>{if(o.indexOf(`u`)>-1&&a(t.parentElement,c,r,`lu`,l),o.indexOf(`d`)>-1)for(let e of t.children)a(e,c,r,`ld`)})}function o(){return typeof window<`u`&&window.document!==void 0}function s(e){return typeof e==`object`&&!!e&&e.constructor===Object}function c(e){let t={},n=Object.keys(e).sort();for(let r=0;r<n.length;r++){let i=n[r],a=e[i];s(a)?t[i]=c(a):t[i]=a}return t}function l(e,t=!0){let n={},r=e,i=Object.getOwnPropertyNames(e);for(let e=0;e<i.length;e++){let t=i[e],a=r[t];if(a instanceof Object){let e=l(a,!1);for(let r in e)n[t+`.`+r]=e[r]}else n[t]=a}return t?c(n):n}function u(e,t){if(e===t||e!==e&&t!==t)return!0;if(typeof e!=`object`||!e||typeof t!=`object`||!t||e.constructor!==t.constructor)return!1;if(e instanceof Date)return e.getTime()===t.getTime();if(e instanceof RegExp)return e.toString()===t.toString();if(Array.isArray(e)){let n=t;if(e.length!==n.length)return!1;for(let t=0;t<e.length;t++)if(!u(e[t],n[t]))return!1;return!0}let n=e,r=t,i=Object.keys(n);if(i.length!==Object.keys(r).length)return!1;for(let e=0;e<i.length;e++){let t=i[e];if(!Object.prototype.hasOwnProperty.call(r,t)||!u(n[t],r[t]))return!1}return!0}function d(e,t){let n=Object.getOwnPropertyDescriptors(e);for(let[e,r]of Object.entries(n))(`get`in r||`set`in r)&&Object.defineProperty(t,e,r)}function f(e,t){let n=new CSSStyleSheet;return n.replaceSync(t),e.adoptedStyleSheets.push(n),n}function p(e,t){let n=e.target,r=n.shadowRoot;!r&&Object.keys(t).some(e=>e.indexOf(`shadow`)===0)&&(r=n.attachShadow({mode:`open`})),Object.keys(t).forEach(i=>{switch(i){case`css`:f(document,t[i]);break;case`targetCss`:f(document,t[i]);break;case`shadowCss`:f(r,t[i]);break;case`shadowHtml`:r.innerHTML=t[i],h(r,e);break;case`targetHtml`:n.innerHTML=t[i],h(n,e);break}})}function m(e,t){let n=t=>{let n=t.match(/^([a-z]+)([A-Z][a-z]*)$/);return n?`./${e.replace(/-/g,`/`)}.${n[1]}.${n[2].toLowerCase()}`:`./${e.replace(/-/g,`/`)}.${t.toLowerCase()}`};return Promise.all(t.map(async e=>{let t=n(e);try{let n=await fetch(t);if(!n.ok)return`file not found: ${t}`;if(t.endsWith(`json`)){let r=await n.text();try{return JSON.parse(r)}catch{return console.error(`could not JSON.parse() asset '${e}' from ${t}:\n`,r),null}}return n.text()}catch{return`file not found: ${t}`}}))}function h(e,t){let r=[...e.querySelectorAll(`*`)];for(let e of r){if(!(e instanceof HTMLElement))continue;let r=[...e.attributes];for(let i of r){let r=i.name.toLowerCase();if(!(`on`+r in e))continue;let o=i.value.trim().split(`|`);if(o.length<2)continue;let[s,c,l]=o;e.removeAttribute(i.name);let u;if(l)try{u=JSON.parse(l)}catch{u=l}s===`this`||s===``?n(e,r,()=>t.trigger(c,u)):n(e,r,()=>a(s,c,u))}}}function g(e,t){return typeof HTMLElement<`u`&&e instanceof HTMLElement&&`_mc`in e&&(t===void 0||t in e._mc)}function _(e,t,n={}){let r=e;`_mc`in e||(r._mc=new w(e));let i=r._mc;return t.length&&!i[t]&&(i[t]=n,e instanceof HTMLElement&&!e.getAttribute(`data-mc`)&&e.setAttribute(`data-mc`,``)),r}function v(e,t){if(!t)return;let n=e._mc;n&&(n[t]&&delete n[t],!Object.keys(n).length&&e instanceof HTMLElement&&e.hasAttribute(`data-mc`)&&e.removeAttribute(`data-mc`))}function y(e){queueMicrotask(()=>{e.trigger(`Init`,null)})}function b(e){let t=e.target,r=Object.getPrototypeOf(e),i=e,a=Object.getOwnPropertyNames(r).filter(e=>/^(on[A-Z]|one[A-Z])/.test(e)&&typeof r[e]==`function`);for(let e of a){let r=/^one/.test(e);n(t,e.replace(/^one?/,``),t=>i[e](t),r)}}function x(e){return Array.from(e.querySelectorAll(`[data-mc]:not(:scope [data-mc] [data-mc])`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc)}function S(e,t){let n=e.parentElement?.closest(`[data-mc]`);for(;n instanceof HTMLElement;){if(`_mc`in n){let e=n._mc;if(t===void 0||t in e)return e}n=n.parentElement?.closest(`[data-mc]`)}return null}var C=class{_target;constructor(e){if(this._target=new WeakRef(e||{}),this instanceof w&&this.constructor!==w){b(this);let e=this.constructor.tag;(e===void 0||e.toUpperCase()===this.target.tagName)&&y(this)}}get target(){return this._target.deref()}},w=class e extends C{static tag;static _assets={};static assets=[];static attributes={};constructor(t){super(t);let n=this.constructor;if(n===e)return;let r=this.target.tagName.toLowerCase();if(n.tag!==void 0&&r!==n.tag&&n.tag!==``){let t=document.createElement(n.tag);t.classList.add(r),e.add(t,n.name,new n(t)),r.includes(`-`)&&!this.target.isConnected?this.on(`connected`,()=>this.target.replaceWith(t)):this.target.replaceWith(t);return}let i=n.attributes;n.attributes&&Object.keys(n.attributes).forEach(e=>{this.target.setAttribute(e,i[e])});let a=n.assets.filter(e=>!n._assets[e]),o=this;if(n.hasOwnProperty(`_assets`)?p(this,n._assets):n.assets.length&&!n.hasOwnProperty(`_assets`)&&(n._assets={}),a.length?m(r,a).then(e=>{let t={};a.forEach((n,r)=>{t[n]=e[r]}),p(this,t),n._assets=Object.assign({},n._assets,t),o.trigger(`assets`,n._assets)}):[...Object.keys(n._assets)].length&&queueMicrotask(()=>o.trigger(`assets`,n._assets)),n.tag===``){this.target.remove();return}}getAssets(){return this.constructor._assets||{}}static add(e,t,n={}){return _(e,t,n)}static remove(e,t){v(e,t)}static get(e,t,n){if(!g(e))return;let r=e._mc[t];return r instanceof n?r:void 0}off(e,n){t(this.target,e,n)}on(e,t){return n(this.target,e,t)}one(e,t){return r(this.target,e,t)}trigger(e,t={},n=`l`,r){a(this.target,e,t,n,r)}ancestors(e){let t=[],n=S(this.target,e);for(;n;)t.push(n),n=S(n.target,e);return t}closest(e){return S(this.target,e)}children(e){let t=x(this.target);return e===void 0?t:t.filter(t=>e in t)}descendants(e){return Array.from(this.target.querySelectorAll(`[data-mc]`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc).filter(t=>e===void 0||e in t)}};function T(e){let t=new Set,n=/\{[^\{\}]*\}/g;return(e.getAttributeNames?e.getAttributeNames():[]).filter(t=>e.getAttribute(t)?.match(n)).forEach(r=>{new Set(e.getAttribute(r)?.match(n)).forEach(e=>t.add(e.replace(/[\{\}]/g,``)))}),[...e.childNodes].filter(e=>e.nodeType===3&&(e.nodeValue||``).match(n)).forEach(e=>{(e?.nodeValue||``).match(n).forEach(e=>t.add(e.replace(/[\{\}]/g,``)))}),[...t]}var E=[`INPUT`,`SELECT`,`TEXTAREA`],D=class extends w{data={};oldDisplay=``;constructor(e){super(e),T(e).forEach(e=>this.data[e]=``),F(this),this.#attachCallbacks()}#attachCallbacks(){let e=this.target,t=!1;(e.getAttributeNames?e.getAttributeNames():[]).filter(t=>e.getAttribute(t)?.match(/\{[^\{\}]*\}/g)).forEach(t=>{let n=new Set(e.getAttribute(t)?.match(/\{[^\{\}]*\}/g));this.data.subscribe((r=>i=>{let a=r;n.forEach(e=>{a=a.replace(e,String(i[e.replace(/[\{\}]/g,``)]))}),e.setAttribute(t,a)})(e.getAttribute(t)??``))}),[...e.childNodes].filter(e=>e.nodeType===3&&(e.nodeValue||``).match(/\{[^\{\}]*\}/g)).forEach(n=>{t=!0;let r=new Set((n.nodeValue??``).match(/\{[^\{\}]*\}/g));this.data.subscribe((t=>i=>{let a=t;r.forEach(e=>{a=a.replace(e,String(i[e.replace(/[\{\}]/g,``)]))}),this.oldDisplay?e.style=this.oldDisplay:e.removeAttribute(`style`),delete this.oldDisplay,n.nodeValue=a})(n.nodeValue??``)),this.oldDisplay=e.getAttribute(`style`)||``,t&&!E.includes(e.tagName)&&e.tagName!==`FIELDSET`&&(e.style.display=`none`)})}onData(e){let t={};Object.keys(e.detail.data).forEach(n=>{this.data.hasOwnProperty(n)&&(t[n]=e.detail.data[n])}),JSON.stringify(t)!==JSON.stringify(this.data)&&Object.assign(this.data,t)}};function O(e){return[e,...e.querySelectorAll(`*`)].filter(e=>!!T(e).length).filter(e=>e?.tagName!==`STYLE`).reverse()}function k(e){O(e).forEach(e=>{e?._mc?._placeholders||w.add(e,`_placeholders`,new D(e))})}function A(e){return typeof e==`object`&&!!e}var j={};function M(e){let t=e.constructor,n=t.name,r=class extends t{#notify=!0;#callbacks=[];constructor(e){super(e);let t=this.constructor;t.callbacks=[],A(e)&&Object.getOwnPropertyNames(e).forEach(t=>{this[t]=e[t]})}get callbacks(){return this.#callbacks}set callbacks(e){this.#callbacks=e}[Symbol.toPrimitive](e){let t=this.valueOf();return e===`string`?String(t):e===`number`?Number(t):t}subscribe(e){return this.#callbacks.push(e),this}unsubscribe(e){return this.#callbacks=this.#callbacks.filter(t=>t!==e),this}bind(e){if(o()){if(A(this.valueOf())){k(e);let t=[e,...e.querySelectorAll(`[data-mc]`)].filter(e=>!!e?._mc?._placeholders);this.#callbacks.push(function(e){let n=l(e);t.forEach(e=>{e&&a(e,`data`,n)})}),this.notify()}else console.warn(`IGNORED - cannot bind a non-Object to the dom, IS:`,typeof this.valueOf(),this);return this}}notify(e){let t=A(this.valueOf())&&!(this.valueOf()instanceof Array)?structuredClone(Object.assign({},this)):this.valueOf();return e!==void 0&&(this.#notify=e),this.#notify&&this.#callbacks.forEach(e=>{e(t)}),this}};return j[n]=r,r}function N(e){return j[e.constructor.name]||M(e)}function P(e){return(typeof e==`object`||typeof e==`function`)&&e!==null&&`subscribe`in e}function F(e,t){let n=e;return(t?[t]:[...Object.getOwnPropertyNames(e)]).forEach(t=>{let r=n[t];if(Object.prototype.hasOwnProperty.call(e,t)&&typeof r!=`function`&&!P(r)){if(t[0]===`_`||r===void 0)return;let i=r,a=new(N(i))(i),o=function(){queueMicrotask(function(){a.notify()})};Object.defineProperty(e,t,{enumerable:!0,get(){if(A(a.valueOf())){let e=structuredClone(Object.assign({},a));queueMicrotask(function(){u(structuredClone(Object.assign({},a)),e)||o()})}return a},set(e){if(typeof e==typeof a.valueOf())if(A(a.valueOf())&&!(a.valueOf()instanceof Array))P(a)||(a=new(N(e))(structuredClone(Object.assign({},e))),d(e,a)),Object.assign(a,e),a.notify();else{let t=a.valueOf(),n=a.callbacks;e!==t&&(a=new(N(e))(e),a.callbacks=n,o())}else console.warn(`IGNORED - cannot change observable types, IS:`,typeof a.valueOf(),a,`- CANNOT BECOME:`,typeof e)}}),n[t]=i}}),e}function I(e){let t=Object.getPrototypeOf(e.prototype);function n(e,t){let n=e[t];P(n)||F(e,t)}Object.hasOwn(t,`notify`)||Object.assign(t,{notify:function(e){return n(this,e),this[e].notify(),this},subscribe:function(e,t){return n(this,e),this[e].subscribe(t),this},bind:function(e,t){return n(this,e),this[e].bind(t),this}})}export{P as isAlreadyObserved,F as observe,I as observePlugin};
+function e(e,t){let n=t.toLowerCase();return`on`+n in e?n:`_mc`+t[0].toUpperCase()+t.substring(1)}function t(n,r,i){if(n){if(typeof n==`string`){document.querySelectorAll(n).forEach(e=>t(e,r,i));return}n.removeEventListener(e(n,r),i)}}function n(t,r,i,a=!1){if(t){if(typeof t==`string`){document.querySelectorAll(t).forEach(e=>n(e,r,i));return}return t.addEventListener(e(t,r),i,{capture:!1,once:a}),i}}function r(e,t,i){if(e){if(typeof e==`string`){document.querySelectorAll(e).forEach(e=>r(e,t,i));return}return n(e,t,i,!0),i}}var i=class{stopped=!1;constructor(){}stop(){this.stopped=!0}};function a(t,n,r={},o=`l`,s){if(!t)return;if(typeof t==`string`){document.querySelectorAll(t).forEach(e=>a(e,n,r,o));return}let c=/^_mc/.test(n)?n:e(t,n),l=s||new i,u=new CustomEvent(c,{detail:{data:r,control:l},bubbles:!1});l.stopped||/l/.test(o)&&(t.dispatchEvent(u),l.stopped)||/[ud]/.test(o)&&queueMicrotask(()=>{if(o.indexOf(`u`)>-1&&a(t.parentElement,c,r,`lu`,l),o.indexOf(`d`)>-1)for(let e of t.children)a(e,c,r,`ld`)})}function o(){return typeof window<`u`&&window.document!==void 0}function s(e){return typeof e==`object`&&!!e&&e.constructor===Object}function c(e){let t={},n=Object.keys(e).sort();for(let r=0;r<n.length;r++){let i=n[r],a=e[i];s(a)?t[i]=c(a):t[i]=a}return t}function l(e,t=!0){let n={},r=e,i=Object.getOwnPropertyNames(e);for(let e=0;e<i.length;e++){let t=i[e],a=r[t];if(a instanceof Object){let e=l(a,!1);for(let r in e)n[t+`.`+r]=e[r]}else n[t]=a}return t?c(n):n}function u(e,t){if(e===t||e!==e&&t!==t)return!0;if(typeof e!=`object`||!e||typeof t!=`object`||!t||e.constructor!==t.constructor)return!1;if(e instanceof Date)return e.getTime()===t.getTime();if(e instanceof RegExp)return e.toString()===t.toString();if(Array.isArray(e)){let n=t;if(e.length!==n.length)return!1;for(let t=0;t<e.length;t++)if(!u(e[t],n[t]))return!1;return!0}let n=e,r=t,i=Object.keys(n);if(i.length!==Object.keys(r).length)return!1;for(let e=0;e<i.length;e++){let t=i[e];if(!Object.prototype.hasOwnProperty.call(r,t)||!u(n[t],r[t]))return!1}return!0}function d(e,t){let n=Object.getOwnPropertyDescriptors(e);for(let[e,r]of Object.entries(n))(`get`in r||`set`in r)&&Object.defineProperty(t,e,r)}var f=new WeakMap;function p(e,t){let n=f.get(e)??new Set;if(n.has(t))return e.adoptedStyleSheets[0];n.add(t),f.set(e,n);let r=new CSSStyleSheet;return r.replaceSync(t),e.adoptedStyleSheets.push(r),r}function m(e,t){let n=e.target,r=n.shadowRoot;!r&&Object.keys(t).some(e=>e.indexOf(`shadow`)===0)&&(r=n.attachShadow({mode:`open`})),Object.keys(t).forEach(i=>{switch(i){case`css`:p(document,t[i]);break;case`targetCss`:p(document,t[i]);break;case`shadowCss`:p(r,t[i]);break;case`shadowHtml`:r.innerHTML=t[i],g(r,e);break;case`targetHtml`:n.innerHTML=t[i],g(n,e);break}})}function h(e,t){let n=t=>{let n=t.match(/^([a-z]+)([A-Z][a-z]*)$/);return n?`./${e.replace(/-/g,`/`)}.${n[1]}.${n[2].toLowerCase()}`:`./${e.replace(/-/g,`/`)}.${t.toLowerCase()}`};return Promise.all(t.map(async e=>{let t=n(e);try{let n=await fetch(t);if(!n.ok)return`file not found: ${t}`;if(t.endsWith(`json`)){let r=await n.text();try{return JSON.parse(r)}catch{return console.error(`could not JSON.parse() asset '${e}' from ${t}:\n`,r),null}}return n.text()}catch{return`file not found: ${t}`}}))}function g(e,t){let r=[...e.querySelectorAll(`*`)];for(let e of r){if(!(e instanceof HTMLElement))continue;let r=[...e.attributes];for(let i of r){let r=i.name.toLowerCase();if(!(`on`+r in e))continue;let o=i.value.trim().split(`|`);if(o.length<2)continue;let[s,c,l]=o;e.removeAttribute(i.name);let u;if(l)try{u=JSON.parse(l)}catch{u=l}s===`this`||s===``?n(e,r,()=>t.trigger(c,u)):n(e,r,()=>a(s,c,u))}}}function _(e,t){return typeof HTMLElement<`u`&&e instanceof HTMLElement&&`_mc`in e&&(t===void 0||t in e._mc)}function v(e,t,n={}){let r=e;`_mc`in e||(r._mc=new T(e));let i=r._mc;return t.length&&!i[t]&&(i[t]=n,e instanceof HTMLElement&&!e.getAttribute(`data-mc`)&&e.setAttribute(`data-mc`,``)),r}function y(e,t){if(!t)return;let n=e._mc;n&&(n[t]&&delete n[t],!Object.keys(n).length&&e instanceof HTMLElement&&e.hasAttribute(`data-mc`)&&e.removeAttribute(`data-mc`))}function b(e){queueMicrotask(()=>{e.trigger(`Init`,null)})}function x(e){let t=e.target,r=Object.getPrototypeOf(e),i=e,a=Object.getOwnPropertyNames(r).filter(e=>/^(on[A-Z]|one[A-Z])/.test(e)&&typeof r[e]==`function`);for(let e of a){let r=/^one/.test(e);n(t,e.replace(/^one?/,``),t=>i[e](t),r)}}function S(e){return Array.from(e.querySelectorAll(`[data-mc]:not(:scope [data-mc] [data-mc])`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc)}function C(e,t){let n=e.parentElement?.closest(`[data-mc]`);for(;n instanceof HTMLElement;){if(`_mc`in n){let e=n._mc;if(t===void 0||t in e)return e}n=n.parentElement?.closest(`[data-mc]`)}return null}var w=class{_target;constructor(e){if(this._target=new WeakRef(e||{}),this instanceof T&&this.constructor!==T){x(this);let e=this.constructor.tag;(e===void 0||e.toUpperCase()===this.target.tagName)&&b(this)}}get target(){return this._target.deref()}},T=class e extends w{static tag;static _assets={};static assets=[];static attributes={};constructor(t){super(t);let n=this.constructor;if(n===e)return;let r=this.target.tagName.toLowerCase();if(n.tag!==void 0&&r!==n.tag&&n.tag!==``){let t=document.createElement(n.tag);t.classList.add(r),n._originalTag=r,e.add(t,n.name,new n(t)),delete n._originalTag,r.includes(`-`)&&!this.target.isConnected?this.on(`connected`,()=>this.target.replaceWith(t)):this.target.replaceWith(t);return}let i=n.attributes;n.attributes&&Object.keys(n.attributes).forEach(e=>{this.target.setAttribute(e,i[e])});let a=n.assets.filter(e=>!n._assets[e]),o=this;if(n.hasOwnProperty(`_assets`)?m(this,n._assets):n.assets.length&&!n.hasOwnProperty(`_assets`)&&(n._assets={}),a.length?h(n._originalTag||r,a).then(e=>{let t={};a.forEach((n,r)=>{t[n]=e[r]}),m(this,t),n._assets=Object.assign({},n._assets,t);for(let e of[`css`,`targetCss`])t[e]!==void 0&&delete n._assets[e];n.assets=n.assets.filter(e=>e!==`css`&&e!==`targetCss`),o.trigger(`assets`,n._assets)}):[...Object.keys(n._assets)].length&&queueMicrotask(()=>o.trigger(`assets`,n._assets)),n.tag===``){this.target.remove();return}}getAssets(){return this.constructor._assets||{}}static add(e,t,n={}){return v(e,t,n)}static remove(e,t){y(e,t)}static get(e,t,n){if(!_(e))return;let r=e._mc[t];return r instanceof n?r:void 0}off(e,n){t(this.target,e,n)}on(e,t){return n(this.target,e,t)}one(e,t){return r(this.target,e,t)}trigger(e,t={},n=`l`,r){a(this.target,e,t,n,r)}ancestors(e){let t=[],n=C(this.target,e);for(;n;)t.push(n),n=C(n.target,e);return t}closest(e){return C(this.target,e)}children(e){let t=S(this.target);return e===void 0?t:t.filter(t=>e in t)}descendants(e){return Array.from(this.target.querySelectorAll(`[data-mc]`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc).filter(t=>e===void 0||e in t)}};function E(e){let t=new Set,n=/\{[^\{\}]*\}/g;return(e.getAttributeNames?e.getAttributeNames():[]).filter(t=>e.getAttribute(t)?.match(n)).forEach(r=>{new Set(e.getAttribute(r)?.match(n)).forEach(e=>t.add(e.replace(/[\{\}]/g,``)))}),[...e.childNodes].filter(e=>e.nodeType===3&&(e.nodeValue||``).match(n)).forEach(e=>{(e?.nodeValue||``).match(n).forEach(e=>t.add(e.replace(/[\{\}]/g,``)))}),[...t]}var D=[`INPUT`,`SELECT`,`TEXTAREA`],O=class extends T{data={};oldDisplay=``;constructor(e){super(e),E(e).forEach(e=>this.data[e]=``),I(this),this.#e()}#e(){let e=this.target,t=!1;(e.getAttributeNames?e.getAttributeNames():[]).filter(t=>e.getAttribute(t)?.match(/\{[^\{\}]*\}/g)).forEach(t=>{let n=new Set(e.getAttribute(t)?.match(/\{[^\{\}]*\}/g));this.data.subscribe((r=>i=>{let a=r;n.forEach(e=>{a=a.replace(e,String(i[e.replace(/[\{\}]/g,``)]))}),e.setAttribute(t,a)})(e.getAttribute(t)??``))}),[...e.childNodes].filter(e=>e.nodeType===3&&(e.nodeValue||``).match(/\{[^\{\}]*\}/g)).forEach(n=>{t=!0;let r=new Set((n.nodeValue??``).match(/\{[^\{\}]*\}/g));this.data.subscribe((t=>i=>{let a=t;r.forEach(e=>{a=a.replace(e,String(i[e.replace(/[\{\}]/g,``)]))}),this.oldDisplay?e.style=this.oldDisplay:e.removeAttribute(`style`),delete this.oldDisplay,n.nodeValue=a})(n.nodeValue??``)),this.oldDisplay=e.getAttribute(`style`)||``,t&&!D.includes(e.tagName)&&e.tagName!==`FIELDSET`&&(e.style.display=`none`)})}onData(e){let t={};Object.keys(e.detail.data).forEach(n=>{this.data.hasOwnProperty(n)&&(t[n]=e.detail.data[n])}),JSON.stringify(t)!==JSON.stringify(this.data)&&Object.assign(this.data,t)}};function k(e){return[e,...e.querySelectorAll(`*`)].filter(e=>!!E(e).length).filter(e=>e?.tagName!==`STYLE`).reverse()}function A(e){k(e).forEach(e=>{e?._mc?._placeholders||T.add(e,`_placeholders`,new O(e))})}function j(e){return typeof e==`object`&&!!e}var M={};function N(e){let t=e.constructor,n=t.name,r=class extends t{#e=!0;#t=[];constructor(e){super(e);let t=this.constructor;t.callbacks=[],j(e)&&Object.getOwnPropertyNames(e).forEach(t=>{this[t]=e[t]})}get callbacks(){return this.#t}set callbacks(e){this.#t=e}[Symbol.toPrimitive](e){let t=this.valueOf();return e===`string`?String(t):e===`number`?Number(t):t}subscribe(e){return this.#t.push(e),this}unsubscribe(e){return this.#t=this.#t.filter(t=>t!==e),this}bind(e){if(o()){if(j(this.valueOf())){A(e);let t=[e,...e.querySelectorAll(`[data-mc]`)].filter(e=>!!e?._mc?._placeholders);this.#t.push(function(e){let n=l(e);t.forEach(e=>{e&&a(e,`data`,n)})}),this.notify()}else console.warn(`IGNORED - cannot bind a non-Object to the dom, IS:`,typeof this.valueOf(),this);return this}}notify(e){let t=j(this.valueOf())&&!(this.valueOf()instanceof Array)?structuredClone(Object.assign({},this)):this.valueOf();return e!==void 0&&(this.#e=e),this.#e&&this.#t.forEach(e=>{e(t)}),this}};return M[n]=r,r}function P(e){return M[e.constructor.name]||N(e)}function F(e){return(typeof e==`object`||typeof e==`function`)&&e!==null&&`subscribe`in e}function I(e,t){let n=e;return(t?[t]:[...Object.getOwnPropertyNames(e)]).forEach(t=>{let r=n[t];if(Object.prototype.hasOwnProperty.call(e,t)&&typeof r!=`function`&&!F(r)){if(t[0]===`_`||r===void 0)return;let i=r,a=new(P(i))(i),o=function(){queueMicrotask(function(){a.notify()})};Object.defineProperty(e,t,{enumerable:!0,get(){if(j(a.valueOf())){let e=structuredClone(Object.assign({},a));queueMicrotask(function(){u(structuredClone(Object.assign({},a)),e)||o()})}return a},set(e){if(typeof e==typeof a.valueOf())if(j(a.valueOf())&&!(a.valueOf()instanceof Array))F(a)||(a=new(P(e))(structuredClone(Object.assign({},e))),d(e,a)),Object.assign(a,e),a.notify();else{let t=a.valueOf(),n=a.callbacks;e!==t&&(a=new(P(e))(e),a.callbacks=n,o())}else console.warn(`IGNORED - cannot change observable types, IS:`,typeof a.valueOf(),a,`- CANNOT BECOME:`,typeof e)}}),n[t]=i}}),e}function L(e){let t=Object.getPrototypeOf(e.prototype);function n(e,t){let n=e[t];F(n)||I(e,t)}Object.hasOwn(t,`notify`)||Object.assign(t,{notify:function(e){return n(this,e),this[e].notify(),this},subscribe:function(e,t){return n(this,e),this[e].subscribe(t),this},bind:function(e,t){return n(this,e),this[e].bind(t),this}})}export{F as isAlreadyObserved,I as observe,L as observePlugin};

package/dist/state/formValues.d.ts

@@ -1,11 +1,22 @@
 /**
 Two-way binding between DOM form controls (`input`, `select`, `textarea`) and an observable
 object property. Reads reflect live DOM values; writes update the controls synchronously.
-Most likely you will only need the the first variant mentioned in the examples below.
 
 @module Form Values
 
-@example Plugin — chainable instance method on DC components
+Two APIs are provided for different contexts:
+
+- **`formValues()`** — standalone function for general usage outside the MC ecosystem.
+  Call it on any plain object to bind form controls to a new observable property. You manage
+  subscriptions and bindings manually on the resulting data object.
+
+- **`formValuePlugin()`** — used inside MC custom elements (classes extending `DC`).
+  It attaches `.formValues()` as a chainable instance method that implicitly creates both the
+  form-values binding and the underlying observable wrapper. Just call
+  `this.formValues(this.target, 'formData')` and chain `.subscribe()` / `.bind()` — everything
+  is set up for you automatically.
+
+@example Plugin — inside an MC custom element (recommended within DC classes)
 ```ts
 import { DC, defineCE, formValuePlugin } from '@twobirds/microcomponents';
 
@@ -25,7 +36,7 @@ class CheckoutForm extends DC {
 defineCE('checkout-form', CheckoutForm);
 ```
 
-@example Standalone function — bind a plain object to a form in the DOM
+@example Standalone — outside the MC ecosystem (plain objects, vanilla JS, etc.)
 ```ts
 import { formValues } from '@twobirds/microcomponents/formValues';
 

package/dist/state/formValues.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"formValues.d.ts","sourceRoot":"","sources":["../../src/state/formValues.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoCE;AA8SF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuCE;AACF,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,EAC1C,YAAY,EAAE,CAAC,EACf,YAAY,EAAE,MAAM,CAAC,GAAG,MAAM,EAC9B,GAAG,EAAE,WAAW,GAAG,UAAU,QAuB7B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+BE;AACF,wBAAgB,eAAe,CAAC,KAAK,EAAE,GAAG,QA2BzC;AAED,OAAO,QAAQ,YAAY,CAAC;IAC3B,UAAiB,MAAM,CAAC,OAAO,SAAS,MAAM,GAAG,MAAM;QACtD,UAAU,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;KACnD;CACD"}
+{"version":3,"file":"formValues.d.ts","sourceRoot":"","sources":["../../src/state/formValues.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+CE;AA8SF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuCE;AACF,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,EAC1C,YAAY,EAAE,CAAC,EACf,YAAY,EAAE,MAAM,CAAC,GAAG,MAAM,EAC9B,GAAG,EAAE,WAAW,GAAG,UAAU,QAuB7B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+BE;AACF,wBAAgB,eAAe,CAAC,KAAK,EAAE,GAAG,QA2BzC;AAED,OAAO,QAAQ,YAAY,CAAC;IAC3B,UAAiB,MAAM,CAAC,OAAO,SAAS,MAAM,GAAG,MAAM;QACtD,UAAU,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;KACnD;CACD"}

package/dist/state/formValues.js

@@ -1,11 +1,22 @@
 /**
 Two-way binding between DOM form controls (`input`, `select`, `textarea`) and an observable
 object property. Reads reflect live DOM values; writes update the controls synchronously.
-Most likely you will only need the the first variant mentioned in the examples below.
 
 @module Form Values
 
-@example Plugin — chainable instance method on DC components
+Two APIs are provided for different contexts:
+
+- **`formValues()`** — standalone function for general usage outside the MC ecosystem.
+  Call it on any plain object to bind form controls to a new observable property. You manage
+  subscriptions and bindings manually on the resulting data object.
+
+- **`formValuePlugin()`** — used inside MC custom elements (classes extending `DC`).
+  It attaches `.formValues()` as a chainable instance method that implicitly creates both the
+  form-values binding and the underlying observable wrapper. Just call
+  `this.formValues(this.target, 'formData')` and chain `.subscribe()` / `.bind()` — everything
+  is set up for you automatically.
+
+@example Plugin — inside an MC custom element (recommended within DC classes)
 ```ts
 import { DC, defineCE, formValuePlugin } from '@twobirds/microcomponents';
 
@@ -25,7 +36,7 @@ class CheckoutForm extends DC {
 defineCE('checkout-form', CheckoutForm);
 ```
 
-@example Standalone function — bind a plain object to a form in the DOM
+@example Standalone — outside the MC ecosystem (plain objects, vanilla JS, etc.)
 ```ts
 import { formValues } from '@twobirds/microcomponents/formValues';
 

package/dist/state/observables.d.ts

@@ -1,12 +1,25 @@
 /**
 Reactive data binding via observables — object properties trigger callbacks and update
 DOM placeholders automatically when their values change. Supports primitives, nested objects,
-and deep-change detection with debounced notifications. Most likely you will only need the first
-variant of the examples below
+and deep-change detection with debounced notifications.
 
 @module Observables
 
-@example Plugin — chainable instance methods on DC components
+Two APIs are provided for different contexts:
+
+- **`observe()`** — standalone function for general usage outside the MC ecosystem.
+  Call it on any plain object to make its properties observable. You manage the resulting
+  data object yourself (subscribe, bind, notify).
+
+- **`observePlugin()`** — used inside MC custom elements (classes extending `DC`).
+  It attaches `.notify()`, `.subscribe()`, and `.bind()` as chainable instance methods
+  that implicitly create the observable wrapper for you. Just declare a plain data property
+  on your component and call `this.subscribe('data', …)` — the observable is generated on demand.
+
+> **Note:** `.bind()` only works with objects because their properties become the placeholder
+> names in HTML (e.g., `{name}`, `{count}`). Binding primitives to the DOM is silently ignored.
+
+@example Plugin — inside an MC custom element (recommended within DC classes)
 ```ts
 import { DC, defineCE, observePlugin } from '@twobirds/microcomponents';
 
@@ -25,7 +38,7 @@ class Counter extends DC {
 defineCE('mc-counter', Counter);
 ```
 
-@example Basic observe + subscribe on a plain object
+@example Standalone — outside the MC ecosystem (plain objects, vanilla JS, etc.)
 ```ts
 import { observe } from '@twobirds/microcomponents';
 
@@ -43,13 +56,13 @@ state.data.subscribe((d) => console.log('data changed:', d));
 state.data.name = 'Jane'; // triggers callback with updated object
 ```
 
-@example DOM binding — placeholder tokens update live
+@example DOM binding — only observable properties that hold objects can be bound
 ```ts
 import { observe } from '@twobirds/microcomponents';
 
 const state = observe({ user: { name: 'Alice', count: 0 } });
 state.user.bind(document.querySelector('.model'));
-// <span>{user.name}</span> updates automatically when state.user.name changes
+// <span>{name}</span> and <span>{count}</span> update automatically
 ```
 
 */

package/dist/state/observables.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"observables.d.ts","sourceRoot":"","sources":["../../src/state/observables.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsDE;AAkBF;;;;;;;;;EASE;AACF,MAAM,MAAM,QAAQ,CAAC,CAAC,GAAG,OAAO,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;AAEvD;;;;;;;;;;;;;EAaE;AACF,MAAM,MAAM,UAAU,CAAC,CAAC,GAAG,OAAO,IAAI,CAAC,GAAG;IACzC,SAAS,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC;IAChD,WAAW,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC;IAClD,MAAM,CAAC,MAAM,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC;IACxC,IAAI,CAAC,MAAM,EAAE,WAAW,GAAG,gBAAgB,GAAG,UAAU,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC;IACzE,cAAc;IACd,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;CAC3B,CAAC;AAyNF;;;;;;;;;;;;;;;;;;;;;;;;;;EA0BE;AACF,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CAAE,CAAC;AAE/D;;;;;;;;;;EAUE;AACF,MAAM,MAAM,WAAW,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,IAAI;KAC9C,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,SAAS,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACrD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;EAsBE;AACF,MAAM,MAAM,UAAU,CAAC,CAAC,IAAI;KAC1B,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS;QAAE,SAAS,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,KAAK,IAAI,GAAG,OAAO,CAAA;KAAE,GACpF,CAAC,GACD,CAAC,CAAC,CAAC,CAAC;CACP,CAAC;AAKF;;;;;;;;;;;EAWE;AACF,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,OAAO,GAAG,OAAO,CAMzD;AAED,wBAAgB,OAAO,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,CAAC,EAC1D,MAAM,EAAE,CAAC,EACT,YAAY,EAAE,CAAC,GACb,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AACrB,wBAAgB,OAAO,CAAC,CAAC,SAAS,MAAM,EAAE,MAAM,EAAE,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;AAClE,wBAAgB,OAAO,CAAC,CAAC,SAAS,MAAM,EAAE,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;AAyIpE;;;;;;;;;;;;;;;;;;;;;;;EAuBE;AACF,wBAAgB,aAAa,CAAC,KAAK,EAAE,GAAG,QAoEvC;AAED,OAAO,QAAQ,YAAY,CAAC;IACxB,UAAiB,MAAM,CAAC,OAAO,SAAS,MAAM,GAAG,MAAM;QACnD,MAAM,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;QAC/B,SAAS,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAAC;QACtD,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,GAAG,UAAU,GAAG,IAAI,CAAC;KAClE;CACJ"}
+{"version":3,"file":"observables.d.ts","sourceRoot":"","sources":["../../src/state/observables.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmEE;AAkBF;;;;;;;;;EASE;AACF,MAAM,MAAM,QAAQ,CAAC,CAAC,GAAG,OAAO,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;AAEvD;;;;;;;;;;;;;EAaE;AACF,MAAM,MAAM,UAAU,CAAC,CAAC,GAAG,OAAO,IAAI,CAAC,GAAG;IACzC,SAAS,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC;IAChD,WAAW,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC;IAClD,MAAM,CAAC,MAAM,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC;IACxC,IAAI,CAAC,MAAM,EAAE,WAAW,GAAG,gBAAgB,GAAG,UAAU,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC;IACzE,cAAc;IACd,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;CAC3B,CAAC;AAyNF;;;;;;;;;;;;;;;;;;;;;;;;;;EA0BE;AACF,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CAAE,CAAC;AAE/D;;;;;;;;;;EAUE;AACF,MAAM,MAAM,WAAW,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,IAAI;KAC9C,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,SAAS,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACrD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;EAsBE;AACF,MAAM,MAAM,UAAU,CAAC,CAAC,IAAI;KAC1B,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS;QAAE,SAAS,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,KAAK,IAAI,GAAG,OAAO,CAAA;KAAE,GACpF,CAAC,GACD,CAAC,CAAC,CAAC,CAAC;CACP,CAAC;AAKF;;;;;;;;;;;EAWE;AACF,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,OAAO,GAAG,OAAO,CAMzD;AAED,wBAAgB,OAAO,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,CAAC,EAC1D,MAAM,EAAE,CAAC,EACT,YAAY,EAAE,CAAC,GACb,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AACrB,wBAAgB,OAAO,CAAC,CAAC,SAAS,MAAM,EAAE,MAAM,EAAE,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;AAClE,wBAAgB,OAAO,CAAC,CAAC,SAAS,MAAM,EAAE,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;AAyIpE;;;;;;;;;;;;;;;;;;;;;;;EAuBE;AACF,wBAAgB,aAAa,CAAC,KAAK,EAAE,GAAG,QAoEvC;AAED,OAAO,QAAQ,YAAY,CAAC;IACxB,UAAiB,MAAM,CAAC,OAAO,SAAS,MAAM,GAAG,MAAM;QACnD,MAAM,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;QAC/B,SAAS,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAAC;QACtD,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,GAAG,UAAU,GAAG,IAAI,CAAC;KAClE;CACJ"}

package/dist/state/observables.js

@@ -1,12 +1,25 @@
 /**
 Reactive data binding via observables — object properties trigger callbacks and update
 DOM placeholders automatically when their values change. Supports primitives, nested objects,
-and deep-change detection with debounced notifications. Most likely you will only need the first
-variant of the examples below
+and deep-change detection with debounced notifications.
 
 @module Observables
 
-@example Plugin — chainable instance methods on DC components
+Two APIs are provided for different contexts:
+
+- **`observe()`** — standalone function for general usage outside the MC ecosystem.
+  Call it on any plain object to make its properties observable. You manage the resulting
+  data object yourself (subscribe, bind, notify).
+
+- **`observePlugin()`** — used inside MC custom elements (classes extending `DC`).
+  It attaches `.notify()`, `.subscribe()`, and `.bind()` as chainable instance methods
+  that implicitly create the observable wrapper for you. Just declare a plain data property
+  on your component and call `this.subscribe('data', …)` — the observable is generated on demand.
+
+> **Note:** `.bind()` only works with objects because their properties become the placeholder
+> names in HTML (e.g., `{name}`, `{count}`). Binding primitives to the DOM is silently ignored.
+
+@example Plugin — inside an MC custom element (recommended within DC classes)
 ```ts
 import { DC, defineCE, observePlugin } from '@twobirds/microcomponents';
 
@@ -25,7 +38,7 @@ class Counter extends DC {
 defineCE('mc-counter', Counter);
 ```
 
-@example Basic observe + subscribe on a plain object
+@example Standalone — outside the MC ecosystem (plain objects, vanilla JS, etc.)
 ```ts
 import { observe } from '@twobirds/microcomponents';
 
@@ -43,13 +56,13 @@ state.data.subscribe((d) => console.log('data changed:', d));
 state.data.name = 'Jane'; // triggers callback with updated object
 ```
 
-@example DOM binding — placeholder tokens update live
+@example DOM binding — only observable properties that hold objects can be bound
 ```ts
 import { observe } from '@twobirds/microcomponents';
 
 const state = observe({ user: { name: 'Alice', count: 0 } });
 state.user.bind(document.querySelector('.model'));
-// <span>{user.name}</span> updates automatically when state.user.name changes
+// <span>{name}</span> and <span>{count}</span> update automatically
 ```
 
 */

package/dist/utils/helpers.d.ts

@@ -175,37 +175,6 @@ export declare function htmlToElements(html: string): HTMLElement[];
  * ```
  */
 export declare function copyGettersSetters(source: object, target: object): void;
-/**
- * Injects a CSS string into the given scope (document or shadow root) as an adopted stylesheet.
- * Enables css-in-js so that every custom element is self-contained and importable.
- *
- * @hidden
- * @param target - The scope to inject styles into: `document` for global styles, or a `ShadowRoot` for encapsulated component internals.
- * @param css - The CSS string to inject.
- * @returns The created `CSSStyleSheet` instance that was adopted into the target scope.
- *
- * When targeting **document**: selectors like `:host`, `::slotted()`, and shadow-internal classes are **not allowed** — they have no effect outside a shadow root. Use only global selectors, element tags, or layout presets.
- * When targeting **shadowRoot**: use `:host` for the custom element itself, standard selectors (`.inner`, `#id`) for internal structure, and `::slotted()` for projected light-DOM content.
- *
- * @example Inject global styles into the document:
- * ```ts
- * import { injectCSS } from '@twobirds/mc/utils/helpers';
- * injectCSS(document, 'body { display: block; }');
- * ```
- *
- * @example Inject global styles for a micro component into the document:
- * ```ts
- * import { injectCSS } from '@twobirds/mc/utils/helpers';
- * injectCSS(document, 'my-microcomponent { display: block; }');
- * ```
- *
- * @example Inject scoped styles into a shadow root:
- * ```ts
- * const shadow = element.attachShadow({ mode: 'open' });
- * injectCSS(shadow, ':host { color: var(--text); } .inner { padding: 8px; }');
- * ```
- * Styles can also be added using a compound innerHTML statement: `shadow.innerHTML = \`<style>${style}</style>${template}\``
- */
 export declare function injectCSS(target: Document | ShadowRoot, css: string): CSSStyleSheet;
 /**
  * Processes a record of asset strings and applies them to the given target element.

package/dist/utils/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../src/utils/helpers.ts"],"names":[],"mappings":"AAAA;;;;;;EAME;AAEF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAExD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,SAAS,IAAI,OAAO,CAEnC;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAE/E;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC,GAAG,CAAC,CAiB1E;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,GAAE,OAAc,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAqB7F;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,SAAS,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,OAAO,GAAG,OAAO,CAiCzD;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,GAAG,GAAE,MAAW,GAAG,OAAO,CAe1E;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,KAAK,CAAC,CAAC,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,EAAE,EACpD,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,MAAM,EACjB,GAAG,IAAI,EAAE,OAAO,EAAE,GAChB,CAAC,CAgCH;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,UAKxC;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,OAAO,EAAE,EAC3C,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE,CAAC,KAAK,OAAO,EAC7B,YAAY,EAAE,MAAM,GAClB,CAAC,GAAG,IAAI,EAAE,CAAC,KAAK,IAAI,CAStB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,WAAW,EAAE,CAU1D;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,CAOvE;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,SAAS,CAAC,MAAM,EAAE,QAAQ,GAAG,UAAU,EAAE,GAAG,EAAE,MAAM,GAAG,aAAa,CAOnF;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,aAAa,CAAC,QAAQ,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CA2B1F;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAiC9E;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,kBAAkB,CAAC,WAAW,EAAE,WAAW,GAAG,UAAU,EAAE,QAAQ,EAAE,YAAY,GAAG,IAAI,CA2CtG"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../src/utils/helpers.ts"],"names":[],"mappings":"AAAA;;;;;;EAME;AAEF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAExD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,SAAS,IAAI,OAAO,CAEnC;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAE/E;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC,GAAG,CAAC,CAiB1E;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,GAAE,OAAc,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAqB7F;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,SAAS,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,OAAO,GAAG,OAAO,CAiCzD;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,GAAG,GAAE,MAAW,GAAG,OAAO,CAe1E;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,KAAK,CAAC,CAAC,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,EAAE,EACpD,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,MAAM,EACjB,GAAG,IAAI,EAAE,OAAO,EAAE,GAChB,CAAC,CAgCH;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,UAKxC;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,OAAO,EAAE,EAC3C,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE,CAAC,KAAK,OAAO,EAC7B,YAAY,EAAE,MAAM,GAClB,CAAC,GAAG,IAAI,EAAE,CAAC,KAAK,IAAI,CAStB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,WAAW,EAAE,CAU1D;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,CAOvE;AAmCD,wBAAgB,SAAS,CAAC,MAAM,EAAE,QAAQ,GAAG,UAAU,EAAE,GAAG,EAAE,MAAM,GAAG,aAAa,CAanF;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,aAAa,CAAC,QAAQ,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CA2B1F;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAiC9E;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,kBAAkB,CAAC,WAAW,EAAE,WAAW,GAAG,UAAU,EAAE,QAAQ,EAAE,YAAY,GAAG,IAAI,CA2CtG"}

package/dist/utils/helpers.js

@@ -347,7 +347,13 @@ export function copyGettersSetters(source, target) {
  * ```
  * Styles can also be added using a compound innerHTML statement: `shadow.innerHTML = \`<style>${style}</style>${template}\``
  */
+const _injectedCSS = new WeakMap();
 export function injectCSS(target, css) {
+    const injected = _injectedCSS.get(target) ?? new Set();
+    if (injected.has(css))
+        return target.adoptedStyleSheets[0];
+    injected.add(css);
+    _injectedCSS.set(target, injected);
     const sheet = new CSSStyleSheet();
     sheet.replaceSync(css);
     target.adoptedStyleSheets.push(sheet);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@twobirds/microcomponents",
-	"version": "0.2.3",
+	"version": "0.2.5",
 	"description": "Micro Components",
 	"keywords": [
 		"custom elements",
@@ -87,10 +87,13 @@
 		"dev": "vite preview --outDir public/test --port 10000 --host",
 		"doc": "vite preview --outDir public/typedoc --port 11000 --host",
 		"watch": "tsx watch.ts",
+		"mcp:dev": "tsx watch microcomponents-mcp-server.ts",
+		"mcp:run": "tsx microcomponents-mcp-server.ts",
 		"prepublishOnly": "pnpm run build && pnpm run check"
 	},
 	"devDependencies": {
 		"@arethetypeswrong/cli": "^0.18.5",
+		"@modelcontextprotocol/sdk": "^1.30.0",
 		"@types/node": "^22.20.1",
 		"@vitest/coverage-v8": "^4.1.10",
 		"jsdom": "^29.1.1",
@@ -101,10 +104,12 @@
 		"typedoc": "^0.28.20",
 		"typescript": "^6.0.3",
 		"vite": "^8.1.5",
-		"vitest": "^4.1.10"
+		"vitest": "^4.1.10",
+		"zod": "^4.6.5"
 	},
 	"engines": {
 		"node": ">=22.18"
 	},
 	"packageManager": "pnpm@12.4.1"
 }
+