@oscarpalmer/toretto 0.41.0 → 0.42.0

package/dist/index.mjs

@@ -108,203 +108,6 @@ function isNullableOrWhitespace(value) {
 }
 const EXPRESSION_WHITESPACE$1 = /^\s*$/;
 //#endregion
-//#region src/internal/is.ts
-/**
-* Is the value an event target?
-* @param value Value to check
-* @returns `true` if it's an event target, otherwise `false`
-*/
-function isEventTarget(value) {
-	return typeof value === "object" && value != null && typeof value.addEventListener === "function" && typeof value.removeEventListener === "function" && typeof value.dispatchEvent === "function";
-}
-/**
-* Is the value an HTML or SVG element?
-* @param value Value to check
-* @returns `true` if it's an HTML or SVG element, otherwise `false`
-*/
-function isHTMLOrSVGElement(value) {
-	return value instanceof HTMLElement || value instanceof SVGElement;
-}
-//#endregion
-//#region src/is.ts
-/**
-* Is the value a child node?
-* @param value Value to check
-* @returns `true` if it's a child node, otherwise `false`
-*/
-function isChildNode(value) {
-	return value instanceof Node && CHILD_NODE_TYPES.has(value.nodeType);
-}
-function isInDocument(node, doc) {
-	if (!(node instanceof Node)) return false;
-	if (!(doc instanceof Document)) return node.ownerDocument?.contains(node) ?? true;
-	return node.ownerDocument == null ? node === doc : node.ownerDocument === doc && doc.contains(node);
-}
-const CHILD_NODE_TYPES = new Set([
-	Node.ELEMENT_NODE,
-	Node.TEXT_NODE,
-	Node.PROCESSING_INSTRUCTION_NODE,
-	Node.COMMENT_NODE,
-	Node.DOCUMENT_TYPE_NODE
-]);
-//#endregion
-//#region src/internal/element-value.ts
-function setElementValue(element, first, second, third, callback) {
-	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);
-}
-function setElementValues(element, first, second, third, callback) {
-	if (!isHTMLOrSVGElement(element)) return;
-	if (typeof first === "string") {
-		callback(element, first, second, third);
-		return;
-	}
-	const isArray = Array.isArray(first);
-	if (!isArray && !(typeof first === "object" && first !== null)) return;
-	const entries = isArray ? first : Object.entries(first).map(([name, value]) => ({
-		name,
-		value
-	}));
-	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, entry.name, entry.value, third);
-	}
-}
-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));
-}
-//#endregion
-//#region src/internal/attribute.ts
-function badAttributeHandler(name, value) {
-	if (typeof name !== "string" || name.trim().length === 0 || typeof value !== "string") return true;
-	if (EXPRESSION_CLOBBERED_NAME.test(name) && (value in document || value in formElement) || EXPRESSION_EVENT_NAME.test(name)) return true;
-	if (EXPRESSION_SKIP_NAME.test(name) || EXPRESSION_URI_VALUE.test(value) || isValidSourceAttribute(name, value)) return false;
-	return EXPRESSION_DATA_OR_SCRIPT.test(value);
-}
-function booleanAttributeHandler(name, value) {
-	if (typeof name !== "string" || name.trim().length === 0 || typeof value !== "string") return true;
-	const normalizedName = name.toLowerCase();
-	if (!booleanAttributesSet.has(normalizedName)) return false;
-	const normalized = value.toLowerCase();
-	return !(normalized.length === 0 || normalized === normalizedName);
-}
-function decodeAttribute(value) {
-	textArea ??= document.createElement("textarea");
-	textArea.innerHTML = value;
-	return decodeURIComponent(textArea.value);
-}
-function handleAttribute(callback, decode, first, second) {
-	let name;
-	let value;
-	if (isAttribute(first)) {
-		name = first.name;
-		value = String(first.value);
-	} else if (typeof first === "string" && typeof second === "string") {
-		name = first;
-		value = second;
-	}
-	if (decode && value != null) value = decodeAttribute(value);
-	return callback(name, value?.replace(EXPRESSION_WHITESPACE, ""));
-}
-function isAttribute(value) {
-	return value instanceof Attr || isPlainObject(value) && typeof value.name === "string" && "value" in 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 _isEmptyNonBooleanAttribute(first, second, decode) {
-	return handleAttribute((name, value) => name != null && value != null && !booleanAttributesSet.has(name) && value.trim().length === 0, decode, first, second);
-}
-function _isInvalidBooleanAttribute(first, second, decode) {
-	return handleAttribute(booleanAttributeHandler, decode, first, second);
-}
-function isValidSourceAttribute(name, value) {
-	return EXPRESSION_SOURCE_NAME.test(name) && EXPRESSION_SOURCE_VALUE.test(value);
-}
-function updateAttribute(element, name, value, dispatch) {
-	const normalizedName = name.toLowerCase();
-	const isBoolean = booleanAttributesSet.has(normalizedName);
-	const next = isBoolean ? value === true || typeof value === "string" && (value === "" || value.toLowerCase() === normalizedName) : value == null ? "" : value;
-	if (name in element) updateProperty(element, normalizedName, next, dispatch);
-	updateElementValue(element, name, isBoolean ? next ? "" : null : value, element.setAttribute, element.removeAttribute, isBoolean, false);
-}
-function updateProperty(element, name, value, dispatch) {
-	if (Object.is(element[name], value)) return;
-	element[name] = value;
-	const event = dispatch !== false && elementEvents[element.tagName]?.[name];
-	if (typeof event === "string") element.dispatchEvent(new Event(event, { bubbles: true }));
-}
-const EXPRESSION_CLOBBERED_NAME = /^(id|name)$/i;
-const EXPRESSION_DATA_OR_SCRIPT = /^(?:data|\w+script):/i;
-const EXPRESSION_EVENT_NAME = /^on/i;
-const EXPRESSION_SKIP_NAME = /^(aria-[-\w]+|data-[-\w.\u00B7-\uFFFF]+)$/i;
-const EXPRESSION_SOURCE_NAME = /^src$/i;
-const EXPRESSION_SOURCE_VALUE = /^data:/i;
-const EXPRESSION_URI_VALUE = /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp|matrix):|[^a-z]|[a-z+.-]+(?:[^a-z+.\-:]|$))/i;
-const EXPRESSION_WHITESPACE = /[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g;
-/**
-* List of boolean attributes
-*/
-const booleanAttributes = Object.freeze([
-	"async",
-	"autofocus",
-	"autoplay",
-	"checked",
-	"controls",
-	"default",
-	"defer",
-	"disabled",
-	"formnovalidate",
-	"hidden",
-	"inert",
-	"ismap",
-	"itemscope",
-	"loop",
-	"multiple",
-	"muted",
-	"nomodule",
-	"novalidate",
-	"open",
-	"playsinline",
-	"readonly",
-	"required",
-	"reversed",
-	"selected"
-]);
-const booleanAttributesSet = new Set(booleanAttributes);
-const elementEvents = {
-	DETAILS: { open: "toggle" },
-	INPUT: {
-		checked: "change",
-		value: "input"
-	},
-	SELECT: { value: "change" },
-	TEXTAREA: { value: "input" }
-};
-const formElement = document.createElement("form");
-let textArea;
-//#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(value, reviver) {
-	try {
-		return JSON.parse(value, reviver);
-	} catch {
-		return;
-	}
-}
-//#endregion
 //#region node_modules/@oscarpalmer/atoms/dist/internal/number.mjs
 /**
 * Clamp a number between a minimum and maximum value
@@ -349,7 +152,7 @@ var SizedMap = class extends Map {
 	* Is the Map full?
 	*/
 	get full() {
-		return this.size >= this.#maximumSize;
+		return super.size >= this.#maximumSize;
 	}
 	get maximum() {
 		return this.#maximumSize;
@@ -368,17 +171,23 @@ var SizedMap = class extends Map {
 	* @inheritdoc
 	*/
 	get(key) {
-		const value = super.get(key);
-		if (value !== void 0 || this.has(key)) this.set(key, value);
-		return value;
+		if (super.has(key)) {
+			const value = super.get(key);
+			this.#setValue(key, value, true);
+			return value;
+		}
 	}
 	/**
 	* @inheritdoc
 	*/
 	set(key, value) {
-		if (this.has(key)) this.delete(key);
-		else if (this.size >= this.#maximumSize) this.delete(this.keys().next().value);
-		return super.set(key, value);
+		return this.#setValue(key, value, super.has(key));
+	}
+	#setValue(key, value, has) {
+		if (has) super.delete(key);
+		else if (super.size >= this.#maximumSize) super.delete(super.keys().next().value);
+		super.set(key, value);
+		return this;
 	}
 };
 //#endregion
@@ -534,27 +343,232 @@ function toCaseCallback(value) {
 		}
 		cased.push(join(partResult, delimiters[type]));
 	}
-	return join(cased, delimiters[type]);
+	return join(cased, delimiters[type]);
+}
+const CASE_CAMEL = "camel";
+const CASE_KEBAB = "kebab";
+const CASE_PASCAL = "pascal";
+const CASE_SNAKE = "snake";
+const DELIMTER_EMPTY = "";
+const DELIMITER_HYPHEN = "-";
+const DELIMITER_UNDERSCORE = "_";
+const EXPRESSION_CAMEL_CASE = /(\p{Ll})(\p{Lu})/gu;
+const EXPRESSION_ACRONYM = /(\p{Lu}*)(\p{Lu})(\p{Ll}+)/gu;
+const REPLACEMENT_CAMEL_CASE = "$1-$2";
+const S = "s";
+const caseMemoizers = {};
+const delimiters = {
+	[CASE_CAMEL]: DELIMTER_EMPTY,
+	[CASE_KEBAB]: DELIMITER_HYPHEN,
+	[CASE_PASCAL]: DELIMTER_EMPTY,
+	[CASE_SNAKE]: DELIMITER_UNDERSCORE
+};
+let memoizedCapitalize;
+//#endregion
+//#region src/internal/is.ts
+/**
+* Is the value an event target?
+* @param value Value to check
+* @returns `true` if it's an event target, otherwise `false`
+*/
+function isEventTarget(value) {
+	return typeof value === "object" && value != null && typeof value.addEventListener === "function" && typeof value.removeEventListener === "function" && typeof value.dispatchEvent === "function";
+}
+/**
+* Is the value an HTML or SVG element?
+* @param value Value to check
+* @returns `true` if it's an HTML or SVG element, otherwise `false`
+*/
+function isHTMLOrSVGElement(value) {
+	return value instanceof HTMLElement || value instanceof SVGElement;
+}
+//#endregion
+//#region src/is.ts
+/**
+* Is the value a child node?
+* @param value Value to check
+* @returns `true` if it's a child node, otherwise `false`
+*/
+function isChildNode(value) {
+	return value instanceof Node && CHILD_NODE_TYPES.has(value.nodeType);
+}
+function isInDocument(node, doc) {
+	if (!(node instanceof Node)) return false;
+	if (!(doc instanceof Document)) return node.ownerDocument?.contains(node) ?? true;
+	return node.ownerDocument == null ? node === doc : node.ownerDocument === doc && doc.contains(node);
+}
+const CHILD_NODE_TYPES = new Set([
+	Node.ELEMENT_NODE,
+	Node.TEXT_NODE,
+	Node.PROCESSING_INSTRUCTION_NODE,
+	Node.COMMENT_NODE,
+	Node.DOCUMENT_TYPE_NODE
+]);
+//#endregion
+//#region src/internal/element-value.ts
+function setElementValue(element, first, second, third, callback) {
+	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);
+}
+function setElementValues(element, first, second, third, callback) {
+	if (!isHTMLOrSVGElement(element)) return;
+	const dispatch = third !== false;
+	if (typeof first === "string") {
+		callback(element, kebabCase(first), second, dispatch);
+		return;
+	}
+	const isArray = Array.isArray(first);
+	if (!isArray && !(typeof first === "object" && first !== null)) return;
+	const entries = isArray ? first : Object.entries(first).map(([name, value]) => ({
+		name,
+		value
+	}));
+	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);
+	}
+}
+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));
+}
+//#endregion
+//#region src/internal/property.ts
+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 event = dispatch && elementEvents[element.tagName]?.[property];
+	if (typeof event === "string") element.dispatchEvent(new Event(event, { bubbles: true }));
+}
+const elementEvents = {
+	DETAILS: { open: "toggle" },
+	INPUT: {
+		checked: "change",
+		value: "input"
+	},
+	SELECT: { value: "change" },
+	TEXTAREA: { value: "input" }
+};
+//#endregion
+//#region src/internal/attribute.ts
+function badAttributeHandler(name, value) {
+	if (typeof name !== "string" || name.trim().length === 0 || typeof value !== "string") return true;
+	if (EXPRESSION_CLOBBERED_NAME.test(name) && (value in document || value in formElement) || EXPRESSION_EVENT_NAME.test(name)) return true;
+	if (EXPRESSION_SKIP_NAME.test(name) || EXPRESSION_URI_VALUE.test(value) || isValidSourceAttribute(name, value)) return false;
+	return EXPRESSION_DATA_OR_SCRIPT.test(value);
+}
+function booleanAttributeHandler(name, value) {
+	if (typeof name !== "string" || name.trim().length === 0 || typeof value !== "string") return true;
+	const normalizedName = name.toLowerCase();
+	if (!booleanAttributesSet.has(normalizedName)) return false;
+	const normalized = value.toLowerCase();
+	return !(normalized.length === 0 || normalized === normalizedName);
+}
+function decodeAttribute(value) {
+	textArea ??= document.createElement("textarea");
+	textArea.innerHTML = value;
+	return decodeURIComponent(textArea.value);
+}
+function handleAttribute(callback, decode, first, second) {
+	let name;
+	let value;
+	if (isAttribute(first)) {
+		name = first.name;
+		value = String(first.value);
+	} else if (typeof first === "string" && typeof second === "string") {
+		name = first;
+		value = second;
+	}
+	if (name != null) name = kebabCase(name);
+	if (decode && value != null) value = decodeAttribute(value);
+	return callback(name, value?.replace(EXPRESSION_WHITESPACE, ""));
+}
+function isAttribute(value) {
+	return value instanceof Attr || isPlainObject(value) && typeof value.name === "string" && "value" in 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);
+}
+function isValidSourceAttribute(name, value) {
+	return EXPRESSION_SOURCE_NAME.test(name) && EXPRESSION_SOURCE_VALUE.test(value);
+}
+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(element, name, next, dispatch);
+	updateElementValue(element, name, isBoolean ? next ? "" : null : value, element.setAttribute, element.removeAttribute, isBoolean, false);
+}
+const EXPRESSION_CLOBBERED_NAME = /^(id|name)$/i;
+const EXPRESSION_DATA_OR_SCRIPT = /^(?:data|\w+script):/i;
+const EXPRESSION_EVENT_NAME = /^on/i;
+const EXPRESSION_SKIP_NAME = /^(aria-[-\w]+|data-[-\w.\u00B7-\uFFFF]+)$/i;
+const EXPRESSION_SOURCE_NAME = /^src$/i;
+const EXPRESSION_SOURCE_VALUE = /^data:/i;
+const EXPRESSION_URI_VALUE = /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp|matrix):|[^a-z]|[a-z+.-]+(?:[^a-z+.\-:]|$))/i;
+const EXPRESSION_WHITESPACE = /[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g;
+/**
+* List of boolean attributes
+*/
+const booleanAttributes = Object.freeze([
+	"async",
+	"autofocus",
+	"autoplay",
+	"checked",
+	"controls",
+	"default",
+	"defer",
+	"disabled",
+	"formnovalidate",
+	"hidden",
+	"inert",
+	"ismap",
+	"itemscope",
+	"loop",
+	"multiple",
+	"muted",
+	"nomodule",
+	"novalidate",
+	"open",
+	"playsinline",
+	"readonly",
+	"required",
+	"reversed",
+	"selected"
+]);
+const booleanAttributesSet = new Set(booleanAttributes);
+const dispatchedAttributes = new Set([
+	"checked",
+	"open",
+	"value"
+]);
+const formElement = document.createElement("form");
+let textArea;
+//#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(value, reviver) {
+	try {
+		return JSON.parse(value, reviver);
+	} catch {
+		return;
+	}
 }
