@oscarpalmer/toretto 0.45.0 → 0.47.0

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`
  */
@@ -16,9 +34,10 @@ export function isEventTarget(value: unknown): value is EventTarget {
 }
 
 /**
- * Is the value an HTML or SVG element?
+ * 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`
+ * @returns `true` if it's an _HTML_ or _SVG_ element, otherwise `false`
  */
 export function isHTMLOrSVGElement(value: unknown): value is HTMLElement | SVGElement {
 	return value instanceof HTMLElement || value instanceof SVGElement;
@@ -26,6 +45,7 @@ export function isHTMLOrSVGElement(value: unknown): value is HTMLElement | SVGEl
 
 /**
  * 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`
  */

package/src/is.ts

@@ -2,6 +2,7 @@
 
 /**
  * Is the value a child node?
+ *
  * @param value Value to check
  * @returns `true` if it's a child node, otherwise `false`
  */
@@ -11,6 +12,7 @@ export function isChildNode(value: unknown): value is ChildNode {
 
 /**
  * Is the node inside a document?
+ *
  * @param node Node to check
  * @returns `true` if it's inside a document, otherwise `false`
  */
@@ -18,6 +20,7 @@ export function isInDocument(node: Node): boolean;
 
 /**
  * Is the node inside a specific document?
+ *
  * @param node Node to check
  * @param document Document to check within
  * @returns `true` if it's inside the document, otherwise `false`
@@ -54,6 +57,6 @@ const CHILD_NODE_TYPES: Set<number> = new Set([
 
 // #region Exports
 
-export {isEventTarget, isHTMLOrSVGElement, isInputElement} from './internal/is';
+export {isEventPosition, isEventTarget, isHTMLOrSVGElement, isInputElement} from './internal/is';
 
 // #endregion

package/src/models.ts

@@ -1,3 +1,125 @@
+/**
+ * _ARIA_ attribute for an element
+ *
+ * _(https://www.w3.org/TR/wai-aria-1.3/#aria-attributes)_
+ */
+export type AriaAttribute = keyof AriaAttributes;
+
+/**
+ * _ARIA_ attribute for an element without the `aria-` prefix
+ *
+ * _(https://www.w3.org/TR/wai-aria-1.3/#aria-attributes)_
+ */
+export 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 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
+ *
+ * _(https://www.w3.org/TR/wai-aria-1.3/#role_definitions)_
+ */
+export type AriaRole =
+	| 'alert'
+	| 'alertdialog'
+	| 'application'
+	| 'article'
+	| 'banner'
+	| 'blockquote'
+	| 'button'
+	| 'caption'
+	| 'cell'
+	| 'checkbox'
+	| 'code'
+	| 'columnheader'
+	| 'combobox'
+	| 'comment'
+	| 'complementary'
+	| 'contentinfo'
+	| 'definition'
+	| 'deletion'
+	| 'dialog'
+	| 'directory'
+	| 'document'
+	| 'emphasis'
+	| 'feed'
+	| 'figure'
+	| 'form'
+	| 'generic'
+	| 'grid'
+	| 'gridcell'
+	| 'group'
+	| 'heading'
+	| 'img'
+	| 'insertion'
+	| 'link'
+	| 'list'
+	| 'listbox'
+	| 'listitem'
+	| 'log'
+	| 'main'
+	| 'mark'
+	| 'marquee'
+	| 'math'
+	| 'menu'
+	| 'menubar'
+	| 'menuitem'
+	| 'menuitemcheckbox'
+	| 'menuitemradio'
+	| 'meter'
+	| 'navigation'
+	| 'none'
+	| 'note'
+	| 'option'
+	| 'paragraph'
+	| 'presentation'
+	| 'progressbar'
+	| 'radio'
+	| 'radiogroup'
+	| 'region'
+	| 'row'
+	| 'rowgroup'
+	| 'rowheader'
+	| 'scrollbar'
+	| 'search'
+	| 'searchbox'
+	| 'sectionfooter'
+	| 'sectionheader'
+	| 'separator'
+	| 'slider'
+	| 'spinbutton'
+	| 'status'
+	| 'strong'
+	| 'subscript'
+	| 'suggestion'
+	| 'superscript'
+	| 'switch'
+	| 'tab'
+	| 'table'
+	| 'tablist'
+	| 'tabpanel'
+	| 'term'
+	| 'textbox'
+	| 'time'
+	| 'timer'
+	| 'toolbar'
+	| 'tooltip'
+	| 'tree'
+	| 'treegrid'
+	| 'treeitem';
+
 /**
  * Attribute for an element
  */
@@ -11,14 +133,6 @@ export type Attribute = {
  */
 export type CustomEventListener = (event: CustomEvent) => void;
 
-/**
- * The position of an event
- */
-export type EventPosition = {
-	x: number;
-	y: number;
-};
-
 /**
  * Event listener that can be removed
  */

package/src/property/get.property.ts

@@ -1,6 +1,5 @@
 import type {Primitive} from '@oscarpalmer/atoms/models';
 import {camelCase} from '@oscarpalmer/atoms/string/case';
-import {isHTMLOrSVGElement} from '../internal/is';
 
 // #region Types
 
@@ -16,6 +15,7 @@ type GetProperties<Target extends Element> = {
 
 /**
  * Get the values of one or more properties on an element
+ *
  * @param target Target element
  * @param properties Properties to get
  * @returns Property values
@@ -26,7 +26,7 @@ export function getProperties<Target extends Element, Property extends keyof Get
 ): Pick<GetProperties<Target>, Property> {
 	const values: Partial<GetProperties<Target>> = {};
 
-	if (!isHTMLOrSVGElement(target) || !Array.isArray(properties)) {
+	if (!(target instanceof Element && Array.isArray(properties))) {
 		return values as Pick<GetProperties<Target>, Property>;
 	}
 
@@ -45,6 +45,7 @@ export function getProperties<Target extends Element, Property extends keyof Get
 
 /**
  * Get the value of a property on an element
+ *
  * @param target Target element
  * @param property Property to get
  * @returns Property value
@@ -53,12 +54,12 @@ export function getProperty<Target extends Element, Property extends keyof GetPr
 	target: Target,
 	property: Property,
 ): GetProperties<Target>[Property] {
-	if (isHTMLOrSVGElement(target) && typeof property === 'string') {
+	if (target instanceof Element && typeof property === 'string') {
 		return getPropertyValue(target, property) as GetProperties<Target>[Property];
 	}
 }
 
-function getPropertyValue(element: HTMLElement, property: string): unknown {
+function getPropertyValue(element: Element, property: string): unknown {
 	let actual = property;
 
 	if (!(actual in element)) {
@@ -66,7 +67,7 @@ function getPropertyValue(element: HTMLElement, property: string): unknown {
 	}
 
 	if (actual in element) {
-		return element[actual as keyof HTMLElement];
+		return element[actual as keyof Element];
 	}
 }
 

package/src/property/set.property.ts

@@ -4,7 +4,6 @@ import {setAttribute} from '../attribute';
 import type {DispatchedAttributeName} from '../attribute/set.attribute';
 import {booleanAttributesSet, dispatchedAttributes} from '../internal/attribute';
 import {updateProperty} from '../internal/property';
-import {isHTMLOrSVGElement} from '../is';
 
 // #region Types
 
@@ -27,6 +26,7 @@ type SetProperties<Target extends Element> = {
  * 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`)_
@@ -36,7 +36,7 @@ export function setProperties<Target extends Element>(
 	properties: SetProperties<Target>,
 	dispatch?: boolean,
 ): void {
-	if (!isHTMLOrSVGElement(target) || !isPlainObject(properties)) {
+	if (!(target instanceof Element) || !isPlainObject(properties)) {
 		return;
 	}
 
@@ -52,6 +52,7 @@ export function setProperties<Target extends Element>(
 
 /**
  * Set the value for a dispatchable property on an element
+ *
  * @param target Target element
  * @param property Property to set
  * @param value Value to set
@@ -66,6 +67,7 @@ export function setProperty<Target extends Element, Property extends DispatchedA
 
 /**
  * Set the value for a property on an element
+ *
  * @param target Target element
  * @param property Property to set
  * @param value Value to set
@@ -82,7 +84,7 @@ export function setProperty<Target extends Element, Property extends keyof SetPr
 	value: SetProperties<Target>[Property],
 	dispatch?: boolean,
 ): void {
-	if (isHTMLOrSVGElement(target) && typeof property === 'string') {
+	if (target instanceof Element && typeof property === 'string') {
 		setPropertyValue(target, property, value, dispatch !== false);
 	}
 }

package/src/style.ts

@@ -1,7 +1,6 @@
 import {getString} from '@oscarpalmer/atoms/string';
 import {setElementValues, updateElementValue} from './internal/element-value';
 import {getStyleValue} from './internal/get-value';
-import {isHTMLOrSVGElement} from './internal/is';
 import type {TextDirection} from './models';
 
 // #region Types
@@ -33,6 +32,7 @@ type Variables<
 
 /**
  * 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`)_
@@ -43,13 +43,14 @@ export function getStyle(
 	property: keyof CSSStyleValues,
 	computed?: boolean,
 ): string | undefined {
-	if (isHTMLOrSVGElement(element) && typeof property === 'string') {
+	if (element instanceof Element && typeof property === 'string') {
 		return getStyleValue(element, property, computed === true);
 	}
 }
 
 /**
  * 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`)_
@@ -62,7 +63,7 @@ export function getStyles<Property extends keyof CSSStyleValues>(
 ): Record<Property, string | undefined> {
 	const styles = {} as Record<Property, string | undefined>;
 
-	if (!(isHTMLOrSVGElement(element) && Array.isArray(properties))) {
+	if (!(element instanceof Element && Array.isArray(properties))) {
 		return styles;
 	}
 
@@ -81,6 +82,7 @@ export function getStyles<Property extends keyof CSSStyleValues>(
 
 /**
  * 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
  */
@@ -88,15 +90,16 @@ export function getTextDirection(node: Element | Node): TextDirection;
 
 /**
  * Get the text direction of the document
+ *
  * @returns Text direction
  */
 export function getTextDirection(): TextDirection;
 
 export function getTextDirection(node?: Element | Node): TextDirection {
-	let target: HTMLElement | SVGElement;
+	let target: HTMLElement;
 
-	if (isHTMLOrSVGElement(node)) {
-		target = node;
+	if (node instanceof Element) {
+		target = node as HTMLElement;
 	} else {
 		target =
 			node instanceof Node
@@ -115,6 +118,7 @@ export function getTextDirection(node?: Element | Node): TextDirection {
 
 /**
  * Set a style on an element
+ *
  * @param element Element to set the style on
  * @param property Style name
  * @param value Style value
@@ -125,6 +129,7 @@ export function setStyle(element: Element, property: keyof CSSStyleValues, value
 
 /**
  * Set styles on an element
+ *
  * @param element Element to set the styles on
  * @param styles Styles to set
  */
@@ -134,6 +139,7 @@ export 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/src/touch.ts

@@ -11,10 +11,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;
 };