@oscarpalmer/toretto 0.48.0 → 0.49.1

package/dist/index.mjs

@@ -528,7 +528,7 @@ function updateAttribute(element, name, value, dispatch) {
 	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);
+	updateElementValue(element, name, isBoolean ? next ? "" : null : value, element.setAttribute, element.removeAttribute, false);
 }
 const EXPRESSION_CLOBBERED_NAME = /^(id|name)$/i;
 const EXPRESSION_DATA_OR_SCRIPT = /^(?:data|\w+script):/i;
@@ -577,6 +577,10 @@ const formElement = document.createElement("form");
 let textArea;
 //#endregion
 //#region src/internal/element-value.ts
+function getValueForAttribute(value, json) {
+	if (typeof value === "string") return value;
+	return json ? JSON.stringify(value) : getString(value);
+}
 function ignoreSetAttribute(element, name) {
 	if (element instanceof HTMLTextAreaElement && name === "value") return true;
 	return false;
@@ -608,9 +612,9 @@ function setElementValues(element, first, second, third, callback, style) {
 		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) {
+function updateElementValue(element, key, value, set, remove, json) {
 	if (value == null) remove.call(element, key);
-	else if (!ignoreSetAttribute(element, key)) set.call(element, key, json ? JSON.stringify(value) : getString(value));
+	else if (!ignoreSetAttribute(element, key)) set.call(element, key, getValueForAttribute(value, json));
 }
 const CSS_VARIABLE_PREFIX$1 = "--";
 //#endregion
@@ -627,7 +631,10 @@ function getAria(element, value) {
 	return arias;
 }
 function getAriaValue(element, attribute) {
-	return element.getAttribute(getName$1(attribute)) ?? void 0;
+	const name = getName$1(attribute);
+	const value = element.getAttribute(name) ?? void 0;
+	if (ariaBooleanAttributesSet.has(name) && typeof value === "string" && EXPRESSION_BOOLEAN.test(value)) return value.toLowerCase() === "true";
+	return value;
 }
 function getName$1(value) {
 	return EXPRESSION_ARIA_PREFIX.test(value) ? value : `${ATTRIBUTE_ARIA_PREFIX}${value}`;
@@ -656,10 +663,39 @@ function setRole(element, role) {
 	else element.removeAttribute("role");
 }
 function updateAriaAttribute(element, key, value) {
-	updateElementValue(element, getName$1(key), value, element.setAttribute, element.removeAttribute, false, false);
+	const name = getName$1(key);
+	let actual = value;
+	if (ariaBooleanAttributesSet.has(name) && typeof value === "string" && EXPRESSION_BOOLEAN.test(value)) actual = value.toLowerCase() === "true";
+	updateElementValue(element, name, actual, element.setAttribute, element.removeAttribute, false);
 }
 const ATTRIBUTE_ARIA_PREFIX = "aria-";
 const EXPRESSION_ARIA_PREFIX = /^aria-/i;
+const EXPRESSION_BOOLEAN = /^(true|false)$/i;
+/**
+* List of _ARIA_ attributes that can be treated as boolean values
+*/
+const ariaBooleanAttributes = Object.freeze([
+	"aria-atomic",
+	"aria-busy",
+	"aria-checked",
+	"aria-current",
+	"aria-disabled",
+	"aria-expanded",
+	"aria-haspopup",
+	"aria-hidden",
+	"aria-invalid",
+	"aria-modal",
+	"aria-multiline",
+	"aria-multiselectable",
+	"aria-pressed",
+	"aria-readonly",
+	"aria-required",
+	"aria-selected"
+]);
+/**
+* Set of _ARIA_ attributes that can be treated as boolean values
+*/
+const ariaBooleanAttributesSet = new Set(ariaBooleanAttributes);
 //#endregion
 //#region src/internal/get-value.ts
 function getBoolean(value, defaultValue) {
@@ -722,6 +758,36 @@ function isInvalidBooleanAttribute(first, second) {
 	return _isInvalidBooleanAttribute(first, second, true);
 }
 //#endregion
+//#region src/data.ts
+function getData(element, keys, parseValues) {
+	if (!(element instanceof Element)) return;
+	const noParse = parseValues === false;
+	if (typeof keys === "string") return getDataValue(element, keys, noParse);
+	const { length } = keys;
+	const data = {};
+	for (let index = 0; index < length; index += 1) {
+		const key = keys[index];
+		data[key] = getDataValue(element, key, noParse);
+	}
+	return data;
+}
+function getDataValue(element, key, noParse) {
+	const value = element.dataset[camelCase(key)];
+	if (value == null) return;
+	if (noParse) return value;
+	return parse(value) ?? value;
+}
+function getName(original) {
+	return `${ATTRIBUTE_DATA_PREFIX}${kebabCase(original.replace(EXPRESSION_DATA_PREFIX, ""))}`;
+}
+function setData(element, first, second) {
+	setElementValues(element, first, second, null, updateDataAttribute);
+}
+function updateDataAttribute(element, key, value) {
+	updateElementValue(element, getName(key), value, element.setAttribute, element.removeAttribute, true);
+}
+const ATTRIBUTE_DATA_PREFIX = "data-";
+//#endregion
 //#region src/property/get.property.ts
 /**
 * Get the values of one or more properties on an element
@@ -786,28 +852,28 @@ function setPropertyValue(element, property, value, dispatch) {
 * Get a style from an element
 *
 * @param element Element to get the style from
-* @param property Style name
+* @param name Style name
 * @param computed Get the computed style? _(defaults to `false`)_
 * @returns Style value
 */
-function getStyle(element, property, computed) {
-	if (element instanceof Element && typeof property === "string") return getStyleValue(element, property, computed === true);
+function getStyle(element, name, computed) {
+	if (element instanceof Element && typeof name === "string") return getStyleValue(element, name, computed === true);
 }
 /**
 * Get styles from an element
 *
 * @param element Element to get the styles from
-* @param properties Styles to get
+* @param names Styles to get
 * @param computed Get the computed styles? _(defaults to `false`)_
 * @returns Style values
 */
-function getStyles(element, properties, computed) {
+function getStyles(element, names, computed) {
 	const styles = {};
-	if (!(element instanceof Element && Array.isArray(properties))) return styles;
-	const { length } = properties;
+	if (!(element instanceof Element && Array.isArray(names))) return styles;
+	const { length } = names;
 	for (let index = 0; index < length; index += 1) {
-		const property = properties[index];
-		if (typeof property === "string") styles[property] = getStyleValue(element, property, computed === true);
+		const name = names[index];
+		if (typeof name === "string") styles[name] = getStyleValue(element, name, computed === true);
 	}
 	return styles;
 }
@@ -823,11 +889,11 @@ function getTextDirection(node) {
 * Set a style on an element
 *
 * @param element Element to set the style on
-* @param property Style name
+* @param name Style name
 * @param value Style value
 */
-function setStyle(element, property, value) {
-	setElementValues(element, property, value, null, updateStyleProperty, true);
+function setStyle(element, name, value) {
+	setElementValues(element, name, value, null, updateStyleProperty, true);
 }
 /**
 * Set styles on an element
@@ -873,14 +939,14 @@ function toggleStyles(element, styles) {
 	};
 }
 function updateStyleProperty(element, key, value) {
-	updateElementValue(element, key, value, function(property, style) {
-		if (property.startsWith(VARIABLE_PREFIX)) this.style.setProperty(property, getString(style));
-		else this.style[property] = getString(style);
-	}, function(property) {
-		if (property.startsWith(VARIABLE_PREFIX)) this.style.removeProperty(property);
-		else this.style[property] = "";
+	updateElementValue(element, key, value, function(name, style) {
+		if (name.startsWith(VARIABLE_PREFIX)) this.style.setProperty(name, getString(style));
+		else this.style[name] = getString(style);
+	}, function(name) {
+		if (name.startsWith(VARIABLE_PREFIX)) this.style.removeProperty(name);
+		else this.style[name] = "";
 		if (this.getAttribute(ATTRIBUTE_STYLE) === "") this.removeAttribute(ATTRIBUTE_STYLE);
-	}, false, false);
+	}, false);
 }
 const ATTRIBUTE_STYLE = "style";
 const DIRECTION_LTR = "ltr";
@@ -889,45 +955,28 @@ const PROPERTY_DIRECTION = "direction";
 const VARIABLE_PREFIX = "--";
 //#endregion
 //#region src/create.ts
-function createElement(tag, properties, attributes, styles) {
+function createElement(tag, values) {
 	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);
+	const { aria, attribute, data, property, style } = getElementValues(values);
+	setAria(element, aria ?? {});
+	setAttributes(element, attribute ?? {});
+	setData(element, data ?? {});
+	setProperties(element, property ?? {});
+	setStyles(element, style ?? {});
 	return element;
 }
-const MESSAGE = "Tag name must be a string";
-//#endregion
-//#region src/data.ts
-function getData(element, keys, parseValues) {
-	if (!(element instanceof Element)) return;
-	const noParse = parseValues === false;
-	if (typeof keys === "string") {
-		const value = element.dataset[camelCase(keys)];
-		if (value === void 0) return;
-		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[camelCase(key)];
-		if (value == null) data[key] = void 0;
-		else data[key] = noParse ? value : parse(value);
-	}
-	return data;
-}
-function getName(original) {
-	return `${ATTRIBUTE_DATA_PREFIX}${kebabCase(original.replace(EXPRESSION_DATA_PREFIX, ""))}`;
-}
-function setData(element, first, second) {
-	setElementValues(element, first, second, null, updateDataAttribute);
-}
-function updateDataAttribute(element, key, value) {
-	updateElementValue(element, getName(key), value, element.setAttribute, element.removeAttribute, false, true);
+function getElementValues(input) {
+	if (!isPlainObject(input)) return {};
+	return {
+		aria: isPlainObject(input.aria) ? input.aria : void 0,
+		attribute: isPlainObject(input.attribute) ? input.attribute : void 0,
+		data: isPlainObject(input.data) ? input.data : void 0,
+		property: isPlainObject(input.property) ? input.property : void 0,
+		style: isPlainObject(input.style) ? input.style : void 0
+	};
 }
-const ATTRIBUTE_DATA_PREFIX = "data-";
+const MESSAGE = "Tag name must be a string";
 //#endregion
 //#region node_modules/@oscarpalmer/atoms/dist/internal/function/misc.mjs
 /**
@@ -1673,4 +1722,4 @@ const CHILD_NODE_TYPES = /* @__PURE__ */ new Set([
 	Node.DOCUMENT_TYPE_NODE
 ]);
 //#endregion
-export { findElement as $, findElement, findElements as $$, findElements, booleanAttributes, createElement, dispatch, findAncestor, findRelatives, getAria, getAttribute, getAttributes, getData, getDistance, getElementFromPosition, getElementUnderPointer, getFocusable, getPosition, getProperties, getProperty, getRole, getStyle, getStyles, getTabbable, getTextDirection, html, isBadAttribute, isBooleanAttribute, isChildNode, isEventPosition, isEventTarget, isFocusable, isHTMLOrSVGElement, isInDocument, isInputElement, isInvalidBooleanAttribute, isTabbable, off, on, sanitize, setAria, setAttribute, setAttributes, setData, setProperties, setProperty, setRole, setStyle, setStyles, supportsTouch, toggleStyles };
+export { findElement as $, findElement, findElements as $$, findElements, ariaBooleanAttributes, ariaBooleanAttributesSet, booleanAttributes, createElement, dispatch, findAncestor, findRelatives, getAria, getAttribute, getAttributes, getData, getDistance, getElementFromPosition, getElementUnderPointer, getFocusable, getPosition, getProperties, getProperty, getRole, getStyle, getStyles, getTabbable, getTextDirection, html, isBadAttribute, isBooleanAttribute, isChildNode, isEventPosition, isEventTarget, isFocusable, isHTMLOrSVGElement, isInDocument, isInputElement, isInvalidBooleanAttribute, isTabbable, off, on, sanitize, setAria, setAttribute, setAttributes, setData, setProperties, setProperty, setRole, setStyle, setStyles, supportsTouch, toggleStyles };

package/dist/internal/attribute.mjs

@@ -56,7 +56,7 @@ function updateAttribute(element, name, value, dispatch) {
 	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);
+	updateElementValue(element, name, isBoolean ? next ? "" : null : value, element.setAttribute, element.removeAttribute, false);
 }
 const EXPRESSION_CLOBBERED_NAME = /^(id|name)$/i;
 const EXPRESSION_DATA_OR_SCRIPT = /^(?:data|\w+script):/i;

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, 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;
+declare function updateElementValue(element: Element, key: string, value: unknown, set: (key: string, value: string) => void, remove: (key: string) => void, json: boolean): void;
 //#endregion
 export { setElementValue, setElementValues, updateElementValue };

package/dist/internal/element-value.mjs

@@ -2,6 +2,10 @@ import { isAttribute } from "./attribute.mjs";
 import { getString } from "@oscarpalmer/atoms/string";
 import { kebabCase } from "@oscarpalmer/atoms/string/case";
 //#region src/internal/element-value.ts
+function getValueForAttribute(value, json) {
+	if (typeof value === "string") return value;
+	return json ? JSON.stringify(value) : getString(value);
+}
 function ignoreSetAttribute(element, name) {
 	if (element instanceof HTMLTextAreaElement && name === "value") return true;
 	return false;
@@ -33,9 +37,9 @@ function setElementValues(element, first, second, third, callback, style) {
 		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) {
+function updateElementValue(element, key, value, set, remove, json) {
 	if (value == null) remove.call(element, key);
-	else if (!ignoreSetAttribute(element, key)) set.call(element, key, json ? JSON.stringify(value) : getString(value));
+	else if (!ignoreSetAttribute(element, key)) set.call(element, key, getValueForAttribute(value, json));
 }
 const CSS_VARIABLE_PREFIX = "--";
 //#endregion

package/dist/models.d.mts

@@ -1,4 +1,12 @@
 //#region src/models.d.ts
+/**
+ * Any _ARIA_ attribute for an element _(both prefixed and unprefixed)_
+ */
+type AnyAriaAttribute = AriaAttribute | AriaAttributeUnprefixed;
+/**
+ * Any _ARIA_ attribute for an element that can be set to a boolean value _(both prefixed and unprefixed)_
+ */
+type AnyAriaBooleanAttribute = AriaBooleanAttribute | AriaBooleanAttributeUnprefixed;
 /**
  * _ARIA_ attribute for an element
  *
@@ -10,8 +18,16 @@ type AriaAttribute = keyof AriaAttributes;
  *
  * _(https://www.w3.org/TR/wai-aria-1.3/#aria-attributes)_
  */
-type AriaAttributeUnprefixed = keyof { [Key in AriaAttribute as Key extends `aria-${infer Name}` ? Name : never]: string | null; };
-type AriaAttributes = { [Key in keyof ARIAMixin as NormalizedName<Key>]: string | null; };
+type AriaAttributeUnprefixed = keyof { [Key in AriaAttribute as Key extends `aria-${infer Name}` ? Name : never]: unknown; };
+type AriaAttributes = { [Key in keyof ARIAMixin as NormalizedName<Key>]: unknown; };
+/**
+ * _ARIA_ attribute for an element that can be set to a boolean value
+ */
+type AriaBooleanAttribute = 'aria-atomic' | 'aria-busy' | 'aria-checked' | 'aria-current' | 'aria-disabled' | 'aria-expanded' | 'aria-haspopup' | 'aria-hidden' | 'aria-invalid' | 'aria-modal' | 'aria-multiline' | 'aria-multiselectable' | 'aria-pressed' | 'aria-readonly' | 'aria-required' | 'aria-selected';
+/**
+ * _ARIA_ attribute for an element that can be set to a boolean value, without the `aria-` prefix
+ */
+type AriaBooleanAttributeUnprefixed = keyof { [Key in AriaBooleanAttribute as Key extends `aria-${infer Name}` ? Name : never]: string | null; };
 type NormalizedName<Key extends string> = Key extends `aria${infer Name}` ? Name extends `${infer Part}Element` ? `aria-${Lowercase<Part>}` : Name extends `${infer Part}Elements` ? `aria-${Lowercase<Part>}` : `aria-${Lowercase<Name>}` : never;
 /**
  * _ARIA_ role for an element
@@ -26,6 +42,18 @@ type Attribute = {
   name: string;
   value: unknown;
 };
+/**
+ * CSS styles for an element
+ */
+type CSSStyles = Record<keyof CSSStyleDeclaration, unknown>;
+/**
+ * CSSS values for an element _(both styles and variables)_
+ */
+type CSSValues = CSSVariables & CSSStyles;
+/**
+ * CSS variables for an element
+ */
+type CSSVariables<Value extends Record<string, unknown> = Record<string, unknown>> = { [Property in keyof Value as `--${string & Property}`]?: unknown; };
 /**
  * Event listener for custom events
  */
@@ -43,4 +71,4 @@ type Selector = string | Node | Node[] | NodeList;
  */
 type TextDirection = 'ltr' | 'rtl';
 //#endregion
-export { AriaAttribute, AriaAttributeUnprefixed, AriaRole, Attribute, CustomEventListener, RemovableEventListener, Selector, TextDirection };
+export { AnyAriaAttribute, AnyAriaBooleanAttribute, AriaAttribute, AriaAttributeUnprefixed, AriaBooleanAttribute, AriaBooleanAttributeUnprefixed, AriaRole, Attribute, CSSStyles, CSSValues, CSSVariables, CustomEventListener, RemovableEventListener, Selector, TextDirection };

package/dist/style.d.mts

@@ -1,6 +1,5 @@
-import { TextDirection } from "./models.mjs";
+import { CSSValues, TextDirection } from "./models.mjs";
 //#region src/style.d.ts
-type CSSStyleValues = Variables & CSSStyleDeclaration;
 type StyleToggler = {
   /**
    * Set the provided styles on the element
@@ -11,26 +10,24 @@ type StyleToggler = {
    */
   remove(): void;
 };
-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
- * @param property Style name
+ * @param name Style name
  * @param computed Get the computed style? _(defaults to `false`)_
  * @returns Style value
  */
-declare function getStyle(element: Element, property: keyof CSSStyleValues, computed?: boolean): string | undefined;
+declare function getStyle(element: Element, name: keyof CSSValues, computed?: boolean): string | undefined;
 /**
  * Get styles from an element
  *
  * @param element Element to get the styles from
- * @param properties Styles to get
+ * @param names Styles to get
  * @param computed Get the computed styles? _(defaults to `false`)_
  * @returns Style values
  */
-declare function getStyles<Property extends keyof CSSStyleValues>(element: Element, properties: Property[], computed?: boolean): Record<Property, string | undefined>;
+declare function getStyles<Name extends keyof CSSValues>(element: Element, names: Name[], computed?: boolean): Record<Name, string | undefined>;
 /**
  * Get the text direction of a node or element _(or document, if element is invalid)_
  *
@@ -48,17 +45,17 @@ declare function getTextDirection(): TextDirection;
  * Set a style on an element
  *
  * @param element Element to set the style on
- * @param property Style name
+ * @param name Style name
  * @param value Style value
  */
-declare function setStyle(element: Element, property: keyof CSSStyleValues, value?: unknown): void;
+declare function setStyle(element: Element, name: keyof CSSValues, value?: unknown): void;
 /**
  * Set styles on an element
  *
  * @param element Element to set the styles on
  * @param styles Styles to set
  */
-declare function setStyles(element: Element, styles: Styles): void;
+declare function setStyles(element: Element, styles: Partial<CSSValues>): void;
 /**
  * Toggle styles for an element
  *
@@ -66,6 +63,6 @@ declare function setStyles(element: Element, styles: Styles): void;
  * @param styles Styles to be set or removed
  * @returns Style toggler
  */
-declare function toggleStyles(element: Element, styles: Styles): StyleToggler;
+declare function toggleStyles(element: Element, styles: Partial<CSSValues>): StyleToggler;
 //#endregion
 export { StyleToggler, getStyle, getStyles, getTextDirection, setStyle, setStyles, toggleStyles };

package/dist/style.mjs

@@ -6,28 +6,28 @@ import { getString } from "@oscarpalmer/atoms/string";
 * Get a style from an element
 *
 * @param element Element to get the style from
-* @param property Style name
+* @param name Style name
 * @param computed Get the computed style? _(defaults to `false`)_
 * @returns Style value
 */
-function getStyle(element, property, computed) {
-	if (element instanceof Element && typeof property === "string") return getStyleValue(element, property, computed === true);
+function getStyle(element, name, computed) {
+	if (element instanceof Element && typeof name === "string") return getStyleValue(element, name, computed === true);
 }
 /**
 * Get styles from an element
 *
 * @param element Element to get the styles from
-* @param properties Styles to get
+* @param names Styles to get
 * @param computed Get the computed styles? _(defaults to `false`)_
 * @returns Style values
 */
-function getStyles(element, properties, computed) {
+function getStyles(element, names, computed) {
 	const styles = {};
-	if (!(element instanceof Element && Array.isArray(properties))) return styles;
-	const { length } = properties;
+	if (!(element instanceof Element && Array.isArray(names))) return styles;
+	const { length } = names;
 	for (let index = 0; index < length; index += 1) {
-		const property = properties[index];
-		if (typeof property === "string") styles[property] = getStyleValue(element, property, computed === true);
+		const name = names[index];
+		if (typeof name === "string") styles[name] = getStyleValue(element, name, computed === true);
 	}
 	return styles;
 }
@@ -43,11 +43,11 @@ function getTextDirection(node) {
 * Set a style on an element
 *
 * @param element Element to set the style on
-* @param property Style name
+* @param name Style name
 * @param value Style value
 */
-function setStyle(element, property, value) {
-	setElementValues(element, property, value, null, updateStyleProperty, true);
+function setStyle(element, name, value) {
+	setElementValues(element, name, value, null, updateStyleProperty, true);
 }
 /**
 * Set styles on an element
@@ -93,14 +93,14 @@ function toggleStyles(element, styles) {
 	};
 }
 function updateStyleProperty(element, key, value) {
-	updateElementValue(element, key, value, function(property, style) {
-		if (property.startsWith(VARIABLE_PREFIX)) this.style.setProperty(property, getString(style));
-		else this.style[property] = getString(style);
-	}, function(property) {
-		if (property.startsWith(VARIABLE_PREFIX)) this.style.removeProperty(property);
-		else this.style[property] = "";
+	updateElementValue(element, key, value, function(name, style) {
+		if (name.startsWith(VARIABLE_PREFIX)) this.style.setProperty(name, getString(style));
+		else this.style[name] = getString(style);
+	}, function(name) {
+		if (name.startsWith(VARIABLE_PREFIX)) this.style.removeProperty(name);
+		else this.style[name] = "";
 		if (this.getAttribute(ATTRIBUTE_STYLE) === "") this.removeAttribute(ATTRIBUTE_STYLE);
-	}, false, false);
+	}, false);
 }
 const ATTRIBUTE_STYLE = "style";
 const DIRECTION_LTR = "ltr";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oscarpalmer/toretto",
-	"version": "0.48.0",
+	"version": "0.49.1",
 	"description": "A collection of badass DOM utilities.",
 	"keywords": [
 		"dom",
@@ -93,10 +93,10 @@
 		"@oscarpalmer/atoms": "^0.188.1"
 	},
 	"devDependencies": {
-		"@oxlint/plugins": "^1.74",
+		"@oxlint/plugins": "^1.76",
 		"@types/node": "^26.1",
 		"@vitest/coverage-istanbul": "^4.1",
-		"jsdom": "^29.1",
+		"jsdom": "^30",
 		"tsdown": "^0.22",
 		"typescript": "^6",
 		"vite": "npm:@voidzero-dev/vite-plus-core@latest",