@oscarpalmer/toretto 0.44.0 → 0.46.0

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

@@ -8,6 +8,7 @@ type SetProperties<Target extends Element> = { [Property in keyof Target as Targ
  * 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`)_
@@ -15,6 +16,7 @@ type SetProperties<Target extends Element> = { [Property in keyof Target as Targ
 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
@@ -23,6 +25,7 @@ declare function setProperties<Target extends Element>(target: Target, propertie
 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

package/dist/property/set.property.mjs

@@ -10,6 +10,7 @@ import { isPlainObject } from "@oscarpalmer/atoms/is";
 * 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`)_

package/dist/style.d.mts

@@ -16,6 +16,7 @@ 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 computed Get the computed style? _(defaults to `false`)_
@@ -24,6 +25,7 @@ type Variables<Value extends Record<string, string | undefined> = Record<string,
 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
  * @param properties Styles to get
  * @param computed Get the computed styles? _(defaults to `false`)_
@@ -32,17 +34,20 @@ declare function getStyle(element: Element, property: keyof CSSStyleValues, comp
 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
  * @returns Text direction
  */
 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
@@ -50,12 +55,14 @@ declare function getTextDirection(): TextDirection;
 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: Styles): void;
 /**
  * Toggle styles for an element
+ *
  * @param element Element to style
  * @param styles Styles to be set or removed
  * @returns Style toggler

package/dist/style.mjs

@@ -5,6 +5,7 @@ import { getString } from "@oscarpalmer/atoms/string";
 //#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`)_
@@ -15,6 +16,7 @@ function getStyle(element, property, computed) {
 }
 /**
 * 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`)_
@@ -40,6 +42,7 @@ function getTextDirection(node) {
 }
 /**
 * Set a style on an element
+*
 * @param element Element to set the style on
 * @param property Style name
 * @param value Style value
@@ -49,6 +52,7 @@ function setStyle(element, property, value) {
 }
 /**
 * Set styles on an element
+*
 * @param element Element to set the styles on
 * @param styles Styles to set
 */
@@ -57,6 +61,7 @@ function setStyles(element, styles) {
 }
 /**
 * Toggle styles for an element
+*
 * @param element Element to style
 * @param styles Styles to be set or removed
 * @returns Style toggler

package/dist/touch.d.mts

@@ -6,10 +6,14 @@ type SupporsTouch = {
   readonly value: boolean;
   /**
    * Are touch events supported?
+   *
+   * @returns `true` if touch events are supported, otherwise `false`
    */
   get(): boolean;
   /**
    * Re-evaluate if touch events are supported
+   *
+   * @returns `true` if touch events are supported, otherwise `false`
    */
   update(): boolean;
 };

package/package.json

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

package/src/attribute/get.attribute.ts

