@oscarpalmer/toretto 0.45.0 → 0.47.0

package/src/attribute/get.attribute.ts

@@ -1,6 +1,5 @@
 import {kebabCase} from '@oscarpalmer/atoms/string/case';
 import {getAttributeValue} from '../internal/get-value';
-import {isHTMLOrSVGElement} from '../internal/is';
 
 // #region Types
 
@@ -12,6 +11,7 @@ type DataPrefixedName = `data-${string}`;
 
 /**
  * Get the value of a specific attribute from an element
+ *
  * @param element Element to get attribute from
  * @param name Attribute name
  * @param parse Parse value? _(defaults to `true`)_
@@ -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`)_
@@ -28,13 +29,14 @@ export function getAttribute(element: Element, name: DataPrefixedName, parse?: b
 export function getAttribute(element: Element, name: string): unknown;
 
 export function getAttribute(element: Element, name: string, parseValues?: boolean): unknown {
-	if (isHTMLOrSVGElement(element) && typeof name === 'string') {
+	if (element instanceof Element && typeof name === 'string') {
 		return getAttributeValue(element, kebabCase(name), parseValues !== false);
 	}
 }
 
 /**
  * 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`)_
@@ -47,7 +49,7 @@ export function getAttributes<Key extends string>(
 ): Record<Key, unknown> {
 	const attributes: Record<string, unknown> = {};
 
-	if (!(isHTMLOrSVGElement(element) && Array.isArray(names))) {
+	if (!(element instanceof Element && Array.isArray(names))) {
 		return attributes;
 	}
 

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

@@ -1,7 +1,7 @@
 import type {Primitive} from '@oscarpalmer/atoms/models';
 import {setAttributes} from './attribute';
-import {setStyles} from './style';
 import {setProperties} from './property';
+import {setStyles} from './style';
 
 // #region Types
 
@@ -16,7 +16,8 @@ type Styles = Partial<Record<keyof CSSStyleDeclaration, unknown>>;
 // #region Functions
 
 /**
- * Creates an HTML element with the specified tag name together with optional properties, attributes, and styles
+ * 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
@@ -31,7 +32,8 @@ export function createElement<TagName extends keyof HTMLElementTagNameMap>(
 ): HTMLElementTagNameMap[TagName];
 
 /**
- * Creates an HTML element with the specified tag name together with optional properties, attributes, and styles
+ * 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

@@ -3,12 +3,12 @@ import {parse} from '@oscarpalmer/atoms/string';
 import {camelCase, kebabCase} from '@oscarpalmer/atoms/string/case';
 import {setElementValues, updateElementValue} from './internal/element-value';
 import {EXPRESSION_DATA_PREFIX} from './internal/get-value';
-import {isHTMLOrSVGElement} from './internal/is';
 
 // #region Functions
 
 /**
  * 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 +18,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`)_
@@ -30,14 +31,14 @@ export function getData<Key extends string>(
 ): Record<Key, unknown>;
 
 export function getData(element: Element, keys: string | string[], parseValues?: boolean): unknown {
-	if (!isHTMLOrSVGElement(element)) {
+	if (!(element instanceof Element)) {
 		return;
 	}
 
 	const noParse = parseValues === false;
 
 	if (typeof keys === 'string') {
-		const value = element.dataset[camelCase(keys)];
+		const value = (element as HTMLElement).dataset[camelCase(keys)];
 
 		if (value === undefined) {
 			return;
@@ -52,7 +53,7 @@ export function getData(element: Element, keys: string | string[], parseValues?:
 
 	for (let index = 0; index < length; index += 1) {
 		const key = keys[index];
-		const value = element.dataset[camelCase(key)];
+		const value = (element as HTMLElement).dataset[camelCase(key)];
 
 		if (value == null) {
 			data[key] = undefined;
@@ -70,6 +71,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 +79,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
@@ -92,9 +95,11 @@ function updateDataAttribute(element: Element, key: string, value: unknown): voi
 		element,
 		getName(key),
 		value,
-		// oxlint-disable-next-line typescript/unbound-method: using .call in `updateElementValue`
+		// Using `.call` in `updateElementValue`
+		// oxlint-disable-next-line typescript/unbound-method
 		element.setAttribute,
-		// oxlint-disable-next-line typescript/unbound-method: using .call in `updateElementValue`
+		// Using `.call` in `updateElementValue`
+		// oxlint-disable-next-line typescript/unbound-method
 		element.removeAttribute,
 		false,
 		true,

package/src/event/delegation.ts

@@ -43,7 +43,7 @@ export function addDelegatedListener(
 }
 
 function delegatedEventHandler(this: boolean, event: Event): void {
-	const key = `${EVENT_PREFIX}${event.type}${this ? EVENT_SUFFIX_PASSIVE : EVENT_SUFFIX_ACTIVE}`;
+	const key = `@${event.type}${this ? EVENT_SUFFIX_PASSIVE : EVENT_SUFFIX_ACTIVE}`;
 
 	const items = event.composedPath();
 	const {length} = items;
@@ -51,7 +51,8 @@ function delegatedEventHandler(this: boolean, event: Event): void {
 	let cancelled = false;
 	let target = items[0];
 
-	// oxlint-disable-next-line typescript/unbound-method: using `.call` to ensure correct `this` context
+	// Using `.call` to ensure correct `this` context
+	// oxlint-disable-next-line typescript/unbound-method
 	const originalStopPropagation = event.stopPropagation;
 
 	event.stopPropagation = function () {
@@ -108,7 +109,7 @@ export function getDelegatedName(
 		!options.once &&
 		options.signal == null
 	) {
-		return `${EVENT_PREFIX}${type}${options.passive ? EVENT_SUFFIX_PASSIVE : EVENT_SUFFIX_ACTIVE}`;
+		return `@${type}${options.passive ? EVENT_SUFFIX_PASSIVE : EVENT_SUFFIX_ACTIVE}`;
 	}
 }
 
@@ -138,13 +139,11 @@ export function removeDelegatedListener(
 
 const DELEGATED = new Set<string>();
 
-const EVENT_PREFIX = '@';
-
 const EVENT_SUFFIX_ACTIVE = ':active';
 
 const EVENT_SUFFIX_PASSIVE = ':passive';
 
-const EVENT_TYPES: Set<string> = new Set([
+const EVENT_TYPES = new Set([
 	'beforeinput',
 	'click',
 	'dblclick',

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,
@@ -34,7 +35,7 @@ function createDispatchOptions(options: EventInit): EventInit {
 function createEvent(type: string, options?: CustomEventInit): Event {
 	const hasOptions = isPlainObject(options);
 
-	if (hasOptions && PROPERTY_DETAIL in (options as CustomEventInit)) {
+	if (hasOptions && 'detail' in (options as CustomEventInit)) {
 		return new CustomEvent(type, {
 			...createDispatchOptions(options as CustomEventInit),
 			detail: options?.detail,
@@ -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
@@ -222,9 +231,3 @@ export function on(
 }
 
 // #endregion
-
-// #region Variables
-
-const PROPERTY_DETAIL = 'detail';
-
-// #endregion

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

@@ -5,9 +5,9 @@ import {sanitizeNodes} from './sanitize';
 
 // #region Types
 
-type HtmlOptions = {
+export type HtmlOptions = {
 	/**
-	 * Cache template element for the HTML string? _(defaults to `true`)_
+	 * Cache template element for the _HTML_ string? _(defaults to `true`)_
 	 */
 	cache?: boolean;
 };
