@oscarpalmer/toretto 0.42.0 → 0.43.0

package/dist/index.d.mts

@@ -530,6 +530,7 @@ declare function setProperty<Target extends Element, Property extends Dispatched
 declare function setProperty<Target extends Element, Property extends keyof SetProperties<Target>>(target: Target, property: Property, value: SetProperties<Target>[Property]): void;
 //#endregion
 //#region src/style.d.ts
+type CSSStyleValues = Variables & CSSStyleDeclaration;
 type StyleToggler = {
   /**
    * Set the provided styles on the element
@@ -540,7 +541,8 @@ type StyleToggler = {
    */
   remove(): void;
 };
-type Styles = Partial<Record<keyof CSSStyleDeclaration, unknown>>;
+type Styles = Partial<Record<keyof CSSStyleValues, unknown>>;
+type Variables<Value extends Record<string, string | undefined> = Record<string, string | undefined>> = { [property in keyof Value as `--${string & property}`]?: string | undefined };
 /**
  * Get a style from an element
  * @param element Element to get the style from
@@ -548,7 +550,7 @@ type Styles = Partial<Record<keyof CSSStyleDeclaration, unknown>>;
  * @param computed Get the computed style? _(defaults to `false`)_
  * @returns Style value
  */
-declare function getStyle(element: Element, property: keyof CSSStyleDeclaration, computed?: boolean): string | undefined;
+declare function getStyle(element: Element, property: keyof CSSStyleValues, computed?: boolean): string | undefined;
 /**
  * Get styles from an element
  * @param element Element to get the styles from
@@ -556,7 +558,7 @@ declare function getStyle(element: Element, property: keyof CSSStyleDeclaration,
  * @param computed Get the computed styles? _(defaults to `false`)_
  * @returns Style values
  */
-declare function getStyles<Property extends keyof CSSStyleDeclaration>(element: Element, properties: Property[], computed?: boolean): Record<Property, string | undefined>;
+declare function getStyles<Property extends keyof CSSStyleValues>(element: Element, properties: Property[], computed?: boolean): Record<Property, string | undefined>;
 /**
  * Get the text direction of a node or element _(or document, if element is invalid)_
  * @param node Node or element to get the text direction from
@@ -574,7 +576,7 @@ declare function getTextDirection(): TextDirection;
  * @param property Style name
  * @param value Style value
  */
