@oscarpalmer/abydon 0.21.0 → 0.23.0

package/dist/abydon.full.mjs

@@ -156,6 +156,11 @@ function unsubscribe(state, callback) {
 //#endregion
 //#region node_modules/@oscarpalmer/mora/dist/value/reactive.mjs
 var Reactive = class {
+	/**
+	* Internal state of the reactive value
+	*
+	* @internal
+	*/
 	state = {
 		computeds: /* @__PURE__ */ new Set(),
 		effects: /* @__PURE__ */ new Set(),
@@ -269,6 +274,44 @@ function setValue$2(instance, state, callback) {
 	}
 }
 //#endregion
+//#region node_modules/@oscarpalmer/mora/node_modules/@oscarpalmer/atoms/dist/internal/is.mjs
+/**
+* Is the value a key?
+* @param value Value to check
+* @returns `true` if the value is a `Key` _(`number` or `string`)_, otherwise `false`
+*/
+function isKey(value) {
+	return typeof value === "number" || typeof value === "string";
+}
+/**
+* Is the value a plain object?
+* @param value Value to check
+* @returns `true` if the value is a plain object, otherwise `false`
+*/
+function isPlainObject$1(value) {
+	if (value === null || typeof value !== "object") return false;
+	if (Symbol.toStringTag in value || Symbol.iterator in value) return false;
+	const prototype = Object.getPrototypeOf(value);
+	return prototype === null || prototype === Object.prototype || Object.getPrototypeOf(prototype) === null;
+}
+//#endregion
+//#region node_modules/@oscarpalmer/mora/node_modules/@oscarpalmer/atoms/dist/math.mjs
+/**
+* Round a number
+* @param value Number to round
+* @param decimals Number of decimal places to round to _(defaults to `0`)_
+* @returns Rounded number, or `NaN` if the value if unable to be rounded
+*/
+function round(value, decimals) {
+	return roundNumber(Math.round, value, decimals);
+}
+function roundNumber(callback, value, decimals) {
+	if (typeof value !== "number") return NaN;
+	if (typeof decimals !== "number" || decimals < 1) return callback(value);
+	const mod = 10 ** decimals;
+	return callback((value + Number.EPSILON) * mod) / mod;
+}
+//#endregion
 //#region node_modules/@oscarpalmer/mora/dist/helpers/value.mjs
 function emitValue(state) {
 	for (const computed of state.computeds) computed.effect.dirty = true;
@@ -281,7 +324,7 @@ function equalArrays(state, first, second) {
 	if (length !== second.length) return false;
 	let offset = 0;
 	if (length >= 100) {
-		offset = Math.round(length / 10);
+		offset = round(length / 10);
 		offset = offset > 25 ? 25 : offset;
 		for (let index = 0; index < offset; index += 1) if (!state.equal(first[index], second[index])) return false;
 	}
@@ -575,27 +618,6 @@ function setAtIndex(state, index, value) {
 	if (actual > -1) state.value[actual] = value;
 }
 //#endregion
-//#region node_modules/@oscarpalmer/mora/node_modules/@oscarpalmer/atoms/dist/internal/is.mjs
-/**
-* Is the value a key?
-* @param value Value to check
-* @returns `true` if the value is a `Key` _(`number` or `string`)_, otherwise `false`
-*/
-function isKey(value) {
-	return typeof value === "number" || typeof value === "string";
-}
-/**
-* Is the value a plain object?
-* @param value Value to check
-* @returns `true` if the value is a plain object, otherwise `false`
-*/
-function isPlainObject$2(value) {
-	if (value === null || typeof value !== "object") return false;
-	if (Symbol.toStringTag in value || Symbol.iterator in value) return false;
-	const prototype = Object.getPrototypeOf(value);
-	return prototype === null || prototype === Object.prototype || Object.getPrototypeOf(prototype) === null;
-}
-//#endregion
 //#region node_modules/@oscarpalmer/mora/dist/value/store.mjs
 var Store = class extends Reactive {
 	#keyed = /* @__PURE__ */ new Map();
@@ -636,11 +658,11 @@ var Store = class extends Reactive {
 	*/
 	update(callback) {
 		const updated = callback(this.state.value);
-		if (updated == null || isPlainObject$2(updated)) setObject(this.state, updated);
+		if (updated == null || isPlainObject$1(updated)) setObject(this.state, updated);
 	}
 };
 function isStoreObject(value) {
-	return value == null || isPlainObject$2(value);
+	return value == null || isPlainObject$1(value);
 }
 function setObject(state, value) {
 	startBatch();
@@ -671,11 +693,19 @@ function store(value, options) {
 //#endregion
 //#region node_modules/@oscarpalmer/atoms/dist/internal/is.mjs
 /**
+* Is the value a number?
+* @param value Value to check
+* @returns `true` if the value is a `number`, otherwise `false`
+*/
+function isNumber(value) {
+	return typeof value === "number" && !Number.isNaN(value);
+}
+/**
 * Is the value a plain object?
 * @param value Value to check
 * @returns `true` if the value is a plain object, otherwise `false`
 */
-function isPlainObject$1(value) {
+function isPlainObject(value) {
 	if (value === null || typeof value !== "object") return false;
 	if (Symbol.toStringTag in value || Symbol.iterator in value) return false;
 	const prototype = Object.getPrototypeOf(value);
@@ -688,14 +718,42 @@ function isPlainObject$1(value) {
 * @param value Original value
 * @returns String representation of the value
 */
-function getString$1(value) {
+function getString(value) {
 	if (typeof value === "string") return value;
 	if (value == null) return "";
-	if (typeof value === "function") return getString$1(value());
+	if (typeof value === "function") return getString(value());
 	if (typeof value !== "object") return String(value);
 	const asString = String(value.valueOf?.() ?? value);
 	return asString.startsWith("[object ") ? JSON.stringify(value) : asString;
 }
+/**
+* Join an array of values into a string _(while ignoring empty values)_
+*
+* _(`null`, `undefined`, and any values that become whitespace-only strings are considered empty)_
+* @param array Array of values
+* @param delimiter Delimiter to use between values
+* @returns Joined string
+*/
+function join(array, delimiter) {
+	if (!Array.isArray(array)) return "";
+	const { length } = array;
+	if (length === 0) return "";
+	const values = [];
+	for (let index = 0; index < length; index += 1) {
+		const item = getString(array[index]);
+		if (item.trim().length > 0) values.push(item);
+	}
+	return values.join(typeof delimiter === "string" ? delimiter : "");
+}
+/**
+* Split a string into words _(and other readable parts)_
+* @param value Original string
+* @returns Array of words found in the string
+*/
+function words(value) {
+	return typeof value === "string" ? value.match(EXPRESSION_WORDS) ?? [] : [];
+}
+const EXPRESSION_WORDS = /[^\x00-\x2f\x3a-\x40\x5b-\x60\x7b-\x7f]+/g;
 //#endregion
 //#region node_modules/@oscarpalmer/atoms/dist/is.mjs
 /**
@@ -703,10 +761,10 @@ function getString$1(value) {
 * @param value Value to check
 * @returns `true` if the value is nullable or matches a whitespace-only string, otherwise `false`
 */
-function isNullableOrWhitespace$1(value) {
-	return value == null || EXPRESSION_WHITESPACE$2.test(getString$1(value));
+function isNullableOrWhitespace(value) {
+	return value == null || EXPRESSION_WHITESPACE$1.test(getString(value));
 }
-const EXPRESSION_WHITESPACE$2 = /^\s*$/;
+const EXPRESSION_WHITESPACE$1 = /^\s*$/;
 //#endregion
 //#region node_modules/@oscarpalmer/toretto/dist/internal/is.mjs
 /**
@@ -725,6 +783,14 @@ function isEventTarget(value) {
 function isHTMLOrSVGElement(value) {
 	return value instanceof HTMLElement || value instanceof SVGElement;
 }
+/**
+* Is the value an input element? _(`<input>`, `<select>`, or `<textarea>`)_
+* @param value Value to check
+* @returns `true` if it's an input element, otherwise `false`
+*/
+function isInputElement(value) {
+	return value instanceof HTMLInputElement || value instanceof HTMLSelectElement || value instanceof HTMLTextAreaElement;
+}
 //#endregion
 //#region node_modules/@oscarpalmer/toretto/dist/is.mjs
 /**
@@ -743,85 +809,7 @@ const CHILD_NODE_TYPES = new Set([
 	Node.DOCUMENT_TYPE_NODE
 ]);
 //#endregion
-//#region node_modules/@oscarpalmer/toretto/node_modules/@oscarpalmer/atoms/dist/internal/is.mjs
-/**
-* Is the value a number?
-* @param value Value to check
-* @returns `true` if the value is a `number`, otherwise `false`
-*/
-function isNumber(value) {
-	return typeof value === "number" && !Number.isNaN(value);
-}
-/**
-* Is the value a plain object?
-* @param value Value to check
-* @returns `true` if the value is a plain object, otherwise `false`
-*/
-function isPlainObject(value) {
-	if (value === null || typeof value !== "object") return false;
-	if (Symbol.toStringTag in value || Symbol.iterator in value) return false;
-	const prototype = Object.getPrototypeOf(value);
-	return prototype === null || prototype === Object.prototype || Object.getPrototypeOf(prototype) === null;
-}
-//#endregion
-//#region node_modules/@oscarpalmer/toretto/node_modules/@oscarpalmer/atoms/dist/internal/array/compact.mjs
-function compact(array, strict) {
-	if (!Array.isArray(array)) return [];
-	if (strict === true) return array.filter(Boolean);
-	const { length } = array;
-	const compacted = [];
-	for (let index = 0; index < length; index += 1) {
-		const item = array[index];
-		if (item != null) compacted.push(item);
-	}
-	return compacted;
-}
-//#endregion
-//#region node_modules/@oscarpalmer/toretto/node_modules/@oscarpalmer/atoms/dist/internal/string.mjs
-/**
-* Get the string value from any value
-* @param value Original value
-* @returns String representation of the value
-*/
-function getString(value) {
-	if (typeof value === "string") return value;
-	if (value == null) return "";
-	if (typeof value === "function") return getString(value());
-	if (typeof value !== "object") return String(value);
-	const asString = String(value.valueOf?.() ?? value);
-	return asString.startsWith("[object ") ? JSON.stringify(value) : asString;
-}
-/**
-* Join an array of values into a string
-* @param value Array of values
-* @param delimiter Delimiter to use between values
-* @returns Joined string
-*/
-function join(value, delimiter) {
-	return compact(value).map(getString).join(typeof delimiter === "string" ? delimiter : "");
-}
-/**
-* Split a string into words _(and other readable parts)_
-* @param value Original string
-* @returns Array of words found in the string
-*/
-function words(value) {
-	return typeof value === "string" ? value.match(EXPRESSION_WORDS) ?? [] : [];
-}
-const EXPRESSION_WORDS = /[^\x00-\x2f\x3a-\x40\x5b-\x60\x7b-\x7f]+/g;
-//#endregion
-//#region node_modules/@oscarpalmer/toretto/node_modules/@oscarpalmer/atoms/dist/is.mjs
-/**
-* Is the value `undefined`, `null`, or a whitespace-only string?
-* @param value Value to check
-* @returns `true` if the value is nullable or a whitespace-only string, otherwise `false`
-*/
-function isNullableOrWhitespace(value) {
-	return value == null || EXPRESSION_WHITESPACE$1.test(getString(value));
-}
-const EXPRESSION_WHITESPACE$1 = /^\s*$/;
-//#endregion
-//#region node_modules/@oscarpalmer/toretto/node_modules/@oscarpalmer/atoms/dist/internal/number.mjs
+//#region node_modules/@oscarpalmer/atoms/dist/internal/number.mjs
 /**
 * Clamp a number between a minimum and maximum value
 * @param value Value to clamp
@@ -840,7 +828,7 @@ function clamp(value, minimum, maximum, loop) {
 	return value > maximum ? loop === true ? minimum : maximum : value;
 }
 //#endregion
-//#region node_modules/@oscarpalmer/toretto/node_modules/@oscarpalmer/atoms/dist/internal/sized.mjs
+//#region node_modules/@oscarpalmer/atoms/dist/internal/sized.mjs
 function getSizedMaximum(first, second) {
 	let actual;
 	if (typeof first === "number") actual = first;
@@ -850,7 +838,7 @@ function getSizedMaximum(first, second) {
 const MAXIMUM_ABSOLUTE = 16777216;
 const MAXIMUM_DEFAULT = 1048576;
 //#endregion
-//#region node_modules/@oscarpalmer/toretto/node_modules/@oscarpalmer/atoms/dist/sized/map.mjs
+//#region node_modules/@oscarpalmer/atoms/dist/sized/map.mjs
 /**
 * A Map with a maximum size
 *
@@ -904,7 +892,10 @@ var SizedMap = class extends Map {
 	}
 };
 //#endregion
-//#region node_modules/@oscarpalmer/toretto/node_modules/@oscarpalmer/atoms/dist/function/memoize.mjs
+//#region node_modules/@oscarpalmer/atoms/dist/function/memoize.mjs
+/**
+* A memoized function, caching and retrieving results based on the its parameters _(or a custom cache key)_
+*/
 var Memoized = class {
 	#state;
 	/**
@@ -1000,7 +991,7 @@ function memoize(callback, options) {
 const DEFAULT_CACHE_SIZE = 1024;
 const SEPARATOR = "_";
 //#endregion
-//#region node_modules/@oscarpalmer/toretto/node_modules/@oscarpalmer/atoms/dist/string/case.mjs
+//#region node_modules/@oscarpalmer/atoms/dist/string/case.mjs
 /**
 * Convert a string to camel case _(thisIsCamelCase)_
 * @param value String to convert
@@ -1079,16 +1070,23 @@ const delimiters = {
 let memoizedCapitalize;
 //#endregion
 //#region node_modules/@oscarpalmer/toretto/dist/internal/element-value.mjs
-function setElementValue(element, first, second, third, callback) {
+function ignoreSetAttribute(element, name) {
+	if (element instanceof HTMLTextAreaElement && name === "value") return true;
+	return false;
+}
+function normalizeKey(key, style) {
+	return style && key.startsWith(CSS_VARIABLE_PREFIX) ? key : kebabCase(key);
+}
+function setElementValue(element, first, second, third, callback, style) {
 	if (!isHTMLOrSVGElement(element)) return;
-	if (typeof first === "string") setElementValues(element, first, second, third, callback);
-	else if (isAttribute(first)) setElementValues(element, first.name, first.value, third, callback);
+	if (typeof first === "string") setElementValues(element, first, second, third, callback, style);
+	else if (isAttribute(first)) setElementValues(element, first.name, first.value, third, callback, style);
 }
-function setElementValues(element, first, second, third, callback) {
+function setElementValues(element, first, second, third, callback, style) {
 	if (!isHTMLOrSVGElement(element)) return;
 	const dispatch = third !== false;
 	if (typeof first === "string") {
-		callback(element, kebabCase(first), second, dispatch);
+		callback(element, normalizeKey(first, style), second, dispatch);
 		return;
 	}
 	const isArray = Array.isArray(first);
@@ -1100,22 +1098,31 @@ function setElementValues(element, first, second, third, callback) {
 	const { length } = entries;
 	for (let index = 0; index < length; index += 1) {
 		const entry = entries[index];
-		if (typeof entry === "object" && typeof entry?.name === "string") callback(element, kebabCase(entry.name), entry.value, dispatch);
+		if (typeof entry === "object" && typeof entry?.name === "string") callback(element, normalizeKey(entry.name, style), entry.value, dispatch);
 	}
 }
 function updateElementValue(element, key, value, set, remove, isBoolean, json) {
 	if (isBoolean ? value == null : isNullableOrWhitespace(value)) remove.call(element, key);
-	else set.call(element, key, json ? JSON.stringify(value) : String(value));
+	else if (!ignoreSetAttribute(element, key)) set.call(element, key, json ? JSON.stringify(value) : getString(value));
 }
+const CSS_VARIABLE_PREFIX = "--";
 //#endregion
 //#region node_modules/@oscarpalmer/toretto/dist/internal/property.mjs
-function updateProperty$1(element, name, value, dispatch) {
+function getPropertyValue(element, name, value) {
+	if (isInputElement(element) && name === "value") return getString(value);
+	return value;
+}
+function updateProperty(element, name, value, dispatch) {
 	let property = name;
 	if (!(property in element)) property = camelCase(name);
-	if (!(property in element) || Object.is(element[property], value)) return;
-	element[property] = value;
+	const next = getPropertyValue(element, name, value);
+	if (!(property in element) || Object.is(element[property], next)) return;
+	element[property] = next;
 	const event = dispatch && elementEvents[element.tagName]?.[property];
-	if (typeof event === "string") element.dispatchEvent(new Event(event, { bubbles: true }));
+	if (typeof event === "string") element.dispatchEvent(new Event(event, {
+		bubbles: true,
+		cancelable: true
+	}));
 }
 const elementEvents = {
 	DETAILS: { open: "toggle" },
@@ -1151,7 +1158,7 @@ function handleAttribute(callback, decode, first, second) {
 	let value;
 	if (isAttribute(first)) {
 		name = first.name;
-		value = String(first.value);
+		value = getString(first.value);
 	} else if (typeof first === "string" && typeof second === "string") {
 		name = first;
 		value = second;
@@ -1166,9 +1173,6 @@ function isAttribute(value) {
 function _isBadAttribute(first, second, decode) {
 	return handleAttribute(badAttributeHandler, decode, first, second);
 }
-function _isBooleanAttribute(first, decode) {
-	return handleAttribute((name) => booleanAttributesSet.has(name?.toLowerCase()), decode, first, "");
-}
 function _isInvalidBooleanAttribute(first, second, decode) {
 	return handleAttribute(booleanAttributeHandler, decode, first, second);
 }
@@ -1179,7 +1183,7 @@ function updateAttribute(element, name, value, dispatch) {
 	const lowerCaseName = name.toLowerCase();
 	const isBoolean = booleanAttributesSet.has(lowerCaseName);
 	const next = isBoolean ? value === true || typeof value === "string" && (value === "" || value.toLowerCase() === lowerCaseName) : value == null ? "" : value;
-	if (isBoolean || dispatchedAttributes.has(name)) updateProperty$1(element, name, next, dispatch);
+	if (isBoolean || dispatchedAttributes.has(name)) updateProperty(element, name, next, dispatch);
 	updateElementValue(element, name, isBoolean ? next ? "" : null : value, element.setAttribute, element.removeAttribute, isBoolean, false);
 }
 const EXPRESSION_CLOBBERED_NAME = /^(id|name)$/i;
@@ -1424,8 +1428,9 @@ window.templates = templates;
 const ARRAY_COMPARISON_ADDED = "added";
 const ARRAY_COMPARISON_DISSIMILAR = "dissimilar";
 const ARRAY_COMPARISON_REMOVED = "removed";
+const CHANGE_INPUTS = new Set(["checkbox", "radio"]);
 const ERROR_FRAGMENT = "Fragment function must return a Fragment instance";
-const ERROR_IDENTIFIER_DUPLICATE = "Duplicate identifier found: '<id>'";
+const ERROR_IDENTIFIER_DUPLICATE = "Duplicate identifier found: '<>'";
 const ERROR_IDENTIFIER_TYPE = "Identifier cannot be null or undefined";
 const EVENT_CHANGE = "change";
 const EVENT_INPUT = "input";
@@ -1438,39 +1443,23 @@ const EVENT_DEFAULTS = {
 	SELECT: EVENT_CHANGE,
 	TEXTAREA: EVENT_INPUT
 };
-const EXPRESSION_ABYDON_ATTRIBUTE_FULL = /(@?[\w-]+)="<!--abydon.(\d+)-->"/g;
-const EXPRESSION_ABYDON_ATTRIBUTE_PREFIX = /^_/;
-const EXPRESSION_ABYDON_CONTENT = /^@?abydon\.(\d+)@?$/;
+const EXPRESSION_ABYDON_ATTRIBUTE_FULL = /(@?[\w-.]+(?::[a-z:]+)?)="<!--abydon.(\d+)-->"/g;
+const EXPRESSION_ABYDON_ATTRIBUTE_PREFIX = /^abydon-/;
+const EXPRESSION_ABYDON_CONTENT = /^abydon\.(\d+)$/;
 const EXPRESSION_ATTRIBUTE_CLASS = /^class\./;
 const EXPRESSION_ATTRIBUTE_STYLE_FULL = /^style\.([\w-]+)(?:\.([\w-]+))?$/;
 const EXPRESSION_ATTRIBUTE_STYLE_PREFIX = /^style\./;
-const EXPRESSION_EVENT_CHANGE_TYPES = /^(checkbox|radio)$/;
-const EXPRESSION_EVENT_NAME = /^@([\w-]+)(?::([a-z:]+))?$/i;
-const EXPRESSION_EVENT_OPTIONS_ACTIVE = /^a(ctive)$/i;
-const EXPRESSION_EVENT_OPTIONS_CAPTURE = /^c(apture)$/i;
-const EXPRESSION_EVENT_OPTIONS_ONCE = /^o(nce)$/i;
+const EXPRESSION_ATTRIBUTE_STYLE_VARIABLE = /^style\.--/;
+const EXPRESSION_EVENT_ATTRIBUTE = /^@([\w-]+)(?::([a-z:]+))?="$/i;
+const EXPRESSION_EVENT_NAME = /^@?([\w-]+)(?::([a-z:]+))?$/i;
+const EXPRESSION_EVENT_OPTIONS_ACTIVE = /^a(?:ctive)$/i;
+const EXPRESSION_EVENT_OPTIONS_CAPTURE = /^c(?:apture)$/i;
+const EXPRESSION_EVENT_OPTIONS_ONCE = /^o(?:nce)$/i;
 const EXPRESSION_EVENT_PREFIX = /^@/;
-const EXPRESSION_PERIOD = /\./;
-const EXPRESSION_TEXTAREA_VALUE = /<!--abydon\.(\d+)-->/;
+const EXPRESSION_TEXTAREA_VALUE = /(?:<|&lt;)!--abydon\.(\d+)--(?:>|&gt;)/;
 const NAME_FRAGMENT = "$fragment";
 const NAME_FRAGMENTS = "$fragments";
-const PROPERTY_CHECKED = "checked";
-const PROPERTY_VALUE = "value";
-//#endregion
-//#region node_modules/@oscarpalmer/atoms/dist/string/index.mjs
-/**
-* Parse a JSON string into its proper value _(or `undefined` if it fails)_
-* @param value JSON string to parse
-* @param reviver Reviver function to transform the parsed values
-* @returns Parsed value or `undefined` if parsing fails
-*/
-function parse$1(value, reviver) {
-	try {
-		return JSON.parse(value, reviver);
-	} catch {
-		return;
-	}
-}
+const WHITESPACE = /\s+/g;
 //#endregion
 //#region src/helpers/index.ts
 function compareArrays(first, second) {
@@ -1480,25 +1469,34 @@ function compareArrays(first, second) {
 	if (!from.filter((key) => to.includes(key)).every((key, index) => to[index] === key)) return ARRAY_COMPARISON_DISSIMILAR;
 	return firstIsLarger ? ARRAY_COMPARISON_REMOVED : ARRAY_COMPARISON_ADDED;
 }
+/**
+* Is the value a _Fragment_?
+* @param value Value to check
+* @returns `true` if the value is a _Fragment_, otherwise `false`
+*/
 function isFragment(value) {
 	return isNamed(value, NAME_FRAGMENT);
 }
+/**
+* Is the value a _Fragments_ instance?
+* @param value Value to check
+* @returns `true` if the value is a _Fragments_ instance, otherwise `false`
+*/
 function isFragments(value) {
 	return isNamed(value, NAME_FRAGMENTS);
 }
 function isNamed(value, name) {
 	return typeof value === "object" && value != null && name in value && value[name] === true;
 }
+function setComputedValue(data, callback, after) {
+	const computation = computed(callback);
+	data.mora.values.add(computation);
+	after(computation);
+}
 //#endregion
 //#region src/fragments.ts
 var Fragments = class {
 	#state;
-	/**
-	* Fragment items
-	*/
-	get items() {
-		return this.#state.mapped;
-	}
 	constructor(items, identify, fragment) {
 		Object.defineProperty(this, NAME_FRAGMENTS, { value: true });
 		this.#state = {
@@ -1509,13 +1507,13 @@ var Fragments = class {
 			mapped: array([]),
 			subscriber: void 0
 		};
-		states.set(this, this.#state);
+		fragmentsStates.set(this, this.#state);
 		initializeFragments(this.#state);
 	}
 };
 function handleFragments(item, remove) {
-	const state = isFragments(item) ? states.get(item) : item;
-	if (state != null) (remove ? removeFragments$1 : initializeFragments)(state);
+	const state = isFragments(item) ? fragmentsStates.get(item) : item;
+	(remove ? removeFragments : initializeFragments)(state);
 }
 function handleItems(state, items) {
 	const keys = /* @__PURE__ */ new Set();
@@ -1525,14 +1523,14 @@ function handleItems(state, items) {
 		const item = items[index];
 		const identifier = state.identify(item);
 		if (identifier == null) throw new TypeError(ERROR_IDENTIFIER_TYPE);
-		const key = getString$1(identifier);
+		const key = getString(identifier);
 		if (keys.has(key)) throw new Error(ERROR_IDENTIFIER_DUPLICATE.replace("<>", key));
 		let instance = state.instances[key];
 		if (instance == null) {
 			instance = state.fragment(item);
 			if (!isFragment(instance)) throw new Error(ERROR_FRAGMENT);
 		}
-		instance.identify(key);
+		instance.configure({ identifier: key });
 		state.instances[key] = instance;
 		keys.add(key);
 		mapped.push(instance);
@@ -1545,7 +1543,7 @@ function initializeFragments(state) {
 		handleItems(state, items);
 	});
 }
-function removeFragments$1(state) {
+function removeFragments(state) {
 	state.subscriber?.();
 	updateFragments(state);
 	state.subscriber = void 0;
@@ -1563,16 +1561,13 @@ function updateFragments(state, active) {
 	state.instances = next;
 	active?.clear();
 }
-const states = /* @__PURE__ */ new WeakMap();
+const fragmentsStates = /* @__PURE__ */ new WeakMap();
 //#endregion
 //#region src/helpers/dom.ts
 function createNodes(value) {
 	if (isFragment(value)) return value.get();
 	if (isChildNode(value)) return [value];
-	return [new Text(getString$1(value))];
-}
-function isInputElement(node) {
-	return node instanceof HTMLInputElement || node instanceof HTMLSelectElement;
+	return [new Text(getString(value))];
 }
 function removeNodes(nodes) {
 	const { length } = nodes;
@@ -1582,6 +1577,7 @@ function replaceNodes(from, to) {
 	from[0]?.replaceWith(...to);
 	const { length } = from;
 	for (let index = 1; index < length; index += 1) from[index].remove();
+	return to;
 }
 //#endregion
 //#region node_modules/@oscarpalmer/toretto/dist/internal/get-value.mjs
@@ -1679,7 +1675,7 @@ const EVENT_TYPES = new Set([
 const HANDLER_ACTIVE = delegatedEventHandler.bind(false);
 const HANDLER_PASSIVE = delegatedEventHandler.bind(true);
 //#endregion
-//#region node_modules/@oscarpalmer/toretto/node_modules/@oscarpalmer/atoms/dist/internal/function/misc.mjs
+//#region node_modules/@oscarpalmer/atoms/dist/internal/function/misc.mjs
 /**
 * A function that does nothing, which can be useful, I guess…
 */
@@ -1718,130 +1714,134 @@ function getOptions(options) {
 function getType(element, type) {
 	if (type !== "on") return type;
 	if (element instanceof HTMLInputElement) {
-		if (EXPRESSION_EVENT_CHANGE_TYPES.test(element.type)) return EVENT_CHANGE;
+		if (CHANGE_INPUTS.has(element.type)) return EVENT_CHANGE;
 		return element.type === "submit" ? EVENT_SUBMIT : EVENT_INPUT;
 	}
 	return EVENT_DEFAULTS[element.tagName] ?? type;
 }
 function mapEvent(element, name, value) {
-	const [, type, options] = EXPRESSION_EVENT_NAME.exec(name) ?? [];
-	if (type != null && typeof value === "function") on(element, getType(element, type), value, getOptions(options ?? ""));
+	const [, type, options] = EXPRESSION_EVENT_NAME.exec(name);
+	const values = Array.isArray(value) ? value : [value];
+	const { length } = values;
+	for (let index = 0; index < length; index += 1) {
+		const item = values[index];
+		if (typeof item === "function") on(element, getType(element, type), item, getOptions(options ?? ""));
+	}
 }
 //#endregion
-//#region node_modules/@oscarpalmer/toretto/dist/attribute/index.mjs
-function isBooleanAttribute(first) {
-	return _isBooleanAttribute(first, true);
-}
+//#region node_modules/@oscarpalmer/toretto/dist/style.mjs
+/**
+* Set a style on an element
+* @param element Element to set the style on
+* @param property Style name
+* @param value Style value
+*/
+function setStyle(element, property, value) {
+	setElementValues(element, property, value, null, updateStyleProperty, true);
+}
+function updateStyleProperty(element, key, value) {
+	updateElementValue(element, key, value, function(property, style) {
+		if (property.startsWith(VARIABLE_PREFIX)) this.style.setProperty(property, getString(style));
+		else this.style[property] = getString(style);
+	}, function(property) {
+		if (property.startsWith(VARIABLE_PREFIX)) this.style.removeProperty(property);
+		else this.style[property] = "";
+		if (this.getAttribute(ATTRIBUTE_STYLE) === "") this.removeAttribute(ATTRIBUTE_STYLE);
+	}, false, false);
+}
+const ATTRIBUTE_STYLE = "style";
+const VARIABLE_PREFIX = "--";
 //#endregion
-//#region src/node/attribute/value.ts
-function getCallback(element, name) {
-	if (isBooleanAttribute(name) && name in element) return name === "checked" ? updateChecked : updateProperty;
-	return name === "value" ? updateValue : setAttribute$1;
+//#region src/attribute/value.ts
+function getStyleValue(value, unit, isVariable) {
+	if (removeStyleValue(value, unit, isVariable)) return;
+	return value === true || value === "true" ? unit : `${getString(value)}${unit ?? ""}`;
+}
+function removeStyleValue(value, unit, isVariable) {
+	if (value == null || value === false || isVariable && isNullableOrWhitespace(value)) return true;
+	return unit == null && (value === true || value === "true");
 }
 function setAttribute(data, element, name, value) {
 	switch (true) {
 		case EXPRESSION_ATTRIBUTE_CLASS.test(name):
-			setClasses(data, element, name, value);
+			setClassValues(data, element, name, value);
 			return;
 		case EXPRESSION_ATTRIBUTE_STYLE_PREFIX.test(name):
-			setStyle(data, element, name, value);
+			setStyleValues(data, element, name, value);
 			return;
 		default:
 			setValue(data, element, name, value);
 			break;
 	}
 }
-function setClasses(data, element, name, value) {
-	function update(value) {
-		if (value === true) element.classList.add(...classes);
-		else element.classList.remove(...classes);
-	}
+function setClassValues(data, element, name, value) {
 	const classes = name.slice(6).split(".");
-	if (isReactive(value)) data.mora.subscribers.add(value.subscribe(update));
-	else update(value);
+	updateValue(data, value, (value) => {
+		if (value === true || value === "true") element.classList.add(...classes);
+		else element.classList.remove(...classes);
+	});
 }
-function setStyle(data, element, name, value) {
-	const [, property, unit] = EXPRESSION_ATTRIBUTE_STYLE_FULL.exec(name) ?? [];
-	if (property == null) return;
-	function update(value) {
-		if (value == null || value === false || value === true && unit == null) element.style.removeProperty(property);
-		else element.style.setProperty(property, value === true ? unit : String(value));
-	}
-	if (isReactive(value)) data.mora.subscribers.add(value.subscribe(update));
-	else update(value);
+function setStyleValues(data, element, name, value) {
+	let [, property, unit] = EXPRESSION_ATTRIBUTE_STYLE_FULL.exec(name);
+	const isVariable = EXPRESSION_ATTRIBUTE_STYLE_VARIABLE.test(name);
+	updateValue(data, value, (value) => {
+		setStyle(element, property, getStyleValue(value, unit, isVariable));
+	});
 }
 function setValue(data, element, name, value) {
-	const callback = getCallback(element, name);
-	if (isReactive(value)) data.mora.subscribers.add(value.subscribe((next) => {
-		callback(element, name, next);
-	}));
-	else callback(element, name, value);
-}
-function updateChecked(element, name, value) {
-	updateElement(EVENT_CHANGE, PROPERTY_CHECKED, element, name, value, value === true);
-}
-function updateElement(event, property, element, name, value, next) {
-	if (!(property in element) || element[property] === next) return;
-	setAttribute$1(element, name, value);
-	if (element[property] === next) return;
-	element[property] = next;
-	element.dispatchEvent(new Event(event, { bubbles: true }));
-}
-function updateProperty(element, name, value) {
-	setAttribute$1(element, name, value === true);
+	updateValue(data, value, (value) => {
+		setAttribute$1(element, name, value);
+	});
 }
-function updateValue(element, name, value) {
-	updateElement(element instanceof HTMLSelectElement ? EVENT_CHANGE : EVENT_INPUT, PROPERTY_VALUE, element, name, value, String(value));
+function updateValue(data, value, updater) {
+	if (isReactive(value)) data.mora.subscribers.add(value.subscribe(updater));
+	else updater(value);
 }
 //#endregion
-//#region src/node/attribute/index.ts
+//#region src/attribute/index.ts
+function compareAttributes(first, second) {
+	return first.name.localeCompare(second.name);
+}
 function getValue(data, original) {
-	const matches = EXPRESSION_ABYDON_CONTENT.exec(original ?? "");
+	const matches = EXPRESSION_ABYDON_CONTENT.exec(original);
 	return matches == null ? original : data.values[+matches[1]];
 }
-function mapAttributes(data, element) {
-	const attributes = [...element.attributes];
+function mapAttributeValue(data, element, name, value) {
+	if (typeof value === "function") setComputedAttribute(data, element, name, value);
+	else setAttribute(data, element, name, value);
+	if (isInputElement(element) && isSignal(value) && name in element) mapEvent(element, "on", () => {
+		value.set(element[name]);
+	});
+}
+function mapAttributes(data, element, ignoreValue) {
+	const attributes = [...element.attributes].sort(compareAttributes);
 	const { length } = attributes;
 	for (let index = 0; index < length; index += 1) {
 		const { name, value } = attributes[index];
 		const actualName = name.replace(EXPRESSION_ABYDON_ATTRIBUTE_PREFIX, "");
 		const actualValue = getValue(data, value);
 		if (actualName !== name) element.removeAttribute(name);
+		if (actualName === "value" && ignoreValue) continue;
 		switch (true) {
 			case EXPRESSION_EVENT_PREFIX.test(actualName):
 				mapEvent(element, actualName, actualValue);
 				break;
-			case EXPRESSION_PERIOD.test(actualName):
-			case typeof actualValue === "function":
-			case isReactive(actualValue):
-				mapValue$1(data, element, actualName, actualValue);
+			default:
+				mapAttributeValue(data, element, actualName, actualValue);
 				break;
-			default: break;
 		}
 	}
 }
-function mapValue$1(data, element, name, value) {
-	if (typeof value === "function") setComputedAttribute(data, element, name, value);
-	else setAttribute(data, element, name, value);
-	if (!isInputElement(element) || !isSignal(value)) return;
-	let property;
-	if (name === "checked" && element.type === "checkbox") property = PROPERTY_CHECKED;
-	else if (name === "value") property = PROPERTY_VALUE;
-	if (property != null) mapEvent(element, "@on", () => {
-		const next = element[property];
-		value.set(parse$1(String(next)) ?? next);
-	});
-}
 function setComputedAttribute(data, element, name, callback) {
-	const value = computed(callback);
-	data.mora.values.add(value);
-	setAttribute(data, element, name, value);
+	setComputedValue(data, callback, (computation) => {
+		setAttribute(data, element, name, computation);
+	});
 }
 //#endregion
 //#region src/node/value.ts
 function addToArray(identifiers, items, nodes, added) {
 	let position = nodes[0];
-	const before = added && !identifiers.previous.has(items.templates[0].identifier);
+	const before = added && !identifiers.previous.set.has(items.templates[0].identifier);
 	const next = items.next.flatMap((fragment) => fragment.get().flatMap((node) => ({
 		identifier: fragment.identifier,
 		value: node
@@ -1849,19 +1849,48 @@ function addToArray(identifiers, items, nodes, added) {
 	const { length } = next;
 	for (let index = 0; index < length; index += 1) {
 		const node = next[index];
-		if (!(added && identifiers.previous.has(node.identifier))) if (index === 0 && before) position.before(node.value);
+		if (!(added && identifiers.previous.set.has(node.identifier))) if (index === 0 && before) position.before(node.value);
 		else position.after(node.value);
 		position = node.value;
 	}
 }
+function getArrayData(item, values) {
+	const { length } = values;
+	const next = [];
+	let templates = [];
+	for (let index = 0; index < length; index += 1) {
+		const value = values[index];
+		if (isFragment(value) && value.identifier != null) {
+			next.push(value.identifier);
+			templates.push(value);
+		}
+	}
+	const previous = item.fragments?.map((fragment) => fragment.identifier) ?? [];
+	const nextSet = new Set(next);
+	if (nextSet.size !== templates.length) templates = [];
+	return {
+		next: {
+			array: next,
+			set: nextSet
+		},
+		previous: {
+			array: previous,
+			set: new Set(previous)
+		},
+		template: {
+			empty: templates.length === 0,
+			items: templates
+		}
+	};
+}
 function handleArray(identifiers, items, nodes) {
-	const next = items.templates.map((template) => items.fragments?.find((fragment) => fragment.identifier === template.identifier) ?? template);
-	const comparison = compareArrays(items.fragments ?? [], items.templates);
+	const next = items.templates.map((template) => items.fragments.find((fragment) => fragment.identifier === template.identifier) ?? template);
+	const comparison = compareArrays(identifiers.previous.array, identifiers.next.array);
 	if (comparison !== "removed") addToArray(identifiers, {
 		...items,
 		next
 	}, nodes, comparison === ARRAY_COMPARISON_ADDED);
-	const toRemove = items.fragments?.filter((fragment) => !identifiers.next.has(fragment.identifier)) ?? [];
+	const toRemove = items.fragments.filter((fragment) => !identifiers.next.set.has(fragment.identifier));
 	const { length } = toRemove;
 	for (let index = 0; index < length; index += 1) toRemove[index].remove();
 	return {
@@ -1869,87 +1898,72 @@ function handleArray(identifiers, items, nodes) {
 		nodes: next.flatMap((fragment) => fragment.get())
 	};
 }
-function removeFragments(fragments) {
-	if (fragments != null) {
-		const { length } = fragments;
-		for (let index = 0; index < length; index += 1) fragments[index].remove();
-	}
+function removeArray(item, comment) {
+	const fragments = (item.fragments ?? []).slice();
+	const result = { nodes: setText(item, comment) };
+	removeFragmentsItems(fragments);
+	return result;
 }
-function replaceText(item, comment, isNullable) {
-	let to;
-	if (isNullable) to = [comment];
-	else to = item.text == null ? [] : [item.text];
-	replaceNodes(item.nodes ?? [], to);
+function removeFragmentsItems(fragments) {
+	const { length } = fragments;
+	for (let index = 0; index < length; index += 1) fragments[index].remove();
 }
 function setArray(item, comment, value) {
-	if (value.length === 0) return { nodes: setText(item, comment, value) };
-	let templates = value.filter((item) => isFragment(item) && item.identifier != null);
-	const next = templates.map((fragment) => fragment.identifier);
-	const previous = item.fragments?.map((fragment) => fragment.identifier) ?? [];
-	if (new Set(next).size !== templates.length) templates = [];
-	const noTemplates = templates.length === 0;
-	if (noTemplates || item.nodes == null || previous.some((identifier) => identifier == null)) return {
-		fragments: noTemplates ? void 0 : templates,
-		nodes: setNodes(item, comment, noTemplates ? value.flatMap((item) => createNodes(item)) : templates.flatMap((template) => template.get()))
-	};
+	if (value.length === 0) return removeArray(item, comment);
+	const { next, previous, template } = getArrayData(item, value);
+	if (template.empty || item.nodes == null || previous.array.some((identifier) => identifier == null)) {
+		const fragments = (item.fragments ?? []).slice();
+		const result = {
+			fragments: template.empty ? void 0 : template.items,
+			nodes: replaceNodes(item.nodes ?? [comment], template.empty ? value.flatMap((item) => createNodes(item)) : template.items.flatMap((template) => template.get()))
+		};
+		removeFragmentsItems(fragments);
+		return result;
+	}
 	return handleArray({
-		next: new Set(next),
-		previous: new Set(previous)
+		next,
+		previous
 	}, {
-		templates,
-		fragments: item.fragments ?? []
+		fragments: item.fragments ?? [],
+		templates: template.items
 	}, item.nodes);
 }
 function setNodes(item, comment, next) {
-	if (item.nodes == null) {
-		if (comment.parentNode != null) replaceNodes([comment], next);
-		else if (item.text?.parentNode != null) replaceNodes([item.text], next);
-	} else replaceNodes(item.nodes, next);
-	removeFragments(item.fragments);
-	return next;
+	return replaceNodes(item.nodes ?? [comment], next);
 }
 function setReactiveValue(data, comment, reactive) {
 	let item = data.items.find((item) => item.nodes?.includes(comment));
 	item ??= {};
-	item.text = new Text();
 	data.mora.subscribers.add(reactive.subscribe((value) => {
 		if (Array.isArray(value)) setReactiveValueForArray(item, comment, value);
 		else setReactiveValueForSingle(item, comment, value);
-		item.nodes = [...item.nodes ?? [comment]];
 	}));
 }
 function setReactiveValueForArray(item, comment, value) {
-	const result = setArray(item, comment, value);
-	item.fragments = typeof result === "boolean" ? void 0 : result?.fragments;
-	if (typeof result === "boolean") if (result) item.nodes = item.text == null ? [] : [item.text];
-	else item.nodes = void 0;
-	else item.nodes = result?.nodes;
+	const { fragments, nodes } = setArray(item, comment, value);
+	item.fragments = fragments;
+	item.nodes = nodes;
 }
 function setReactiveValueForSingle(item, comment, value) {
+	const fragments = (item.fragments ?? []).slice();
 	const valueIsFragment = isFragment(value);
-	item.fragments = valueIsFragment ? [value] : void 0;
 	if (valueIsFragment || isChildNode(value)) item.nodes = setNodes(item, comment, createNodes(value));
 	else item.nodes = setText(item, comment, value);
+	item.fragments = valueIsFragment ? [value] : void 0;
+	removeFragmentsItems(fragments);
 }
 function setText(item, comment, value) {
-	const isNullable = isNullableOrWhitespace$1(value);
-	if (item.text != null) item.text.textContent = isNullable ? "" : getString$1(value);
-	let result = false;
-	if (item.nodes != null) {
-		replaceText(item, comment, isNullable);
-		result = !isNullable;
-	} else if (isNullable && comment.parentNode == null) item.text?.replaceWith(comment);
-	else if (!isNullable && item?.text?.parentNode == null) {
-		if (item.text != null) comment.replaceWith(item.text);
-		result = true;
-	}
-	removeFragments(item.fragments);
-	if (result) return item.text == null ? [] : [item.text];
+	const valueIsNullable = isNullableOrWhitespace(value);
+	item.text ??= new Text();
+	item.text.textContent = valueIsNullable ? "" : getString(value);
+	const result = valueIsNullable ? [comment] : [item.text];
+	replaceNodes(item.nodes ?? [comment], result);
+	return result;
 }
 //#endregion
 //#region src/node/index.ts
 function mapNode(data, comment) {
-	const matches = EXPRESSION_ABYDON_CONTENT.exec(comment.textContent ?? "");
+	const matches = EXPRESSION_ABYDON_CONTENT.exec(comment.textContent);
 	const value = matches == null ? null : data.values[+matches[1]];
 	if (value != null) mapValue(data, comment, value);
 }
@@ -1961,39 +1975,29 @@ function mapNodes(data, nodes) {
 			mapNode(data, node);
 			continue;
 		}
-		if (node instanceof HTMLTextAreaElement) mapTextarea(data, node);
-		if (isHTMLOrSVGElement(node)) mapAttributes(data, node);
+		if (isHTMLOrSVGElement(node)) {
+			let ignoreValueAttribute = false;
+			if (node instanceof HTMLTextAreaElement) ignoreValueAttribute = mapTextarea(data, node);
+			mapAttributes(data, node, ignoreValueAttribute);
+		}
 		if (node.hasChildNodes()) mapNodes(data, [...node.childNodes]);
 	}
 }
 function mapTextarea(data, element) {
-	const [, index] = EXPRESSION_TEXTAREA_VALUE.exec(element.value) ?? [];
-	if (index == null) return;
+	const [, index] = EXPRESSION_TEXTAREA_VALUE.exec(element.textContent) ?? EXPRESSION_TEXTAREA_VALUE.exec(element.value) ?? [];
+	if (index == null) return false;
+	element.textContent = "";
 	element.value = "";
-	const value = data.values[Number.parseInt(index, 10)];
-	if (isSignal(value)) {
-		element.value = String(value.peek());
-		mapEvent(element, "@on", () => {
-			value.set(element.value);
-		});
-		return;
-	}
-	let reactive;
-	if (typeof value === "function") reactive = computed(value);
-	else if (isComputed(value)) reactive = value;
-	if (reactive == null) element.value = String(value);
-	else data.mora.subscribers.add(reactive.subscribe((value) => {
-		element.value = String(value);
-	}));
+	mapAttributeValue(data, element, "value", data.values[Number.parseInt(index, 10)]);
+	return true;
 }
 function mapValue(data, comment, value) {
 	switch (true) {
 		case typeof value === "function":
-			setComputedValue(data, comment, value);
+			setComputedNode(data, comment, value);
 			break;
 		case isFragments(value):
-			handleFragments(value, false);
-			setReactiveValue(data, comment, value.items);
+			setFragmentsNode(data, comment, value);
 			break;
 		case isReactive(value):
 			setReactiveValue(data, comment, value);
@@ -2012,22 +2016,29 @@ function replaceComment(data, comment, value) {
 	}
 	comment.replaceWith(...nodes);
 }
-function setComputedValue(data, comment, callback) {
-	const value = computed(callback);
-	data.mora.values.add(value);
-	setReactiveValue(data, comment, value);
+function setComputedNode(data, comment, callback) {
+	setComputedValue(data, callback, (computation) => {
+		setReactiveValue(data, comment, computation);
+	});
+}
+function setFragmentsNode(data, comment, fragments) {
+	const state = fragmentsStates.get(fragments);
+	handleFragments(state, false);
+	setReactiveValue(data, comment, state.mapped);
 }
 //#endregion
 //#region src/parse.ts
 function handleExpression(data, prefix, expression) {
 	if (Array.isArray(expression)) {
+		if (EXPRESSION_EVENT_ATTRIBUTE.test(prefix.split(WHITESPACE).at(-1))) return transformExpression(prefix, data.values.push(expression) - 1);
 		const { length } = expression;
 		let expressions = "";
 		for (let index = 0; index < length; index += 1) expressions += handleExpression(data, "", expression[index]);
 		return `${prefix}${expressions}`;
 	}
 	if (typeof expression === "function" || typeof expression === "object" && expression != null) return transformExpression(prefix, data.values.push(expression) - 1);
-	return isNullableOrWhitespace$1(expression) ? prefix : `${prefix}${expression}`;
+	const asString = getString(expression);
+	return asString.trim().length === 0 ? prefix : `${prefix}${asString}`;
 }
 function parse(data) {
 	if (data.template != null) return data.template;
@@ -2040,7 +2051,7 @@ function parse(data) {
 	return data.template;
 }
 function transformAttribute(_, name, index) {
-	return `_${name}="@abydon.${index}@"`;
+	return `abydon-${name}="abydon.${index}"`;
 }
 function transformExpression(prefix, index) {
 	return `${prefix}<!--abydon.${index}-->`;
@@ -2054,7 +2065,15 @@ var Fragment = class {
 		cache: true
 	};
 	/**
-	* Fragment identifier
+	* Is template caching enabled?
+	*/
+	get cache() {
+		return this.#configuration.cache;
+	}
+	/**
+	* Identifier for the _Fragment_
+	*
+	* _An identifier can be used to uniquely identify a Fragment, which helps prevent re-rendering in reactive arrays and Fragments_
 	*/
 	get identifier() {
 		return this.#configuration.identifier;
@@ -2073,25 +2092,41 @@ var Fragment = class {
 		};
 	}
 	/**
-	* Append the fragment to the given element
+	* Insert the _Fragment_ after the given element
+	* @param element Element to insert after
+	*/
+	after(element) {
+		element.after(...this.get());
+	}
+	/**
+	* Append the _Fragment_ to the given element
 	* @param element Element to append to
 	*/
 	appendTo(element) {
 		element.append(...this.get());
 	}
 	/**
-	* Configure the fragment
+	* Insert the _Fragment_ before the given element
+	* @param element Element to insert before
+	*/
+	before(element) {
+		element.before(...this.get());
+	}
+	/**
+	* Configure the _Fragment_
+	*
+	* _Returns the Fragment instance for chaining_
 	* @param configuration Configuration options
-	* @returns Fragment
+	* @returns _Fragment_
 	*/
 	configure(configuration) {
-		const actual = isPlainObject$1(configuration) ? configuration : {};
+		const actual = isPlainObject(configuration) ? configuration : {};
 		if ("identifier" in actual) this.#configuration.identifier = actual.identifier;
 		if (typeof actual.cache === "boolean") this.#configuration.cache = actual.cache;
 		return this;
 	}
 	/**
-	* Get a list of the fragment's nodes
+	* Get a list of the _Fragment_'s nodes
 	* @returns List of nodes
 	*/
 	get() {
@@ -2099,24 +2134,22 @@ var Fragment = class {
 		if (data.items.length === 0) {
 			const templated = html$1(parse(data), { cache: this.#configuration.cache });
 			data.items.splice(0, data.items.length, ...templated.map((node) => ({ nodes: [node] })));
-			mapNodes(data, data.items.flatMap((item) => item.fragments?.flatMap((fragment) => fragment.get()) ?? item.nodes ?? []));
+			mapNodes(data, data.items.flatMap((item) => item.nodes));
 		}
-		return data.items.flatMap((item) => item.fragments?.flatMap((fragment) => fragment.get()) ?? item.nodes ?? []);
+		return data.items.flatMap((item) => item.fragments?.flatMap((fragment) => fragment.get()) ?? item.nodes);
 	}
 	/**
-	* Set an identifier for the fragment
-	*
-	* _An identifier can be used to uniquely identify a fragment,
-	* which helps prevent re-rendering in certain scenarios._
-	* @param identifier Identifier
-	* @returns Fragment
+	* Prepend the _Fragment_ to the given element
+	* @param element Element to prepend to
 	*/
-	identify(identifier) {
-		this.#configuration.identifier = identifier;
-		return this;
+	prependTo(element) {
+		element.prepend(...this.get());
 	}
 	/**
-	* Remove the fragment from the DOM
+	* Remove the _Fragment_ _(and all its descendants)_ from the _DOM_
+	*
+	* - _Any events, reactive values, and Fragments will also be cleaned up and removed_
+	* - _After being removed, the Fragment can be re-inserted into the DOM_
 	*/
 	remove() {
 		removeFragment(this.#data);
@@ -2129,7 +2162,7 @@ function removeFragment(data) {
 		const { fragments, nodes } = data.items[index];
 		const fragmentsLength = fragments?.length ?? 0;
 		for (let fragmentIndex = 0; fragmentIndex < fragmentsLength; fragmentIndex += 1) fragments?.[fragmentIndex]?.remove();
-		removeNodes(nodes ?? []);
+		removeNodes(nodes);
 	}
 	data.items.length = 0;
 	length = data.values.length;
@@ -2147,21 +2180,51 @@ function removeMora(data) {
 //#endregion
 //#region src/index.ts
 /**
-* Create Fragments from a reactive array
+* Create a _Fragments_ instance from a reactive array
+* 
+* _A Fragments instance can be used to efficiently render a list of items that may change over time, using unique identifiers to track each item, only adding, removing, or updating each related Fragment._
+*
+* @example
+* ```ts
+* const fruits = array(['Apple', 'Banana', 'Cherry']);
+* const items = fragments(
+*   fruits,
+*   fruit => fruit,                           // Identifies a unique item
+*   fruit => html`<p>${fruit}</p>`,           // Creates a Fragment from an item
+* );
+* html`${items}`.appendTo(document.body)      // Renders '<p>Apple</p><p>Banana</p><p>Cherry</p>'
+* fruits.push(['Date', 'Elderberry', 'Fig']); // Appends '<p>Date</p><p>Elderberry</p><p>Fig</p>'
+*                                             // without re-rendering the existing Fragments
+* ```
+*
 * @param array Reactive array
-* @param identify Function to identify item
-* @param fragment Function to create fragment from item
-* @returns Fragments
+* @param identify Function to identify item uniquely _(non-nullable)_
+* @param fragment Function to create _Fragment_ from item
+* @returns _Fragments_
 */
 function fragments(array, identify, fragment) {
+	if (!isArray(array)) throw new TypeError("Fragments array must be a reactive array");
+	if (typeof identify !== "function") throw new TypeError("Fragments identify must be a function");
+	if (typeof fragment !== "function") throw new TypeError("Fragments fragment must be a function");
 	return new Fragments(array, identify, fragment);
 }
 /**
-* Create Fragment from a template
-* @returns Fragment
+* Create a _Fragment_ from a template
+* 
+* _A Fragment can be used to efficiently render a template that may change over time, only updating the necessary parts of the DOM._
+*
+* @example
+* ```ts
+* const name = signal('World');
+* const fragment = html`<p>Hello, ${name}!</p>`;
+* fragment.appendTo(document.body);              // Renders '<p>Hello, World!</p>'
+* name.set('Alice');                             // Replaces 'World' with 'Alice'
+* ```
+*
+* @returns _Fragment_
 */
 function html(template, ...values) {
 	return new Fragment(template, values);
 }
 //#endregion
-export { array, computed, effect, fragments, html, isArray, isComputed, isEffect, isReactive, isSignal, signal, startBatch, stopBatch, store };
+export { array, computed, effect, fragments, html, isArray, isComputed, isEffect, isFragment, isFragments, isReactive, isSignal, signal, startBatch, stopBatch, store };