@htmlplus/element 3.2.6 → 3.3.1

package/dist/client.js

@@ -1,5 +1,5 @@
 import { kebabCase, pascalCase } from 'change-case';
-import { API_HOST, STATIC_TAG, API_STACKS, API_REQUEST, API_CONNECTED, LIFECYCLE_UPDATE, STATIC_STYLE, API_STYLE, LIFECYCLE_UPDATED, API_RENDER_COMPLETED, METHOD_RENDER, TYPE_BOOLEAN, TYPE_NUMBER, TYPE_NULL, TYPE_DATE, TYPE_ARRAY, TYPE_OBJECT, TYPE_UNDEFINED, KEY, LIFECYCLE_CONNECTED, LIFECYCLE_DISCONNECTED, LIFECYCLE_CONSTRUCTED, LIFECYCLE_ADOPTED, LIFECYCLE_READY } from './constants.js';
+import { API_HOST, STATIC_TAG, API_STACKS, API_REQUEST, API_CONNECTED, LIFECYCLE_UPDATE, STATIC_STYLE, API_STYLE, LIFECYCLE_UPDATED, API_RENDER_COMPLETED, METHOD_RENDER, TYPE_BOOLEAN, TYPE_NUMBER, TYPE_NULL, TYPE_DATE, TYPE_ARRAY, TYPE_OBJECT, TYPE_UNDEFINED, TYPE_STRING, KEY, LIFECYCLE_CONNECTED, LIFECYCLE_DISCONNECTED, LIFECYCLE_CONSTRUCTED, LIFECYCLE_ADOPTED, LIFECYCLE_READY } from './constants.js';
 
 /**
  * Indicates the host of the element.
@@ -27,11 +27,19 @@ const dispatch = (target, type, eventInitDict) => {
  */
 const on = (target, type, handler, options) => {
     const element = host(target);
-    if (type != 'outside') {
+    if (type !== 'outside') {
         return element.addEventListener(type, handler, options);
     }
     const callback = (event) => {
-        !event.composedPath().some((item) => item == element) && handler(event);
+        const has = event.composedPath().some((item) => item === element);
+        if (has)
+            return;
+        if (typeof handler === 'function') {
+            handler(event);
+        }
+        else {
+            handler.handleEvent(event);
+        }
     };
     type = 'ontouchstart' in window.document.documentElement ? 'touchstart' : 'click';
     on(document, type, callback, options);
@@ -48,11 +56,11 @@ const on = (target, type, handler, options) => {
  */
 const off = (target, type, handler, options) => {
     const element = host(target);
-    if (type != 'outside') {
-        return element.removeEventListener(type, handler, options);
+    if (type !== 'outside') {
+        return void element.removeEventListener(type, handler, options);
     }
     const index = outsides.findIndex((outside) => {
-        return outside.element == element && outside.handler == handler && outside.options == options;
+        return (outside.element === element && outside.handler === handler && outside.options === options);
     });
     const outside = outsides[index];
     if (!outside)
@@ -71,12 +79,10 @@ const toEvent = (input) => {
 
 const updateAttribute = (target, key, value) => {
     const element = host(target);
-    if ([undefined, null, false].includes(value)) {
-        element.removeAttribute(key);
-    }
-    else {
-        element.setAttribute(key, value === true ? '' : value);
+    if (value === undefined || value === null || value === false) {
+        return void element.removeAttribute(key);
     }
+    element.setAttribute(key, value === true ? '' : String(value));
 };
 
 const symbol = Symbol();
@@ -132,9 +138,10 @@ const classes = (input, smart) => {
             break;
         }
         case 'object': {
-            const keys = Object.keys(input);
+            const obj = input;
+            const keys = Object.keys(obj);
             for (const key of keys) {
-                const value = input[key];
+                const value = obj[key];
                 const name = kebabCase(key);
                 const type = typeOf(value);
                 if (!smart) {
@@ -163,18 +170,11 @@ const classes = (input, smart) => {
     return result.filter((item) => item).join(' ');
 };
 
-/**
- * Indicates whether the current code is running on a server.
- */
-const isServer = () => {
-    return !(typeof window != 'undefined' && window.document);
-};
-
 const merge = (target, ...sources) => {
     for (const source of sources) {
         if (!source)
             continue;
-        if (typeOf(source) != 'object') {
+        if (typeOf(source) !== 'object') {
             target = source;
             continue;
         }
@@ -192,31 +192,31 @@ const merge = (target, ...sources) => {
     return target;
 };
 
-const DEFAULTS = {
-    element: {}
+/**
+ * TODO
+ */
+const getConfig = (namespace) => {
+    return globalThis[`$htmlplus:${namespace}$`] || {};
 };
 /**
  * TODO
  */
-const getConfig = (...keys) => {
-    if (isServer())
-        return;
-    let config = window[`$htmlplus$`];
-    for (const key of keys) {
-        if (!config)
-            break;
-        config = config[key];
-    }
-    return config;
+const getConfigCreator = (namespace) => () => {
+    return getConfig(namespace);
 };
 /**
  * TODO
  */
-const setConfig = (config, options) => {
-    if (isServer())
-        return;
-    const previous = options?.override ? {} : window[`$htmlplus$`];
-    window[`$htmlplus$`] = merge({}, DEFAULTS, previous, config);
+const setConfig = (namespace, config, options) => {
+    const previous = options?.override ? {} : globalThis[`$htmlplus:${namespace}$`];
+    const next = merge({}, previous, config);
+    globalThis[`$htmlplus:${namespace}$`] = next;
+};
+/**
+ * TODO
+ */
+const setConfigCreator = (namespace) => (config, options) => {
+    return setConfig(namespace, config, options);
 };
 
 const defineProperty = Object.defineProperty;
@@ -253,6 +253,10 @@ const getTag = (target) => {
     return target.constructor[STATIC_TAG] ?? target[STATIC_TAG];
 };
 
+const getNamespace = (target) => {
+    return getTag(target)?.split('-')?.at(0);
+};
+
 /**
  * Determines whether the given input string is a valid
  * [CSS Color](https://mdn.io/color-value) or not.
@@ -266,7 +270,16 @@ const isCSSColor = (input) => {
 /**
  * Indicates whether the direction of the element is `Right-To-Left` or not.
  */
-const isRTL = (target) => direction(target) == 'rtl';
+const isRTL = (target) => {
+    return direction(target) === 'rtl';
+};
+
+/**
+ * Indicates whether the current code is running on a server.
+ */
+const isServer = () => {
+    return !(typeof window !== 'undefined' && window.document);
+};
 
 const shadowRoot = (target) => {
     return host(target)?.shadowRoot;
@@ -287,7 +300,8 @@ function queryAll(target, selectors) {
 }
 
 const task = (options) => {
-    let running, promise;
+    let running;
+    let promise;
     const run = () => {
         if (options.canStart && !options.canStart())
             return Promise.resolve(false);
@@ -307,8 +321,10 @@ const task = (options) => {
         if (!running)
             return promise;
         try {
-            if (options.canRun && !options.canRun())
-                return (running = false);
+            if (options.canRun && !options.canRun()) {
+                running = false;
+                return running;
+            }
             options.handler();
             running = false;
             return true;
@@ -321,23 +337,25 @@ const task = (options) => {
     return run;
 };
 
+// biome-ignore-all lint: TODO
+
 class MapSet extends Map {
-  set(key, value) {
-    super.set(key, value);
-    return value;
-  }
+	set(key, value) {
+		super.set(key, value);
+		return value;
+	}
 }
 
 class WeakMapSet extends WeakMap {
-  set(key, value) {
-    super.set(key, value);
-    return value;
-  }
+	set(key, value) {
+		super.set(key, value);
+		return value;
+	}
 }
 
 /*! (c) Andrea Giammarchi - ISC */
 const empty =
-  /^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i;
+	/^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i;
 const elements = /<([a-z]+[a-z0-9:._-]*)([^>]*?)(\/?)>/g;
 const attributes$1 = /([^\s\\>"'=]+)\s*=\s*(['"]?)\x01/g;
 const holes = /[\x01\x02]/g;
@@ -354,155 +372,155 @@ const holes = /[\x01\x02]/g;
  * @returns {string} X/HTML with prefixed comments or attributes
  */
 var instrument = (template, prefix, svg) => {
-  let i = 0;
-  return template
-    .join('\x01')
-    .trim()
-    .replace(elements, (_, name, attrs, selfClosing) => {
-      let ml = name + attrs.replace(attributes$1, '\x02=$2$1').trimEnd();
-      if (selfClosing.length) ml += svg || empty.test(name) ? ' /' : '></' + name;
-      return '<' + ml + '>';
-    })
-    .replace(holes, (hole) => (hole === '\x01' ? '<!--' + prefix + i++ + '-->' : prefix + i++));
+	let i = 0;
+	return template
+		.join('\x01')
+		.trim()
+		.replace(elements, (_, name, attrs, selfClosing) => {
+			let ml = name + attrs.replace(attributes$1, '\x02=$2$1').trimEnd();
+			if (selfClosing.length) ml += svg || empty.test(name) ? ' /' : '></' + name;
+			return '<' + ml + '>';
+		})
+		.replace(holes, (hole) => (hole === '\x01' ? '<!--' + prefix + i++ + '-->' : prefix + i++));
 };
 
 const ELEMENT_NODE = 1;
 const nodeType = 111;
 
 const remove = ({ firstChild, lastChild }) => {
-  const range = document.createRange();
-  range.setStartAfter(firstChild);
-  range.setEndAfter(lastChild);
-  range.deleteContents();
-  return firstChild;
+	const range = document.createRange();
+	range.setStartAfter(firstChild);
+	range.setEndAfter(lastChild);
+	range.deleteContents();
+	return firstChild;
 };
 
 const diffable = (node, operation) =>
-  node.nodeType === nodeType
-    ? 1 / operation < 0
-      ? operation
-        ? remove(node)
-        : node.lastChild
-      : operation
-        ? node.valueOf()
-        : node.firstChild
-    : node;
+	node.nodeType === nodeType
+		? 1 / operation < 0
+			? operation
+				? remove(node)
+				: node.lastChild
+			: operation
+				? node.valueOf()
+				: node.firstChild
+		: node;
 const persistent = (fragment) => {
-  const { firstChild, lastChild } = fragment;
-  if (firstChild === lastChild) return lastChild || fragment;
-  const { childNodes } = fragment;
-  const nodes = [...childNodes];
-  return {
-    ELEMENT_NODE,
-    nodeType,
-    firstChild,
-    lastChild,
-    valueOf() {
-      if (childNodes.length !== nodes.length) fragment.append(...nodes);
-      return fragment;
-    }
-  };
+	const { firstChild, lastChild } = fragment;
+	if (firstChild === lastChild) return lastChild || fragment;
+	const { childNodes } = fragment;
+	const nodes = [...childNodes];
+	return {
+		ELEMENT_NODE,
+		nodeType,
+		firstChild,
+		lastChild,
+		valueOf() {
+			if (childNodes.length !== nodes.length) fragment.append(...nodes);
+			return fragment;
+		}
+	};
 };
 
 const { isArray: isArray$1 } = Array;
 
 const aria = (node) => (values) => {
-  for (const key in values) {
-    const name = key === 'role' ? key : `aria-${key}`;
-    const value = values[key];
-    if (value == null) node.removeAttribute(name);
-    else node.setAttribute(name, value);
-  }
+	for (const key in values) {
+		const name = key === 'role' ? key : `aria-${key}`;
+		const value = values[key];
+		if (value == null) node.removeAttribute(name);
+		else node.setAttribute(name, value);
+	}
 };
 
 const attribute = (node, name) => {
-  let oldValue,
-    orphan = true;
-  const attributeNode = document.createAttributeNS(null, name);
-  return (newValue) => {
-    if (oldValue !== newValue) {
-      oldValue = newValue;
-      if (oldValue == null) {
-        if (!orphan) {
-          node.removeAttributeNode(attributeNode);
-          orphan = true;
-        }
-      } else {
-        const value = newValue;
-        if (value == null) {
-          if (!orphan) node.removeAttributeNode(attributeNode);
-          orphan = true;
-        } else {
-          attributeNode.value = value;
-          if (orphan) {
-            node.setAttributeNodeNS(attributeNode);
-            orphan = false;
-          }
-        }
-      }
-    }
-  };
+	let oldValue,
+		orphan = true;
+	const attributeNode = document.createAttributeNS(null, name);
+	return (newValue) => {
+		if (oldValue !== newValue) {
+			oldValue = newValue;
+			if (oldValue == null) {
+				if (!orphan) {
+					node.removeAttributeNode(attributeNode);
+					orphan = true;
+				}
+			} else {
+				const value = newValue;
+				if (value == null) {
+					if (!orphan) node.removeAttributeNode(attributeNode);
+					orphan = true;
+				} else {
+					attributeNode.value = value;
+					if (orphan) {
+						node.setAttributeNodeNS(attributeNode);
+						orphan = false;
+					}
+				}
+			}
+		}
+	};
 };
 
 const boolean = (node, key, oldValue) => (newValue) => {
-  if (oldValue !== !!newValue) {
-    // when IE won't be around anymore ...
-    // node.toggleAttribute(key, oldValue = !!newValue);
-    if ((oldValue = !!newValue)) node.setAttribute(key, '');
-    else node.removeAttribute(key);
-  }
+	if (oldValue !== !!newValue) {
+		// when IE won't be around anymore ...
+		// node.toggleAttribute(key, oldValue = !!newValue);
+		if ((oldValue = !!newValue)) node.setAttribute(key, '');
+		else node.removeAttribute(key);
+	}
 };
 
 const data =
-  ({ dataset }) =>
-  (values) => {
-    for (const key in values) {
-      const value = values[key];
-      if (value == null) delete dataset[key];
-      else dataset[key] = value;
-    }
-  };
+	({ dataset }) =>
+	(values) => {
+		for (const key in values) {
+			const value = values[key];
+			if (value == null) delete dataset[key];
+			else dataset[key] = value;
+		}
+	};
 
 const event = (node, name) => {
-  let oldValue,
-    lower,
-    type = name.slice(2);
-  if (!(name in node) && (lower = name.toLowerCase()) in node) type = lower.slice(2);
-  return (newValue) => {
-    const info = isArray$1(newValue) ? newValue : [newValue, false];
-    if (oldValue !== info[0]) {
-      if (oldValue) node.removeEventListener(type, oldValue, info[1]);
-      if ((oldValue = info[0])) node.addEventListener(type, oldValue, info[1]);
-    }
-  };
+	let oldValue,
+		lower,
+		type = name.slice(2);
+	if (!(name in node) && (lower = name.toLowerCase()) in node) type = lower.slice(2);
+	return (newValue) => {
+		const info = isArray$1(newValue) ? newValue : [newValue, false];
+		if (oldValue !== info[0]) {
+			if (oldValue) node.removeEventListener(type, oldValue, info[1]);
+			if ((oldValue = info[0])) node.addEventListener(type, oldValue, info[1]);
+		}
+	};
 };
 
 const ref = (node) => {
-  let oldValue;
-  return (value) => {
-    if (oldValue !== value) {
-      oldValue = value;
-      if (typeof value === 'function') value(node);
-      else value.current = node;
-    }
-  };
+	let oldValue;
+	return (value) => {
+		if (oldValue !== value) {
+			oldValue = value;
+			if (typeof value === 'function') value(node);
+			else value.current = node;
+		}
+	};
 };
 
 const setter = (node, key) =>
-  key === 'dataset'
-    ? data(node)
-    : (value) => {
-        node[key] = value;
-      };
+	key === 'dataset'
+		? data(node)
+		: (value) => {
+				node[key] = value;
+			};
 
 const text = (node) => {
-  let oldValue;
-  return (newValue) => {
-    if (oldValue != newValue) {
-      oldValue = newValue;
-      node.textContent = newValue == null ? '' : newValue;
-    }
-  };
+	let oldValue;
+	return (newValue) => {
+		if (oldValue != newValue) {
+			oldValue = newValue;
+			node.textContent = newValue == null ? '' : newValue;
+		}
+	};
 };
 
 /**
@@ -533,148 +551,148 @@ const text = (node) => {
  * @returns {Node[]} The same list of future children.
  */
 var udomdiff = (parentNode, a, b, get, before) => {
-  const bLength = b.length;
-  let aEnd = a.length;
-  let bEnd = bLength;
-  let aStart = 0;
-  let bStart = 0;
-  let map = null;
-  while (aStart < aEnd || bStart < bEnd) {
-    // append head, tail, or nodes in between: fast path
-    if (aEnd === aStart) {
-      // we could be in a situation where the rest of nodes that
-      // need to be added are not at the end, and in such case
-      // the node to `insertBefore`, if the index is more than 0
-      // must be retrieved, otherwise it's gonna be the first item.
-      const node =
-        bEnd < bLength
-          ? bStart
-            ? get(b[bStart - 1], -0).nextSibling
-            : get(b[bEnd - bStart], 0)
-          : before;
-      while (bStart < bEnd) parentNode.insertBefore(get(b[bStart++], 1), node);
-    }
-    // remove head or tail: fast path
-    else if (bEnd === bStart) {
-      while (aStart < aEnd) {
-        // remove the node only if it's unknown or not live
-        if (!map || !map.has(a[aStart])) parentNode.removeChild(get(a[aStart], -1));
-        aStart++;
-      }
-    }
-    // same node: fast path
-    else if (a[aStart] === b[bStart]) {
-      aStart++;
-      bStart++;
-    }
-    // same tail: fast path
-    else if (a[aEnd - 1] === b[bEnd - 1]) {
-      aEnd--;
-      bEnd--;
-    }
-    // The once here single last swap "fast path" has been removed in v1.1.0
-    // https://github.com/WebReflection/udomdiff/blob/single-final-swap/esm/index.js#L69-L85
-    // reverse swap: also fast path
-    else if (a[aStart] === b[bEnd - 1] && b[bStart] === a[aEnd - 1]) {
-      // this is a "shrink" operation that could happen in these cases:
-      // [1, 2, 3, 4, 5]
-      // [1, 4, 3, 2, 5]
-      // or asymmetric too
-      // [1, 2, 3, 4, 5]
-      // [1, 2, 3, 5, 6, 4]
-      const node = get(a[--aEnd], -1).nextSibling;
-      parentNode.insertBefore(get(b[bStart++], 1), get(a[aStart++], -1).nextSibling);
-      parentNode.insertBefore(get(b[--bEnd], 1), node);
-      // mark the future index as identical (yeah, it's dirty, but cheap 👍)
-      // The main reason to do this, is that when a[aEnd] will be reached,
-      // the loop will likely be on the fast path, as identical to b[bEnd].
-      // In the best case scenario, the next loop will skip the tail,
-      // but in the worst one, this node will be considered as already
-      // processed, bailing out pretty quickly from the map index check
-      a[aEnd] = b[bEnd];
-    }
-    // map based fallback, "slow" path
-    else {
-      // the map requires an O(bEnd - bStart) operation once
-      // to store all future nodes indexes for later purposes.
-      // In the worst case scenario, this is a full O(N) cost,
-      // and such scenario happens at least when all nodes are different,
-      // but also if both first and last items of the lists are different
-      if (!map) {
-        map = new Map();
-        let i = bStart;
-        while (i < bEnd) map.set(b[i], i++);
-      }
-      // if it's a future node, hence it needs some handling
-      if (map.has(a[aStart])) {
-        // grab the index of such node, 'cause it might have been processed
-        const index = map.get(a[aStart]);
-        // if it's not already processed, look on demand for the next LCS
-        if (bStart < index && index < bEnd) {
-          let i = aStart;
-          // counts the amount of nodes that are the same in the future
-          let sequence = 1;
-          while (++i < aEnd && i < bEnd && map.get(a[i]) === index + sequence) sequence++;
-          // effort decision here: if the sequence is longer than replaces
-          // needed to reach such sequence, which would brings again this loop
-          // to the fast path, prepend the difference before a sequence,
-          // and move only the future list index forward, so that aStart
-          // and bStart will be aligned again, hence on the fast path.
-          // An example considering aStart and bStart are both 0:
-          // a: [1, 2, 3, 4]
-          // b: [7, 1, 2, 3, 6]
-          // this would place 7 before 1 and, from that time on, 1, 2, and 3
-          // will be processed at zero cost
-          if (sequence > index - bStart) {
-            const node = get(a[aStart], 0);
-            while (bStart < index) parentNode.insertBefore(get(b[bStart++], 1), node);
-          }
-          // if the effort wasn't good enough, fallback to a replace,
-          // moving both source and target indexes forward, hoping that some
-          // similar node will be found later on, to go back to the fast path
-          else {
-            parentNode.replaceChild(get(b[bStart++], 1), get(a[aStart++], -1));
-          }
-        }
-        // otherwise move the source forward, 'cause there's nothing to do
-        else aStart++;
-      }
-      // this node has no meaning in the future list, so it's more than safe
-      // to remove it, and check the next live node out instead, meaning
-      // that only the live list index should be forwarded
-      else parentNode.removeChild(get(a[aStart++], -1));
-    }
-  }
-  return b;
+	const bLength = b.length;
+	let aEnd = a.length;
+	let bEnd = bLength;
+	let aStart = 0;
+	let bStart = 0;
+	let map = null;
+	while (aStart < aEnd || bStart < bEnd) {
+		// append head, tail, or nodes in between: fast path
+		if (aEnd === aStart) {
+			// we could be in a situation where the rest of nodes that
+			// need to be added are not at the end, and in such case
+			// the node to `insertBefore`, if the index is more than 0
+			// must be retrieved, otherwise it's gonna be the first item.
+			const node =
+				bEnd < bLength
+					? bStart
+						? get(b[bStart - 1], -0).nextSibling
+						: get(b[bEnd - bStart], 0)
+					: before;
+			while (bStart < bEnd) parentNode.insertBefore(get(b[bStart++], 1), node);
+		}
+		// remove head or tail: fast path
+		else if (bEnd === bStart) {
+			while (aStart < aEnd) {
+				// remove the node only if it's unknown or not live
+				if (!map || !map.has(a[aStart])) parentNode.removeChild(get(a[aStart], -1));
+				aStart++;
+			}
+		}
+		// same node: fast path
+		else if (a[aStart] === b[bStart]) {
+			aStart++;
+			bStart++;
+		}
+		// same tail: fast path
+		else if (a[aEnd - 1] === b[bEnd - 1]) {
+			aEnd--;
+			bEnd--;
+		}
+		// The once here single last swap "fast path" has been removed in v1.1.0
+		// https://github.com/WebReflection/udomdiff/blob/single-final-swap/esm/index.js#L69-L85
+		// reverse swap: also fast path
+		else if (a[aStart] === b[bEnd - 1] && b[bStart] === a[aEnd - 1]) {
+			// this is a "shrink" operation that could happen in these cases:
+			// [1, 2, 3, 4, 5]
+			// [1, 4, 3, 2, 5]
+			// or asymmetric too
+			// [1, 2, 3, 4, 5]
+			// [1, 2, 3, 5, 6, 4]
+			const node = get(a[--aEnd], -1).nextSibling;
+			parentNode.insertBefore(get(b[bStart++], 1), get(a[aStart++], -1).nextSibling);
+			parentNode.insertBefore(get(b[--bEnd], 1), node);
+			// mark the future index as identical (yeah, it's dirty, but cheap 👍)
+			// The main reason to do this, is that when a[aEnd] will be reached,
+			// the loop will likely be on the fast path, as identical to b[bEnd].
+			// In the best case scenario, the next loop will skip the tail,
+			// but in the worst one, this node will be considered as already
+			// processed, bailing out pretty quickly from the map index check
+			a[aEnd] = b[bEnd];
+		}
+		// map based fallback, "slow" path
+		else {
+			// the map requires an O(bEnd - bStart) operation once
+			// to store all future nodes indexes for later purposes.
+			// In the worst case scenario, this is a full O(N) cost,
+			// and such scenario happens at least when all nodes are different,
+			// but also if both first and last items of the lists are different
+			if (!map) {
+				map = new Map();
+				let i = bStart;
+				while (i < bEnd) map.set(b[i], i++);
+			}
+			// if it's a future node, hence it needs some handling
+			if (map.has(a[aStart])) {
+				// grab the index of such node, 'cause it might have been processed
+				const index = map.get(a[aStart]);
+				// if it's not already processed, look on demand for the next LCS
+				if (bStart < index && index < bEnd) {
+					let i = aStart;
+					// counts the amount of nodes that are the same in the future
+					let sequence = 1;
+					while (++i < aEnd && i < bEnd && map.get(a[i]) === index + sequence) sequence++;
+					// effort decision here: if the sequence is longer than replaces
+					// needed to reach such sequence, which would brings again this loop
+					// to the fast path, prepend the difference before a sequence,
+					// and move only the future list index forward, so that aStart
+					// and bStart will be aligned again, hence on the fast path.
+					// An example considering aStart and bStart are both 0:
+					// a: [1, 2, 3, 4]
+					// b: [7, 1, 2, 3, 6]
+					// this would place 7 before 1 and, from that time on, 1, 2, and 3
+					// will be processed at zero cost
+					if (sequence > index - bStart) {
+						const node = get(a[aStart], 0);
+						while (bStart < index) parentNode.insertBefore(get(b[bStart++], 1), node);
+					}
+					// if the effort wasn't good enough, fallback to a replace,
+					// moving both source and target indexes forward, hoping that some
+					// similar node will be found later on, to go back to the fast path
+					else {
+						parentNode.replaceChild(get(b[bStart++], 1), get(a[aStart++], -1));
+					}
+				}
+				// otherwise move the source forward, 'cause there's nothing to do
+				else aStart++;
+			}
+			// this node has no meaning in the future list, so it's more than safe
+			// to remove it, and check the next live node out instead, meaning
+			// that only the live list index should be forwarded
+			else parentNode.removeChild(get(a[aStart++], -1));
+		}
+	}
+	return b;
 };
 
 const { isArray, prototype } = Array;
 const { indexOf } = prototype;
 
 const {
-  createDocumentFragment,
-  createElement,
-  createElementNS,
-  createTextNode,
-  createTreeWalker,
-  importNode
+	createDocumentFragment,
+	createElement,
+	createElementNS,
+	createTextNode,
+	createTreeWalker,
+	importNode
 } = new Proxy(typeof window == 'undefined' ? {} : window.document, {
-  get: (target, method) => (target[method] || function () {}).bind(target)
+	get: (target, method) => (target[method] || function () {}).bind(target)
 });
 
 const createHTML = (html) => {
-  const template = createElement('template');
-  template.innerHTML = html;
-  return template.content;
+	const template = createElement('template');
+	template.innerHTML = html;
+	return template.content;
 };
 
 let xml;
 const createSVG = (svg) => {
-  if (!xml) xml = createElementNS('http://www.w3.org/2000/svg', 'svg');
-  xml.innerHTML = svg;
-  const content = createDocumentFragment();
-  content.append(...xml.childNodes);
-  return content;
+	if (!xml) xml = createElementNS('http://www.w3.org/2000/svg', 'svg');
+	xml.innerHTML = svg;
+	const content = createDocumentFragment();
+	content.append(...xml.childNodes);
+	return content;
 };
 
 const createContent = (text, svg) => (svg ? createSVG(text) : createHTML(text));
@@ -684,91 +702,91 @@ const reducePath = ({ childNodes }, i) => childNodes[i];
 
 // this helper avoid code bloat around handleAnything() callback
 const diff = (comment, oldNodes, newNodes) =>
-  udomdiff(
-    comment.parentNode,
-    // TODO: there is a possible edge case where a node has been
-    //       removed manually, or it was a keyed one, attached
-    //       to a shared reference between renders.
-    //       In this case udomdiff might fail at removing such node
-    //       as its parent won't be the expected one.
-    //       The best way to avoid this issue is to filter oldNodes
-    //       in search of those not live, or not in the current parent
-    //       anymore, but this would require both a change to uwire,
-    //       exposing a parentNode from the firstChild, as example,
-    //       but also a filter per each diff that should exclude nodes
-    //       that are not in there, penalizing performance quite a lot.
-    //       As this has been also a potential issue with domdiff,
-    //       and both lighterhtml and hyperHTML might fail with this
-    //       very specific edge case, I might as well document this possible
-    //       "diffing shenanigan" and call it a day.
-    oldNodes,
-    newNodes,
-    diffable,
-    comment
-  );
+	udomdiff(
+		comment.parentNode,
+		// TODO: there is a possible edge case where a node has been
+		//       removed manually, or it was a keyed one, attached
+		//       to a shared reference between renders.
+		//       In this case udomdiff might fail at removing such node
+		//       as its parent won't be the expected one.
+		//       The best way to avoid this issue is to filter oldNodes
+		//       in search of those not live, or not in the current parent
+		//       anymore, but this would require both a change to uwire,
+		//       exposing a parentNode from the firstChild, as example,
+		//       but also a filter per each diff that should exclude nodes
+		//       that are not in there, penalizing performance quite a lot.
+		//       As this has been also a potential issue with domdiff,
+		//       and both lighterhtml and hyperHTML might fail with this
+		//       very specific edge case, I might as well document this possible
+		//       "diffing shenanigan" and call it a day.
+		oldNodes,
+		newNodes,
+		diffable,
+		comment
+	);
 
 // if an interpolation represents a comment, the whole
 // diffing will be related to such comment.
 // This helper is in charge of understanding how the new
 // content for such interpolation/hole should be updated
 const handleAnything = (comment) => {
-  let oldValue,
-    text,
-    nodes = [];
-  const anyContent = (newValue) => {
-    switch (typeof newValue) {
-      // primitives are handled as text content
-      case 'string':
-      case 'number':
-      case 'boolean':
-        if (oldValue !== newValue) {
-          oldValue = newValue;
-          if (!text) text = createTextNode('');
-          text.data = newValue;
-          nodes = diff(comment, nodes, [text]);
-        }
-        break;
-      // null, and undefined are used to cleanup previous content
-      case 'object':
-      case 'undefined':
-        if (newValue == null) {
-          if (oldValue != newValue) {
-            oldValue = newValue;
-            nodes = diff(comment, nodes, []);
-          }
-          break;
-        }
-        // arrays and nodes have a special treatment
-        if (isArray(newValue)) {
-          oldValue = newValue;
-          // arrays can be used to cleanup, if empty
-          if (newValue.length === 0) nodes = diff(comment, nodes, []);
-          // or diffed, if these contains nodes or "wires"
-          else if (typeof newValue[0] === 'object') nodes = diff(comment, nodes, newValue);
-          // in all other cases the content is stringified as is
-          else anyContent(String(newValue));
-          break;
-        }
-        // if the new value is a DOM node, or a wire, and it's
-        // different from the one already live, then it's diffed.
-        // if the node is a fragment, it's appended once via its childNodes
-        // There is no `else` here, meaning if the content
-        // is not expected one, nothing happens, as easy as that.
-        if (oldValue !== newValue && 'ELEMENT_NODE' in newValue) {
-          oldValue = newValue;
-          nodes = diff(
-            comment,
-            nodes,
-            newValue.nodeType === 11 ? [...newValue.childNodes] : [newValue]
-          );
-        }
-        break;
-      case 'function':
-        anyContent(newValue(comment));
-        break;
-    }
-  };
-  return anyContent;
+	let oldValue,
+		text,
+		nodes = [];
+	const anyContent = (newValue) => {
+		switch (typeof newValue) {
+			// primitives are handled as text content
+			case 'string':
+			case 'number':
+			case 'boolean':
+				if (oldValue !== newValue) {
+					oldValue = newValue;
+					if (!text) text = createTextNode('');
+					text.data = newValue;
+					nodes = diff(comment, nodes, [text]);
+				}
+				break;
+			// null, and undefined are used to cleanup previous content
+			case 'object':
+			case 'undefined':
+				if (newValue == null) {
+					if (oldValue != newValue) {
+						oldValue = newValue;
+						nodes = diff(comment, nodes, []);
+					}
+					break;
+				}
+				// arrays and nodes have a special treatment
+				if (isArray(newValue)) {
+					oldValue = newValue;
+					// arrays can be used to cleanup, if empty
+					if (newValue.length === 0) nodes = diff(comment, nodes, []);
+					// or diffed, if these contains nodes or "wires"
+					else if (typeof newValue[0] === 'object') nodes = diff(comment, nodes, newValue);
+					// in all other cases the content is stringified as is
+					else anyContent(String(newValue));
+					break;
+				}
+				// if the new value is a DOM node, or a wire, and it's
+				// different from the one already live, then it's diffed.
+				// if the node is a fragment, it's appended once via its childNodes
+				// There is no `else` here, meaning if the content
+				// is not expected one, nothing happens, as easy as that.
+				if (oldValue !== newValue && 'ELEMENT_NODE' in newValue) {
+					oldValue = newValue;
+					nodes = diff(
+						comment,
+						nodes,
+						newValue.nodeType === 11 ? [...newValue.childNodes] : [newValue]
+					);
+				}
+				break;
+			case 'function':
+				anyContent(newValue(comment));
+				break;
+		}
+	};
+	return anyContent;
 };
 
 // attributes can be:
@@ -782,25 +800,25 @@ const handleAnything = (comment) => {
 //  * onevent=${...}  to automatically handle event listeners
 //  * generic=${...}  to handle an attribute just like an attribute
 const handleAttribute = (node, name /*, svg*/) => {
-  switch (name[0]) {
-    case '?':
-      return boolean(node, name.slice(1), false);
-    case '.':
-      return setter(node, name.slice(1));
-    case '@':
-      return event(node, 'on' + name.slice(1));
-    case 'o':
-      if (name[1] === 'n') return event(node, name);
-  }
-
-  switch (name) {
-    case 'ref':
-      return ref(node);
-    case 'aria':
-      return aria(node);
-  }
-
-  return attribute(node, name /*, svg*/);
+	switch (name[0]) {
+		case '?':
+			return boolean(node, name.slice(1), false);
+		case '.':
+			return setter(node, name.slice(1));
+		case '@':
+			return event(node, 'on' + name.slice(1));
+		case 'o':
+			if (name[1] === 'n') return event(node, name);
+	}
+
+	switch (name) {
+		case 'ref':
+			return ref(node);
+		case 'aria':
+			return aria(node);
+	}
+
+	return attribute(node, name /*, svg*/);
 };
 
 // each mapped update carries the update type and its path
@@ -808,27 +826,27 @@ const handleAttribute = (node, name /*, svg*/) => {
 // the path is how to retrieve the related node to update.
 // In the attribute case, the attribute name is also carried along.
 function handlers(options) {
-  const { type, path } = options;
-  const node = path.reduceRight(reducePath, this);
-  return type === 'node'
-    ? handleAnything(node)
-    : type === 'attr'
-      ? handleAttribute(node, options.name /*, options.svg*/)
-      : text(node);
+	const { type, path } = options;
+	const node = path.reduceRight(reducePath, this);
+	return type === 'node'
+		? handleAnything(node)
+		: type === 'attr'
+			? handleAttribute(node, options.name /*, options.svg*/)
+			: text(node);
 }
 
 // from a fragment container, create an array of indexes
 // related to its child nodes, so that it's possible
 // to retrieve later on exact node via reducePath
 const createPath = (node) => {
-  const path = [];
-  let { parentNode } = node;
-  while (parentNode) {
-    path.push(indexOf.call(parentNode.childNodes, node));
-    node = parentNode;
-    ({ parentNode } = node);
-  }
-  return path;
+	const path = [];
+	let { parentNode } = node;
+	while (parentNode) {
+		path.push(indexOf.call(parentNode.childNodes, node));
+		node = parentNode;
+		({ parentNode } = node);
+	}
+	return path;
 };
 
 // the prefix is used to identify either comments, attributes, or nodes
@@ -850,100 +868,100 @@ const cache$1 = new WeakMapSet();
 const textOnly = /^(?:textarea|script|style|title|plaintext|xmp)$/;
 
 const createCache = () => ({
-  stack: [], // each template gets a stack for each interpolation "hole"
-
-  entry: null, // each entry contains details, such as:
-  //  * the template that is representing
-  //  * the type of node it represents (html or svg)
-  //  * the content fragment with all nodes
-  //  * the list of updates per each node (template holes)
-  //  * the "wired" node or fragment that will get updates
-  // if the template or type are different from the previous one
-  // the entry gets re-created each time
-
-  wire: null // each rendered node represent some wired content and
-  // this reference to the latest one. If different, the node
-  // will be cleaned up and the new "wire" will be appended
+	stack: [], // each template gets a stack for each interpolation "hole"
+
+	entry: null, // each entry contains details, such as:
+	//  * the template that is representing
+	//  * the type of node it represents (html or svg)
+	//  * the content fragment with all nodes
+	//  * the list of updates per each node (template holes)
+	//  * the "wired" node or fragment that will get updates
+	// if the template or type are different from the previous one
+	// the entry gets re-created each time
+
+	wire: null // each rendered node represent some wired content and
+	// this reference to the latest one. If different, the node
+	// will be cleaned up and the new "wire" will be appended
 });
 
 // the entry stored in the rendered node cache, and per each "hole"
 const createEntry = (type, template) => {
-  const { content, updates } = mapUpdates(type, template);
-  return { type, template, content, updates, wire: null };
+	const { content, updates } = mapUpdates(type, template);
+	return { type, template, content, updates, wire: null };
 };
 
 // a template is instrumented to be able to retrieve where updates are needed.
 // Each unique template becomes a fragment, cloned once per each other
 // operation based on the same template, i.e. data => html`<p>${data}</p>`
 const mapTemplate = (type, template) => {
-  const svg = type === 'svg';
-  const text = instrument(template, prefix, svg);
-  const content = createContent(text, svg);
-  // once instrumented and reproduced as fragment, it's crawled
-  // to find out where each update is in the fragment tree
-  const tw = createTreeWalker(content, 1 | 128);
-  const nodes = [];
-  const length = template.length - 1;
-  let i = 0;
-  // updates are searched via unique names, linearly increased across the tree
-  // <div isµ0="attr" isµ1="other"><!--isµ2--><style><!--isµ3--</style></div>
-  let search = `${prefix}${i}`;
-  while (i < length) {
-    const node = tw.nextNode();
-    // if not all updates are bound but there's nothing else to crawl
-    // it means that there is something wrong with the template.
-    if (!node) throw `bad template: ${text}`;
-    // if the current node is a comment, and it contains isµX
-    // it means the update should take care of any content
-    if (node.nodeType === 8) {
-      // The only comments to be considered are those
-      // which content is exactly the same as the searched one.
-      if (node.data === search) {
-        nodes.push({ type: 'node', path: createPath(node) });
-        search = `${prefix}${++i}`;
-      }
-    } else {
-      // if the node is not a comment, loop through all its attributes
-      // named isµX and relate attribute updates to this node and the
-      // attribute name, retrieved through node.getAttribute("isµX")
-      // the isµX attribute will be removed as irrelevant for the layout
-      // let svg = -1;
-      while (node.hasAttribute(search)) {
-        nodes.push({
-          type: 'attr',
-          path: createPath(node),
-          name: node.getAttribute(search)
-        });
-        node.removeAttribute(search);
-        search = `${prefix}${++i}`;
-      }
-      // if the node was a style, textarea, or others, check its content
-      // and if it is <!--isµX--> then update tex-only this node
-      if (textOnly.test(node.localName) && node.textContent.trim() === `<!--${search}-->`) {
-        node.textContent = '';
-        nodes.push({ type: 'text', path: createPath(node) });
-        search = `${prefix}${++i}`;
-      }
-    }
-  }
-  // once all nodes to update, or their attributes, are known, the content
-  // will be cloned in the future to represent the template, and all updates
-  // related to such content retrieved right away without needing to re-crawl
-  // the exact same template, and its content, more than once.
-  return { content, nodes };
+	const svg = type === 'svg';
+	const text = instrument(template, prefix, svg);
+	const content = createContent(text, svg);
+	// once instrumented and reproduced as fragment, it's crawled
+	// to find out where each update is in the fragment tree
+	const tw = createTreeWalker(content, 1 | 128);
+	const nodes = [];
+	const length = template.length - 1;
+	let i = 0;
+	// updates are searched via unique names, linearly increased across the tree
+	// <div isµ0="attr" isµ1="other"><!--isµ2--><style><!--isµ3--</style></div>
+	let search = `${prefix}${i}`;
+	while (i < length) {
+		const node = tw.nextNode();
+		// if not all updates are bound but there's nothing else to crawl
+		// it means that there is something wrong with the template.
+		if (!node) throw `bad template: ${text}`;
+		// if the current node is a comment, and it contains isµX
+		// it means the update should take care of any content
+		if (node.nodeType === 8) {
+			// The only comments to be considered are those
+			// which content is exactly the same as the searched one.
+			if (node.data === search) {
+				nodes.push({ type: 'node', path: createPath(node) });
+				search = `${prefix}${++i}`;
+			}
+		} else {
+			// if the node is not a comment, loop through all its attributes
+			// named isµX and relate attribute updates to this node and the
+			// attribute name, retrieved through node.getAttribute("isµX")
+			// the isµX attribute will be removed as irrelevant for the layout
+			// let svg = -1;
+			while (node.hasAttribute(search)) {
+				nodes.push({
+					type: 'attr',
+					path: createPath(node),
+					name: node.getAttribute(search)
+				});
+				node.removeAttribute(search);
+				search = `${prefix}${++i}`;
+			}
+			// if the node was a style, textarea, or others, check its content
+			// and if it is <!--isµX--> then update tex-only this node
+			if (textOnly.test(node.localName) && node.textContent.trim() === `<!--${search}-->`) {
+				node.textContent = '';
+				nodes.push({ type: 'text', path: createPath(node) });
+				search = `${prefix}${++i}`;
+			}
+		}
+	}
+	// once all nodes to update, or their attributes, are known, the content
+	// will be cloned in the future to represent the template, and all updates
+	// related to such content retrieved right away without needing to re-crawl
+	// the exact same template, and its content, more than once.
+	return { content, nodes };
 };
 
 // if a template is unknown, perform the previous mapping, otherwise grab
 // its details such as the fragment with all nodes, and updates info.
 const mapUpdates = (type, template) => {
-  const { content, nodes } =
-    cache$1.get(template) || cache$1.set(template, mapTemplate(type, template));
-  // clone deeply the fragment
-  const fragment = importNode(content, true);
-  // and relate an update handler per each node that needs one
-  const updates = nodes.map(handlers, fragment);
-  // return the fragment and all updates to use within its nodes
-  return { content: fragment, updates };
+	const { content, nodes } =
+		cache$1.get(template) || cache$1.set(template, mapTemplate(type, template));
+	// clone deeply the fragment
+	const fragment = importNode(content, true);
+	// and relate an update handler per each node that needs one
+	const updates = nodes.map(handlers, fragment);
+	// return the fragment and all updates to use within its nodes
+	return { content: fragment, updates };
 };
 
 // as html and svg can be nested calls, but no parent node is known
@@ -951,48 +969,48 @@ const mapUpdates = (type, template) => {
 // discover what to do with each interpolation, which will result
 // into an update operation.
 const unroll = (info, { type, template, values }) => {
-  // interpolations can contain holes and arrays, so these need
-  // to be recursively discovered
-  const length = unrollValues(info, values);
-  let { entry } = info;
-  // if the cache entry is either null or different from the template
-  // and the type this unroll should resolve, create a new entry
-  // assigning a new content fragment and the list of updates.
-  if (!entry || entry.template !== template || entry.type !== type)
-    info.entry = entry = createEntry(type, template);
-  const { content, updates, wire } = entry;
-  // even if the fragment and its nodes is not live yet,
-  // it is already possible to update via interpolations values.
-  for (let i = 0; i < length; i++) updates[i](values[i]);
-  // if the entry was new, or representing a different template or type,
-  // create a new persistent entity to use during diffing.
-  // This is simply a DOM node, when the template has a single container,
-  // as in `<p></p>`, or a "wire" in `<p></p><p></p>` and similar cases.
-  return wire || (entry.wire = persistent(content));
+	// interpolations can contain holes and arrays, so these need
+	// to be recursively discovered
+	const length = unrollValues(info, values);
+	let { entry } = info;
+	// if the cache entry is either null or different from the template
+	// and the type this unroll should resolve, create a new entry
+	// assigning a new content fragment and the list of updates.
+	if (!entry || entry.template !== template || entry.type !== type)
+		info.entry = entry = createEntry(type, template);
+	const { content, updates, wire } = entry;
+	// even if the fragment and its nodes is not live yet,
+	// it is already possible to update via interpolations values.
+	for (let i = 0; i < length; i++) updates[i](values[i]);
+	// if the entry was new, or representing a different template or type,
+	// create a new persistent entity to use during diffing.
+	// This is simply a DOM node, when the template has a single container,
+	// as in `<p></p>`, or a "wire" in `<p></p><p></p>` and similar cases.
+	return wire || (entry.wire = persistent(content));
 };
 
 // the stack retains, per each interpolation value, the cache
 // related to each interpolation value, or null, if the render
 // was conditional and the value is not special (Array or Hole)
 const unrollValues = ({ stack }, values) => {
-  const { length } = values;
-  for (let i = 0; i < length; i++) {
-    const hole = values[i];
-    // each Hole gets unrolled and re-assigned as value
-    // so that domdiff will deal with a node/wire, not with a hole
-    if (hole instanceof Hole) values[i] = unroll(stack[i] || (stack[i] = createCache()), hole);
-    // arrays are recursively resolved so that each entry will contain
-    // also a DOM node or a wire, hence it can be diffed if/when needed
-    else if (isArray(hole)) unrollValues(stack[i] || (stack[i] = createCache()), hole);
-    // if the value is nothing special, the stack doesn't need to retain data
-    // this is useful also to cleanup previously retained data, if the value
-    // was a Hole, or an Array, but not anymore, i.e.:
-    // const update = content => html`<div>${content}</div>`;
-    // update(listOfItems); update(null); update(html`hole`)
-    else stack[i] = null;
-  }
-  if (length < stack.length) stack.splice(length);
-  return length;
+	const { length } = values;
+	for (let i = 0; i < length; i++) {
+		const hole = values[i];
+		// each Hole gets unrolled and re-assigned as value
+		// so that domdiff will deal with a node/wire, not with a hole
+		if (hole instanceof Hole) values[i] = unroll(stack[i] || (stack[i] = createCache()), hole);
+		// arrays are recursively resolved so that each entry will contain
+		// also a DOM node or a wire, hence it can be diffed if/when needed
+		else if (isArray(hole)) unrollValues(stack[i] || (stack[i] = createCache()), hole);
+		// if the value is nothing special, the stack doesn't need to retain data
+		// this is useful also to cleanup previously retained data, if the value
+		// was a Hole, or an Array, but not anymore, i.e.:
+		// const update = content => html`<div>${content}</div>`;
+		// update(listOfItems); update(null); update(html`hole`)
+		else stack[i] = null;
+	}
+	if (length < stack.length) stack.splice(length);
+	return length;
 };
 
 /**
@@ -1003,44 +1021,44 @@ const unrollValues = ({ stack }, values) => {
  * @param {Array} values Zero, one, or more interpolated values to render.
  */
 class Hole {
-  constructor(type, template, values) {
-    this.type = type;
-    this.template = template;
-    this.values = values;
-  }
+	constructor(type, template, values) {
+		this.type = type;
+		this.template = template;
+		this.values = values;
+	}
 }
 
 // both `html` and `svg` template literal tags are polluted
 // with a `for(ref[, id])` and a `node` tag too
 const tag = (type) => {
-  // both `html` and `svg` tags have their own cache
-  const keyed = new WeakMapSet();
-  // keyed operations always re-use the same cache and unroll
-  // the template and its interpolations right away
-  const fixed =
-    (cache) =>
-    (template, ...values) =>
-      unroll(cache, { type, template, values });
-  return Object.assign(
-    // non keyed operations are recognized as instance of Hole
-    // during the "unroll", recursively resolved and updated
-    (template, ...values) => new Hole(type, template, values),
-    {
-      // keyed operations need a reference object, usually the parent node
-      // which is showing keyed results, and optionally a unique id per each
-      // related node, handy with JSON results and mutable list of objects
-      // that usually carry a unique identifier
-      for(ref, id) {
-        const memo = keyed.get(ref) || keyed.set(ref, new MapSet());
-        return memo.get(id) || memo.set(id, fixed(createCache()));
-      },
-      // it is possible to create one-off content out of the box via node tag
-      // this might return the single created node, or a fragment with all
-      // nodes present at the root level and, of course, their child nodes
-      node: (template, ...values) =>
-        unroll(createCache(), new Hole(type, template, values)).valueOf()
-    }
-  );
+	// both `html` and `svg` tags have their own cache
+	const keyed = new WeakMapSet();
+	// keyed operations always re-use the same cache and unroll
+	// the template and its interpolations right away
+	const fixed =
+		(cache) =>
+		(template, ...values) =>
+			unroll(cache, { type, template, values });
+	return Object.assign(
+		// non keyed operations are recognized as instance of Hole
+		// during the "unroll", recursively resolved and updated
+		(template, ...values) => new Hole(type, template, values),
+		{
+			// keyed operations need a reference object, usually the parent node
+			// which is showing keyed results, and optionally a unique id per each
+			// related node, handy with JSON results and mutable list of objects
+			// that usually carry a unique identifier
+			for(ref, id) {
+				const memo = keyed.get(ref) || keyed.set(ref, new MapSet());
+				return memo.get(id) || memo.set(id, fixed(createCache()));
+			},
+			// it is possible to create one-off content out of the box via node tag
+			// this might return the single created node, or a fragment with all
+			// nodes present at the root level and, of course, their child nodes
+			node: (template, ...values) =>
+				unroll(createCache(), new Hole(type, template, values)).valueOf()
+		}
+	);
 };
 
 // each rendered node gets its own cache
@@ -1052,18 +1070,18 @@ const cache = new WeakMapSet();
 // and the new new content is appended, and if such content is a Hole
 // then it's "unrolled" to resolve all its inner nodes.
 const render = (where, what) => {
-  const hole = typeof what === 'function' ? what() : what;
-  const info = cache.get(where) || cache.set(where, createCache());
-  const wire = hole instanceof Hole ? unroll(info, hole) : hole;
-  if (wire !== info.wire) {
-    info.wire = wire;
-    // valueOf() simply returns the node itself, but in case it was a "wire"
-    // it will eventually re-append all nodes to its fragment so that such
-    // fragment can be re-appended many times in a meaningful way
-    // (wires are basically persistent fragments facades with special behavior)
-    where.replaceChildren(wire.valueOf());
-  }
-  return where;
+	const hole = typeof what === 'function' ? what() : what;
+	const info = cache.get(where) || cache.set(where, createCache());
+	const wire = hole instanceof Hole ? unroll(info, hole) : hole;
+	if (wire !== info.wire) {
+		info.wire = wire;
+		// valueOf() simply returns the node itself, but in case it was a "wire"
+		// it will eventually re-append all nodes to its fragment so that such
+		// fragment can be re-appended many times in a meaningful way
+		// (wires are basically persistent fragments facades with special behavior)
+		where.replaceChildren(wire.valueOf());
+	}
+	return where;
 };
 
 const html$1 = tag('html');
@@ -1077,8 +1095,10 @@ tag('svg');
  * @param callback Invoked when the rendering phase is completed.
  */
 const requestUpdate = (target, name, previous, callback) => {
+    // Ensure API_STACKS exists on target
+    target[API_STACKS] ||= new Map();
     // Creates/Gets a stacks.
-    const stacks = (target[API_STACKS] ||= new Map());
+    const stacks = target[API_STACKS];
     // Creates/Updates a stack.
     const stack = stacks.get(name) || { callbacks: [], previous };
     // Adds the callback to the stack, if exists.
@@ -1101,7 +1121,7 @@ const requestUpdate = (target, name, previous, callback) => {
         // Invokes requests' callback.
         stacks.forEach((state) => {
             state.callbacks.forEach((callback, index, callbacks) => {
-                callback(callbacks.length - 1 != index);
+                callback(callbacks.length - 1 !== index);
             });
         });
         // TODO
@@ -1119,7 +1139,7 @@ const requestUpdate = (target, name, previous, callback) => {
             if (!hasVariable && localSheet)
                 return;
             const parsed = raw
-                .replace(regex1, (match, key) => {
+                .replace(regex1, (_match, key) => {
                 let value = target;
                 for (const section of key.split('-')) {
                     value = value?.[section];
@@ -1130,7 +1150,7 @@ const requestUpdate = (target, name, previous, callback) => {
             if (!localSheet) {
                 localSheet = new CSSStyleSheet();
                 target[API_STYLE] = localSheet;
-                shadowRoot(target).adoptedStyleSheets.push(localSheet);
+                shadowRoot(target)?.adoptedStyleSheets.push(localSheet);
             }
             const localStyle = parsed.replace(regex3, '');
             localSheet.replaceSync(localStyle);
@@ -1145,7 +1165,7 @@ const requestUpdate = (target, name, previous, callback) => {
                 ?.match(regex3)
                 ?.join('')
                 ?.replaceAll('global', '')
-                ?.replaceAll(':host', getTag(target));
+                ?.replaceAll(':host', getTag(target) || '');
             globalSheet.replaceSync(globalStyle);
         })();
         // Calls the lifecycle's callback after the rendering phase.
@@ -1169,9 +1189,15 @@ const slots = (target) => {
     const slots = {};
     const children = Array.from(element.childNodes);
     for (const child of children) {
-        if (child.nodeName == '#comment')
+        if (child.nodeType === Node.COMMENT_NODE)
             continue;
-        const name = child['slot'] || (child.nodeValue?.trim() && 'default') || ('slot' in child && 'default');
+        let name;
+        if (child instanceof HTMLElement) {
+            name = child.slot || 'default';
+        }
+        else if (child.nodeType === Node.TEXT_NODE && child.nodeValue?.trim()) {
+            name = 'default';
+        }
         if (!name)
             continue;
         slots[name] = true;
@@ -1194,10 +1220,10 @@ const toCSSColor = (input) => {
 };
 
 const toCSSUnit = (input) => {
-    if (input == null || input === '') {
+    if (input === undefined || input === null || input === '') {
         return;
     }
-    if (typeof input === 'number' || !isNaN(Number(input))) {
+    if (typeof input === 'number' || (typeof input === 'string' && !Number.isNaN(Number(input)))) {
         return `${input}px`;
     }
     if (/^\d+(\.\d+)?(px|pt|cm|mm|in|em|rem|%|vw|vh)$/.test(input)) {
@@ -1206,7 +1232,7 @@ const toCSSUnit = (input) => {
 };
 
 function toDecorator(util, ...args) {
-    return function (target, key) {
+    return (target, key) => {
         defineProperty(target, key, {
             get() {
                 return util(this, ...args);
@@ -1219,7 +1245,8 @@ const toProperty = (input, type) => {
     if (type === undefined)
         return input;
     const string = `${input}`;
-    if (TYPE_BOOLEAN & type || type === Boolean) {
+    const typeNumber = typeof type === 'number' ? type : 0;
+    if (TYPE_BOOLEAN & typeNumber || type === Boolean) {
         if (string === '')
             return true;
         if (string === 'true')
@@ -1227,46 +1254,55 @@ const toProperty = (input, type) => {
         if (string === 'false')
             return false;
     }
-    if (TYPE_NUMBER & type || type === Number) {
-        if (string != '' && !isNaN(input)) {
-            return parseFloat(input);
+    if (TYPE_NUMBER & typeNumber || type === Number) {
+        if (string !== '' && !Number.isNaN(Number(input))) {
+            return parseFloat(string);
         }
     }
-    if (TYPE_NULL & type || type === null) {
+    if (TYPE_NULL & typeNumber || type === null) {
         if (string === 'null') {
             return null;
         }
     }
-    if (TYPE_DATE & type || type === Date) {
-        const value = new Date(input);
-        if (value.toString() != 'Invalid Date') {
+    if (TYPE_DATE & typeNumber || type === Date) {
+        const value = new Date(string);
+        if (!Number.isNaN(value.getTime())) {
             return value;
         }
     }
-    if (TYPE_ARRAY & type || type === Array) {
+    if (TYPE_ARRAY & typeNumber || type === Array) {
         try {
-            const value = JSON.parse(input);
-            if (typeOf(value) == 'array') {
+            const value = JSON.parse(string);
+            if (typeOf(value) === 'array')
                 return value;
-            }
         }
         catch { }
     }
-    if (TYPE_OBJECT & type || type === Object) {
+    if (TYPE_OBJECT & typeNumber || type === Object) {
         try {
-            const value = JSON.parse(input);
-            if (typeOf(value) == 'object') {
+            const value = JSON.parse(string);
+            if (typeOf(value) === 'object') {
                 return value;
             }
         }
         catch { }
     }
-    if (TYPE_UNDEFINED & type || type === undefined) {
+    if (TYPE_UNDEFINED & typeNumber) {
         if (string === 'undefined') {
             return undefined;
         }
     }
-    return input;
+    if (TYPE_STRING & typeNumber || type === String) {
+        return string;
+    }
+    // TODO: BigInt, Enum, Function
+    try {
+        // TODO
+        return JSON.parse(string);
+    }
+    catch {
+        return input;
+    }
 };
 
 /**
@@ -1274,13 +1310,15 @@ const toProperty = (input, type) => {
  */
 const toUnit = (input, unit = 'px') => {
     if (input === null || input === undefined || input === '')
-        return input;
-    if (isNaN(+input))
         return String(input);
-    return Number(input) + unit;
+    if (Number.isNaN(Number(input)))
+        return String(input);
+    return `${Number(input)}${unit}`;
 };
 
-const wrapMethod = (mode, target, key, handler) => {
+const wrapMethod = (mode, target, key, 
+// biome-ignore lint: TODO
+handler) => {
     // Gets the original function
     const original = target[key];
     // Validate target property
@@ -1290,13 +1328,13 @@ const wrapMethod = (mode, target, key, handler) => {
     // Creates new function
     function wrapped(...args) {
         // Calls the handler before the original
-        if (mode == 'before') {
+        if (mode === 'before') {
             handler.apply(this, args);
         }
         // Calls the original
         const result = original?.apply(this, args);
         // Calls the handler after the original
-        if (mode == 'after') {
+        if (mode === 'after') {
             handler.apply(this, args);
         }
         // Returns the result
@@ -1311,7 +1349,7 @@ const wrapMethod = (mode, target, key, handler) => {
  * making it easier to reference `this` within the method.
  */
 function Bind() {
-    return function (target, key, descriptor) {
+    return (_target, key, descriptor) => {
         const original = descriptor.value;
         return {
             configurable: true,
@@ -1328,8 +1366,9 @@ function Bind() {
     };
 }
 
+// biome-ignore-all lint: TODO
 function Provider(namespace) {
-    return function (target, key) {
+    return (target, key) => {
         const symbol = Symbol();
         const [MAIN, SUB] = namespace.split('.');
         const prefix = `${KEY}:${MAIN}`;
@@ -1376,12 +1415,14 @@ function Provider(namespace) {
             cleanups(this).set(type, cleanup);
         });
         wrapMethod('after', target, LIFECYCLE_DISCONNECTED, function () {
-            cleanups(this).forEach((cleanup) => cleanup());
+            cleanups(this).forEach((cleanup) => {
+                cleanup();
+            });
         });
     };
 }
 function Consumer(namespace) {
-    return function (target, key) {
+    return (target, key) => {
         const symbol = Symbol();
         const [MAIN, SUB] = namespace.split('.');
         const prefix = `${KEY}:${MAIN}`;
@@ -1397,7 +1438,7 @@ function Consumer(namespace) {
             if (SUB && this[SUB])
                 return;
             // TODO
-            let connected;
+            let connected = false;
             const options = {
                 bubbles: true
             };
@@ -1443,7 +1484,9 @@ function Consumer(namespace) {
             dispatch(window, `${type}:presence`);
         });
         wrapMethod('after', target, LIFECYCLE_DISCONNECTED, function () {
-            cleanups(this).forEach((cleanup) => cleanup());
+            cleanups(this).forEach((cleanup) => {
+                cleanup();
+            });
         });
     };
 }
@@ -1456,7 +1499,7 @@ function Consumer(namespace) {
  * @param {number} delay - The debounce delay in milliseconds.
  */
 function Debounce(delay = 0) {
-    return function (target, key, descriptor) {
+    return (target, key, descriptor) => {
         const KEY = Symbol();
         const original = descriptor.value;
         function clear() {
@@ -1491,27 +1534,36 @@ function Direction() {
  * and its name, in kebab-case, serves as the element name.
  */
 function Element() {
-    return function (constructor) {
+    // biome-ignore lint: TODO
+    return (constructor) => {
         if (isServer())
             return;
         const tag = getTag(constructor);
+        if (!tag)
+            return;
         if (customElements.get(tag))
             return;
         customElements.define(tag, proxy(constructor));
     };
 }
+// biome-ignore lint: TODO
 const proxy = (constructor) => {
     return class Plus extends HTMLElement {
         #instance;
+        // biome-ignore lint: TODO
         static formAssociated = constructor['formAssociated'];
+        // biome-ignore lint: TODO
         static observedAttributes = constructor['observedAttributes'];
         constructor() {
             super();
             this.attachShadow({
                 mode: 'open',
+                // biome-ignore lint: TODO
                 delegatesFocus: constructor['delegatesFocus'],
+                // biome-ignore lint: TODO
                 slotAssignment: constructor['slotAssignment']
             });
+            // biome-ignore lint: TODO
             this.#instance = new constructor();
             this.#instance[API_HOST] = () => this;
             call(this.#instance, LIFECYCLE_CONSTRUCTED);
@@ -1520,13 +1572,37 @@ const proxy = (constructor) => {
             call(this.#instance, LIFECYCLE_ADOPTED);
         }
         attributeChangedCallback(key, prev, next) {
-            if (prev != next) {
-                this.#instance['RAW:' + key] = next;
+            if (prev !== next) {
+                this.#instance[`RAW:${key}`] = next;
             }
         }
         connectedCallback() {
             // TODO: experimental for global config
-            Object.assign(this.#instance, getConfig('element', getTag(this.#instance), 'property'));
+            (() => {
+                const namespace = getNamespace(this.#instance) || '';
+                const tag = getTag(this.#instance) || '';
+                const properties = getConfig(namespace).elements?.[tag]?.properties;
+                if (!properties)
+                    return;
+                const defaults = Object.fromEntries(Object.entries(properties).map(([key, value]) => [key, value?.default]));
+                Object.assign(this, defaults);
+            })();
+            // TODO
+            (() => {
+                const key = Object.keys(this).find((key) => key.startsWith('__reactProps'));
+                const props = this[key];
+                if (!props)
+                    return;
+                for (const [key, value] of Object.entries(props)) {
+                    if (this[key] !== undefined)
+                        continue;
+                    if (key === 'children')
+                        continue;
+                    if (typeof value !== 'object')
+                        continue;
+                    this[key] = value;
+                }
+            })();
             this.#instance[API_CONNECTED] = true;
             call(this.#instance, LIFECYCLE_CONNECTED);
             requestUpdate(this.#instance, undefined, undefined, () => {
@@ -1546,7 +1622,7 @@ const proxy = (constructor) => {
  * @param options An object that configures options for the event dispatcher.
  */
 function Event(options = {}) {
-    return function (target, key) {
+    return (target, key) => {
         target[key] = function (detail) {
             const element = host(this);
             const framework = getFramework(this);
@@ -1558,6 +1634,7 @@ function Event(options = {}) {
                     options.bubbles = true;
                     type = pascalCase(type);
                     try {
+                        // biome-ignore lint: TODO
                         window['Blazor'].registerCustomEventType(type, {
                             createEventArgs: (event) => ({
                                 detail: event.detail
@@ -1579,7 +1656,8 @@ function Event(options = {}) {
                     break;
             }
             let event;
-            event ||= getConfig('event', 'resolver')?.({ detail, element, framework, options, type });
+            const resolver = getConfig(getNamespace(target) || '').event?.resolver;
+            event ||= resolver?.({ detail, element, framework, options, type });
             event && element.dispatchEvent(event);
             event ||= dispatch(this, type, { ...options, detail });
             return event;
@@ -1611,7 +1689,7 @@ function IsRTL() {
  * for the event listener.
  */
 function Listen(type, options) {
-    return function (target, key, descriptor) {
+    return (target, key, descriptor) => {
         const element = (instance) => {
             switch (options?.target) {
                 case 'body':
@@ -1641,19 +1719,183 @@ function Listen(type, options) {
  * and invoke it as needed, both internally and externally.
  */
 function Method() {
-    return function (target, key, descriptor) {
+    return (target, key, _descriptor) => {
         wrapMethod('before', target, LIFECYCLE_CONSTRUCTED, function () {
             host(this)[key] = this[key].bind(this);
         });
     };
 }
 
+const CONTAINER_DATA = Symbol();
+const getContainers = (breakpoints) => {
+    return Object.entries(breakpoints || {}).reduce((result, [key, breakpoint]) => {
+        if (breakpoint.type !== 'container')
+            return result;
+        result[key] = {
+            min: breakpoint.min,
+            max: breakpoint.max
+        };
+        return result;
+    }, {});
+};
+const getMedias = (breakpoints) => {
+    return Object.entries(breakpoints || {}).reduce((result, [key, breakpoint]) => {
+        if (breakpoint.type !== 'media')
+            return result;
+        const parts = [];
+        const min = 'min' in breakpoint ? breakpoint.min : undefined;
+        const max = 'max' in breakpoint ? breakpoint.max : undefined;
+        if (min !== undefined)
+            parts.push(`(min-width: ${min}px)`);
+        if (max !== undefined)
+            parts.push(`(max-width: ${max}px)`);
+        const query = parts.join(' and ');
+        if (query)
+            result[key] = query;
+        return result;
+    }, {});
+};
+const matchContainer = (element, container) => {
+    const getData = () => {
+        if (element[CONTAINER_DATA])
+            return element[CONTAINER_DATA];
+        const listeners = new Set();
+        const observer = new ResizeObserver(() => {
+            listeners.forEach((listener) => {
+                listener();
+            });
+        });
+        observer.observe(element);
+        element[CONTAINER_DATA] = { listeners, observer };
+        return element[CONTAINER_DATA];
+    };
+    const getMatches = () => {
+        const width = element.offsetWidth;
+        const matches = (container.min === undefined || width >= container.min) &&
+            (container.max === undefined || width <= container.max);
+        return matches;
+    };
+    const addEventListener = (_type, listener) => {
+        getData().listeners.add(listener);
+    };
+    const removeEventListener = (_type, listener) => {
+        const data = getData();
+        data.listeners.delete(listener);
+        if (data.listeners.size !== 0)
+            return;
+        data.observer.disconnect();
+        delete element[CONTAINER_DATA];
+    };
+    return {
+        get matches() {
+            return getMatches();
+        },
+        addEventListener,
+        removeEventListener
+    };
+};
+function Overrides() {
+    return (target, key) => {
+        const DISPOSERS = Symbol();
+        const breakpoints = getConfig(getNamespace(target) || '').breakpoints || {};
+        const containers = getContainers(breakpoints);
+        const medias = getMedias(breakpoints);
+        wrapMethod('after', target, LIFECYCLE_UPDATE, function (states) {
+            if (!states.has(key))
+                return;
+            this[DISPOSERS] ??= new Map();
+            const disposers = this[DISPOSERS];
+            const overrides = this[key] || {};
+            const activeKeys = new Set(disposers.keys());
+            const overrideKeys = Object.keys(overrides);
+            const containerKeys = overrideKeys.filter((breakpoint) => breakpoint in containers);
+            const mediaKeys = overrideKeys.filter((breakpoint) => breakpoint in medias);
+            let timeout = -1;
+            let next = {};
+            const apply = (key) => {
+                clearTimeout(timeout);
+                Object.assign(next, overrides[key]);
+                timeout = window.setTimeout(() => {
+                    Object.assign(host(this), overrides[key]);
+                    next = {};
+                }, 0);
+            };
+            for (const overrideKey of overrideKeys) {
+                if (activeKeys.delete(overrideKey))
+                    continue;
+                const breakpoint = breakpoints[overrideKey];
+                if (!breakpoint)
+                    continue;
+                switch (breakpoint.type) {
+                    case 'container': {
+                        const container = containers[overrideKey];
+                        if (!container)
+                            break;
+                        const containerQueryList = matchContainer(host(this), container);
+                        const change = () => {
+                            for (const containerKey of containerKeys) {
+                                if (matchContainer(host(this), containers[containerKey]).matches) {
+                                    apply(containerKey);
+                                }
+                            }
+                        };
+                        containerQueryList.addEventListener('change', change);
+                        const disposer = () => {
+                            containerQueryList.removeEventListener('change', change);
+                        };
+                        disposers.set(overrideKey, disposer);
+                        if (!containerQueryList.matches)
+                            break;
+                        change();
+                        break;
+                    }
+                    case 'media': {
+                        const media = medias[overrideKey];
+                        if (!media)
+                            break;
+                        const mediaQueryList = window.matchMedia(media);
+                        const change = () => {
+                            for (const mediaKey of mediaKeys) {
+                                if (window.matchMedia(medias[mediaKey]).matches) {
+                                    apply(mediaKey);
+                                }
+                            }
+                        };
+                        mediaQueryList.addEventListener('change', change);
+                        const disposer = () => {
+                            mediaQueryList.removeEventListener('change', change);
+                        };
+                        disposers.set(overrideKey, disposer);
+                        if (!mediaQueryList.matches)
+                            break;
+                        change();
+                        break;
+                    }
+                }
+            }
+            for (const activeKey of activeKeys) {
+                const disposer = disposers.get(activeKey);
+                disposer?.();
+                disposers.delete(activeKey);
+            }
+        });
+        wrapMethod('after', target, LIFECYCLE_DISCONNECTED, function () {
+            this[DISPOSERS] ??= new Map();
+            const disposers = this[DISPOSERS];
+            disposers.forEach((disposer) => {
+                disposer();
+            });
+            disposers.clear();
+        });
+    };
+}
+
 /**
  * Creates a reactive property, reflecting a corresponding attribute value,
  * and updates the element when the property is set.
  */
 function Property(options) {
-    return function (target, key, descriptor) {
+    return (target, key, descriptor) => {
         // Unique symbol for property storage to avoid naming conflicts
         const KEY = Symbol();
         // Unique symbol for the lock flag to prevent infinite loops during updates
@@ -1662,8 +1904,12 @@ function Property(options) {
         const attribute = options?.attribute || kebabCase(key);
         // Store the original setter (if it exists) to preserve its behavior
         const originalSetter = descriptor?.set;
+        // Ensure the element class has an observedAttributes array
+        // biome-ignore lint: TODO
+        target.constructor['observedAttributes'] ||= [];
         // Register the attribute in the observedAttributes array for the element
-        (target.constructor['observedAttributes'] ||= []).push(attribute);
+        // biome-ignore lint: TODO
+        target.constructor['observedAttributes'].push(attribute);
         // Getter function to retrieve the property value
         function get() {
             return this[KEY];
@@ -1713,7 +1959,7 @@ function Property(options) {
          * Define a raw property setter to handle updates that trigger from the `attributeChangedCallback`,
          * To intercept and process raw attribute values before they are assigned to the property
          */
-        defineProperty(target, 'RAW:' + attribute, {
+        defineProperty(target, `RAW:${attribute}`, {
             set(value) {
                 if (!this[LOCKED]) {
                     // Convert the raw value and set it to the corresponding property
@@ -1800,7 +2046,7 @@ function Slots() {
  * element to re-render upon the desired property changes.
  */
 function State() {
-    return function (target, key) {
+    return (target, key) => {
         const KEY = Symbol();
         const name = String(key);
         defineProperty(target, key, {
@@ -1822,7 +2068,7 @@ function State() {
 
 // TODO: check the logic
 function Style() {
-    return function (target, key) {
+    return (target, key) => {
         const LAST = Symbol();
         const SHEET = Symbol();
         wrapMethod('before', target, LIFECYCLE_UPDATED, function () {
@@ -1843,6 +2089,7 @@ function Style() {
                 value = value.call(this);
             }
             if (value instanceof Promise) {
+                // biome-ignore lint: TODO
                 value.then(update((this[LAST] = value))).catch((error) => {
                     throw new Error('TODO', { cause: error });
                 });
@@ -1854,7 +2101,7 @@ function Style() {
     };
 }
 const toCssString = (input, parent) => {
-    if (typeof input == 'string') {
+    if (typeof input === 'string') {
         return input.trim();
     }
     if (Array.isArray(input)) {
@@ -1863,7 +2110,9 @@ const toCssString = (input, parent) => {
             .filter(Boolean)
             .join('\n');
     }
-    if (typeof input != 'object')
+    if (input === null)
+        return '';
+    if (typeof input !== 'object')
         return '';
     let result = '';
     for (const key of Object.keys(input)) {
@@ -1892,7 +2141,7 @@ const toCssString = (input, parent) => {
  * @param immediate Triggers the callback immediately after initialization.
  */
 function Watch(keys, immediate) {
-    return function (target, key) {
+    return (target, key) => {
         // Gets all keys
         const all = [keys].flat().filter((item) => item);
         // Registers a lifecycle to detect changes.
@@ -1916,4 +2165,4 @@ const attributes = attributes$2;
 const html = html$1;
 const styles = styles$1;
 
-export { Bind, Consumer, Debounce, Direction, Element, Event, Host, IsRTL, Listen, Method, Property, Provider, Query, QueryAll, Slots, State, Style, Watch, attributes as a, classes, direction, dispatch, getConfig, html as h, host, isCSSColor, isRTL, off, on, query, queryAll, styles as s, setConfig, slots, toCSSColor, toCSSUnit, toUnit };
+export { Bind, Consumer, Debounce, Direction, Element, Event, Host, IsRTL, Listen, Method, Overrides, Property, Provider, Query, QueryAll, Slots, State, Style, Watch, attributes as a, classes, direction, dispatch, getConfig, getConfigCreator, html as h, host, isCSSColor, isRTL, off, on, query, queryAll, styles as s, setConfig, setConfigCreator, slots, toCSSColor, toCSSUnit, toUnit };