@oscarpalmer/toretto 0.41.0 → 0.43.0

package/dist/internal/attribute.d.mts

@@ -4,12 +4,13 @@ import { Attribute } from "../models.mjs";
 declare function isAttribute(value: unknown): value is Attr | Attribute;
 declare function _isBadAttribute(first: unknown, second: unknown, decode: boolean): boolean;
 declare function _isBooleanAttribute(first: unknown, decode: boolean): boolean;
-declare function _isEmptyNonBooleanAttribute(first: unknown, second: unknown, decode: boolean): boolean;
 declare function _isInvalidBooleanAttribute(first: unknown, second: unknown, decode: boolean): boolean;
-declare function updateAttribute(element: Element, name: string, value: unknown, dispatch?: unknown): void;
+declare function updateAttribute(element: Element, name: string, value: unknown, dispatch: boolean): void;
 /**
  * List of boolean attributes
  */
 declare const booleanAttributes: readonly string[];
+declare const booleanAttributesSet: Set<string>;
+declare const dispatchedAttributes: Set<string>;
 //#endregion
-export { _isBadAttribute, _isBooleanAttribute, _isEmptyNonBooleanAttribute, _isInvalidBooleanAttribute, booleanAttributes, isAttribute, updateAttribute };
+export { _isBadAttribute, _isBooleanAttribute, _isInvalidBooleanAttribute, booleanAttributes, booleanAttributesSet, dispatchedAttributes, isAttribute, updateAttribute };

package/dist/internal/attribute.mjs

@@ -1,5 +1,7 @@
 import { updateElementValue } from "./element-value.mjs";
+import { updateProperty } from "./property.mjs";
 import { isPlainObject } from "@oscarpalmer/atoms/is";
+import { kebabCase } from "@oscarpalmer/atoms/string/case";
 //#region src/internal/attribute.ts
 function badAttributeHandler(name, value) {
 	if (typeof name !== "string" || name.trim().length === 0 || typeof value !== "string") return true;
@@ -29,6 +31,7 @@ function handleAttribute(callback, decode, first, second) {
 		name = first;
 		value = second;
 	}
+	if (name != null) name = kebabCase(name);
 	if (decode && value != null) value = decodeAttribute(value);
 	return callback(name, value?.replace(EXPRESSION_WHITESPACE, ""));
 }
@@ -41,9 +44,6 @@ function _isBadAttribute(first, second, decode) {
 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);
 }
@@ -51,18 +51,12 @@ 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);
+	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);
 }
-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;
@@ -101,16 +95,12 @@ const booleanAttributes = Object.freeze([
 	"selected"
 ]);
 const booleanAttributesSet = new Set(booleanAttributes);
-const elementEvents = {
-	DETAILS: { open: "toggle" },
-	INPUT: {
-		checked: "change",
-		value: "input"
-	},
-	SELECT: { value: "change" },
-	TEXTAREA: { value: "input" }
-};
+const dispatchedAttributes = new Set([
+	"checked",
+	"open",
+	"value"
+]);
 const formElement = document.createElement("form");
 let textArea;
 //#endregion
-export { _isBadAttribute, _isBooleanAttribute, _isEmptyNonBooleanAttribute, _isInvalidBooleanAttribute, booleanAttributes, isAttribute, updateAttribute };
+export { _isBadAttribute, _isBooleanAttribute, _isInvalidBooleanAttribute, booleanAttributes, booleanAttributesSet, dispatchedAttributes, isAttribute, updateAttribute };

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) => void): void;
-declare function setElementValues(element: Element, first: unknown, second: unknown, third: unknown, callback: (element: Element, key: string, value: unknown, dispatch?: unknown) => 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

@@ -2,16 +2,21 @@ import { isHTMLOrSVGElement } from "./is.mjs";
 import "../is.mjs";
 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, first, second, third);
+		callback(element, normalizeKey(first, style), second, dispatch);
 		return;
 	}
 	const isArray = Array.isArray(first);
@@ -23,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, entry.name, entry.value, third);
+		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

@@ -1,5 +1,5 @@
-import { parse } from "@oscarpalmer/atoms/string";
 import { camelCase, kebabCase } from "@oscarpalmer/atoms/string/case";