@@ -175,13 +175,15 @@ 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
+ * 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
@@ -213,8 +216,9 @@ html.clear = (): void => {
 };
 
 /**
- * Remove cached template element for an HTML string or id
- * @param template HTML string or id for a template element
+ * 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 => {
 	templates.delete(template);
@@ -249,6 +253,7 @@ function replaceComments(origin: NodeList | Node[], replacements: Node[]): void
 
 /**
  * Sanitize one or more nodes, recursively
+ *
  * @param value Node or nodes to sanitize
  * @param options Sanitization options
  * @returns Sanitized nodes
@@ -279,7 +284,4 @@ const templates = new SizedMap<string, HTMLTemplateElement>(128);
 
 let parser: DOMParser;
 
-// @ts-expect-error debug
-window.templates = templates;
-
 // #endregion

package/src/index.ts

@@ -1,5 +1,6 @@
 import supportsTouch from './touch';
 
+export * from './aria';
 export {
 	booleanAttributes,
 	getAttribute,

package/src/internal/attribute.ts

@@ -142,9 +142,11 @@ export function updateAttribute(
 		element,
 		name,
 		isBoolean ? (next ? '' : null) : value,
-		// oxlint-disable-next-line typescript/unbound-method: using `.call` in `updateElementValue`
+		// Using `.call` in `updateElementValue`
+		// oxlint-disable-next-line typescript/unbound-method
 		element.setAttribute,
-		// oxlint-disable-next-line typescript/unbound-method: using `.call` in `updateElementValue`
+		// Using `.call` in `updateElementValue`
+		// oxlint-disable-next-line typescript/unbound-method
 		element.removeAttribute,
 		isBoolean,
 		false,

package/src/internal/element-value.ts

@@ -1,7 +1,6 @@
 import {isNullableOrWhitespace} from '@oscarpalmer/atoms/is';
 import {getString} from '@oscarpalmer/atoms/string';
 import {kebabCase} from '@oscarpalmer/atoms/string/case';
-import {isHTMLOrSVGElement} from '../is';
 import {isAttribute} from './attribute';
 
 // #region Functions
@@ -26,7 +25,7 @@ export function setElementValue(
 	callback: (element: Element, key: string, value: unknown, dispatch: boolean) => void,
 	style?: boolean,
 ): void {
-	if (!isHTMLOrSVGElement(element)) {
+	if (!(element instanceof Element)) {
 		return;
 	}
 
@@ -45,7 +44,7 @@ export function setElementValues(
 	callback: (element: Element, key: string, value: unknown, dispatch: boolean) => void,
 	style?: boolean,
 ): void {
-	if (!isHTMLOrSVGElement(element)) {
+	if (!(element instanceof Element)) {
 		return;
 	}