-declare function setStyle(element: Element, property: keyof CSSStyleDeclaration, value?: unknown): void;
+declare function setStyle(element: Element, property: keyof CSSStyleValues, value?: unknown): void;
 /**
  * Set styles on an element
  * @param element Element to set the styles on

package/dist/index.mjs

@@ -51,19 +51,6 @@ function isPlainObject(value) {
 	return prototype === null || prototype === Object.prototype || Object.getPrototypeOf(prototype) === null;
 }
 //#endregion
-//#region 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/atoms/dist/internal/string.mjs
 /**
 * Get the string value from any value
@@ -79,13 +66,23 @@ function getString(value) {
 	return asString.startsWith("[object ") ? JSON.stringify(value) : asString;
 }
 /**
-* Join an array of values into a string
-* @param value Array of values
+* 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(value, delimiter) {
-	return compact(value).map(getString).join(typeof delimiter === "string" ? delimiter : "");
+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)_
@@ -99,9 +96,9 @@ const EXPRESSION_WORDS = /[^\x00-\x2f\x3a-\x40\x5b-\x60\x7b-\x7f]+/g;
 //#endregion
 //#region node_modules/@oscarpalmer/atoms/dist/is.mjs
 /**
-* Is the value `undefined`, `null`, or a whitespace-only string?
+* Is the value `undefined`, `null`, or stringified as a whitespace-only string?
 * @param value Value to check
-* @returns `true` if the value is nullable or a whitespace-only string, otherwise `false`
+* @returns `true` if the value is nullable or matches a whitespace-only string, otherwise `false`
 */
 function isNullableOrWhitespace(value) {
 	return value == null || EXPRESSION_WHITESPACE$1.test(getString(value));
@@ -192,6 +189,9 @@ var SizedMap = class extends Map {
 };
 //#endregion
 //#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;
 	/**
@@ -406,16 +406,19 @@ const CHILD_NODE_TYPES = new Set([
 ]);
 //#endregion
 //#region src/internal/element-value.ts
-function setElementValue(element, first, second, third, callback) {
+function normalizeKey(key, style) {
+	return style && key.startsWith(CSS_VARIABLE_PREFIX$1) ? 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);
@@ -427,13 +430,14 @@ 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));
 }
+const CSS_VARIABLE_PREFIX$1 = "--";
 //#endregion
 //#region src/internal/property.ts
 function updateProperty(element, name, value, dispatch) {
@@ -442,7 +446,10 @@ function updateProperty(element, name, value, dispatch) {
 	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 }));
+	if (typeof event === "string") element.dispatchEvent(new Event(event, {
+		bubbles: true,
+		cancelable: true
+	}));
 }
 const elementEvents = {
 	DETAILS: { open: "toggle" },
@@ -581,10 +588,12 @@ function getAttributeValue(element, name, parseValue) {
 	return EXPRESSION_DATA_PREFIX.test(normalized) && typeof value === "string" && parseValue ? parse(value) ?? value : value;
 }
 function getStyleValue(element, property, computed) {
+	if (property.startsWith(CSS_VARIABLE_PREFIX)) return element.style.getPropertyValue(property);
 	const name = camelCase(property);
 	return computed ? getComputedStyle(element)[name] : element.style[name];
 }
 const EXPRESSION_DATA_PREFIX = /^data-/i;
+const CSS_VARIABLE_PREFIX = "--";
 //#endregion
 //#region src/attribute/get.attribute.ts
 function getAttribute(element, name, parseValues) {
@@ -661,7 +670,7 @@ function getTextDirection(node) {
 	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);
+	if (direction === "") direction = getStyleValue(target, PROPERTY_DIRECTION, true);
 	return direction === DIRECTION_RTL ? DIRECTION_RTL : DIRECTION_LTR;
 }
 /**
@@ -671,7 +680,7 @@ function getTextDirection(node) {
 * @param value Style value
 */
 function setStyle(element, property, value) {
-	setElementValues(element, property, value, null, updateStyleProperty);
+	setElementValues(element, property, value, null, updateStyleProperty, true);
 }
 /**
 * Set styles on an element
@@ -679,7 +688,7 @@ function setStyle(element, property, value) {
 * @param styles Styles to set
 */
 function setStyles(element, styles) {
-	setElementValues(element, styles, null, null, updateStyleProperty);
+	setElementValues(element, styles, null, null, updateStyleProperty, true);
 }
 /**
 * Toggle styles for an element
@@ -716,14 +725,19 @@ function toggleStyles(element, styles) {
 }
 function updateStyleProperty(element, key, value) {
 	updateElementValue(element, key, value, function(property, style) {
-		this.style[property] = String(style);
+		if (property.startsWith(VARIABLE_PREFIX)) this.style.setProperty(property, String(style));
+		else this.style[property] = String(style);
 	}, function(property) {
-		this.style[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 DIRECTION_LTR = "ltr";
 const DIRECTION_RTL = "rtl";
-const PROPETY_DIRECTION = "direction";
+const PROPERTY_DIRECTION = "direction";
+const VARIABLE_PREFIX = "--";
 //#endregion
 //#region src/property/get.property.ts
 /**
@@ -771,16 +785,14 @@ function setProperties(target, properties, dispatch) {
 	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);
-	}
+	for (let index = 0; index < length; index += 1) setPropertyValue(target, keys[index], properties[keys[index]], 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);
+	if (isHTMLOrSVGElement(target) && typeof property === "string") setPropertyValue(target, property, value, dispatch !== false);
+}
+function setPropertyValue(element, property, value, dispatch) {
+	if (booleanAttributesSet.has(property.toLowerCase()) || dispatchedAttributes.has(property)) setAttribute(element, property, value, dispatch);
+	else updateProperty(element, property, value, dispatch);
 }
 //#endregion
 //#region src/create.ts

package/dist/internal/element-value.d.mts

@@ -1,6 +1,6 @@
 //#region src/internal/element-value.d.ts
-declare function setElementValue(element: Element, first: unknown, second: unknown, third: unknown, callback: (element: Element, key: string, value: unknown, dispatch: boolean) => void): void;
-declare function setElementValues(element: Element, first: unknown, second: unknown, third: unknown, callback: (element: Element, key: string, value: unknown, dispatch: boolean) => void): void;
+declare function setElementValue(element: Element, first: unknown, second: unknown, third: unknown, callback: (element: Element, key: string, value: unknown, dispatch: boolean) => void, style?: boolean): void;
+declare function setElementValues(element: Element, first: unknown, second: unknown, third: unknown, callback: (element: Element, key: string, value: unknown, dispatch: boolean) => void, style?: boolean): void;
 declare function updateElementValue(element: Element, key: string, value: unknown, set: (key: string, value: string) => void, remove: (key: string) => void, isBoolean: boolean, json: boolean): void;
 //#endregion
 export { setElementValue, setElementValues, updateElementValue };

package/dist/internal/element-value.mjs

@@ -4,16 +4,19 @@ import { isAttribute } from "./attribute.mjs";
 import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
 import { kebabCase } from "@oscarpalmer/atoms/string/case";
 //#region src/internal/element-value.ts
-function setElementValue(element, first, second, third, callback) {
+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);
@@ -25,12 +28,13 @@ 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));
 }
+const CSS_VARIABLE_PREFIX = "--";
 //#endregion
 export { setElementValue, setElementValues, updateElementValue };

package/dist/internal/get-value.mjs

@@ -11,9 +11,11 @@ function getAttributeValue(element, name, parseValue) {
 	return EXPRESSION_DATA_PREFIX.test(normalized) && typeof value === "string" && parseValue ? parse(value) ?? value : value;
 }
 function getStyleValue(element, property, computed) {
+	if (property.startsWith(CSS_VARIABLE_PREFIX)) return element.style.getPropertyValue(property);
 	const name = camelCase(property);
 	return computed ? getComputedStyle(element)[name] : element.style[name];
 }
 const EXPRESSION_DATA_PREFIX = /^data-/i;
+const CSS_VARIABLE_PREFIX = "--";
 //#endregion
 export { EXPRESSION_DATA_PREFIX, getAttributeValue, getBoolean, getStyleValue };

package/dist/internal/property.mjs

@@ -6,7 +6,10 @@ function updateProperty(element, name, value, dispatch) {
 	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 }));
+	if (typeof event === "string") element.dispatchEvent(new Event(event, {
+		bubbles: true,
+		cancelable: true
+	}));
 }
 const elementEvents = {
 	DETAILS: { open: "toggle" },

package/dist/property/set.property.mjs

@@ -19,16 +19,14 @@ function setProperties(target, properties, dispatch) {
 	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);
-	}
+	for (let index = 0; index < length; index += 1) setPropertyValue(target, keys[index], properties[keys[index]], 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);
+	if (isHTMLOrSVGElement(target) && typeof property === "string") setPropertyValue(target, property, value, dispatch !== false);
+}
+function setPropertyValue(element, property, value, dispatch) {
+	if (booleanAttributesSet.has(property.toLowerCase()) || dispatchedAttributes.has(property)) setAttribute(element, property, value, dispatch);
+	else updateProperty(element, property, value, dispatch);
 }
 //#endregion
 export { setProperties, setProperty };

package/dist/style.d.mts

@@ -1,6 +1,7 @@
 import { TextDirection } from "./models.mjs";
 
 //#region src/style.d.ts
+type CSSStyleValues = Variables & CSSStyleDeclaration;
 type StyleToggler = {
   /**
    * Set the provided styles on the element
@@ -11,7 +12,8 @@ type StyleToggler = {
    */
   remove(): void;
 };