@@ -21,6 +21,7 @@ export function getAttribute(element: Element, name: DataPrefixedName, parse?: b
 
 /**
  * Get the value of a specific attribute from an element
+ *
  * @param element Element to get attribute from
  * @param name Attribute name
  * @returns Attribute value _(or `undefined`)_
@@ -35,6 +36,7 @@ export function getAttribute(element: Element, name: string, parseValues?: boole
 
 /**
  * Get specific attributes from an element
+ *
  * @param element Element to get attributes from
  * @param names Attribute names
  * @param parseData Parse data values? _(defaults to `true`)_

package/src/attribute/index.ts

@@ -9,6 +9,7 @@ import type {Attribute} from '../models';
 
 /**
  * Is the attribute considered bad and potentially harmful?
+ *
  * @param attribute Attribute to check
  * @returns `true` if attribute is considered bad
  */
@@ -16,6 +17,7 @@ export function isBadAttribute(attribute: Attr | Attribute): boolean;
 
 /**
  * Is the attribute considered bad and potentially harmful?
+ *
  * @param name Attribute name
  * @param value Attribute value
  * @returns `true` if attribute is considered bad
@@ -28,6 +30,7 @@ export function isBadAttribute(first: unknown, second?: unknown): boolean {
 
 /**
  * Is the attribute a boolean attribute?
+ *
  * @param name Attribute to check
  * @returns `true` if attribute is a boolean attribute
  */
@@ -35,6 +38,7 @@ export function isBooleanAttribute(attribute: Attr | Attribute): boolean;
 
 /**
  * Is the attribute a boolean attribute?
+ *
  * @param name Attribute name
  * @returns `true` if attribute is a boolean attribute
  */
@@ -48,6 +52,7 @@ export function isBooleanAttribute(first: unknown): boolean {
  * Is the attribute an invalid boolean attribute?
  *
  * _(I.e., its value is not empty or the same as its name)_
+ *
  * @param attribute Attribute to check
  * @returns `true` if attribute is an invalid boolean attribute
  */
@@ -57,6 +62,7 @@ export function isInvalidBooleanAttribute(attribute: Attr | Attribute): boolean;
  * Is the attribute an invalid boolean attribute?
  *
  * _(I.e., its value is not empty or the same as its name)_
+ *
  * @param name Attribute name
  * @param value Attribute value
  * @returns `true` if attribute is an invalid boolean attribute

package/src/attribute/set.attribute.ts

@@ -14,6 +14,7 @@ export type DispatchedAttributeName = 'checked' | 'open' | 'value';
  * Set an attribute on an element
  *
  * _(Or remove it, if value is `null` or `undefined`)_
+ *
  * @param element Element for attribute
  * @param name Attribute name
  * @param value Attribute value
@@ -30,6 +31,7 @@ export function setAttribute(
  * Set an attribute on an element
  *
  * _(Or remove it, if value is `null` or `undefined`)_
+ *
  * @param element Element for attribute
  * @param name Attribute name
  * @param value Attribute value
@@ -40,6 +42,7 @@ export function setAttribute(element: Element, name: string, value?: unknown): v
  * Set an attribute on an element
  *
  * _(Or remove it, if value is `null` or `undefined`)_
+ *
  * @param element Element for attribute
  * @param attribute Attribute to set
  * @param dispatch Dispatch event for attribute? _(defaults to `true`)_
@@ -63,6 +66,7 @@ export function setAttribute(
  * Set one or more attributes on an element
  *
  * _(Or remove them, if their value is `null` or `undefined`)_
+ *
  * @param element Element for attributes
  * @param attributes Attributes to set
  * @param dispatch Dispatch events for relevant attributes? _(defaults to `true`)_
@@ -77,6 +81,7 @@ export function setAttributes(
  * Set one or more attributes on an element
  *
  * _(Or remove them, if their value is `null` or `undefined`)_
+ *
  * @param element Element for attributes
  * @param attributes Attributes to set
  * @param dispatch Dispatch events for relevant attributes? _(defaults to `true`)_

package/src/create.ts

@@ -17,6 +17,7 @@ type Styles = Partial<Record<keyof CSSStyleDeclaration, unknown>>;
 
 /**
  * Creates an HTML element with the specified tag name together with optional properties, attributes, and styles
+ *
  * @param tag Tag name
  * @param properties Element properties
  * @param attributes Element attributes
@@ -32,6 +33,7 @@ export function createElement<TagName extends keyof HTMLElementTagNameMap>(
 
 /**
  * Creates an HTML element with the specified tag name together with optional properties, attributes, and styles
+ *
  * @param tag Tag name
  * @param properties Element properties
  * @param attributes Element attributes

package/src/data.ts

@@ -9,6 +9,7 @@ import {isHTMLOrSVGElement} from './internal/is';
 
 /**
  * Get a keyed data value from an element
+ *
  * @param element Element to get data from
  * @param key Data key
  * @param parse Parse values? _(defaults to `true`)_
@@ -18,6 +19,7 @@ export function getData(element: Element, key: string, parse?: boolean): unknown
 
 /**
  * Get keyed data values from an element
+ *
  * @param element Element to get data from
  * @param keys Keys of the data values to get
  * @param parse Parse values? _(defaults to `true`)_
@@ -70,6 +72,7 @@ function getName(original: string): string {
 
 /**
  * Set data values on an element
+ *
  * @param element Element to set data on
  * @param data Data to set
  */
@@ -77,6 +80,7 @@ export function setData(element: Element, data: PlainObject): void;
 
 /**
  * Set a data value on an element
+ *
  * @param element Element to set data on
  * @param key Data key
  * @param value Data value

package/src/event/index.ts

@@ -1,8 +1,9 @@
 import {noop} from '@oscarpalmer/atoms/function';
 import {isPlainObject} from '@oscarpalmer/atoms/is';
+import type {EventPosition} from '@oscarpalmer/atoms/models';
 import {getBoolean} from '../internal/get-value';
 import {isEventTarget} from '../internal/is';
-import type {CustomEventListener, EventPosition, RemovableEventListener} from '../models';
+import type {CustomEventListener, RemovableEventListener} from '../models';
 import {
 	addDelegatedListener,
 	type EventTargetWithListeners,
@@ -55,6 +56,7 @@ function createEventOptions(options?: AddEventListenerOptions): EventOptions {
 
 /**
  * Dispatch an event for a target
+ *
  * @param target Event target
  * @param type Type of event
  * @param options Options for event _(bubbles and is cancelable by default)_
@@ -67,6 +69,7 @@ export function dispatch<Type extends keyof HTMLElementEventMap>(
 
 /**
  * Dispatch an event for a target
+ *
  * @param target Event target
  * @param type Type of event
  * @param options Options for event _(bubbles and is cancelable by default)_
@@ -85,6 +88,7 @@ export function dispatch<Type extends keyof HTMLElementEventMap>(
 
 /**
  * Get the X- and Y-coordinates from a pointer event
+ *
  * @param event Pointer event
  * @returns X- and Y-coordinates
  */
@@ -105,6 +109,7 @@ export function getPosition(event: MouseEvent | TouchEvent): EventPosition | und
 
 /**
  * Remove an event listener
+ *
  * @param target Event target
  * @param type Type of event
  * @param listener Event listener
@@ -119,6 +124,7 @@ export function off(
 
 /**
  * Remove an event listener
+ *
  * @param target Event target
  * @param type Type of event
  * @param listener Event listener
@@ -133,6 +139,7 @@ export function off(
 
 /**
  * Remove an event listener
+ *
  * @param target Event target
  * @param type Type of event
  * @param listener Event listener
@@ -161,6 +168,7 @@ export function off(
 
 /**
  * Add an event listener
+ *
  * @param target Event target
  * @param type Type of event
  * @param listener Event listener
@@ -175,6 +183,7 @@ export function on<Type extends keyof HTMLElementEventMap>(
 
 /**
  * Add an event listener
+ *
  * @param target Event target
  * @param type Type of event
  * @param listener Event listener

package/src/find/index.ts

@@ -1,10 +1,12 @@
-import type {PlainObject} from '@oscarpalmer/atoms/models';
+import type {EventPosition, PlainObject} from '@oscarpalmer/atoms/models';
+import {isEventPosition} from '../internal/is';
 import type {Selector} from '../models';
 
 // #region Functions
 
 /**
  * Find the first element that matches the tag name
+ *
  * @param tagName Tag name of element to find
  * @param context Context to search within _(defaults to `document`)_
  * @returns Found element or `null`
@@ -16,6 +18,7 @@ export function findElement<TagName extends keyof HTMLElementTagNameMap>(
 
 /**
  * Find the first element that matches the selector
+ *
  * @param selector Selector to find element for
  * @param context Context to search within _(defaults to `document`)_
  * @returns Found element or `null`
@@ -120,6 +123,7 @@ function findElementOrElementsFromNodes(
 
 /**
  * Find elements that match the selector
+ *
  * @param tagName tagName to find elements for
  * @param context Context to search within _(defaults to `document`)_
  * @returns Found elements
@@ -131,6 +135,7 @@ export function findElements(
 
 /**
  * Find elements that match the selector
+ *
  * @param selector Selector to find elements for
  * @param context Context to search within _(defaults to `document`)_
  * @returns Found elements
@@ -141,11 +146,65 @@ export function findElements(selector: Selector, context?: Selector | null): Ele
 	return findElementOrElements(selector, context, false) as never;
 }
 
+/**
+ * Get elements from an event position
+ *
+ * @param position Event position
+ * @returns Elements at the event position
+ */
+export function getElementFromPosition(position: EventPosition): Element[] {
+	if (!isEventPosition(position) || typeof document.elementFromPoint !== 'function') {
+		return [];
+	}
+
+	const {x, y} = position;
+
+	const elements: Element[] = [];
+	const events: {value: string; priority: string}[] = [];
+
+	let current: Element | null;
+
+	while (true) {
+		current = document.elementFromPoint(x, y);
+
+		if (current == null || elements.indexOf(current) !== -1) {
+			break;
+		}
+
+		if (!(current instanceof HTMLElement)) {
+			continue;
+		}
+
+		elements.push(current);
+
+		events.push({
+			value: current.style.getPropertyValue(STYLE_POINTER_EVENTS),
+			priority: current.style.getPropertyPriority(STYLE_POINTER_EVENTS),
+		});
+
+		current.style.setProperty(STYLE_POINTER_EVENTS, STYLE_NONE, STYLE_IMPORTANT);
+	}
+
+	const {length} = elements;
+
+	for (let index = 0; index < length; index += 1) {
+		const element = elements[index];
+		const event = events[index];
+
+		if (element instanceof HTMLElement) {
+			element.style.setProperty(STYLE_POINTER_EVENTS, event.value ?? '', event.priority);
+		}
+	}
+
+	return elements;
+}
+
 /**
  * Get the most specific element under the pointer
  *
  * - Ignores elements with `pointer-events: none` and `visibility: hidden`
  * - _(If `skipIgnore` is `true`, no elements are ignored)_
+ *
  * @param skipIgnore Skip ignored elements?
  * @returns Found element or `null`
  */
@@ -192,8 +251,12 @@ const QUERY_SELECTOR_SINGLE = 'querySelector';
 
 const STYLE_HIDDEN = 'hidden';
 
+const STYLE_IMPORTANT = 'important';
+
 const STYLE_NONE = 'none';
 
+const STYLE_POINTER_EVENTS = 'pointer-events';
+
 const SUFFIX_HOVER = ':hover';
 
 const TAG_HEAD = 'HEAD';

package/src/find/relative.ts

@@ -5,6 +5,7 @@
  *
  * - If no match is found, `null` is returned
  * - _(If you want to search upwards, downwards, and sideways, use {@link findRelatives})_
+ *
  * @param origin Origin to start from
  * @param tagName Tag name to match
  * @returns Found ancestor or `null`
@@ -19,6 +20,7 @@ export function findAncestor<TagName extends keyof HTMLElementTagNameMap>(
  *
  * - If no match is found, `null` is returned
  * - _(If you want to search upwards, downwards, and sideways, use {@link findRelatives})_
+ *
  * @param origin Origin to start from
  * @param selector Selector to match
  * @returns Found ancestor or `null`
@@ -71,6 +73,7 @@ export function findAncestor(
  * Finds the closest elements to the origin element that matches the tag name
  *
  * Traverses up, down, and sideways in the _DOM_-tree. _(If you only want to traverse up, use {@link findAncestor})_
+ *
  * @param origin Element to start from
  * @param tagName Tag name to match
  * @param context Context to search within
@@ -86,6 +89,7 @@ export function findRelatives<TagName extends keyof HTMLElementTagNameMap>(
  * Finds the closest elements to the origin element that matches the selector
  *
  * Traverses up, down, and sideways in the _DOM_-tree. _(If you only want to traverse up, use {@link findAncestor})_
+ *
  * @param origin Element to start from
  * @param selector Selector to match
  * @param context Context to search within
@@ -144,6 +148,7 @@ export function findRelatives(
 
 /**
  * Get the distance between two elements _(i.e., the amount of nodes of between them)_
+ *
  * @param origin Origin element
  * @param target Target element
  * @returns Distance between elements, or `-1` if distance cannot be calculated

package/src/focusable.ts

@@ -17,6 +17,7 @@ type InertElement = Element & {inert: boolean};
 
 /**
  * Get a list of focusable elements within a parent element
+ *
  * @param parent Parent element
  * @returns Focusable elements
  */
@@ -33,6 +34,7 @@ function getItem(element: Element, tabbable: boolean): ElementWithTabIndex {
 
 /**
  * Get a list of tabbable elements within a parent element
+ *
  * @param parent Parent element
  * @returns Tabbable elements
  */
@@ -137,6 +139,7 @@ function isEditable(element: Element): boolean {
 
 /**
  * Is the element focusable?
+ *
  * @param element Element to check
  * @returns `true` if focusable, otherwise `false`
  */
@@ -221,6 +224,7 @@ function isSummarised(item: ElementWithTabIndex): boolean {
 
 /**
  * Is the element tabbable?
+ *
  * @param element Element to check
  * @returns `true` if tabbable, otherwise `false`
  */

package/src/html/index.ts

@@ -175,12 +175,14 @@ function hasNodes(value: unknown): value is HTMLCollection | NodeList | Node[] {
 
 /**
  * Create nodes from a template string
+ *
  * @returns Created nodes
  */
 export function html(strings: TemplateStringsArray, ...values: unknown[]): Node[];
 
 /**
  * Create nodes from an HTML string or a template element
+ *
  * @param value HTML string or id for a template element
  * @param options Options for creating nodes
  * @returns Created nodes
@@ -189,6 +191,7 @@ export function html(value: string, options?: HtmlOptions): Node[];
 
 /**
  * Create nodes from a template element
+ *
  * @param template Template element
  * @param options Options for creating nodes
  * @returns Created nodes
@@ -214,6 +217,7 @@ html.clear = (): void => {
 
 /**
  * Remove cached template element for an HTML string or id
+ *
  * @param template HTML string or id for a template element
  */
 html.remove = (template: string): void => {

package/src/internal/is.ts

@@ -1,7 +1,25 @@
+import type {EventPosition} from '@oscarpalmer/atoms/models';
+
 // #region Functions
 
+/**
+ * Is the value an event position?
+ *
+ * @param value Value to check
+ * @returns `true` if it's an event position, otherwise `false`
+ */
+export function isEventPosition(value: unknown): value is EventPosition {
+	return (
+		typeof value === 'object' &&
+		value != null &&
+		typeof (value as EventPosition).x === 'number' &&
+		typeof (value as EventPosition).y === 'number'
+	);
+}
+
 /**
  * Is the value an event target?
+ *
  * @param value Value to check
  * @returns `true` if it's an event target, otherwise `false`
  */
@@ -17,6 +35,7 @@ export function isEventTarget(value: unknown): value is EventTarget {
 
 /**
  * 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`
  */
@@ -24,4 +43,20 @@ export function isHTMLOrSVGElement(value: unknown): value is HTMLElement | SVGEl
 	return value instanceof HTMLElement || value instanceof SVGElement;
 }
 
+/**
+ * Is the value an input element? _(`<input>`, `<select>`, or `<textarea>`)_
+ *
+ * @param value Value to check
+ * @returns `true` if it's an input element, otherwise `false`
+ */
+export function isInputElement(
+	value: unknown,
+): value is HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement {
+	return (
+		value instanceof HTMLInputElement ||
+		value instanceof HTMLSelectElement ||
+		value instanceof HTMLTextAreaElement
+	);
+}
+
 // #endregion