@oscarpalmer/abydon 0.17.0 → 0.19.0

package/dist/abydon.full.mjs

@@ -1,4 +1,4 @@
-//#region node_modules/@oscarpalmer/mora/dist/constants.js
+//#region node_modules/@oscarpalmer/mora/dist/constants.mjs
 const ACTIVE = {};
 const BATCH = {
 	depth: 0,
@@ -31,7 +31,7 @@ const NAME_ALL = new Set([
 	NAME_STORE
 ]);
 //#endregion
-//#region node_modules/@oscarpalmer/mora/dist/effect.js
+//#region node_modules/@oscarpalmer/mora/dist/effect.mjs
 var Effect = class {
 	constructor(callback) {
 		Object.defineProperty(this, NAME_MORA, { value: NAME_EFFECT });
@@ -39,40 +39,70 @@ var Effect = class {
 		runEffect(this);
 	}
 };
-function runEffect(effect$1) {
+function runEffect(effect) {
 	const previousEffect = ACTIVE.effect;
-	ACTIVE.effect = effect$1;
+	ACTIVE.effect = effect;
 	try {
-		effect$1.state.callback();
+		effect.state.callback();
 	} finally {
 		ACTIVE.effect = previousEffect;
 	}
 }
+/**
+* Create an effect
+* @param callback Callback for handling signal effects
+* @returns Effect
+*/
 function effect(callback) {
 	return typeof callback === "function" ? new Effect(callback) : void 0;
 }
 //#endregion
-//#region node_modules/@oscarpalmer/mora/dist/helpers/is.js
+//#region node_modules/@oscarpalmer/mora/dist/helpers/is.mjs
+/**
+* Is the value a reactive array?
+* @param value Value to check
+* @returns True if value is a {@link ReactiveArray}
+*/
 function isArray(value) {
 	return isMora(value, NAME_ARRAY);
 }
+/**
+* Is the value a computed signal?
+* @param value Value to check
+* @returns True if value is a {@link Computed}
+*/
 function isComputed(value) {
 	return isMora(value, NAME_COMPUTED);
 }
+/**
+* Is the value an effect?
+* @param value Value to check
+* @returns True if value is an {@link Effect}
+*/
 function isEffect(value) {
 	return isMora(value, NAME_EFFECT);
 }
 function isMora(value, name) {
 	return typeof value === "object" && value != null && "$mora" in value && (typeof name === "string" ? value["$mora"] === name : name.has(value["$mora"]));
 }
+/**
+* Is the value reactive?
+* @param value Value to check
+* @returns True if value is a {@link Reactive}
+*/
 function isReactive(value) {
 	return isMora(value, NAME_ALL);
 }
+/**
+* Is the value a signal?
+* @param value Value to check
+* @returns True if value is a {@link Signal}
+*/
 function isSignal(value) {
 	return isMora(value, NAME_SIGNAL);
 }
 //#endregion
-//#region node_modules/@oscarpalmer/mora/dist/batch.js
+//#region node_modules/@oscarpalmer/mora/dist/batch.mjs
 function flushHandlers() {
 	while (BATCH.depth === 0 && BATCH.handlers.size > 0) {
 		const handlers = [...BATCH.handlers];
@@ -81,15 +111,23 @@ function flushHandlers() {
 		else handler.callback(handler.state.value);
 	}
 }
+/**
+* Start batching effects
+*
+* _(Use {@link stopBatch} to flush and run batched effects)_
+*/
 function startBatch() {
 	BATCH.depth += 1;
 }
+/**
+* Stop batching effects and flush _(run)_ them
+*/
 function stopBatch() {
 	if (BATCH.depth > 0) BATCH.depth -= 1;
 	flushHandlers();
 }
 //#endregion
-//#region node_modules/@oscarpalmer/mora/dist/subscription.js
+//#region node_modules/@oscarpalmer/mora/dist/subscription.mjs
 var Subscription = class {
 	callback;
 	state;
@@ -116,7 +154,7 @@ function unsubscribe(state, callback) {
 	state.subscriptions.delete(callback);
 }
 //#endregion
-//#region node_modules/@oscarpalmer/mora/dist/value/reactive.js
+//#region node_modules/@oscarpalmer/mora/dist/value/reactive.mjs
 var Reactive = class {
 	state = {
 		computeds: /* @__PURE__ */ new Set(),
@@ -130,24 +168,45 @@ var Reactive = class {
 		if (typeof options === "object" && typeof options.equal === "function") this.state.equal = options.equal;
 		Object.defineProperty(this, NAME_MORA, { value: name });
 	}
+	/**
+	* Get the value _(without reactivity)_
+	* @return Current value
+	*/
 	peek() {
 		return this.state.value;
 	}
+	/**
+	* Subscribe to changes
+	* @param callback Callback for changes
+	* @return Unsubscribe callback
+	*/
 	subscribe(callback) {
 		return subscribe(this.state, callback);
 	}
+	/**
+	* JSON representation of the value
+	* @return JSON value
+	*/
 	toJSON() {
 		return this.get();
 	}
+	/**
+	* String representation of the value
+	* @return Value as string
+	*/
 	toString() {
 		return String(this.get());
 	}
+	/**
+	* Unsubscribe from changes
+	* @param callback Callback to unsubscribe
+	*/
 	unsubscribe(callback) {
 		unsubscribe(this.state, callback);
 	}
 };
 //#endregion
-//#region node_modules/@oscarpalmer/mora/dist/value/computed.js
+//#region node_modules/@oscarpalmer/mora/dist/value/computed.mjs
 var Computed = class extends Reactive {
 	effect = {
 		dirty: true,
@@ -163,13 +222,16 @@ var Computed = class extends Reactive {
 			ACTIVE.computed = previousComputed;
 			if (!this.state.equal(this.state.value, value)) {
 				this.state.value = value;
-				for (const computed$1 of this.state.computeds) computed$1.effect.dirty = true;
-				for (const effect$1 of this.state.effects) BATCH.handlers.add(effect$1);
+				for (const computed of this.state.computeds) computed.effect.dirty = true;
+				for (const effect of this.state.effects) BATCH.handlers.add(effect);
 				for (const [, subscription] of this.state.subscriptions) subscription.callback(value);
 			}
 			this.effect.dirty = false;
 		});
 	}
+	/**
+	* @inheritdoc
+	*/
 	get() {
 		if (ACTIVE.computed != null && this !== ACTIVE.computed) this.state.computeds.add(ACTIVE.computed);
 		if (ACTIVE.effect != null && ACTIVE.effect !== this.effect.instance) this.state.effects.add(ACTIVE.effect);
@@ -177,11 +239,17 @@ var Computed = class extends Reactive {
 		return this.state.value;
 	}
 };
+/**
+* Create a computed value
+* @param callback Callback to compute the value
+* @param options Reactivity options
+* @returns Computed value
+*/
 function computed(callback, options) {
 	return new Computed(callback, options);
 }
 //#endregion
-//#region node_modules/@oscarpalmer/mora/dist/helpers/value.js
+//#region node_modules/@oscarpalmer/mora/dist/helpers/value.mjs
 function emitValue(state) {
 	for (const computed of state.computeds) computed.effect.dirty = true;
 	for (const effect of state.effects) BATCH.handlers.add(effect);
@@ -207,29 +275,46 @@ function getValue$1(state) {
 	return state.value;
 }
 //#endregion
-//#region node_modules/@oscarpalmer/mora/dist/value/signal.js
+//#region node_modules/@oscarpalmer/mora/dist/value/signal.mjs
 var Signal = class extends Reactive {
 	constructor(value, options) {
 		super(NAME_SIGNAL, value, options);
 	}
+	/**
+	* @inheritdoc
+	*/
 	get() {
 		return getValue$1(this.state);
 	}
+	/**
+	* Set the value
+	* @param value New value
+	*/
 	set(value) {
 		if (!this.state.equal(this.state.value, value)) {
 			this.state.value = value;
 			emitValue(this.state);
 		}
 	}
+	/**
+	* Update the value _(based on the current value)_
+	* @param callback Callback to update the value
+	*/
 	update(callback) {
 		this.set(callback(this.state.value));
 	}
 };
+/**
+* Create a reactive value
+* @param value Initial value
+* @param options Reactivity options
+* @returns Reactive value
+*/
 function signal(value, options) {
 	return new Signal(value, options);
 }
 //#endregion
-//#region node_modules/@oscarpalmer/mora/dist/helpers/proxy.js
+//#region node_modules/@oscarpalmer/mora/dist/helpers/proxy.mjs
 function emityProxyValues(state, mapped) {
 	const values = [...mapped.values()];
 	const { length } = values;
@@ -274,23 +359,29 @@ function setValueInProxy(parameters) {
 	return true;
 }
 //#endregion
-//#region node_modules/@oscarpalmer/mora/dist/value/array.js
+//#region node_modules/@oscarpalmer/mora/dist/value/array.mjs
 var ReactiveArray = class extends Reactive {
 	#indiced = /* @__PURE__ */ new Map();
 	#size = signal(0);
+	/**
+	* The length of the array
+	*/
 	get length() {
 		return this.#size.get();
 	}
+	/**
+	* Set the length of the array
+	*/
 	set length(value) {
 		if (typeof value === "number" && value >= 0 && value !== this.state.value.length) this.get().length = value;
 	}
 	constructor(value, options) {
 		super(NAME_ARRAY, new Proxy(value, {
 			get: (target, property) => METHODS_UPDATE.has(property) ? updateArray(property, target, this.state, this.#size) : Reflect.get(target, property),
-			set: (target, property, value$1) => setValueInProxy({
+			set: (target, property, value) => setValueInProxy({
 				property,
 				target,
-				value: value$1,
+				value,
 				isArray: true,
 				state: this.state,
 				length: this.#size
@@ -298,9 +389,17 @@ var ReactiveArray = class extends Reactive {
 		}), options);
 		this.#size.set(value.length);
 	}
+	/**
+	* Clear the array
+	*/
 	clear() {
 		this.length = 0;
 	}
+	/**
+	* Create a computed, filtered array
+	* @param callback Callback to evaluate each item
+	* @return Computed array of filtered items
+	*/
 	filter(callback) {
 		return computed(() => this.get().filter(callback));
 	}
@@ -308,9 +407,20 @@ var ReactiveArray = class extends Reactive {
 		if (typeof first === "number") return getReactiveValueInProxy(this, this.#indiced, first, true).get();
 		return first === "length" ? this.length : getValue$1(this.state);
 	}
+	/**
+	* Create a computed, mapped array
+	* @param callback Callback to transform each item
+	* @return Computed array of mapped items
+	*/
 	map(callback) {
 		return computed(() => this.get().map(callback));
 	}
+	/**
+	* Notify dependents of changes
+	*
+	* _This bypasses equality checks and will immediately notify dependents.
+	* Use this only if you're modifying nested data that would be ignored by equality checks._
+	*/
 	notify() {
 		emityProxyValues(this.state, this.#indiced);
 	}
@@ -318,9 +428,18 @@ var ReactiveArray = class extends Reactive {
 		if (value === "length") return this.#size.peek();
 		return typeof value === "number" ? this.state.value.at(value) : [...this.state.value];
 	}
+	/**
+	* Remove and return the last item of the array
+	* @returns Removed item, or `undefined` if the array is empty
+	*/
 	pop() {
 		return this.state.value.pop();
 	}
+	/**
+	* Add items to the end of the array
+	* @param items Items to add
+	* @returns New array length
+	*/
 	push(...items) {
 		return this.state.value.push(...items);
 	}
@@ -329,9 +448,20 @@ var ReactiveArray = class extends Reactive {
 		else if (first === "length") this.length = second;
 		else if (typeof first === "number" && !Number.isNaN(first)) setAtIndex(this.state.value, first, second);
 	}
+	/**
+	* Remove and return the first item of the array
+	* @returns Removed item, or `undefined` if the array is empty
+	*/
 	shift() {
 		return this.state.value.shift();
 	}
+	/**
+	* Remove and return items from the array _(and optionally add new items)_
+	* @param from Index to start removing items from
+	* @param to Index to stop removing items at _(defaults to the end of the array)_
+	* @param items Optional items to add
+	* @returns Removed items
+	*/
 	splice(from, to, ...items) {
 		return this.state.value.splice(from, to ?? this.state.value.length, ...items);
 	}
@@ -339,54 +469,105 @@ var ReactiveArray = class extends Reactive {
 		if (typeof first === "number" && typeof second === "function") return getReactiveValueInProxy(this, this.#indiced, first, true).subscribe(second);
 		return typeof first === "function" ? subscribe(this.state, first) : noop$1;
 	}
+	/**
+	* Add items to the beginning of the array
+	* @param items Items to add
+	* @returns New array length
+	*/
 	unshift(...items) {
 		return this.state.value.unshift(...items);
 	}
+	/**
+	* Update the value _(based on the current value)_
+	* @param callback Callback to update the value
+	*/
 	update(callback) {
 		const updated = callback(this.state.value);
 		if (updated == null || Array.isArray(updated)) this.set(updated);
 	}
 };
+/**
+* Create a reactive array
+* @param value Initial array of items
+* @param options Reactivity options
+* @returns Reactive array
+*/
 function array(value, options) {
 	return new ReactiveArray(Array.isArray(value) ? value : [], options);
 }
-function updateArray(type, array$1, state, length) {
+function updateArray(type, array, state, length) {
 	const affectsLength = METHODS_AFFECTING_LENGTH.has(type);
-	const previousArray = affectsLength ? [] : [...array$1];
-	const previousLength = array$1.length;
+	const previousArray = affectsLength ? [] : [...array];
+	const previousLength = array.length;
 	return (...args) => {
-		const result = array$1[type](...args);
-		if (affectsLength ? array$1.length !== previousLength : !equalArrays(state, previousArray, array$1)) {
+		const result = array[type](...args);
+		if (affectsLength ? array.length !== previousLength : !equalArrays(state, previousArray, array)) {
 			emitValue(state);
-			length.set(array$1.length);
+			length.set(array.length);
 		}
 		return result;
 	};
 }
-function setAtIndex(array$1, index, value) {
-	const actual = index < 0 ? array$1.length + index : index;
-	if (actual > -1) array$1[actual] = value;
+function setAtIndex(array, index, value) {
+	const actual = index < 0 ? array.length + index : index;
+	if (actual > -1) array[actual] = value;
 }
 //#endregion
-//#region node_modules/@oscarpalmer/mora/node_modules/@oscarpalmer/atoms/dist/internal/is.js
+//#region 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";
 }
-function isPlainObject$1(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/mora/dist/value/store.js
+//#region 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;
+}
+//#endregion
+//#region 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/mora/dist/value/store.mjs
 var Store = class extends Reactive {
 	#keyed = /* @__PURE__ */ new Map();
 	constructor(value, options) {
-		super(NAME_STORE, new Proxy(value, { set: (target, property, value$1) => setValueInProxy({
+		super(NAME_STORE, new Proxy(value, { set: (target, property, value) => setValueInProxy({
 			target,
 			property,
-			value: value$1,
+			value,
 			isArray: false,
 			state: this.state
 		}) }), options);
@@ -394,6 +575,12 @@ var Store = class extends Reactive {
 	get(key) {
 		return isKey(key) ? getReactiveValueInProxy(this, this.#keyed, key, false).get() : getValue$1(this.state);
 	}
+	/**
+	* Notify dependents of changes
+	*
+	* _This bypasses equality checks and will immediately notify dependents.
+	* Use this only if you're modifying nested data that would be ignored by equality checks._
+	*/
 	notify() {
 		emityProxyValues(this.state, this.#keyed);
 	}
@@ -402,59 +589,30 @@ var Store = class extends Reactive {
 	}
 	set(first, second) {
 		if (isKey(first)) this.state.value[first] = second;
-		else if (first == null || isPlainObject$1(first)) setProxyValue(this.state.value, first ?? {});
+		else if (first == null || isPlainObject(first)) setProxyValue(this.state.value, first ?? {});
 	}
 	subscribe(first, second) {
 		if (isKey(first) && typeof second === "function") return getReactiveValueInProxy(this, this.#keyed, first, false).subscribe(second);
 		return typeof first === "function" ? subscribe(this.state, first) : noop$1;
 	}
+	/**
+	* Update the value _(based on the current value)_
+	* @param callback Callback to update the value
+	*/
 	update(callback) {
 		const updated = callback({ ...this.state.value });
-		if (updated == null || isPlainObject$1(updated)) setProxyValue(this.state.value, updated ?? {});
+		if (updated == null || isPlainObject(updated)) setProxyValue(this.state.value, updated ?? {});
 	}
 };
-function store(value, options) {
-	return new Store(isPlainObject$1(value) ? value : {}, options);
-}
-//#endregion
-//#region node_modules/@oscarpalmer/atoms/dist/internal/is.mjs
-/**
-* 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/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;
-}
-//#endregion
-//#region 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`
+* Create a reactive store
+* @param value Initial object value
+* @param options Reactivity options
+* @returns Reactive store
 */
-function isNullableOrWhitespace(value) {
-	return value == null || EXPRESSION_WHITESPACE$1.test(getString(value));
+function store(value, options) {
+	return new Store(isPlainObject(value) ? value : {}, options);
 }
-const EXPRESSION_WHITESPACE$1 = /^\s*$/;
 //#endregion
 //#region node_modules/@oscarpalmer/toretto/dist/internal/is.mjs
 /**
@@ -760,15 +918,24 @@ let parser;
 let templates = {};
 //#endregion
 //#region src/constants.ts
+const ARRAY_COMPARISON_ADDED = "added";
+const ARRAY_COMPARISON_DISSIMILAR = "dissimilar";
+const ARRAY_COMPARISON_REMOVED = "removed";
+const ERROR_FRAGMENT = "Fragment function must return a Fragment instance";
+const ERROR_IDENTIFIER_DUPLICATE = "Duplicate identifier found: '<id>'";
+const ERROR_IDENTIFIER_TYPE = "Identifier cannot be null or undefined";
+const EVENT_CHANGE = "change";
+const EVENT_INPUT = "input";
+const EVENT_SUBMIT = "submit";
 const EVENT_DEFAULTS = {
 	A: "click",
 	BUTTON: "click",
 	DETAILS: "toggle",
-	FORM: "submit",
-	SELECT: "change",
-	TEXTAREA: "input"
+	FORM: EVENT_SUBMIT,
+	SELECT: EVENT_CHANGE,
+	TEXTAREA: EVENT_INPUT
 };
-const EXPRESSION_ABYDON_ATTRIBUTE_FULL = /(@?\w+)="<!--abydon.(\d+)-->"/g;
+const EXPRESSION_ABYDON_ATTRIBUTE_FULL = /(@?[\w-]+)="<!--abydon.(\d+)-->"/g;
 const EXPRESSION_ABYDON_ATTRIBUTE_PREFIX = /^_/;
 const EXPRESSION_ABYDON_CONTENT = /^@?abydon\.(\d+)@?$/;
 const EXPRESSION_ATTRIBUTE_CLASS = /^class\./;
@@ -783,14 +950,31 @@ const EXPRESSION_EVENT_PREFIX = /^@/;
 const EXPRESSION_PERIOD = /\./;
 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;
+	}
+}
 //#endregion
 //#region src/helpers/index.ts
 function compareArrays(first, second) {
 	const firstIsLarger = first.length > second.length;
 	const from = firstIsLarger ? first : second;
 	const to = firstIsLarger ? second : first;
-	if (!from.filter((key) => to.includes(key)).every((key, index) => to[index] === key)) return COMPARISON_DISSIMILAR;
-	return firstIsLarger ? COMPARISON_REMOVED : COMPARISON_ADDED;
+	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;
 }
 function isFragment(value) {
 	return isNamed(value, NAME_FRAGMENT);
@@ -801,9 +985,6 @@ function isFragments(value) {
 function isNamed(value, name) {
 	return typeof value === "object" && value != null && name in value && value[name] === true;
 }
-const COMPARISON_ADDED = "added";
-const COMPARISON_DISSIMILAR = "dissimilar";
-const COMPARISON_REMOVED = "removed";
 //#endregion
 //#region src/fragments.ts
 var Fragments = class {
@@ -839,13 +1020,13 @@ function handleItems(state, items) {
 	for (let index = 0; index < length; index += 1) {
 		const item = items[index];
 		const identifier = state.identify(item);
-		if (identifier == null) throw new Error("Identifier cannot be null or undefined");
+		if (identifier == null) throw new TypeError(ERROR_IDENTIFIER_TYPE);
 		const key = getString(identifier);
-		if (keys.has(key)) throw new Error(`Duplicate identifier found: "${key}"`);
+		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("Fragment function must return a Fragment instance");
+			if (!isFragment(instance)) throw new Error(ERROR_FRAGMENT);
 		}
 		instance.identify(key);
 		state.instances[key] = instance;
@@ -886,6 +1067,9 @@ function createNodes(value) {
 	if (isChildNode(value)) return [value];
 	return [new Text(getString(value))];
 }
+function isInputElement(node) {
+	return node instanceof HTMLInputElement || node instanceof HTMLSelectElement || node instanceof HTMLTextAreaElement;
+}
 function removeNodes(nodes) {
 	const { length } = nodes;
 	for (let index = 0; index < length; index += 1) nodes[index].remove();
@@ -1023,8 +1207,8 @@ 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 "change";
-		return element.type === "submit" ? "submit" : "input";
+		if (EXPRESSION_EVENT_CHANGE_TYPES.test(element.type)) return EVENT_CHANGE;
+		return element.type === "submit" ? EVENT_SUBMIT : EVENT_INPUT;
 	}
 	return EVENT_DEFAULTS[element.tagName] ?? type;
 }
@@ -1083,7 +1267,7 @@ function setValue(data, element, name, value) {
 	else callback(element, name, value);
 }
 function updateChecked(element, name, value) {
-	updateElement("change", "checked", element, name, value, value === true);
+	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;
@@ -1096,7 +1280,7 @@ function updateProperty(element, name, value) {
 	setAttribute$1(element, name, value === true);
 }
 function updateValue(element, name, value) {
-	updateElement(element instanceof HTMLSelectElement ? "change" : "input", "value", element, name, value, String(value));
+	updateElement(element instanceof HTMLSelectElement ? EVENT_CHANGE : EVENT_INPUT, PROPERTY_VALUE, element, name, value, String(value));
 }
 //#endregion
 //#region src/node/attribute/index.ts
@@ -1128,6 +1312,9 @@ function mapAttributes(data, element) {
 function mapValue$1(data, element, name, value) {
 	if (typeof value === "function") setComputedAttribute(data, element, name, value);
 	else setAttribute(data, element, name, value);
+	if (name === "value" && isInputElement(element) && isSignal(value)) mapEvent(element, "@on", () => {
+		value.set(parse$1(element.value) ?? element.value);
+	});
 }
 function setComputedAttribute(data, element, name, callback) {
 	const value = computed(callback);
@@ -1157,7 +1344,7 @@ function handleArray(identifiers, items, nodes) {
 	if (comparison !== "removed") addToArray(identifiers, {
 		...items,
 		next
-	}, nodes, comparison === "added");
+	}, nodes, comparison === ARRAY_COMPARISON_ADDED);
 	const toRemove = items.fragments?.filter((fragment) => !identifiers.next.has(fragment.identifier)) ?? [];
 	const { length } = toRemove;
 	for (let index = 0; index < length; index += 1) toRemove[index].remove();

package/dist/constants.d.mts

@@ -1,6 +1,19 @@
 //#region src/constants.d.ts
+declare const ARRAY_COMPARISON_ADDED = "added";
+declare const ARRAY_COMPARISON_DISSIMILAR = "dissimilar";
+declare const ARRAY_COMPARISON_REMOVED = "removed";
 declare const ATTRIBUTE_CLASS_PREFIX_LENGTH = 6;
+declare const ATTRIBUTE_NAME_DELIMITER = ".";
+declare const ERROR_FRAGMENT = "Fragment function must return a Fragment instance";
+declare const ERROR_IDENTIFIER_DUPLICATE = "Duplicate identifier found: '<id>'";
+declare const ERROR_IDENTIFIER_TYPE = "Identifier cannot be null or undefined";
+declare const EVENT_CHANGE = "change";
+declare const EVENT_INPUT = "input";
+declare const EVENT_SUBMIT = "submit";
 declare const EVENT_DEFAULTS: Record<string, string>;
+declare const EVENT_ON_PREFIXED = "@on";
+declare const EVENT_ON_VALUE = "on";
+declare const EVENT_OPTIONS_DELIMITER = ":";
 declare const EXPRESSION_ABYDON_ATTRIBUTE_FULL: RegExp;
 declare const EXPRESSION_ABYDON_ATTRIBUTE_PREFIX: RegExp;
 declare const EXPRESSION_ABYDON_CONTENT: RegExp;
@@ -16,5 +29,9 @@ declare const EXPRESSION_EVENT_PREFIX: RegExp;
 declare const EXPRESSION_PERIOD: RegExp;
 declare const NAME_FRAGMENT = "$fragment";
 declare const NAME_FRAGMENTS = "$fragments";
+declare const PROPERTY_CHECKED = "checked";
+declare const PROPERTY_IDENTIFIER = "identifier";
+declare const PROPERTY_VALUE = "value";
+declare const TEMPLATE_ITEM = "<>";
 //#endregion
-export { ATTRIBUTE_CLASS_PREFIX_LENGTH, EVENT_DEFAULTS, EXPRESSION_ABYDON_ATTRIBUTE_FULL, EXPRESSION_ABYDON_ATTRIBUTE_PREFIX, EXPRESSION_ABYDON_CONTENT, EXPRESSION_ATTRIBUTE_CLASS, EXPRESSION_ATTRIBUTE_STYLE_FULL, EXPRESSION_ATTRIBUTE_STYLE_PREFIX, EXPRESSION_EVENT_CHANGE_TYPES, EXPRESSION_EVENT_NAME, EXPRESSION_EVENT_OPTIONS_ACTIVE, EXPRESSION_EVENT_OPTIONS_CAPTURE, EXPRESSION_EVENT_OPTIONS_ONCE, EXPRESSION_EVENT_PREFIX, EXPRESSION_PERIOD, NAME_FRAGMENT, NAME_FRAGMENTS };
+export { ARRAY_COMPARISON_ADDED, ARRAY_COMPARISON_DISSIMILAR, ARRAY_COMPARISON_REMOVED, ATTRIBUTE_CLASS_PREFIX_LENGTH, ATTRIBUTE_NAME_DELIMITER, ERROR_FRAGMENT, ERROR_IDENTIFIER_DUPLICATE, ERROR_IDENTIFIER_TYPE, EVENT_CHANGE, EVENT_DEFAULTS, EVENT_INPUT, EVENT_ON_PREFIXED, EVENT_ON_VALUE, EVENT_OPTIONS_DELIMITER, EVENT_SUBMIT, EXPRESSION_ABYDON_ATTRIBUTE_FULL, EXPRESSION_ABYDON_ATTRIBUTE_PREFIX, EXPRESSION_ABYDON_CONTENT, EXPRESSION_ATTRIBUTE_CLASS, EXPRESSION_ATTRIBUTE_STYLE_FULL, EXPRESSION_ATTRIBUTE_STYLE_PREFIX, EXPRESSION_EVENT_CHANGE_TYPES, EXPRESSION_EVENT_NAME, EXPRESSION_EVENT_OPTIONS_ACTIVE, EXPRESSION_EVENT_OPTIONS_CAPTURE, EXPRESSION_EVENT_OPTIONS_ONCE, EXPRESSION_EVENT_PREFIX, EXPRESSION_PERIOD, NAME_FRAGMENT, NAME_FRAGMENTS, PROPERTY_CHECKED, PROPERTY_IDENTIFIER, PROPERTY_VALUE, TEMPLATE_ITEM };

package/dist/constants.mjs

@@ -1,14 +1,27 @@
 //#region src/constants.ts
+const ARRAY_COMPARISON_ADDED = "added";
+const ARRAY_COMPARISON_DISSIMILAR = "dissimilar";
+const ARRAY_COMPARISON_REMOVED = "removed";
 const ATTRIBUTE_CLASS_PREFIX_LENGTH = 6;
+const ATTRIBUTE_NAME_DELIMITER = ".";
+const ERROR_FRAGMENT = "Fragment function must return a Fragment instance";
+const ERROR_IDENTIFIER_DUPLICATE = "Duplicate identifier found: '<id>'";
+const ERROR_IDENTIFIER_TYPE = "Identifier cannot be null or undefined";
+const EVENT_CHANGE = "change";
+const EVENT_INPUT = "input";
+const EVENT_SUBMIT = "submit";
 const EVENT_DEFAULTS = {
 	A: "click",
 	BUTTON: "click",
 	DETAILS: "toggle",
-	FORM: "submit",
-	SELECT: "change",
-	TEXTAREA: "input"
+	FORM: EVENT_SUBMIT,
+	SELECT: EVENT_CHANGE,
+	TEXTAREA: EVENT_INPUT
 };
-const EXPRESSION_ABYDON_ATTRIBUTE_FULL = /(@?\w+)="<!--abydon.(\d+)-->"/g;
+const EVENT_ON_PREFIXED = "@on";
+const EVENT_ON_VALUE = "on";
+const EVENT_OPTIONS_DELIMITER = ":";
+const EXPRESSION_ABYDON_ATTRIBUTE_FULL = /(@?[\w-]+)="<!--abydon.(\d+)-->"/g;
 const EXPRESSION_ABYDON_ATTRIBUTE_PREFIX = /^_/;
 const EXPRESSION_ABYDON_CONTENT = /^@?abydon\.(\d+)@?$/;
 const EXPRESSION_ATTRIBUTE_CLASS = /^class\./;
@@ -23,5 +36,9 @@ const EXPRESSION_EVENT_PREFIX = /^@/;
 const EXPRESSION_PERIOD = /\./;
 const NAME_FRAGMENT = "$fragment";
 const NAME_FRAGMENTS = "$fragments";
+const PROPERTY_CHECKED = "checked";
+const PROPERTY_IDENTIFIER = "identifier";
+const PROPERTY_VALUE = "value";
+const TEMPLATE_ITEM = "<>";
 //#endregion
-export { ATTRIBUTE_CLASS_PREFIX_LENGTH, EVENT_DEFAULTS, EXPRESSION_ABYDON_ATTRIBUTE_FULL, EXPRESSION_ABYDON_ATTRIBUTE_PREFIX, EXPRESSION_ABYDON_CONTENT, EXPRESSION_ATTRIBUTE_CLASS, EXPRESSION_ATTRIBUTE_STYLE_FULL, EXPRESSION_ATTRIBUTE_STYLE_PREFIX, EXPRESSION_EVENT_CHANGE_TYPES, EXPRESSION_EVENT_NAME, EXPRESSION_EVENT_OPTIONS_ACTIVE, EXPRESSION_EVENT_OPTIONS_CAPTURE, EXPRESSION_EVENT_OPTIONS_ONCE, EXPRESSION_EVENT_PREFIX, EXPRESSION_PERIOD, NAME_FRAGMENT, NAME_FRAGMENTS };
+export { ARRAY_COMPARISON_ADDED, ARRAY_COMPARISON_DISSIMILAR, ARRAY_COMPARISON_REMOVED, ATTRIBUTE_CLASS_PREFIX_LENGTH, ATTRIBUTE_NAME_DELIMITER, ERROR_FRAGMENT, ERROR_IDENTIFIER_DUPLICATE, ERROR_IDENTIFIER_TYPE, EVENT_CHANGE, EVENT_DEFAULTS, EVENT_INPUT, EVENT_ON_PREFIXED, EVENT_ON_VALUE, EVENT_OPTIONS_DELIMITER, EVENT_SUBMIT, EXPRESSION_ABYDON_ATTRIBUTE_FULL, EXPRESSION_ABYDON_ATTRIBUTE_PREFIX, EXPRESSION_ABYDON_CONTENT, EXPRESSION_ATTRIBUTE_CLASS, EXPRESSION_ATTRIBUTE_STYLE_FULL, EXPRESSION_ATTRIBUTE_STYLE_PREFIX, EXPRESSION_EVENT_CHANGE_TYPES, EXPRESSION_EVENT_NAME, EXPRESSION_EVENT_OPTIONS_ACTIVE, EXPRESSION_EVENT_OPTIONS_CAPTURE, EXPRESSION_EVENT_OPTIONS_ONCE, EXPRESSION_EVENT_PREFIX, EXPRESSION_PERIOD, NAME_FRAGMENT, NAME_FRAGMENTS, PROPERTY_CHECKED, PROPERTY_IDENTIFIER, PROPERTY_VALUE, TEMPLATE_ITEM };

package/dist/fragments.mjs

@@ -1,4 +1,4 @@
-import { NAME_FRAGMENTS } from "./constants.mjs";
+import { ERROR_FRAGMENT, ERROR_IDENTIFIER_DUPLICATE, ERROR_IDENTIFIER_TYPE, NAME_FRAGMENTS } from "./constants.mjs";
 import { isFragment, isFragments } from "./helpers/index.mjs";
 import { getString } from "@oscarpalmer/atoms/string";
 import { array } from "@oscarpalmer/mora";
@@ -36,13 +36,13 @@ function handleItems(state, items) {
 	for (let index = 0; index < length; index += 1) {
 		const item = items[index];
 		const identifier = state.identify(item);
-		if (identifier == null) throw new Error("Identifier cannot be null or undefined");
+		if (identifier == null) throw new TypeError(ERROR_IDENTIFIER_TYPE);
 		const key = getString(identifier);
-		if (keys.has(key)) throw new Error(`Duplicate identifier found: "${key}"`);
+		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("Fragment function must return a Fragment instance");
+			if (!isFragment(instance)) throw new Error(ERROR_FRAGMENT);
 		}
 		instance.identify(key);
 		state.instances[key] = instance;

package/dist/helpers/dom.d.mts

@@ -1,6 +1,7 @@
 //#region src/helpers/dom.d.ts
 declare function createNodes(value: unknown): ChildNode[];
+declare function isInputElement(node: Node): node is HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
 declare function removeNodes(nodes: ChildNode[]): void;
 declare function replaceNodes(from: ChildNode[], to: ChildNode[]): void;
 //#endregion
-export { createNodes, removeNodes, replaceNodes };
+export { createNodes, isInputElement, removeNodes, replaceNodes };

package/dist/helpers/dom.mjs

@@ -7,6 +7,9 @@ function createNodes(value) {
 	if (isChildNode(value)) return [value];
 	return [new Text(getString(value))];
 }
+function isInputElement(node) {
+	return node instanceof HTMLInputElement || node instanceof HTMLSelectElement || node instanceof HTMLTextAreaElement;
+}
 function removeNodes(nodes) {
 	const { length } = nodes;
 	for (let index = 0; index < length; index += 1) nodes[index].remove();
@@ -17,4 +20,4 @@ function replaceNodes(from, to) {
 	for (let index = 1; index < length; index += 1) from[index].remove();
 }
 //#endregion
-export { createNodes, removeNodes, replaceNodes };
+export { createNodes, isInputElement, removeNodes, replaceNodes };

package/dist/helpers/index.d.mts

@@ -1,8 +1,9 @@
+import { ARRAY_COMPARISON_ADDED, ARRAY_COMPARISON_DISSIMILAR, ARRAY_COMPARISON_REMOVED } from "../constants.mjs";
 import { t as Fragment } from "../fragment-9qTBAvtR.mjs";
 import { Fragments } from "../fragments.mjs";
 
 //#region src/helpers/index.d.ts
-declare function compareArrays(first: unknown[], second: unknown[]): 'added' | 'dissimilar' | 'removed';
+declare function compareArrays(first: unknown[], second: unknown[]): typeof ARRAY_COMPARISON_ADDED | typeof ARRAY_COMPARISON_DISSIMILAR | typeof ARRAY_COMPARISON_REMOVED;
 declare function isFragment(value: unknown): value is Fragment;
 declare function isFragments(value: unknown): value is Fragments;
 //#endregion

package/dist/helpers/index.mjs

@@ -1,11 +1,11 @@
-import { NAME_FRAGMENT, NAME_FRAGMENTS } from "../constants.mjs";
+import { ARRAY_COMPARISON_ADDED, ARRAY_COMPARISON_DISSIMILAR, ARRAY_COMPARISON_REMOVED, NAME_FRAGMENT, NAME_FRAGMENTS } from "../constants.mjs";
 //#region src/helpers/index.ts
 function compareArrays(first, second) {
 	const firstIsLarger = first.length > second.length;
 	const from = firstIsLarger ? first : second;
 	const to = firstIsLarger ? second : first;
-	if (!from.filter((key) => to.includes(key)).every((key, index) => to[index] === key)) return COMPARISON_DISSIMILAR;
-	return firstIsLarger ? COMPARISON_REMOVED : COMPARISON_ADDED;
+	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;
 }
 function isFragment(value) {
 	return isNamed(value, NAME_FRAGMENT);
@@ -16,8 +16,5 @@ function isFragments(value) {
 function isNamed(value, name) {
 	return typeof value === "object" && value != null && name in value && value[name] === true;
 }
-const COMPARISON_ADDED = "added";
-const COMPARISON_DISSIMILAR = "dissimilar";
-const COMPARISON_REMOVED = "removed";
 //#endregion
 export { compareArrays, isFragment, isFragments };

package/dist/node/attribute/index.mjs

@@ -1,7 +1,9 @@
 import { EXPRESSION_ABYDON_ATTRIBUTE_PREFIX, EXPRESSION_ABYDON_CONTENT, EXPRESSION_EVENT_PREFIX, EXPRESSION_PERIOD } from "../../constants.mjs";
+import { isInputElement } from "../../helpers/dom.mjs";
 import { mapEvent } from "../event.mjs";
 import { setAttribute } from "./value.mjs";
-import { computed, isReactive } from "@oscarpalmer/mora";
+import { parse } from "@oscarpalmer/atoms/string";
+import { computed, isReactive, isSignal } from "@oscarpalmer/mora";
 //#region src/node/attribute/index.ts
 function getValue(data, original) {
 	const matches = EXPRESSION_ABYDON_CONTENT.exec(original ?? "");
@@ -31,6 +33,9 @@ function mapAttributes(data, element) {
 function mapValue(data, element, name, value) {
 	if (typeof value === "function") setComputedAttribute(data, element, name, value);
 	else setAttribute(data, element, name, value);
+	if (name === "value" && isInputElement(element) && isSignal(value)) mapEvent(element, "@on", () => {
+		value.set(parse(element.value) ?? element.value);
+	});
 }
 function setComputedAttribute(data, element, name, callback) {
 	const value = computed(callback);

package/dist/node/attribute/value.mjs

@@ -1,4 +1,4 @@
-import { EXPRESSION_ATTRIBUTE_CLASS, EXPRESSION_ATTRIBUTE_STYLE_FULL, EXPRESSION_ATTRIBUTE_STYLE_PREFIX } from "../../constants.mjs";
+import { EVENT_CHANGE, EVENT_INPUT, EXPRESSION_ATTRIBUTE_CLASS, EXPRESSION_ATTRIBUTE_STYLE_FULL, EXPRESSION_ATTRIBUTE_STYLE_PREFIX, PROPERTY_CHECKED, PROPERTY_VALUE } from "../../constants.mjs";
 import { isReactive } from "@oscarpalmer/mora";
 import { isBooleanAttribute, setAttribute as setAttribute$1 } from "@oscarpalmer/toretto/attribute";
 //#region src/node/attribute/value.ts
@@ -46,7 +46,7 @@ function setValue(data, element, name, value) {
 	else callback(element, name, value);
 }
 function updateChecked(element, name, value) {
-	updateElement("change", "checked", element, name, value, value === true);
+	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;
@@ -59,7 +59,7 @@ function updateProperty(element, name, value) {
 	setAttribute$1(element, name, value === true);
 }
 function updateValue(element, name, value) {
-	updateElement(element instanceof HTMLSelectElement ? "change" : "input", "value", element, name, value, String(value));
+	updateElement(element instanceof HTMLSelectElement ? EVENT_CHANGE : EVENT_INPUT, PROPERTY_VALUE, element, name, value, String(value));
 }
 //#endregion
 export { setAttribute };

package/dist/node/event.mjs

@@ -1,4 +1,4 @@
-import { EVENT_DEFAULTS, EXPRESSION_EVENT_CHANGE_TYPES, EXPRESSION_EVENT_NAME, EXPRESSION_EVENT_OPTIONS_ACTIVE, EXPRESSION_EVENT_OPTIONS_CAPTURE, EXPRESSION_EVENT_OPTIONS_ONCE } from "../constants.mjs";
+import { EVENT_CHANGE, EVENT_DEFAULTS, EVENT_INPUT, EVENT_SUBMIT, EXPRESSION_EVENT_CHANGE_TYPES, EXPRESSION_EVENT_NAME, EXPRESSION_EVENT_OPTIONS_ACTIVE, EXPRESSION_EVENT_OPTIONS_CAPTURE, EXPRESSION_EVENT_OPTIONS_ONCE } from "../constants.mjs";
 import { on } from "@oscarpalmer/toretto/event";
 //#region src/node/event.ts
 function getOptions(options) {
@@ -12,8 +12,8 @@ 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 "change";
-		return element.type === "submit" ? "submit" : "input";
+		if (EXPRESSION_EVENT_CHANGE_TYPES.test(element.type)) return EVENT_CHANGE;
+		return element.type === "submit" ? EVENT_SUBMIT : EVENT_INPUT;
 	}
 	return EVENT_DEFAULTS[element.tagName] ?? type;
 }

package/dist/node/value.mjs

@@ -1,3 +1,4 @@
+import { ARRAY_COMPARISON_ADDED } from "../constants.mjs";
 import { compareArrays, isFragment } from "../helpers/index.mjs";
 import { createNodes, replaceNodes } from "../helpers/dom.mjs";
 import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
@@ -25,7 +26,7 @@ function handleArray(identifiers, items, nodes) {
 	if (comparison !== "removed") addToArray(identifiers, {
 		...items,
 		next
-	}, nodes, comparison === "added");
+	}, nodes, comparison === ARRAY_COMPARISON_ADDED);
 	const toRemove = items.fragments?.filter((fragment) => !identifiers.next.has(fragment.identifier)) ?? [];
 	const { length } = toRemove;
 	for (let index = 0; index < length; index += 1) toRemove[index].remove();

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oscarpalmer/abydon",
-	"version": "0.17.0",
+	"version": "0.19.0",
 	"keywords": [
 		"components",
 		"dom",
@@ -39,12 +39,11 @@
 		"tsdown:build": "npx tsdown -c ./tsdown.config.ts",
 		"tsdown:watch": "npx tsdown -c ./tsdown.config.ts --watch",
 		"test": "npx vp test run --coverage",
-		"test:leak": "npx vp test run --detect-async-leaks --coverage",
-		"watch": "npx vite build --watch"
+		"test:leak": "npx vp test run --detect-async-leaks --coverage"
 	},
 	"dependencies": {
 		"@oscarpalmer/atoms": "^0.165",
-		"@oscarpalmer/mora": "^0.26",
+		"@oscarpalmer/mora": "^0.27",
 		"@oscarpalmer/toretto": "^0.41"
 	},
 	"devDependencies": {

package/src/constants.ts

@@ -1,15 +1,41 @@
+export const ARRAY_COMPARISON_ADDED = 'added';
+
+export const ARRAY_COMPARISON_DISSIMILAR = 'dissimilar';
+
+export const ARRAY_COMPARISON_REMOVED = 'removed';
+
 export const ATTRIBUTE_CLASS_PREFIX_LENGTH = 6;
 
+export const ATTRIBUTE_NAME_DELIMITER = '.';
+
+export const ERROR_FRAGMENT = 'Fragment function must return a Fragment instance';
+
+export const ERROR_IDENTIFIER_DUPLICATE = "Duplicate identifier found: '<id>'";
+
+export const ERROR_IDENTIFIER_TYPE = 'Identifier cannot be null or undefined';
+
+export const EVENT_CHANGE = 'change';
+
+export const EVENT_INPUT = 'input';
+
+export const EVENT_SUBMIT = 'submit';
+
 export const EVENT_DEFAULTS: Record<string, string> = {
 	A: 'click',
 	BUTTON: 'click',
 	DETAILS: 'toggle',
-	FORM: 'submit',
-	SELECT: 'change',
-	TEXTAREA: 'input',
+	FORM: EVENT_SUBMIT,
+	SELECT: EVENT_CHANGE,
+	TEXTAREA: EVENT_INPUT,
 };
 
-export const EXPRESSION_ABYDON_ATTRIBUTE_FULL = /(@?\w+)="<!--abydon.(\d+)-->"/g;
+export const EVENT_ON_PREFIXED = '@on';
+
+export const EVENT_ON_VALUE = 'on';
+
+export const EVENT_OPTIONS_DELIMITER = ':';
+
+export const EXPRESSION_ABYDON_ATTRIBUTE_FULL = /(@?[\w-]+)="<!--abydon.(\d+)-->"/g;
 
 export const EXPRESSION_ABYDON_ATTRIBUTE_PREFIX = /^_/;
 
@@ -38,3 +64,11 @@ export const EXPRESSION_PERIOD = /\./;
 export const NAME_FRAGMENT = '$fragment';
 
 export const NAME_FRAGMENTS = '$fragments';
+
+export const PROPERTY_CHECKED = 'checked';
+
+export const PROPERTY_IDENTIFIER = 'identifier';
+
+export const PROPERTY_VALUE = 'value';
+
+export const TEMPLATE_ITEM = '<>';

package/src/fragment.ts

@@ -1,6 +1,6 @@
 import {isPlainObject} from '@oscarpalmer/atoms/is';
 import {html} from '@oscarpalmer/toretto/html';
-import {NAME_FRAGMENT} from './constants';
+import {NAME_FRAGMENT, PROPERTY_IDENTIFIER} from './constants';
 import {handleFragments} from './fragments';
 import {isFragments} from './helpers';
 import {removeNodes} from './helpers/dom';
@@ -56,7 +56,7 @@ export class Fragment {
 	configure(configuration: FragmentConfiguration): Fragment {
 		const actual = isPlainObject(configuration) ? configuration : {};
 
-		if ('identifier' in actual) {
+		if (PROPERTY_IDENTIFIER in actual) {
 			this.#configuration.identifier = actual.identifier;
 		}
 

package/src/fragments.ts

@@ -1,6 +1,12 @@
 import {getString} from '@oscarpalmer/atoms/string';
 import {array, type ReactiveArray} from '@oscarpalmer/mora';
-import {NAME_FRAGMENTS} from './constants';
+import {
+	ERROR_FRAGMENT,
+	ERROR_IDENTIFIER_DUPLICATE,
+	ERROR_IDENTIFIER_TYPE,
+	NAME_FRAGMENTS,
+	TEMPLATE_ITEM,
+} from './constants';
 import type {Fragment} from './fragment';
 import {isFragment, isFragments} from './helpers';
 import type {FragmentsState} from './models';
@@ -58,13 +64,13 @@ function handleItems(state: FragmentsState, items: unknown[]): void {
 		const identifier = state.identify(item);
 
 		if (identifier == null) {
-			throw new Error('Identifier cannot be null or undefined');
+			throw new TypeError(ERROR_IDENTIFIER_TYPE);
 		}
 
 		const key = getString(identifier);
 
 		if (keys.has(key)) {
-			throw new Error(`Duplicate identifier found: "${key}"`);
+			throw new Error(ERROR_IDENTIFIER_DUPLICATE.replace(TEMPLATE_ITEM, key));
 		}
 
 		let instance = state.instances[key];
@@ -73,7 +79,7 @@ function handleItems(state: FragmentsState, items: unknown[]): void {
 			instance = state.fragment(item);
 
 			if (!isFragment(instance)) {
-				throw new Error('Fragment function must return a Fragment instance');
+				throw new Error(ERROR_FRAGMENT);
 			}
 		}
 

package/src/helpers/dom.ts

@@ -14,6 +14,16 @@ export function createNodes(value: unknown): ChildNode[] {
 	return [new Text(getString(value))];
 }
 
+export function isInputElement(
+	node: Node,
+): node is HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement {
+	return (
+		node instanceof HTMLInputElement ||
+		node instanceof HTMLSelectElement ||
+		node instanceof HTMLTextAreaElement
+	);
+}
+
 export function removeNodes(nodes: ChildNode[]): void {
 	const {length} = nodes;
 

package/src/helpers/index.ts

@@ -1,21 +1,30 @@
 import type {PlainObject} from '@oscarpalmer/atoms/models';
-import {NAME_FRAGMENT, NAME_FRAGMENTS} from '../constants';
+import {
+	ARRAY_COMPARISON_ADDED,
+	ARRAY_COMPARISON_DISSIMILAR,
+	ARRAY_COMPARISON_REMOVED,
+	NAME_FRAGMENT,
+	NAME_FRAGMENTS,
+} from '../constants';
 import type {Fragment} from '../fragment';
 import type {Fragments} from '../fragments';
 
 export function compareArrays(
 	first: unknown[],
 	second: unknown[],
-): 'added' | 'dissimilar' | 'removed' {
+):
+	| typeof ARRAY_COMPARISON_ADDED
+	| typeof ARRAY_COMPARISON_DISSIMILAR
+	| typeof ARRAY_COMPARISON_REMOVED {
 	const firstIsLarger = first.length > second.length;
 	const from = firstIsLarger ? first : second;
 	const to = firstIsLarger ? second : first;
 
 	if (!from.filter(key => to.includes(key)).every((key, index) => to[index] === key)) {
-		return COMPARISON_DISSIMILAR;
+		return ARRAY_COMPARISON_DISSIMILAR;
 	}
 
-	return firstIsLarger ? COMPARISON_REMOVED : COMPARISON_ADDED;
+	return firstIsLarger ? ARRAY_COMPARISON_REMOVED : ARRAY_COMPARISON_ADDED;
 }
 
 export function isFragment(value: unknown): value is Fragment {
@@ -34,9 +43,3 @@ function isNamed(value: unknown, name: string): boolean {
 		(value as PlainObject)[name] === true
 	);
 }
-
-const COMPARISON_ADDED = 'added';
-
-const COMPARISON_DISSIMILAR = 'dissimilar';
-
-const COMPARISON_REMOVED = 'removed';

package/src/node/attribute/index.ts

@@ -1,11 +1,15 @@
 import type {GenericCallback} from '@oscarpalmer/atoms/models';
-import {computed, isReactive} from '@oscarpalmer/mora';
+import {parse} from '@oscarpalmer/atoms/string';
+import {computed, isReactive, isSignal} from '@oscarpalmer/mora';
 import {
+	EVENT_ON_PREFIXED,
 	EXPRESSION_ABYDON_ATTRIBUTE_PREFIX,
 	EXPRESSION_ABYDON_CONTENT,
 	EXPRESSION_EVENT_PREFIX,
 	EXPRESSION_PERIOD,
+	PROPERTY_VALUE,
 } from '../../constants';
+import {isInputElement} from '../../helpers/dom';
 import type {FragmentData} from '../../models';
 import {mapEvent} from '../event';
 import {setAttribute} from './value';
@@ -58,6 +62,12 @@ function mapValue(
 	} else {
 		setAttribute(data, element, name, value);
 	}
+
+	if (name === PROPERTY_VALUE && isInputElement(element) && isSignal(value)) {
+		mapEvent(element, EVENT_ON_PREFIXED, () => {
+			value.set(parse(element.value) ?? element.value);
+		});
+	}
 }
 
 function setComputedAttribute(

package/src/node/attribute/value.ts

@@ -6,18 +6,23 @@ import {
 } from '@oscarpalmer/toretto/attribute';
 import {
 	ATTRIBUTE_CLASS_PREFIX_LENGTH,
+	ATTRIBUTE_NAME_DELIMITER,
+	EVENT_CHANGE,
+	EVENT_INPUT,
 	EXPRESSION_ATTRIBUTE_CLASS,
 	EXPRESSION_ATTRIBUTE_STYLE_FULL,
 	EXPRESSION_ATTRIBUTE_STYLE_PREFIX,
+	PROPERTY_CHECKED,
+	PROPERTY_VALUE,
 } from '../../constants';
 import type {FragmentData} from '../../models';
 
 function getCallback(element: HTMLElement | SVGElement, name: string) {
 	if (isBooleanAttribute(name) && name in element) {
-		return name === 'checked' ? updateChecked : updateProperty;
+		return name === PROPERTY_CHECKED ? updateChecked : updateProperty;
 	}
 
-	return name === 'value' ? updateValue : setTorettoAttribute;
+	return name === PROPERTY_VALUE ? updateValue : setTorettoAttribute;
 }
 
 export function setAttribute(
@@ -55,7 +60,7 @@ function setClasses(
 		}
 	}
 
-	const classes = name.slice(ATTRIBUTE_CLASS_PREFIX_LENGTH).split('.');
+	const classes = name.slice(ATTRIBUTE_CLASS_PREFIX_LENGTH).split(ATTRIBUTE_NAME_DELIMITER);
 
 	if (isReactive(value)) {
 		data.mora.subscribers.add(value.subscribe(update));
@@ -111,7 +116,7 @@ function setValue(
 }
 
 function updateChecked(element: HTMLElement | SVGElement, name: string, value: unknown): void {
-	updateElement('change', 'checked', element, name, value, value === true);
+	updateElement(EVENT_CHANGE, PROPERTY_CHECKED, element, name, value, value === true);
 }
 
 function updateElement(
@@ -143,8 +148,8 @@ function updateProperty(element: HTMLElement | SVGElement, name: string, value:
 
 function updateValue(element: HTMLElement | SVGElement, name: string, value: unknown): void {
 	updateElement(
-		element instanceof HTMLSelectElement ? 'change' : 'input',
-		'value',
+		element instanceof HTMLSelectElement ? EVENT_CHANGE : EVENT_INPUT,
+		PROPERTY_VALUE,
 		element,
 		name,
 		value,

package/src/node/event.ts

@@ -1,6 +1,11 @@
 import {on} from '@oscarpalmer/toretto/event';
 import {
+	EVENT_CHANGE,
 	EVENT_DEFAULTS,
+	EVENT_INPUT,
+	EVENT_ON_VALUE,
+	EVENT_OPTIONS_DELIMITER,
+	EVENT_SUBMIT,
 	EXPRESSION_EVENT_CHANGE_TYPES,
 	EXPRESSION_EVENT_NAME,
 	EXPRESSION_EVENT_OPTIONS_ACTIVE,
@@ -9,7 +14,7 @@ import {
 } from '../constants';
 
 function getOptions(options: string): AddEventListenerOptions {
-	const parts = options.split(':');
+	const parts = options.split(EVENT_OPTIONS_DELIMITER);
 
 	return {
 		capture: parts.some(part => EXPRESSION_EVENT_OPTIONS_CAPTURE.test(part)),
@@ -19,16 +24,16 @@ function getOptions(options: string): AddEventListenerOptions {
 }
 
 function getType(element: HTMLElement | SVGElement, type: string): string {
-	if (type !== 'on') {
+	if (type !== EVENT_ON_VALUE) {
 		return type;
 	}
 
 	if (element instanceof HTMLInputElement) {
 		if (EXPRESSION_EVENT_CHANGE_TYPES.test(element.type)) {
-			return 'change';
+			return EVENT_CHANGE;
 		}
 
-		return element.type === 'submit' ? 'submit' : 'input';
+		return element.type === EVENT_SUBMIT ? EVENT_SUBMIT : EVENT_INPUT;
 	}
 
 	return EVENT_DEFAULTS[element.tagName] ?? type;

package/src/node/value.ts

@@ -2,6 +2,7 @@ import {isNullableOrWhitespace} from '@oscarpalmer/atoms/is';
 import {getString} from '@oscarpalmer/atoms/string';
 import type {Reactive} from '@oscarpalmer/mora';
 import {isChildNode} from '@oscarpalmer/toretto/is';
+import {ARRAY_COMPARISON_ADDED, ARRAY_COMPARISON_REMOVED} from '../constants';
 import type {Fragment} from '../fragment';
 import {compareArrays, isFragment} from '../helpers';
 import {createNodes, replaceNodes} from '../helpers/dom';
@@ -71,8 +72,8 @@ function handleArray(
 
 	const comparison = compareArrays(items.fragments ?? [], items.templates);
 
-	if (comparison !== 'removed') {
-		addToArray(identifiers, {...items, next}, nodes, comparison === 'added');
+	if (comparison !== ARRAY_COMPARISON_REMOVED) {
+		addToArray(identifiers, {...items, next}, nodes, comparison === ARRAY_COMPARISON_ADDED);
 	}
 
 	const toRemove =