-type Styles = Partial<Record<keyof CSSStyleDeclaration, unknown>>;
+type Styles = Partial<Record<keyof CSSStyleValues, unknown>>;
+type Variables<Value extends Record<string, string | undefined> = Record<string, string | undefined>> = { [property in keyof Value as `--${string & property}`]?: string | undefined };
 /**
  * Get a style from an element
  * @param element Element to get the style from
@@ -19,7 +21,7 @@ type Styles = Partial<Record<keyof CSSStyleDeclaration, unknown>>;
  * @param computed Get the computed style? _(defaults to `false`)_
  * @returns Style value
  */
-declare function getStyle(element: Element, property: keyof CSSStyleDeclaration, computed?: boolean): string | undefined;
+declare function getStyle(element: Element, property: keyof CSSStyleValues, computed?: boolean): string | undefined;
 /**
  * Get styles from an element
  * @param element Element to get the styles from
@@ -27,7 +29,7 @@ declare function getStyle(element: Element, property: keyof CSSStyleDeclaration,
  * @param computed Get the computed styles? _(defaults to `false`)_
  * @returns Style values
  */
-declare function getStyles<Property extends keyof CSSStyleDeclaration>(element: Element, properties: Property[], computed?: boolean): Record<Property, string | undefined>;
+declare function getStyles<Property extends keyof CSSStyleValues>(element: Element, properties: Property[], computed?: boolean): Record<Property, string | undefined>;
 /**
  * Get the text direction of a node or element _(or document, if element is invalid)_
  * @param node Node or element to get the text direction from
@@ -45,7 +47,7 @@ declare function getTextDirection(): TextDirection;
  * @param property Style name
  * @param value Style value
  */
