@oscarpalmer/oui 0.28.0 → 0.29.0

package/dist/js/toolbar.mjs

@@ -1,105 +1,29 @@
 import { attributable } from "./internal/attributable.mjs";
-import { on } from "@oscarpalmer/toretto/event";
-import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
-import { clamp } from "@oscarpalmer/atoms/number";
-import { findAncestor } from "@oscarpalmer/toretto/find";
+import { getNavigable, updateNavigableFocus } from "./internal/navigable.mjs";
 //#region src/js/toolbar.ts
 var OuiToolbar = class {
-	#state;
-	constructor(state) {
-		this.#state = state;
-		updateFocus(this.#state, false);
+	#navigable;
+	constructor(navigable) {
+		this.#navigable = navigable;
+		updateNavigableFocus(this.#navigable, false);
 	}
 	destroy() {
-		for (const listener of this.#state.listeners) listener();
-		this.#state.active = void 0;
-		this.#state.element = void 0;
-		this.#state.listeners = void 0;
+		this.#navigable.destroy();
+		this.#navigable = void 0;
 	}
 };
 function addToolbar(element) {
-	if (!instances.has(element)) instances.set(element, new OuiToolbar(getState(element)));
-}
-function getItems(element) {
-	return [...element.querySelectorAll(SELECTOR)].filter(isValidItem);
-}
-function getOrientation(element) {
-	const attribute = element.getAttribute(ARIA_ORIENTATION);
-	return ORIENTATIONS.has(attribute) ? attribute : ORIENTATION_HORIZONTAL;
-}
-function getState(element) {
-	const state = {
-		element,
-		active: { index: 0 },
-		listeners: [on(element, EVENT_FOCUSIN, (event) => {
-			onFocusin(state, event);
-		}), on(element, EVENT_KEYDOWN, (event) => {
-			onKeydown(state, event);
-		}, { passive: false })],
-		orientation: getOrientation(element)
-	};
-	return state;
-}
-function isValidItem(element) {
-	return PROPERTY_DISABLED in element ? element.disabled !== true : true;
-}
-function onKeydown(state, event) {
-	if (!KEYS_ALL.has(event.key)) return;
-	const items = getItems(state.element);
-	if (items.length === 0) return;
-	let index;
-	if (KEYS_ABSOLUTE.has(event.key)) index = event.key === KEY_HOME ? 0 : items.length - 1;
-	else if (state.orientation === ORIENTATION_HORIZONTAL ? KEYS_HORIZONTAL.has(event.key) : KEYS_VERTICAL.has(event.key)) {
-		if (state.active.element instanceof HTMLSelectElement) event.preventDefault();
-		index = clamp(state.active.index + (KEYS_NEXT.has(event.key) ? 1 : -1), 0, items.length - 1, true);
-	}
-	if (index == null || index === state.active.index) return;
-	state.active.element = items[index];
-	state.active.index = index;
-	updateFocus(state, true, items);
-}
-function onFocusin(state, event) {
-	const item = findAncestor(event, SELECTOR);
-	if (!isHTMLOrSVGElement(item) || !isValidItem(item)) return;
-	const items = getItems(state.element);
-	const index = items.indexOf(item);
-	if (index === -1) return;
-	state.active.element = item;
-	state.active.index = index;
-	updateFocus(state, false, items);
+	if (!instances.has(element)) instances.set(element, new OuiToolbar(getNavigable(element, {
+		role: "toolbar",
+		selector: SELECTOR,
+		vertical: false
+	})));
 }
 function removeToolbar(element) {
 	instances.get(element)?.destroy();
 	instances.delete(element);
 }
-function updateFocus(state, focus, items) {
-	const updated = items ?? getItems(state.element);
-	const { length } = updated;
-	if (length === 0) return;
-	for (let index = 0; index < length; index += 1) updated[index].tabIndex = index === state.active.index ? 0 : -1;
-	state.active.element ??= updated[state.active.index];
-	if (focus) state.active.element?.focus();
-}
-const ARIA_ORIENTATION = "aria-orientation";
 const ATTRIBUTE = "oui-toolbar";
-const EVENT_KEYDOWN = "keydown";
-const EVENT_FOCUSIN = "focusin";
-const KEY_ARROW_DOWN = "ArrowDown";
-const KEY_ARROW_RIGHT = "ArrowRight";
-const KEY_END = "End";
-const KEY_HOME = "Home";
-const KEYS_ABSOLUTE = /* @__PURE__ */ new Set([KEY_END, KEY_HOME]);
-const KEYS_HORIZONTAL = /* @__PURE__ */ new Set([KEY_ARROW_RIGHT, "ArrowLeft"]);
-const KEYS_VERTICAL = /* @__PURE__ */ new Set([KEY_ARROW_DOWN, "ArrowUp"]);
-const KEYS_ALL = /* @__PURE__ */ new Set([
-	...KEYS_ABSOLUTE,
-	...KEYS_HORIZONTAL,
-	...KEYS_VERTICAL
-]);
-const KEYS_NEXT = /* @__PURE__ */ new Set([KEY_ARROW_DOWN, KEY_ARROW_RIGHT]);
-const ORIENTATION_HORIZONTAL = "horizontal";
-const ORIENTATIONS = /* @__PURE__ */ new Set([ORIENTATION_HORIZONTAL, "vertical"]);
-const PROPERTY_DISABLED = "disabled";
 const SELECTOR = `[${ATTRIBUTE}-item]`;
 const instances = /* @__PURE__ */ new WeakMap();
 attributable(ATTRIBUTE, addToolbar, removeToolbar);

package/dist/js/tooltip.d.mts

@@ -1,4 +1,4 @@
-import { i as OuiFloatable } from "./floatable.embedded-YxGwzgbE.mjs";
+import { r as OuiFloatable } from "./floatable.embedded-DUR8bQBK.mjs";
 
 //#region src/js/tooltip.d.ts
 declare class OuiTooltip {

package/dist/js/tooltip.mjs

@@ -1,8 +1,9 @@
 import { createEmbeddedFloatable } from "./floatable/floatable.embedded.mjs";
 import { attributable } from "./internal/attributable.mjs";
+import { getAria } from "@oscarpalmer/toretto/aria";
 import { on } from "@oscarpalmer/toretto/event";
 import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
-import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
+import { setAttribute } from "@oscarpalmer/toretto/attribute";
 import { findAncestor } from "@oscarpalmer/toretto/find";
 import { createElement } from "@oscarpalmer/toretto/create";
 //#region src/js/tooltip.ts
@@ -87,12 +88,13 @@ function destroyTooltip(state) {
 	state.tooltip = void 0;
 }
 function findElements(attribute) {
+	if (attribute == null) return;
 	const ids = attribute?.split(EXPRESSION_WHITESPACE) ?? [];
 	const elements = [];
 	for (const id of ids) {
 		if (isNullableOrWhitespace(id)) continue;
 		const element = document.querySelector(`#${id}`);
-		if (isHTMLOrSVGElement(element)) {
+		if (element != null) {
 			const cloned = element.cloneNode(true);
 			cloned.hidden = false;
 			elements.push(cloned);
@@ -101,21 +103,20 @@ function findElements(attribute) {
 	return elements;
 }
 function getContent() {
-	const content = createElement(CONTENT_TAGNAME, {
+	const content = createElement("div", {
 		popover: "hint",
 		role: "tooltip",
 		tabIndex: -1
 	});
-	content.setAttribute(ATTRIBUTE_CONTENT, "");
+	setAttribute(content, ATTRIBUTE_CONTENT, "");
 	return content;
 }
 function getElements(anchor) {
-	let elements = findElements(anchor.getAttribute(ARIA_LABELLEDBY));
-	if (elements.length > 0) return elements;
-	elements = findElements(anchor.getAttribute(ARIA_DESCRIBEDBY));
-	if (elements.length > 0) return elements;
-	let text = anchor.getAttribute(ARIA_LABEL);
-	if (isNullableOrWhitespace(text)) text = anchor.getAttribute(ARIA_DESCRIPTION);
+	let elements = findElements(getAria(anchor, "labelledby"));
+	if (elements == null || elements.length === 0) elements = findElements(getAria(anchor, "describedby"));
+	if (elements != null && elements.length > 0) return elements;
+	let text = getAria(anchor, "label");
+	if (isNullableOrWhitespace(text)) text = getAria(anchor, "description");
 	if (isNullableOrWhitespace(text)) return;
 	const paragraph = document.createElement("p");
 	paragraph.textContent = text;
@@ -157,8 +158,7 @@ function onPointermove(event) {
 	activate(event, false);
 }
 function onToggle(event) {
-	if (event.newState === "open") content.setAttribute(ATTRIBUTE_CONTENT_OPEN, "");
-	else content.removeAttribute(ATTRIBUTE_CONTENT_OPEN);
+	setAttribute(content, ATTRIBUTE_CONTENT_OPEN, event.newState === "open" ? "" : void 0);
 }
 function removeTooltip(element) {
 	const state = states.get(element);
@@ -175,11 +175,6 @@ function removeTooltip(element) {
 function setTooltipDelay(value) {
 	if (typeof value === "number" && !Number.isNaN(value) && value >= 0) delay = value;
 }
-const ARIA_DESCRIBEDBY = "aria-describedby";
-const ARIA_DESCRIPTION = "aria-description";
-const ARIA_LABEL = "aria-label";
-const ARIA_LABELLEDBY = "aria-labelledby";
-const CONTENT_TAGNAME = "div";
 const EXPRESSION_WHITESPACE = /\s+/;
 const ATTRIBUTE = "oui-tooltip";
 const ATTRIBUTE_CONTENT = `${ATTRIBUTE}-content`;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oscarpalmer/oui",
-	"version": "0.28.0",
+	"version": "0.29.0",
 	"description": "Styles, components, and utilities for building websites and applications.",
 	"keywords": [
 		"css",
@@ -49,6 +49,10 @@
 			"types": "./dist/js/movable/movable.standalone.d.mts",
 			"default": "./dist/js/movable/movable.standalone.mjs"
 		},
+		"./menu": {
+			"types": "./dist/js/menu.d.mts",
+			"default": "./dist/js/menu.mjs"
+		},
 		"./popover": {
 			"types": "./dist/js/popover.d.mts",
 			"default": "./dist/js/popover.mjs"
@@ -87,10 +91,10 @@
 	},
 	"dependencies": {
 		"@oscarpalmer/atoms": "^0.188.1",
-		"@oscarpalmer/toretto": "^0.46"
+		"@oscarpalmer/toretto": "^0.47.3"
 	},
 	"devDependencies": {
-		"@oxlint/plugins": "^1.72",
+		"@oxlint/plugins": "^1.73",
 		"@vitest/coverage-istanbul": "^4.1",
 		"autoprefixer": "^10.5",
 		"concurrently": "^10",

package/src/js/dialog.ts

@@ -1,3 +1,4 @@
+import {getAria, setAria} from '@oscarpalmer/toretto/aria';
 import {on} from '@oscarpalmer/toretto/event';
 import type {RemovableEventListener} from '@oscarpalmer/toretto/models';
 import {getOnBeforeToggleListener} from './floatable/floatable.embedded';
@@ -6,6 +7,8 @@ import {ATTRIBUTE_MOVABLE_HANDLE} from './movable/movable.embedded';
 import {createMovable, type OuiMovable} from './movable/movable.standalone';
 import {createResizable, RESIZABLE_ATTRIBUTE_HANDLE} from './resizable/resizable.embedded';
 import type {OuiResizable} from './resizable/resizable.standalone';
+import {getAttribute, setAttribute} from '@oscarpalmer/toretto/attribute';
+import {setStyles} from '@oscarpalmer/toretto/style';
 
 // #region Types
 
@@ -68,7 +71,7 @@ class OuiDialog {
 
 		const isModal = modal !== false;
 
-		element.setAttribute(ARIA_MODAL, String(isModal));
+		setAria(element, 'modal', isModal);
 
 		if (isModal) {
 			element.showModal();
@@ -104,7 +107,8 @@ function addDialog(element: HTMLElement): void {
 function destroyDialog(state: OuiDialogState): void {
 	state.element.close();
 
-	state.element.setAttribute(ARIA_MODAL, String(state.modal));
+	setAria(state.element, 'modal', state.modal);
+
 	state.element.removeAttribute(ATTRIBUTE_OPEN);
 
 	for (const listener of state.listeners) {
@@ -139,11 +143,11 @@ function getMovable(element: HTMLDialogElement): OuiMovable | undefined {
 	}
 
 	for (const handle of handles) {
-		handle.setAttribute(ATTRIBUTE_MOVABLE_HANDLE, '');
+		setAttribute(handle, ATTRIBUTE_MOVABLE_HANDLE, '');
 	}
 
 	return createMovable(element, {
-		container: element.getAttribute(ATTRIBUTE_CONTAINER) ?? undefined,
+		container: getAttribute(element, ATTRIBUTE_CONTAINER),
 	});
 }
 
@@ -154,7 +158,7 @@ function getResizable(element: HTMLDialogElement): OuiResizable | undefined {
 		return;
 	}
 
-	handle.setAttribute(RESIZABLE_ATTRIBUTE_HANDLE, '');
+	setAttribute(handle, RESIZABLE_ATTRIBUTE_HANDLE, '');
 
 	return createResizable(element);
 }
@@ -165,16 +169,16 @@ function getState(element: HTMLDialogElement): OuiDialogState {
 		dialog: undefined as never,
 		listeners: [
 			getOnBeforeToggleListener(element),
-			on(element, EVENT_TOGGLE, event => {
+			on(element, 'toggle', event => {
 				const {source} = event;
 
 				if (element.open) {
 					const modal =
-						(source instanceof HTMLButtonElement && source.command === COMMAND_SHOW_MODAL) ||
-						element.matches(SELECTOR_MODAL);
+						(source instanceof HTMLButtonElement && source.command === 'show-modal') ||
+						element.matches(':modal');
 
-					element.setAttribute(ARIA_MODAL, String(modal));
-					element.setAttribute(ATTRIBUTE_OPEN, '');
+					setAria(element, 'modal', modal);
+					setAttribute(element, ATTRIBUTE_OPEN, '');
 
 					element.focus();
 
@@ -182,18 +186,20 @@ function getState(element: HTMLDialogElement): OuiDialogState {
 						state.resizable?.set();
 					}, 500);
 				} else {
-					element.removeAttribute(ATTRIBUTE_OPEN);
-					element.setAttribute(ARIA_MODAL, String(state.modal));
+					setAttribute(element, ATTRIBUTE_OPEN);
+					setAria(element, 'modal', state.modal);
 
-					element.style.inset = '';
-					element.style.position = '';
-					element.style.transform = '';
+					setStyles(element, {
+						inset: '',
+						position: '',
+						transform: '',
+					});
 
 					state.resizable?.reset();
 				}
 			}),
 		],
-		modal: element.getAttribute(ARIA_MODAL) === TRUE,
+		modal: getAria(element, 'modal') === 'true' || element.matches(':modal'),
 	};
 
 	state.dialog = new OuiDialog(state);
@@ -220,28 +226,18 @@ function removeDialog(element: HTMLElement): void {
 
 // #region Variables
 
-const ARIA_MODAL = 'aria-modal';
-
 const ATTRIBUTE = 'oui-dialog';
 
 const ATTRIBUTE_CONTAINER = `${ATTRIBUTE}-container`;
 
 const ATTRIBUTE_OPEN = `${ATTRIBUTE}-open`;
 
-const COMMAND_SHOW_MODAL = 'show-modal';
-
-const EVENT_TOGGLE = 'toggle';
-
 const MESSAGE = 'The element must be an instance of HTMLDialogElement';
 
 const SELECTOR_MOVER = `[${ATTRIBUTE}-mover]`;
 
-const SELECTOR_MODAL = ':modal';
-
 const SELECTOR_RESIZER = `[${ATTRIBUTE}-resizer]`;
 
-const TRUE = 'true';
-
 const states = new WeakMap<HTMLElement, OuiDialogState>();
 
 // #endregion

package/src/js/floatable/floatable.embedded.ts

@@ -1,7 +1,10 @@
 import {isPlainObject} from '@oscarpalmer/atoms/is';
+import {getAria} from '@oscarpalmer/toretto/aria';
+import {getAttribute, setAttribute} from '@oscarpalmer/toretto/attribute';
 import {on} from '@oscarpalmer/toretto/event';
 import {isHTMLOrSVGElement} from '@oscarpalmer/toretto/is';
 import type {RemovableEventListener} from '@oscarpalmer/toretto/models';
+import {setStyle, setStyles} from '@oscarpalmer/toretto/style';
 
 // #region Types
 
@@ -45,13 +48,15 @@ export class OuiFloatable {
 		const {anchor, content} = state;
 
 		if (standalone) {
-			content.setAttribute(ATTRIBUTE_FLOATABLE, '');
+			setAttribute(content, ATTRIBUTE_FLOATABLE, '');
 
 			content.popover = 'manual';
+		} else {
+			content.popover ??= 'auto';
 		}
 
-		anchor.style.anchorName = state.name;
-		content.style.positionAnchor = state.name;
+		setStyle(anchor, 'anchorName', state.name);
+		setStyle(content, 'positionAnchor', state.name);
 	}
 
 	/**
@@ -211,11 +216,11 @@ function createInstance(
 export function getOnBeforeToggleListener(element: HTMLElement): RemovableEventListener {
 	return on(
 		element,
-		EVENT_BEFORE,
+		'beforetoggle',
 		event => {
 			const {newState, source} = event;
 
-			if (newState === FLOATABLE_STATE_OPEN && source?.getAttribute(ARIA_DISABLED) === TRUE) {
+			if (newState === 'open' && source != null && getAria(source, 'disabled') === 'true') {
 				event.preventDefault();
 			}
 		},
@@ -248,9 +253,11 @@ function getPosition(
 		return options.position;
 	}
 
-	const attribute = anchor.getAttribute(options.attribute) ?? '';
+	const attribute = getAttribute(anchor, options.attribute);
 
-	return attribute in AREAS ? (attribute as OuiFloatablePosition) : options.position;
+	return attribute != null && attribute in AREAS
+		? (attribute as OuiFloatablePosition)
+		: options.position;
 }
 
 function getState(
@@ -281,10 +288,12 @@ function setPosition(state: OuiFloatableState, override?: OuiFloatablePosition):
 
 	const area = AREAS[position];
 
-	state.content.style.positionAnchor = state.name;
-	state.content.style.positionArea = area;
+	setAttribute(state.content, ATTRIBUTE_POSITION, POSITIONS[area]);
 
-	state.content.setAttribute(ATTRIBUTE_POSITION, POSITIONS[area]);
+	setStyles(state.content, {
+		positionAnchor: state.name,
+		positionArea: area,
+	});
 }
 
 // #endregion
@@ -306,24 +315,16 @@ const AREAS: Record<OuiFloatablePosition, string> = {
 	'start-top': 'span-end start',
 };
 
-const ARIA_DISABLED = 'aria-disabled';
-
 export const ATTRIBUTE_FLOATABLE = 'oui-floatable';
 
 const ATTRIBUTE_POSITION = 'oui-position';
 
-const EVENT_BEFORE = 'beforetoggle';
-
-export const FLOATABLE_STATE_OPEN = 'open';
-
 const MESSAGE = 'Anchor and content must be an HTMLElement or SVGElement';
 
 const POSITIONS = Object.fromEntries(
 	Object.entries(AREAS).map(([position, area]) => [area, position]),
 ) as Record<string, OuiFloatablePosition>;
 
-const TRUE = 'true';
-
 const instances = new WeakMap<HTMLElement, OuiFloatable>();
 
 let index = 0;

package/src/js/focus-trap/focus-trap.embedded.ts

@@ -1,5 +1,6 @@
 import {isPlainObject} from '@oscarpalmer/atoms/is';
 import {clamp} from '@oscarpalmer/atoms/number';
+import {setAttribute} from '@oscarpalmer/toretto/attribute';
 import {on} from '@oscarpalmer/toretto/event';
 import {findAncestor} from '@oscarpalmer/toretto/find';
 import {getFocusable} from '@oscarpalmer/toretto/focusable';
@@ -26,9 +27,9 @@ export class OuiFocusTrap {
 	 */
 	set contain(value: boolean) {
 		if (value === true) {
-			this.#state.element.setAttribute(ATTRIBUTE_FOCUSTRAP_CONTAIN, '');
+			setAttribute(this.#state.element, ATTRIBUTE_FOCUSTRAP_CONTAIN, '');
 		} else if (value === false) {
-			this.#state.element.removeAttribute(ATTRIBUTE_FOCUSTRAP_CONTAIN);
+			setAttribute(this.#state.element, ATTRIBUTE_FOCUSTRAP_CONTAIN, undefined);
 		}
 	}
 
@@ -62,9 +63,9 @@ export class OuiFocusTrap {
 	 */
 	set noescape(value: boolean) {
 		if (value === true) {
-			this.#state.element.setAttribute(ATTRIBUTE_FOCUSTRAP_NOESCAPE, '');
+			setAttribute(this.#state.element, ATTRIBUTE_FOCUSTRAP_NOESCAPE, '');
 		} else if (value === false) {
-			this.#state.element.removeAttribute(ATTRIBUTE_FOCUSTRAP_NOESCAPE);
+			setAttribute(this.#state.element, ATTRIBUTE_FOCUSTRAP_NOESCAPE, undefined);
 		}
 	}
 
@@ -74,7 +75,7 @@ export class OuiFocusTrap {
 
 		state.element.tabIndex = -1;
 
-		state.element.setAttribute(ATTRIBUTE_FOCUSTRAP, '');
+		setAttribute(state.element, ATTRIBUTE_FOCUSTRAP, '');
 
 		this.contain = state.options.contain;
 		this.noescape = state.options.noescape;

package/src/js/index.ts

@@ -1,3 +1,4 @@
+import './menu';
 import './toolbar';
 
 export * from './dialog';

package/src/js/internal/attributable.ts

@@ -1,5 +1,3 @@
-import {isHTMLOrSVGElement} from '@oscarpalmer/toretto/is';
-
 export function attributable(
 	attribute: string,
 	add: (element: HTMLElement) => void,
@@ -11,7 +9,7 @@ export function attributable(
 		for (let index = 0; index < length; index += 1) {
 			const entry = entries[index];
 
-			if (entry.type === 'attributes' && isHTMLOrSVGElement(entry.target)) {
+			if (entry.type === 'attributes' && entry.target instanceof Element) {
 				if (entry.target.hasAttribute(attribute)) {
 					handleAdded(attribute, [entry.target], add);
 				} else {
@@ -41,7 +39,7 @@ function handleAdded(
 	nodes: Node[] | NodeList,
 	add: (element: HTMLElement) => void,
 ): void {
-	const elements = [...nodes].filter(isHTMLOrSVGElement) as HTMLElement[];
+	const elements = [...nodes].filter(node => node instanceof Element) as HTMLElement[];
 
 	const {length} = elements;
 
@@ -59,7 +57,7 @@ function handleAdded(
 }
 
 function handleRemoved(nodes: Node[] | NodeList, remove: (element: HTMLElement) => void): void {
-	const elements = [...nodes].filter(isHTMLOrSVGElement) as HTMLElement[];
+	const elements = [...nodes].filter(node => node instanceof Element) as HTMLElement[];
 
 	const {length} = elements;
 

package/src/js/internal/draggable.ts

@@ -1,12 +1,13 @@
 import type {EventPosition, PlainObject} from '@oscarpalmer/atoms/models';
 import {clamp} from '@oscarpalmer/atoms/number';
+import {getAttribute, setAttribute} from '@oscarpalmer/toretto/attribute';
 import {getPosition, on} from '@oscarpalmer/toretto/event';
 import {findAncestor} from '@oscarpalmer/toretto/find';
-import {toggleStyles, type StyleToggler} from '@oscarpalmer/toretto/style';
+import {isHTMLOrSVGElement} from '@oscarpalmer/toretto/is';
+import {setStyle, setStyles, toggleStyles, type StyleToggler} from '@oscarpalmer/toretto/style';
 import supportsTouch from '@oscarpalmer/toretto/touch';
 import type {OuiMovable} from '../movable/movable.embedded';
 import type {OuiSortable} from '../sortable/sortable.embedded';
-import {isHTMLOrSVGElement} from '@oscarpalmer/toretto/is';
 
 // #region Types
 
@@ -63,7 +64,7 @@ export abstract class OuiDraggable<ExtraState extends PlainObject = PlainObject>
 		setContainer(item);
 		setDirection(item);
 
-		element.setAttribute(attribute, '');
+		setAttribute(element, attribute, '');
 
 		let states = globals.states.get(element);
 
@@ -425,9 +426,11 @@ function onPointerdown(event: MouseEvent | TouchEvent): void {
 
 		const next = getNextPosition(item, position);
 
-		dragged.style.position = 'fixed';
-		dragged.style.inset = `${next.y}px auto auto ${next.x}px`;
-		dragged.style.transform = 'translate3d(0, 0, 0)';
+		setStyles(dragged, {
+			position: 'fixed',
+			inset: `${next.y}px auto auto ${next.x}px`,
+			transform: 'translate3d(0, 0, 0)',
+		});
 
 		item.state.options.drag.onBegin?.(event, globals, item, element, handle, next);
 
@@ -450,7 +453,7 @@ function onPointermove(event: MouseEvent | TouchEvent): void {
 	const next = getNextPosition(current, position);
 
 	if (globals.element != null) {
-		globals.element.node.style.inset = `${next.y}px auto auto ${next.x}px`;
+		setStyle(globals.element.node, 'inset', `${next.y}px auto auto ${next.x}px`);
 	}
 
 	const detail = current.state.options.drag.onMove(event, globals, current, {
@@ -529,7 +532,7 @@ function setContainer(item: OuiDraggableItem): void {
 	}
 
 	const selector =
-		container ?? item.instance.element.getAttribute(item.state.options.container.attribute);
+		container ?? getAttribute(item.instance.element, item.state.options.container.attribute);
 
 	if (typeof selector !== 'string') {
 		return;
@@ -559,7 +562,7 @@ function setContainerElement(item: OuiDraggableItem, element: HTMLElement): void
 }
 
 function setDirection(item: OuiDraggableItem): void {
-	const direction = item.state.element.getAttribute(item.state.options.direction.attribute);
+	const direction = getAttribute(item.state.element, item.state.options.direction.attribute);
 
 	if (horizontals.has(direction as OuiDraggableDirection)) {
 		item.state.vertical = false;