+import { parse } from "@oscarpalmer/atoms/string";
 //#region src/internal/get-value.ts
 function getBoolean(value, defaultValue) {
 	return typeof value === "boolean" ? value : defaultValue ?? false;
@@ -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.d.mts

@@ -0,0 +1,4 @@
+//#region src/internal/property.d.ts
+declare function updateProperty(element: Element, name: string, value: unknown, dispatch: boolean): void;
+//#endregion
+export { updateProperty };

package/dist/internal/property.mjs

@@ -0,0 +1,24 @@
+import { camelCase } from "@oscarpalmer/atoms/string/case";
+//#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,
+		cancelable: true
+	}));
+}
+const elementEvents = {
+	DETAILS: { open: "toggle" },
+	INPUT: {
+		checked: "change",
+		value: "input"
+	},
+	SELECT: { value: "change" },
+	TEXTAREA: { value: "input" }
+};
+//#endregion
+export { updateProperty };

package/dist/property/get.property.d.mts

@@ -0,0 +1,20 @@
+import { Primitive } from "@oscarpalmer/atoms/models";
+
+//#region src/property/get.property.d.ts
+type GetProperties<Target extends Element> = { [Property in keyof Target as Target[Property] extends Primitive ? Property : never]?: Target[Property] };
+/**
+ * Get the values of one or more properties on an element
+ * @param target Target element
+ * @param properties Properties to get
+ * @returns Property values
+ */
+declare function getProperties<Target extends Element, Property extends keyof GetProperties<Target>>(target: Target, properties: Property[]): Pick<GetProperties<Target>, Property>;
+/**
+ * Get the value of a property on an element
+ * @param target Target element
+ * @param property Property to get
+ * @returns Property value
+ */
+declare function getProperty<Target extends Element, Property extends keyof GetProperties<Target>>(target: Target, property: Property): GetProperties<Target>[Property];
+//#endregion
+export { getProperties, getProperty };

package/dist/property/get.property.mjs

@@ -0,0 +1,35 @@
+import { isHTMLOrSVGElement } from "../internal/is.mjs";
+import { camelCase } from "@oscarpalmer/atoms/string/case";
+//#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
+export { getProperties, getProperty };

package/dist/property/index.d.mts

@@ -0,0 +1,3 @@
+import { getProperties, getProperty } from "./get.property.mjs";
+import { setProperties, setProperty } from "./set.property.mjs";
+export { getProperties, getProperty, setProperties, setProperty };

package/dist/property/index.mjs

@@ -0,0 +1,3 @@
+import { getProperties, getProperty } from "./get.property.mjs";
+import { setProperties, setProperty } from "./set.property.mjs";
+export { getProperties, getProperty, setProperties, setProperty };

package/dist/property/set.property.d.mts

@@ -0,0 +1,32 @@
+import { DispatchedAttributeName } from "../attribute/set.attribute.mjs";
+import { Primitive } from "@oscarpalmer/atoms/models";
+
+//#region src/property/set.property.d.ts
+type DispatchedPropertyValue<Target extends Element, Property extends DispatchedAttributeName> = Property extends keyof SetProperties<Target> ? SetProperties<Target>[Property] : never;
+type SetProperties<Target extends Element> = { [Property in keyof Target as Target[Property] extends Primitive ? Property : never]?: Target[Property] };
+/**
+ * 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`)_
+ */
+declare function setProperties<Target extends Element>(target: Target, properties: SetProperties<Target>, dispatch?: boolean): void;
+/**
+ * Set the value for a dispatchable property on an element
+ * @param target Target element
+ * @param property Property to set
+ * @param value Value to set
+ * @param dispatch Dispatch event for property? _(defaults to `true`)_
+ */
+declare function setProperty<Target extends Element, Property extends DispatchedAttributeName>(target: Target, property: Property, value: DispatchedPropertyValue<Target, Property>, dispatch?: boolean): void;
+/**
+ * Set the value for a property on an element
+ * @param target Target element
+ * @param property Property to set
+ * @param value Value to set
+ */
+declare function setProperty<Target extends Element, Property extends keyof SetProperties<Target>>(target: Target, property: Property, value: SetProperties<Target>[Property]): void;
+//#endregion
+export { setProperties, setProperty };

package/dist/property/set.property.mjs