-declare function setStyle(element: Element, property: keyof CSSStyleDeclaration, value?: unknown): void;
+declare function setStyle(element: Element, property: keyof CSSStyleValues, value?: unknown): void;
 /**
  * Set styles on an element
  * @param element Element to set the styles on

package/dist/style.mjs

@@ -34,7 +34,7 @@ function getTextDirection(node) {
 	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);
+	if (direction === "") direction = getStyleValue(target, PROPERTY_DIRECTION, true);
 	return direction === DIRECTION_RTL ? DIRECTION_RTL : DIRECTION_LTR;
 }
 /**
@@ -44,7 +44,7 @@ function getTextDirection(node) {
 * @param value Style value
 */
 function setStyle(element, property, value) {
-	setElementValues(element, property, value, null, updateStyleProperty);
+	setElementValues(element, property, value, null, updateStyleProperty, true);
 }
 /**
 * Set styles on an element
@@ -52,7 +52,7 @@ function setStyle(element, property, value) {
 * @param styles Styles to set
 */
 function setStyles(element, styles) {
-	setElementValues(element, styles, null, null, updateStyleProperty);
+	setElementValues(element, styles, null, null, updateStyleProperty, true);
 }
 /**
 * Toggle styles for an element
@@ -89,13 +89,18 @@ function toggleStyles(element, styles) {
 }
 function updateStyleProperty(element, key, value) {
 	updateElementValue(element, key, value, function(property, style) {
-		this.style[property] = String(style);
+		if (property.startsWith(VARIABLE_PREFIX)) this.style.setProperty(property, String(style));
+		else this.style[property] = String(style);
 	}, function(property) {
-		this.style[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 DIRECTION_LTR = "ltr";
 const DIRECTION_RTL = "rtl";
-const PROPETY_DIRECTION = "direction";
+const PROPERTY_DIRECTION = "direction";
+const VARIABLE_PREFIX = "--";
 //#endregion
 export { getStyle, getStyles, getTextDirection, setStyle, setStyles, toggleStyles };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oscarpalmer/toretto",
-	"version": "0.42.0",
+	"version": "0.43.0",
 	"description": "A collection of badass DOM utilities.",
 	"keywords": [
 		"dom",
@@ -86,12 +86,13 @@
 		"test:leak": "npx vp test run --detect-async-leaks --coverage"
 	},
 	"dependencies": {
-		"@oscarpalmer/atoms": "^0.172"
+		"@oscarpalmer/atoms": "^0.185"
 	},
 	"devDependencies": {
-		"@types/node": "^25.5",
+		"@oxlint/plugins": "^1.62",
+		"@types/node": "^25.6",
 		"@vitest/coverage-istanbul": "^4.1",
-		"jsdom": "^29",
+		"jsdom": "^29.1",
 		"tsdown": "^0.21",
 		"typescript": "^5.9",
 		"vite": "npm:@voidzero-dev/vite-plus-core@latest",

package/src/internal/element-value.ts

@@ -5,21 +5,26 @@ import {isAttribute} from './attribute';
 
 // #region Functions
 
+function normalizeKey(key: string, style?: boolean): string {
+	return style && key.startsWith(CSS_VARIABLE_PREFIX) ? key : kebabCase(key);
+}
+
 export function setElementValue(
 	element: Element,
 	first: unknown,
 	second: unknown,
 	third: unknown,
 	callback: (element: Element, key: string, value: unknown, dispatch: boolean) => void,
+	style?: boolean,
 ): void {
 	if (!isHTMLOrSVGElement(element)) {
 		return;
 	}
 
 	if (typeof first === 'string') {
-		setElementValues(element, first, second, third, callback);
+		setElementValues(element, first, second, third, callback, style);
 	} else if (isAttribute(first)) {
-		setElementValues(element, first.name, first.value, third, callback);
+		setElementValues(element, first.name, first.value, third, callback, style);
 	}
 }
 
@@ -29,6 +34,7 @@ export function setElementValues(
 	second: unknown,
 	third: unknown,
 	callback: (element: Element, key: string, value: unknown, dispatch: boolean) => void,
+	style?: boolean,
 ): void {
 	if (!isHTMLOrSVGElement(element)) {
 		return;
@@ -37,7 +43,7 @@ export function setElementValues(
 	const dispatch = third !== false;
 
 	if (typeof first === 'string') {
-		callback(element, kebabCase(first), second, dispatch);
+		callback(element, normalizeKey(first, style), second, dispatch);
 
 		return;
 	}
@@ -55,7 +61,7 @@ export function setElementValues(
 		const entry = entries[index];
 
 		if (typeof entry === 'object' && typeof entry?.name === 'string') {
-			callback(element, kebabCase(entry.name), entry.value, dispatch);
+			callback(element, normalizeKey(entry.name, style), entry.value, dispatch);
 		}
 	}
 }
@@ -77,3 +83,9 @@ export function updateElementValue(
 }
 
 // #endregion Functions
+
+// #region Variables
+
+const CSS_VARIABLE_PREFIX = '--';
+
+// #endregion

package/src/internal/get-value.ts

@@ -22,6 +22,10 @@ export function getStyleValue(
 	property: string,
 	computed: boolean,
 ): string | undefined {
+	if (property.startsWith(CSS_VARIABLE_PREFIX)) {
+		return (element as HTMLElement).style.getPropertyValue(property);
+	}
+
 	const name = camelCase(property);
 
 	return computed
@@ -35,4 +39,6 @@ export function getStyleValue(
 
 export const EXPRESSION_DATA_PREFIX = /^data-/i;
 
+const CSS_VARIABLE_PREFIX = '--';
+
 // #endregion

package/src/internal/property.ts

@@ -24,7 +24,7 @@ export function updateProperty(
 	const event = dispatch && elementEvents[element.tagName]?.[property];
 
 	if (typeof event === 'string') {
-		element.dispatchEvent(new Event(event, {bubbles: true}));
+		element.dispatchEvent(new Event(event, {bubbles: true, cancelable: true}));
 	}
 }
 

package/src/property/set.property.ts

@@ -46,13 +46,7 @@ export function setProperties<Target extends Element>(
 	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 as never, (properties as PlainObject)[key], shouldDispatch);
-		} else {
-			updateProperty(target, key, (properties as PlainObject)[key], shouldDispatch);
-		}
+		setPropertyValue(target, keys[index], (properties as PlainObject)[keys[index]], shouldDispatch);
 	}
 }
 
@@ -88,14 +82,21 @@ export function setProperty<Target extends Element, Property extends keyof SetPr
 	value: SetProperties<Target>[Property],
 	dispatch?: boolean,
 ): void {
-	if (!isHTMLOrSVGElement(target) || typeof property !== 'string') {
-		return;
+	if (isHTMLOrSVGElement(target) && typeof property === 'string') {
+		setPropertyValue(target, property, value, dispatch !== false);
 	}
+}
 
+function setPropertyValue(
+	element: Element,
+	property: string,
+	value: unknown,
+	dispatch: boolean,
+): void {
 	if (booleanAttributesSet.has(property.toLowerCase()) || dispatchedAttributes.has(property)) {
-		setAttribute(target, property as never, value, dispatch !== false);
+		setAttribute(element, property as never, value, dispatch);
 	} else {
-		updateProperty(target, property, value, dispatch !== false);
+		updateProperty(element, property, value, dispatch);
 	}
 }
 

package/src/style.ts

@@ -5,6 +5,8 @@ import type {TextDirection} from './models';
 
 // #region Types
 
+type CSSStyleValues = Variables & CSSStyleDeclaration;
+
 export type StyleToggler = {
 	/**
 	 * Set the provided styles on the element
@@ -16,7 +18,13 @@ export type StyleToggler = {
 	remove(): void;
 };
 
-type Styles = Partial<Record<keyof CSSStyleDeclaration, unknown>>;
+type Styles = Partial<Record<keyof CSSStyleValues, unknown>>;
+
+type Variables<
+	Value extends Record<string, string | undefined> = Record<string, string | undefined>,
+> = {
+	[property in keyof Value as `--${string & property}`]?: string | undefined;
+};
 
 // #endregion
 
@@ -31,7 +39,7 @@ type Styles = Partial<Record<keyof CSSStyleDeclaration, unknown>>;
  */
 export function getStyle(
 	element: Element,
-	property: keyof CSSStyleDeclaration,
+	property: keyof CSSStyleValues,
 	computed?: boolean,
 ): string | undefined {
 	if (isHTMLOrSVGElement(element) && typeof property === 'string') {
@@ -46,7 +54,7 @@ export function getStyle(
  * @param computed Get the computed styles? _(defaults to `false`)_
  * @returns Style values
  */
-export function getStyles<Property extends keyof CSSStyleDeclaration>(
+export function getStyles<Property extends keyof CSSStyleValues>(
 	element: Element,
 	properties: Property[],
 	computed?: boolean,
@@ -98,7 +106,7 @@ export function getTextDirection(node?: Element | Node): TextDirection {
 	let {direction} = target.style;
 
 	if (direction === '') {
-		direction = getStyleValue(target, PROPETY_DIRECTION, true)!;
+		direction = getStyleValue(target, PROPERTY_DIRECTION, true)!;
 	}
 
 	return direction === DIRECTION_RTL ? DIRECTION_RTL : DIRECTION_LTR;
@@ -110,12 +118,8 @@ export function getTextDirection(node?: Element | Node): TextDirection {
  * @param property Style name
  * @param value Style value
  */
-export function setStyle(
-	element: Element,
-	property: keyof CSSStyleDeclaration,
-	value?: unknown,
-): void {
-	setElementValues(element, property as string, value, null, updateStyleProperty);
+export function setStyle(element: Element, property: keyof CSSStyleValues, value?: unknown): void {
+	setElementValues(element, property as string, value, null, updateStyleProperty, true);
 }
 
 /**
@@ -124,7 +128,7 @@ export function setStyle(
  * @param styles Styles to set
  */
 export function setStyles(element: Element, styles: Styles): void {
-	setElementValues(element, styles as never, null, null, updateStyleProperty);
+	setElementValues(element, styles as never, null, null, updateStyleProperty, true);
 }
 
 /**
@@ -182,10 +186,22 @@ function updateStyleProperty(element: Element, key: string, value: unknown): voi
 		key,
 		value,
 		function (this: Element, property: string, style: unknown) {
-			(this as HTMLElement).style[property as never] = String(style);
+			if (property.startsWith(VARIABLE_PREFIX)) {
+				(this as HTMLElement).style.setProperty(property, String(style));
+			} else {
+				(this as HTMLElement).style[property as never] = String(style);
+			}
 		},
 		function (this: Element, property: string) {
-			(this as HTMLElement).style[property as never] = '';
+			if (property.startsWith(VARIABLE_PREFIX)) {
+				(this as HTMLElement).style.removeProperty(property);
+			} else {
+				(this as HTMLElement).style[property as never] = '';
+			}
+
+			if ((this as HTMLElement).getAttribute(ATTRIBUTE_STYLE) === '') {
+				(this as HTMLElement).removeAttribute(ATTRIBUTE_STYLE);
+			}
 		},
 		false,
 		false,
@@ -196,10 +212,14 @@ function updateStyleProperty(element: Element, key: string, value: unknown): voi
 
 // #region Variables
 
+const ATTRIBUTE_STYLE = 'style';
+
 const DIRECTION_LTR = 'ltr';
 
 const DIRECTION_RTL = 'rtl';
 
-const PROPETY_DIRECTION = 'direction';
+const PROPERTY_DIRECTION = 'direction';
+
+const VARIABLE_PREFIX = '--';
 
 // #endregion