-const CASE_CAMEL = "camel";
-const CASE_KEBAB = "kebab";
-const CASE_PASCAL = "pascal";
-const CASE_SNAKE = "snake";
-const DELIMTER_EMPTY = "";
-const DELIMITER_HYPHEN = "-";
-const DELIMITER_UNDERSCORE = "_";
-const EXPRESSION_CAMEL_CASE = /(\p{Ll})(\p{Lu})/gu;
-const EXPRESSION_ACRONYM = /(\p{Lu}*)(\p{Lu})(\p{Ll}+)/gu;
-const REPLACEMENT_CAMEL_CASE = "$1-$2";
-const S = "s";
-const caseMemoizers = {};
-const delimiters = {
-	[CASE_CAMEL]: DELIMTER_EMPTY,
-	[CASE_KEBAB]: DELIMITER_HYPHEN,
-	[CASE_PASCAL]: DELIMTER_EMPTY,
-	[CASE_SNAKE]: DELIMITER_UNDERSCORE
-};
-let memoizedCapitalize;
 //#endregion
 //#region src/internal/get-value.ts
 function getBoolean(value, defaultValue) {
@@ -572,9 +586,9 @@ function getStyleValue(element, property, computed) {
 }
 const EXPRESSION_DATA_PREFIX = /^data-/i;
 //#endregion
-//#region src/attribute/get.ts
+//#region src/attribute/get.attribute.ts
 function getAttribute(element, name, parseValues) {
-	if (isHTMLOrSVGElement(element) && typeof name === "string") return getAttributeValue(element, name, parseValues !== false);
+	if (isHTMLOrSVGElement(element) && typeof name === "string") return getAttributeValue(element, kebabCase(name), parseValues !== false);
 }
 /**
 * Get specific attributes from an element
@@ -590,12 +604,12 @@ function getAttributes(element, names, parseData) {
 	const { length } = names;
 	for (let index = 0; index < length; index += 1) {
 		const name = names[index];
-		if (typeof name === "string") attributes[name] = getAttributeValue(element, name, shouldParse);
+		if (typeof name === "string") attributes[name] = getAttributeValue(element, kebabCase(name), shouldParse);
 	}
 	return attributes;
 }
 //#endregion
-//#region src/attribute/set.ts
+//#region src/attribute/set.attribute.ts
 function setAttribute(element, first, second, third) {
 	setElementValue(element, first, second, third, updateAttribute);
 }
@@ -610,34 +624,197 @@ function isBadAttribute(first, second) {
 function isBooleanAttribute(first) {
 	return _isBooleanAttribute(first, true);
 }
-function isEmptyNonBooleanAttribute(first, second) {
-	return _isEmptyNonBooleanAttribute(first, second, true);
-}
 function isInvalidBooleanAttribute(first, second) {
 	return _isInvalidBooleanAttribute(first, second, true);
 }
 //#endregion
+//#region src/style.ts
+/**
+* Get a style from an element
+* @param element Element to get the style from
+* @param property Style name
+* @param computed Get the computed style? _(defaults to `false`)_
+* @returns Style value
+*/
+function getStyle(element, property, computed) {
+	if (isHTMLOrSVGElement(element) && typeof property === "string") return getStyleValue(element, property, computed === true);
+}
+/**
+* Get styles from an element
+* @param element Element to get the styles from
+* @param properties Styles to get
+* @param computed Get the computed styles? _(defaults to `false`)_
+* @returns Style values
+*/
+function getStyles(element, properties, computed) {
+	const styles = {};
+	if (!(isHTMLOrSVGElement(element) && Array.isArray(properties))) return styles;
+	const { length } = properties;
+	for (let index = 0; index < length; index += 1) {
+		const property = properties[index];
+		if (typeof property === "string") styles[property] = getStyleValue(element, property, computed === true);
+	}
+	return styles;
+}
+function getTextDirection(node) {
+	let target;
+	if (isHTMLOrSVGElement(node)) target = node;
+	else target = node instanceof Node ? node.ownerDocument?.documentElement ?? document.documentElement : document.documentElement;
+	let { direction } = target.style;
+	if (direction === "") direction = getStyleValue(target, PROPETY_DIRECTION, true);
+	return direction === DIRECTION_RTL ? DIRECTION_RTL : DIRECTION_LTR;
+}
+/**
+* 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);
+}
+/**
+* Set styles on an element
+* @param element Element to set the styles on
+* @param styles Styles to set
+*/
+function setStyles(element, styles) {
+	setElementValues(element, styles, null, null, updateStyleProperty);
+}
+/**
+* Toggle styles for an element
+* @param element Element to style
+* @param styles Styles to be set or removed
+* @returns Style toggler
+*/
+function toggleStyles(element, styles) {
+	function toggle(set) {
+		hasSet = set;
+		let next;
+		if (set) {
+			values = getStyles(element, keys);
+			next = styles;
+		} else {
+			next = { ...values };
+			values = {};
+			for (let index = 0; index < length; index += 1) values[keys[index]] = void 0;
+		}
+		setStyles(element, next);
+	}
+	const keys = Object.keys(styles);
+	const { length } = keys;
+	let hasSet = false;
+	let values = {};
+	return {
+		set() {
+			if (!hasSet) toggle(true);
+		},
+		remove() {
+			if (hasSet) toggle(false);
+		}
+	};
+}
+function updateStyleProperty(element, key, value) {
+	updateElementValue(element, key, value, function(property, style) {
+		this.style[property] = String(style);
+	}, function(property) {
+		this.style[property] = "";
+	}, false, false);
+}
+const DIRECTION_LTR = "ltr";
+const DIRECTION_RTL = "rtl";
+const PROPETY_DIRECTION = "direction";
+//#endregion
+//#region src/property/get.property.ts
+/**
+* Get the values of one or more properties on an element
+* @param target Target element
+* @param properties Properties to get
+* @returns Property values
+*/
+function getProperties(target, properties) {
+	const values = {};
+	if (!isHTMLOrSVGElement(target) || !Array.isArray(properties)) return values;
+	const { length } = properties;
+	for (let index = 0; index < length; index += 1) {
+		const property = properties[index];
+		if (typeof property === "string") values[property] = getPropertyValue(target, property);
+	}
+	return values;
+}
+/**
+* Get the value of a property on an element
+* @param target Target element
+* @param property Property to get
+* @returns Property value
+*/
+function getProperty(target, property) {
+	if (isHTMLOrSVGElement(target) && typeof property === "string") return getPropertyValue(target, property);
+}
+function getPropertyValue(element, property) {
+	let actual = property;
+	if (!(actual in element)) actual = camelCase(actual);
+	if (actual in element) return element[actual];
+}
+//#endregion
+//#region src/property/set.property.ts
+/**
+* Set the values of one or more properties on an element
+*
+* Also updates attributes for boolean/dispatchable properties, and if `dispatch` is `true`, will dispatch events for dispatchable properties
+* @param target Target element
+* @param properties Properties to set
+* @param dispatch Dispatch events for properties? _(defaults to `true`)_
+*/
+function setProperties(target, properties, dispatch) {
+	if (!isHTMLOrSVGElement(target) || !isPlainObject(properties)) return;
+	const shouldDispatch = dispatch !== false;
+	const keys = Object.keys(properties);
+	const { length } = keys;
+	for (let index = 0; index < length; index += 1) {
+		const key = keys[index];
+		if (booleanAttributesSet.has(key.toLowerCase()) || dispatchedAttributes.has(key)) setAttribute(target, key, properties[key], shouldDispatch);
+		else updateProperty(target, key, properties[key], shouldDispatch);
+	}
+}
+function setProperty(target, property, value, dispatch) {
+	if (!isHTMLOrSVGElement(target) || typeof property !== "string") return;
+	if (booleanAttributesSet.has(property.toLowerCase()) || dispatchedAttributes.has(property)) setAttribute(target, property, value, dispatch !== false);
+	else updateProperty(target, property, value, dispatch !== false);
+}
+//#endregion
+//#region src/create.ts
+function createElement(tag, properties, attributes, styles) {
+	if (typeof tag !== "string") throw new TypeError(MESSAGE);
+	const element = document.createElement(tag);
+	if (properties != null) setProperties(element, properties);
+	if (attributes != null) setAttributes(element, attributes);
+	if (styles != null) setStyles(element, styles);
+	return element;
+}
+const MESSAGE = "Tag name must be a string";
+//#endregion
 //#region src/data.ts
 function getData(element, keys, parseValues) {
 	if (!isHTMLOrSVGElement(element)) return;
-	const shouldParse = parseValues !== false;
+	const noParse = parseValues === false;
 	if (typeof keys === "string") {
-		const value = element.dataset[keys];
+		const value = element.dataset[camelCase(keys)];
 		if (value === void 0) return;
-		return shouldParse ? parse(value) : value;
+		return noParse ? value : parse(value);
 	}
 	const { length } = keys;
 	const data = {};
 	for (let index = 0; index < length; index += 1) {
 		const key = keys[index];
-		const value = element.dataset[key];
+		const value = element.dataset[camelCase(key)];
 		if (value == null) data[key] = void 0;
-		else data[key] = shouldParse ? parse(value) : value;
+		else data[key] = noParse ? value : parse(value);
 	}
 	return data;
 }
 function getName(original) {
-	return `${ATTRIBUTE_DATA_PREFIX}${kebabCase(original).replace(EXPRESSION_DATA_PREFIX, "")}`;
+	return `${ATTRIBUTE_DATA_PREFIX}${kebabCase(original.replace(EXPRESSION_DATA_PREFIX, ""))}`;
 }
 function setData(element, first, second) {
 	setElementValues(element, first, second, null, updateDataAttribute);
@@ -671,7 +848,14 @@ function delegatedEventHandler(event) {
 	const key = `${EVENT_PREFIX}${event.type}${this ? EVENT_SUFFIX_PASSIVE : EVENT_SUFFIX_ACTIVE}`;
 	const items = event.composedPath();
 	const { length } = items;
+	let cancelled = false;
 	let target = items[0];
+	const originalStopPropagation = event.stopPropagation;
+	event.stopPropagation = function() {
+		cancelled = true;
+		originalStopPropagation.call(event);
+	};
+	event.stopImmediatePropagation = event.stopPropagation.bind(event);
 	Object.defineProperties(event, {
 		currentTarget: {
 			configurable: true,
@@ -691,7 +875,7 @@ function delegatedEventHandler(event) {
 		target = item;
 		for (const listener of listeners) {
 			listener.call(item, event);
-			if (event.cancelBubble) return;
+			if (cancelled) return;
 		}
 	}
 }
@@ -1125,8 +1309,9 @@ const TYPE_RADIO = "radio";
 //#region src/html/sanitize.ts
 function handleElement(element, depth) {
 	if (depth === 0) {
-		const removable = element.querySelectorAll(REMOVE_SELECTOR);
-		for (const item of removable) item.remove();
+		const removable = [...element.querySelectorAll(REMOVE_SELECTOR)];
+		const { length } = removable;
+		for (let index = 0; index < length; index += 1) removable[index].remove();
 	}
 	sanitizeAttributes(element, [...element.attributes]);
 }
@@ -1145,7 +1330,7 @@ function sanitizeAttributes(element, attributes) {
 	const { length } = attributes;
 	for (let index = 0; index < length; index += 1) {
 		const { name, value } = attributes[index];
-		if (_isBadAttribute(name, value, false) || _isEmptyNonBooleanAttribute(name, value, false)) element.removeAttribute(name);
+		if (_isBadAttribute(name, value, false)) element.removeAttribute(name);
 		else if (_isInvalidBooleanAttribute(name, value, false)) setAttribute(element, name, true);
 	}
 }
@@ -1191,16 +1376,22 @@ function createHtml(value) {
 function createTemplate(value, options) {
 	const template = document.createElement(TEMPLATE_TAG);
 	template.innerHTML = createHtml(value);
-	if (typeof value === "string" && options.cache) templates[value] = template;
+	if (typeof value === "string" && options.cache) templates.set(value, template);
 	return template;
 }
+function getComment(index) {
+	return COMMENT_TEMPLATE.replace(COMMENT_INDEX, String(index));
+}
 function getHtml(value) {
 	return `${TEMPORARY_ELEMENT}${typeof value === "string" ? value : value.innerHTML}${TEMPORARY_ELEMENT}`;
 }
-function getNodes(value, options) {
+function getNodes(value, options, nodes) {
 	if (typeof value !== "string" && !(value instanceof HTMLTemplateElement)) return [];
 	const template = getTemplate(value, options);
-	return template == null ? [] : [...template.content.cloneNode(true).childNodes];
+	if (template == null) return [];
+	const cloned = [...template.content.cloneNode(true).childNodes];
+	if (nodes != null) replaceComments(cloned, nodes);
+	return cloned;
 }
 function getOptions(input) {
 	const options = isPlainObject(input) ? input : {};
@@ -1211,31 +1402,86 @@ function getParser() {
 	parser ??= new DOMParser();
 	return parser;
 }
+function getTagged(strings, values) {
+	const tagged = {
+		nodes: [],
+		template: ""
+	};
+	const stringsLength = strings.length;
+	let nodeIndex = 0;
+	for (let stringIndex = 0; stringIndex < stringsLength; stringIndex += 1) {
+		const value = values[stringIndex];
+		tagged.template += strings[stringIndex];
+		if (value instanceof Node) {
+			tagged.nodes.push(value);
+			tagged.template += getComment(nodeIndex);
+			nodeIndex += 1;
+		} else if (hasNodes(value)) {
+			const items = [...value];
+			const itemsLength = items.length;
+			for (let itemIndex = 0; itemIndex < itemsLength; itemIndex += 1) {
+				const item = items[itemIndex];
+				if (item instanceof Node) {
+					tagged.nodes.push(item);
+					tagged.template += getComment(nodeIndex);
+					nodeIndex += 1;
+				} else tagged.template += getString(item);
+			}
+		} else if (Array.isArray(value)) {
+			const valueLength = value.length;
+			for (let valueIndex = 0; valueIndex < valueLength; valueIndex += 1) tagged.template += getString(value[valueIndex]);
+		} else tagged.template += getString(value);
+	}
+	return tagged;
+}
 function getTemplate(value, options) {
 	if (value instanceof HTMLTemplateElement) return createTemplate(value, options);
 	if (value.trim().length === 0) return;
-	let template = templates[value];
+	let template = templates.get(value);
 	if (template != null) return template;
 	const element = EXPRESSION_ID.test(value) ? document.querySelector(`#${value}`) : null;
 	return createTemplate(element instanceof HTMLTemplateElement ? element : value, options);
 }
-const html = ((value, options) => {
-	return getNodes(value, getOptions(options));
-});
+function hasNodes(value) {
+	if (value instanceof HTMLCollection || value instanceof NodeList) return true;
+	return Array.isArray(value) && value.some((item) => item instanceof Node);
+}
+function html(first, ...second) {
+	if (isTagged(first)) {
+		const tagged = getTagged(first, second);
+		return getNodes(tagged.template, getOptions(), tagged.nodes);
+	}
+	return getNodes(first, getOptions(second[0]));
+}
+/**
+* Clear cache of template elements
+*/
 html.clear = () => {
-	templates = {};
+	templates.clear();
 };
+/**
+* Remove cached template element for an HTML string or id
+* @param template HTML string or id for a template element
+*/
 html.remove = (template) => {
-	if (typeof template !== "string" || templates[template] == null) return;
-	const keys = Object.keys(templates);
-	const { length } = keys;
-	const updated = {};
-	for (let index = 0; index < length; index += 1) {
-		const key = keys[index];
-		if (key !== template) updated[key] = templates[key];
-	}
-	templates = updated;
+	templates.delete(template);
 };
+function isTagged(value) {
+	return Array.isArray(value) && Array.isArray(value.raw);
+}
+function replaceComments(origin, replacements) {
+	const nodes = [...origin];
+	const { length } = nodes;
+	for (let nodeIndex = 0; nodeIndex < length; nodeIndex += 1) {
+		const node = nodes[nodeIndex];
+		if (node instanceof Comment) {
+			const [, index] = EXPRESSION_COMMENT.exec(node.textContent) ?? [];
+			if (index != null) node.replaceWith(replacements[Number(index)]);
+			continue;
+		}
+		if (node.hasChildNodes()) replaceComments(node.childNodes, replacements);
+	}
+}
 /**
 * Sanitize one or more nodes, recursively
 * @param value Node or nodes to sanitize
@@ -1245,112 +1491,15 @@ html.remove = (template) => {
 function sanitize(value) {
 	return sanitizeNodes(Array.isArray(value) ? value : [value], 0);
 }
+const COMMENT_INDEX = "<index>";
+const COMMENT_TEMPLATE = `<!--toretto.node:${COMMENT_INDEX}-->`;
+const EXPRESSION_COMMENT = /^toretto\.node:(\d+)$/;
 const EXPRESSION_ID = /^[a-z][\w-]*$/i;
 const PARSE_TYPE_HTML = "text/html";
 const TEMPLATE_TAG = "template";
 const TEMPORARY_ELEMENT = "<toretto-temporary></toretto-temporary>";
+const templates = new SizedMap(128);
 let parser;
-let templates = {};
-//#endregion
-//#region src/style.ts
-/**
-* Get a style from an element
-* @param element Element to get the style from
-* @param property Style name
-* @param computed Get the computed style? _(defaults to `false`)_
-* @returns Style value
-*/
-function getStyle(element, property, computed) {
-	if (!isHTMLOrSVGElement(element) || typeof property !== "string") return;
-	return getStyleValue(element, property, computed === true);
-}
-/**
-* Get styles from an element
-* @param element Element to get the styles from
-* @param properties Styles to get
-* @param computed Get the computed styles? _(defaults to `false`)_
-* @returns Style values
-*/
-function getStyles(element, properties, computed) {
-	const styles = {};
-	if (!(isHTMLOrSVGElement(element) && Array.isArray(properties))) return styles;
-	const { length } = properties;
-	for (let index = 0; index < length; index += 1) {
-		const property = properties[index];
-		if (typeof property === "string") styles[property] = getStyleValue(element, property, computed === true);
-	}
-	return styles;
-}
-/**
-* Get the text direction of an element
-* @param element Element to get the text direction from
-* @param computed Get the computed text direction? _(defaults to `false`)_
-* @returns Text direction
-*/
-function getTextDirection(element, computed) {
-	if (!(element instanceof Element)) return;
-	const direction = element.getAttribute(ATTRIBUTE_DIRECTION);
-	if (direction != null && EXPRESSION_DIRECTION.test(direction)) return direction.toLowerCase();
-	const value = getStyleValue(element, "direction", computed === true);
-	return value === "rtl" ? value : "ltr";
-}
-/**
-* 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);
-}
-/**
-* Set styles on an element
-* @param element Element to set the styles on
-* @param styles Styles to set
-*/
-function setStyles(element, styles) {
-	setElementValues(element, styles, null, null, updateStyleProperty);
-}
-/**
-* Toggle styles for an element
-* @param element Element to style
-* @param styles Styles to be set or removed
-* @returns Style toggler
-*/
-function toggleStyles(element, styles) {
-	function toggle(set) {
-		hasSet = set;
-		let next;
-		if (set) {
-			values = getStyles(element, keys);
-			next = styles;
-		} else {
-			next = { ...values };
-			values = {};
-			for (const key of keys) values[key] = void 0;
-		}
-		setStyles(element, next);
-	}
-	const keys = Object.keys(styles);
-	let hasSet = false;
-	let values = {};
-	return {
-		set() {
-			if (!hasSet) toggle(true);
-		},
-		remove() {
-			if (hasSet) toggle(false);
-		}
-	};
-}
-function updateStyleProperty(element, key, value) {
-	updateElementValue(element, key, value, function(property, style) {
-		this.style[property] = style;
-	}, function(property) {
-		this.style[property] = "";
-	}, false, false);
-}
-const ATTRIBUTE_DIRECTION = "dir";
-const EXPRESSION_DIRECTION = /^(ltr|rtl)$/i;
+window.templates = templates;
 //#endregion
-export { findElement as $, findElement, findElements as $$, findElements, booleanAttributes, dispatch, findAncestor, findRelatives, getAttribute, getAttributes, getData, getDistance, getElementUnderPointer, getFocusable, getPosition, getStyle, getStyles, getTabbable, getTextDirection, html, isBadAttribute, isBooleanAttribute, isChildNode, isEmptyNonBooleanAttribute, isEventTarget, isFocusable, isHTMLOrSVGElement, isInDocument, isInvalidBooleanAttribute, isTabbable, off, on, sanitize, setAttribute, setAttributes, setData, setStyle, setStyles, supportsTouch, toggleStyles };
+export { findElement as $, findElement, findElements as $$, findElements, booleanAttributes, createElement, dispatch, findAncestor, findRelatives, getAttribute, getAttributes, getData, getDistance, getElementUnderPointer, getFocusable, getPosition, getProperties, getProperty, getStyle, getStyles, getTabbable, getTextDirection, html, isBadAttribute, isBooleanAttribute, isChildNode, isEventTarget, isFocusable, isHTMLOrSVGElement, isInDocument, isInvalidBooleanAttribute, isTabbable, off, on, sanitize, setAttribute, setAttributes, setData, setProperties, setProperty, setStyle, setStyles, supportsTouch, toggleStyles };