@@ -0,0 +1,32 @@
+import { isHTMLOrSVGElement } from "../internal/is.mjs";
+import "../is.mjs";
+import { updateProperty } from "../internal/property.mjs";
+import { booleanAttributesSet, dispatchedAttributes } from "../internal/attribute.mjs";
+import { setAttribute } from "../attribute/set.attribute.mjs";
+import "../attribute/index.mjs";
+import { isPlainObject } from "@oscarpalmer/atoms/is";
+//#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) setPropertyValue(target, keys[index], properties[keys[index]], shouldDispatch);
+}
+function setProperty(target, property, value, dispatch) {
+	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,6 +12,8 @@ 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
@@ -18,7 +21,7 @@ type StyleToggler = {
  * @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
@@ -26,33 +29,37 @@ 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 an element
- * @param element Element to get the text direction from
- * @param computed Get the computed text direction? _(defaults to `false`)_
+ * 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
  * @returns Text direction
  */
-declare function getTextDirection(element: Element, computed?: boolean): TextDirection;
+declare function getTextDirection(node: Element | Node): TextDirection;
+/**
+ * Get the text direction of the document
+ * @returns Text direction
+ */
+declare function getTextDirection(): TextDirection;
 /**
  * Set a style on an element
  * @param element Element to set the style on
  * @param property Style name
  * @param value Style value
  */
-declare function setStyle(element: Element, property: keyof CSSStyleDeclaration, value?: string): 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
  * @param styles Styles to set
  */
-declare function setStyles(element: Element, styles: Partial<CSSStyleDeclaration>): void;
+declare function setStyles(element: Element, styles: Styles): void;
 /**
  * Toggle styles for an element
  * @param element Element to style
  * @param styles Styles to be set or removed
  * @returns Style toggler
  */
-declare function toggleStyles(element: Element, styles: Partial<CSSStyleDeclaration>): StyleToggler;
+declare function toggleStyles(element: Element, styles: Styles): StyleToggler;
 //#endregion
 export { StyleToggler, getStyle, getStyles, getTextDirection, setStyle, setStyles, toggleStyles };

package/dist/style.mjs

@@ -10,8 +10,7 @@ import { getStyleValue } from "./internal/get-value.mjs";
 * @returns Style value
 */
 function getStyle(element, property, computed) {
-	if (!isHTMLOrSVGElement(element) || typeof property !== "string") return;
-	return getStyleValue(element, property, computed === true);
+	if (isHTMLOrSVGElement(element) && typeof property === "string") return getStyleValue(element, property, computed === true);
 }
 /**
 * Get styles from an element
@@ -30,18 +29,13 @@ function getStyles(element, properties, computed) {
 	}
 	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";
+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, PROPERTY_DIRECTION, true);
+	return direction === DIRECTION_RTL ? DIRECTION_RTL : DIRECTION_LTR;
 }
 /**
 * Set a style on an element
@@ -50,7 +44,7 @@ function getTextDirection(element, computed) {
 * @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
@@ -58,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
@@ -76,11 +70,12 @@ function toggleStyles(element, styles) {
 		} else {
 			next = { ...values };
 			values = {};
-			for (const key of keys) values[key] = void 0;
+			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 {
@@ -94,12 +89,18 @@ function toggleStyles(element, styles) {
 }
 function updateStyleProperty(element, key, value) {
 	updateElementValue(element, key, value, function(property, style) {
-		this.style[property] = 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_DIRECTION = "dir";
-const EXPRESSION_DIRECTION = /^(ltr|rtl)$/i;
+const ATTRIBUTE_STYLE = "style";
+const DIRECTION_LTR = "ltr";
+const DIRECTION_RTL = "rtl";
+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.41.0",
+	"version": "0.43.0",
 	"description": "A collection of badass DOM utilities.",
 	"keywords": [
 		"dom",
@@ -34,6 +34,10 @@
 			"types": "./dist/attribute/index.d.mts",
 			"default": "./dist/attribute/index.mjs"
 		},
+		"./create": {
+			"types": "./dist/create.d.mts",
+			"default": "./dist/create.mjs"
+		},
 		"./data": {
 			"types": "./dist/data.d.mts",
 			"default": "./dist/data.mjs"
@@ -61,6 +65,10 @@
 		"./models": {
 			"types": "./dist/models.d.mts"
 		},
+		"./property": {
+			"types": "./dist/property/index.d.mts",
+			"default": "./dist/property/index.mjs"
+		},
 		"./style": {
 			"types": "./dist/style.d.mts",
 			"default": "./dist/style.mjs"
@@ -75,16 +83,16 @@
 		"tsdown:build": "npx tsdown -c ./tsdown.config.ts",
 		"tsdown:watch": "npx tsdown -c ./tsdown.config.ts --watch",
 		"test": "npx vp test run --coverage",
-		"test:leak": "npx vp test run --detect-async-leaks --coverage",
-		"watch": "npx vite build --watch"
+		"test:leak": "npx vp test run --detect-async-leaks --coverage"
 	},
 	"dependencies": {
-		"@oscarpalmer/atoms": "^0.165"
+		"@oscarpalmer/atoms": "^0.185"
 	},
 	"devDependencies": {
-		"@types/node": "^25.5",
+		"@oxlint/plugins": "^1.62",
+		"@types/node": "^25.6",
 		"@vitest/coverage-istanbul": "^4.1",
-		"jsdom": "^28.1",
+		"jsdom": "^29.1",
 		"tsdown": "^0.21",
 		"typescript": "^5.9",
 		"vite": "npm:@voidzero-dev/vite-plus-core@latest",

package/src/attribute/{get.ts → get.attribute.ts}

@@ -1,6 +1,15 @@
+import {kebabCase} from '@oscarpalmer/atoms/string/case';
 import {getAttributeValue} from '../internal/get-value';
 import {isHTMLOrSVGElement} from '../internal/is';
 
+// #region Types
+
+type DataPrefixedName = `data-${string}`;
+
+// #endregion
+
+// #region Functions
+
 /**
  * Get the value of a specific attribute from an element
  * @param element Element to get attribute from
@@ -8,7 +17,7 @@ import {isHTMLOrSVGElement} from '../internal/is';
  * @param parse Parse value? _(defaults to `true`)_
  * @returns Attribute value _(or `undefined`)_
  */
-export function getAttribute(element: Element, name: `data-${string}`, parse?: boolean): unknown;
+export function getAttribute(element: Element, name: DataPrefixedName, parse?: boolean): unknown;
 
 /**
  * Get the value of a specific attribute from an element
@@ -20,7 +29,7 @@ export function getAttribute(element: Element, name: string): unknown;
 
 export function getAttribute(element: Element, name: string, parseValues?: boolean): unknown {
 	if (isHTMLOrSVGElement(element) && typeof name === 'string') {
-		return getAttributeValue(element, name, parseValues !== false);
+		return getAttributeValue(element, kebabCase(name), parseValues !== false);
 	}
 }
 
@@ -50,9 +59,11 @@ export function getAttributes<Key extends string>(
 		const name = names[index];
 
 		if (typeof name === 'string') {
-			attributes[name] = getAttributeValue(element, name, shouldParse);
+			attributes[name] = getAttributeValue(element, kebabCase(name), shouldParse);
 		}
 	}
 
 	return attributes;
 }
+
+// #endregion

package/src/attribute/index.ts

@@ -1,11 +1,12 @@
 import {
 	_isBadAttribute,
 	_isBooleanAttribute,
-	_isEmptyNonBooleanAttribute,
 	_isInvalidBooleanAttribute,
 } from '../internal/attribute';
 import type {Attribute} from '../models';
 
+// #region Functions
+
 /**
  * Is the attribute considered bad and potentially harmful?
  * @param attribute Attribute to check
@@ -43,25 +44,6 @@ export function isBooleanAttribute(first: unknown): boolean {
 	return _isBooleanAttribute(first, true);
 }
 
-/**
- * Is the attribute empty and not a boolean attribute?
- * @param attribute Attribute to check
- * @returns `true` if attribute is empty and not a boolean attribute
- */
-export function isEmptyNonBooleanAttribute(attribute: Attr | Attribute): boolean;
-
-/**
- * Is the attribute empty and not a boolean attribute?
- * @param name Attribute name
- * @param value Attribute value
- * @returns `true` if attribute is empty and not a boolean attribute
- */
-export function isEmptyNonBooleanAttribute(name: string, value: string): boolean;
-
-export function isEmptyNonBooleanAttribute(first: unknown, second?: unknown): boolean {
-	return _isEmptyNonBooleanAttribute(first, second, true);
-}
-
 /**
  * Is the attribute an invalid boolean attribute?
  *
@@ -85,6 +67,12 @@ export function isInvalidBooleanAttribute(first: unknown, second?: unknown): boo
 	return _isInvalidBooleanAttribute(first, second, true);
 }
 
+// #endregion
+
+// #region Exports
+
 export {booleanAttributes} from '../internal/attribute';
-export * from './get';
-export * from './set';
+export * from './get.attribute';
+export {setAttribute, setAttributes} from './set.attribute';
+
+// #endregion