@oscarpalmer/oui 0.28.0 → 0.29.1

package/dist/js/menu.mjs

@@ -0,0 +1,168 @@
+import { createEmbeddedFloatable, getOnBeforeToggleListener } from "./floatable/floatable.embedded.mjs";
+import { attributable } from "./internal/attributable.mjs";
+import { NAVIGABLE_KEYS_HORIZONTAL, NAVIGABLE_KEYS_VERTICAL, getNavigable, updateNavigableFocus } from "./internal/navigable.mjs";
+import { setAria, setRole } from "@oscarpalmer/toretto/aria";
+import { on } from "@oscarpalmer/toretto/event";
+import { setAttribute } from "@oscarpalmer/toretto/attribute";
+import { findAncestor } from "@oscarpalmer/toretto/find";
+//#region src/js/menu.ts
+var OuiMenu = class {
+	content;
+	element;
+	floatable;
+	navigable;
+	toggle;
+	get open() {
+		return this.floatable.open;
+	}
+	constructor(element, navigable) {
+		this.element = element;
+		this.navigable = navigable;
+		this.content = navigable.element;
+		this.toggle = element.querySelector(SELECTOR_MENU_TOGGLE);
+		this.floatable = createEmbeddedFloatable(this.toggle, this.content, {
+			attribute: ATTRIBUTE_MENU_POSITION,
+			position: findAncestor(element.parentElement, SELECTOR_MENU_CONTENT) == null ? "below-start" : "end-top",
+			reusable: false
+		});
+		this.navigable.listeners.push(getOnBeforeToggleListener(this.content), on(this.content, "click", (event) => {
+			event.stopPropagation();
+			if (findAncestor(event, SELECTOR_MENU_TOGGLE) != null) return;
+			const elements = document.querySelectorAll(SELECTOR_MENU_CONTENT);
+			for (const element of elements) menus.get(element)?.floatable.hide();
+			const menu = menus.get(elements[0]);
+			if (menu != null && event.pointerId === -1) updateNavigableFocus(menu.navigable, true);
+		}), on(this.content, "toggle", (event) => {
+			const expanded = event.newState === "open";
+			if (expanded) {
+				this.floatable?.update();
+				updateNavigableFocus(this.navigable, true);
+			}
+			setAria(this.toggle, "expanded", expanded);
+		}));
+		this.floatable.update();
+		initializeMenu(this);
+		updateNavigableFocus(this.navigable, false);
+	}
+	destroy() {
+		this.floatable.destroy();
+		this.navigable.destroy();
+		this.floatable = void 0;
+		this.navigable = void 0;
+	}
+};
+var OuiMenubar = class {
+	element;
+	navigable;
+	constructor(element, navigable) {
+		this.element = element;
+		this.navigable = navigable;
+		updateNavigableFocus(this.navigable, false);
+	}
+	destroy() {
+		this.navigable.destroy();
+		this.navigable = void 0;
+	}
+};
+function addInstance(instances, ctor, element, content, options) {
+	if (!instances.has(content)) instances.set(content, new ctor(element, getNavigable(content, {
+		...options,
+		onDeactivate,
+		onPreventNavigation,
+		onShouldActivate,
+		onShouldDeactivate
+	})));
+}
+function addMenu(element) {
+	const content = element.querySelector(SELECTOR_MENU_CONTENT);
+	const toggle = element.querySelector(SELECTOR_MENU_TOGGLE);
+	if (content != null && toggle != null) addInstance(menus, OuiMenu, element, content, {
+		selector: SELECTOR_MENU_ITEM,
+		vertical: true
+	});
+}
+function addMenubar(element) {
+	addInstance(menubars, OuiMenubar, element, element, {
+		role: "menubar",
+		selector: SELECTOR_MENUBAR_ITEM,
+		vertical: false
+	});
+}
+function getId(element, value) {
+	let { id } = element;
+	if (id == null || id.trim().length === 0) {
+		id = value == null ? `oui_menu_${++index}` : `${value}_toggle`;
+		element.id = id;
+	}
+	return id;
+}
+function initializeMenu(menu) {
+	const id = getId(menu.content);
+	setAttribute(menu.toggle, "popovertarget", id);
+	setAria(menu.toggle, {
+		controls: id,
+		expanded: "false",
+		haspopup: "menu"
+	});
+	setAttribute(menu.content, "tabindex", "-1");
+	setRole(menu.content, "menu");
+}
+function onDeactivate(_, navigable) {
+	const menu = menus.get(navigable.element);
+	if (menu == null) return;
+	menu.floatable.hide();
+	const element = findAncestor(menu.element.parentElement, SELECTORS);
+	if (element == null) return;
+	const instance = menubars.get(element) ?? menus.get(element);
+	if (instance != null) updateNavigableFocus(instance.navigable, true);
+}
+function onPreventNavigation(_, navigable) {
+	return findAncestor((menubars.get(navigable.element) ?? menus.get(navigable.element))?.element.parentElement, SELECTORS) != null;
+}
+function onShouldActivate(event, navigable) {
+	let activate = false;
+	if (menubars.has(navigable.element)) activate = navigable.orientation === "horizontal" ? NAVIGABLE_KEYS_VERTICAL.has(event.key) : NAVIGABLE_KEYS_HORIZONTAL.has(event.key);
+	else if (menus.has(navigable.element)) activate = navigable.orientation === "horizontal" ? NAVIGABLE_KEYS_VERTICAL.has(event.key) : event.key === "ArrowRight";
+	if (activate) {
+		const target = event.target instanceof HTMLElement && event.target.matches(SELECTOR_MENU_TOGGLE) ? event.target : void 0;
+		if (target == null) activate = false;
+		else target.click();
+	}
+	return activate;
+}
+function onShouldDeactivate(event, navigable) {
+	if (menubars.has(navigable.element)) return;
+	const menu = menus.get(navigable.element);
+	if (menu == null) return;
+	const horizontal = navigable.orientation === "horizontal";
+	const altKey = horizontal ? "ArrowDown" : "ArrowRight";
+	const baseKey = horizontal ? "ArrowUp" : "ArrowLeft";
+	if (event.key === baseKey) return findAncestor(menu.element.parentElement, SELECTOR_MENU_CONTENT) != null;
+	if (event.key === altKey && event.target instanceof HTMLElement && !event.target.hasAttribute("popovertarget")) return false;
+}
+function removeInstance(instances, element) {
+	instances.get(element)?.destroy();
+	instances.delete(element);
+}
+function removeMenu(element) {
+	removeInstance(menus, element);
+}
+function removeMenubar(element) {
+	removeInstance(menubars, element);
+}
+const ATTRIBUTE_MENU = "oui-menu";
+const ATTRIBUTE_MENU_POSITION = "oui-menu-position";
+const ATTRIBUTE_MENUBAR = "oui-menubar";
+const SELECTOR_MENUBAR = `[${ATTRIBUTE_MENUBAR}]`;
+const SELECTOR_MENUBAR_ITEM = `:scope > [${ATTRIBUTE_MENUBAR}-item], :scope > * > [${ATTRIBUTE_MENUBAR}-item]`;
+const SELECTOR_MENU_CONTENT = `[${ATTRIBUTE_MENU}-content]`;
+const SELECTOR_MENU_ITEM = `:scope > [${ATTRIBUTE_MENU}-item], :scope > * > [${ATTRIBUTE_MENU}-item]`;
+const SELECTOR_MENU_TOGGLE = `[${ATTRIBUTE_MENU}-toggle]`;
+const SELECTORS = `${SELECTOR_MENUBAR}, ${SELECTOR_MENU_CONTENT}`;
+const menubars = /* @__PURE__ */ new WeakMap();
+const menus = /* @__PURE__ */ new WeakMap();
+let index = 0;
+attributable(ATTRIBUTE_MENU, addMenu, removeMenu);
+attributable(ATTRIBUTE_MENUBAR, addMenubar, removeMenubar);
+//#endregion
+export {};

package/dist/js/movable/movable.embedded.d.mts

@@ -1,2 +1,2 @@
-import { g as createMovable, h as OuiMovable, m as ATTRIBUTE_MOVABLE_HANDLE, p as ATTRIBUTE_MOVABLE } from "../draggable-zszaW1qS.mjs";
+import { g as createMovable, h as OuiMovable, m as ATTRIBUTE_MOVABLE_HANDLE, p as ATTRIBUTE_MOVABLE } from "../draggable-fIYXd8eO.mjs";
 export { ATTRIBUTE_MOVABLE, ATTRIBUTE_MOVABLE_HANDLE, OuiMovable, createMovable };

package/dist/js/movable/movable.embedded.mjs

@@ -1,16 +1,15 @@
 import { attributable } from "../internal/attributable.mjs";
 import { OuiDraggable, addDraggable, getDraggableStates, removeDraggable } from "../internal/draggable.mjs";
 import { getPosition, on } from "@oscarpalmer/toretto/event";
+import { setAttribute } from "@oscarpalmer/toretto/attribute";
 import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
+import { getStyles, setStyle, setStyles } from "@oscarpalmer/toretto/style";
 //#region src/js/movable/movable.embedded.ts
 var OuiMovable = class extends OuiDraggable {
 	#element;
 	#style;
 	constructor(element, options) {
-		const style = {
-			inset: element.style.inset,
-			position: element.style.position
-		};
+		const style = getStyles(element, ["inset", "position"]);
 		super("movable", "move", ATTRIBUTE_MOVABLE, element, {
 			container: {
 				attribute: ATTRIBUTE_CONTAINER,
@@ -52,8 +51,7 @@ var OuiMovable = class extends OuiDraggable {
 	*/
 	destroy() {
 		MOVED.delete(this);
-		this.#element.style.inset = this.#style.inset;
-		this.#element.style.position = this.#style.position;
+		setStyles(this.#element, this.#style);
 		this.#element = void 0;
 		this.#style = void 0;
 		super.destroy();
@@ -98,11 +96,8 @@ function onCancel(globals, item) {
 		x: 0,
 		y: 0
 	};
-	if (moved) element.style.inset = `${y}px auto auto ${x}px`;
-	else {
-		element.style.position = style.position;
-		element.style.inset = style.inset;
-	}
+	if (moved) setStyle(element, "inset", `${y}px auto auto ${x}px`);
+	else setStyles(element, style);
 	element.removeAttribute(ATTRIBUTE_MOVING);
 }
 function onEnd(event, globals, item, reset) {
@@ -129,7 +124,7 @@ function onEnd(event, globals, item, reset) {
 	});
 }
 function onMove(_, globals, __, position) {
-	globals.element?.node.setAttribute(ATTRIBUTE_MOVING, "");
+	setAttribute(globals.element?.node, ATTRIBUTE_MOVING, "");
 	return {
 		from: { ...globals.original },
 		to: { ...position.calculated }
@@ -153,7 +148,7 @@ function reposition(movable) {
 	const container = state.container.getBoundingClientRect();
 	const x = container.left + (state.offset?.x ?? 0);
 	const y = container.top + (state.offset?.y ?? 0);
-	state.element.style.inset = `${y}px auto auto ${x}px`;
+	setStyle(state.element, "inset", `${y}px auto auto ${x}px`);
 }
 function setOffset(state, container) {
 	state.offset = {};

package/dist/js/movable/movable.standalone.d.mts

@@ -1,2 +1,2 @@
-import { g as createMovable, h as OuiMovable, t as CreateOuiDraggableOptions } from "../draggable-zszaW1qS.mjs";
+import { g as createMovable, h as OuiMovable, t as CreateOuiDraggableOptions } from "../draggable-fIYXd8eO.mjs";
 export { type CreateOuiDraggableOptions as CreateOuiMovableOptions, type OuiMovable, createMovable };

package/dist/js/popover.d.mts

@@ -1,4 +1,4 @@
-import { i as OuiFloatable } from "./floatable.embedded-YxGwzgbE.mjs";
+import { r as OuiFloatable } from "./floatable.embedded-DUR8bQBK.mjs";
 import { i as OuiFocusTrap } from "./focus-trap.embedded-DR8NpZfr.mjs";
 import { RemovableEventListener } from "@oscarpalmer/toretto/models";
 

package/dist/js/popover.mjs

@@ -1,7 +1,9 @@
 import { createEmbeddedFloatable, getOnBeforeToggleListener } from "./floatable/floatable.embedded.mjs";
 import { attributable } from "./internal/attributable.mjs";
 import { createFocusTrap } from "./focus-trap/focus-trap.embedded.mjs";
+import { getAria, setAria } from "@oscarpalmer/toretto/aria";
 import { on } from "@oscarpalmer/toretto/event";
+import { setAttribute } from "@oscarpalmer/toretto/attribute";
 import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
 //#region src/js/popover.ts
 var OuiPopover = class {
@@ -18,6 +20,7 @@ var OuiPopover = class {
 	}
 	constructor(state) {
 		this.#state = state;
+		initialize(state);
 		this.#state.floatable.update();
 	}
 	/**
@@ -49,6 +52,14 @@ function destroyPopover(state) {
 	state.listeners = void 0;
 	state.popover = void 0;
 }
+function getId(element, value) {
+	let { id } = element;
+	if (id == null || id.trim().length === 0) {
+		id = value == null ? `oui_popover_${++index}` : `${value}_toggle`;
+		element.id = id;
+	}
+	return id;
+}
 /**
 * Get the _OuiPopover_ for an element
 *
@@ -63,23 +74,30 @@ function getState(anchor, content) {
 		anchor,
 		content,
 		floatable: createEmbeddedFloatable(anchor, content, options),
-		focusTrap: content.getAttribute(ARIA_MODAL) === TRUE ? createFocusTrap(content, { noescape: true }) : void 0,
-		listeners: [getOnBeforeToggleListener(content), on(content, EVENT_TOGGLE, (event) => {
-			if (event.newState === STATE_OPEN) {
+		focusTrap: getAria(content, "modal") === "true" ? createFocusTrap(content, { noescape: true }) : void 0,
+		listeners: [getOnBeforeToggleListener(content), on(content, "toggle", (event) => {
+			const expanded = event.newState === "open";
+			if (expanded) {
 				ignoreFocus = false;
 				state.floatable?.update();
-				content.setAttribute(ATTRIBUTE_OPEN, "");
 				content.focus();
-			} else {
-				content.removeAttribute(ATTRIBUTE_OPEN);
-				if (!ignoreFocus) anchor?.focus();
-			}
+			} else if (!ignoreFocus) anchor?.focus();
+			setAria(anchor, "expanded", expanded);
+			setAttribute(content, ATTRIBUTE_OPEN, expanded ? "" : void 0);
 		})],
 		popover: void 0
 	};
 	state.popover = new OuiPopover(state);
 	return state;
 }
+function initialize(state) {
+	const id = getId(state.content);
+	setAria(state.anchor, {
+		controls: id,
+		expanded: "false"
+	});
+	if ((getAria(state.content, "label") ?? getAria(state.content, "labelledby")) == null) setAria(state.content, "labelledby", getId(state.anchor, id));
+}
 function onPointerdown() {
 	ignoreFocus = true;
 }
@@ -90,18 +108,15 @@ function removePopover(element) {
 	states.delete(element);
 }
 const ATTRIBUTE = "oui-popover";
-const ARIA_MODAL = "aria-modal";
 const ATTRIBUTE_OPEN = `${ATTRIBUTE}-open`;
-const EVENT_TOGGLE = "toggle";
-const STATE_OPEN = "open";
-const TRUE = "true";
 const options = {
-	attribute: `${ATTRIBUTE}position`,
+	attribute: `${ATTRIBUTE}-position`,
 	position: "below-start",
 	reusable: false
 };
 const states = /* @__PURE__ */ new WeakMap();
 let ignoreFocus = false;
+let index = 0;
 on(document, "pointerdown", onPointerdown, { capture: true });
 attributable(ATTRIBUTE, addPopover, removePopover);
 //#endregion

package/dist/js/resizable/resizable.embedded.mjs

@@ -1,10 +1,11 @@
 import { attributable } from "../internal/attributable.mjs";
 import { getPosition, on } from "@oscarpalmer/toretto/event";
 import { isPlainObject } from "@oscarpalmer/atoms/is";
+import { getAttribute, setAttribute } from "@oscarpalmer/toretto/attribute";
 import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
+import { setStyles, toggleStyles } from "@oscarpalmer/toretto/style";
 import { getNumber } from "@oscarpalmer/atoms/number";
 import { findAncestor } from "@oscarpalmer/toretto/find";
-import { toggleStyles } from "@oscarpalmer/toretto/style";
 import supportsTouch from "@oscarpalmer/toretto/touch";
 //#region src/js/resizable/resizable.embedded.ts
 var OuiResizable = class {
@@ -22,8 +23,10 @@ var OuiResizable = class {
 		this.#state.height = height;
 	}
 	reset() {
-		this.#state.element.style.height = "";
-		this.#state.element.style.width = "";
+		setStyles(this.#state.element, {
+			height: "",
+			width: ""
+		});
 	}
 };
 function addResizable(element, options) {
@@ -61,10 +64,10 @@ function getAndSetDimensions(element, options, input) {
 	else if (options.minimumWidth > -1 && width < options.minimumWidth) width = options.minimumWidth;
 	if (options.maximumHeight > -1 && height > options.maximumHeight) height = options.maximumHeight;
 	else if (options.minimumHeight > -1 && height < options.minimumHeight) height = options.minimumHeight;
-	if (element.checkVisibility()) {
-		element.style.height = `${height}px`;
-		element.style.width = `${width}px`;
-	}
+	if (element.checkVisibility()) setStyles(element, {
+		height: `${height}px`,
+		width: `${width}px`
+	});
 	return [width, height];
 }
 function getProperties(element, widthProperty, heightProperty) {
@@ -84,7 +87,7 @@ function getRestrictions(maximum, minimum) {
 	};
 }
 function getState(element, handle, input) {
-	element.setAttribute(RESIZABLE_ATTRIBUTE, "");
+	setAttribute(element, RESIZABLE_ATTRIBUTE, "");
 	const options = getValidOptions(element, input);
 	const [width, height] = getAndSetDimensions(element, options);
 	return {
@@ -98,7 +101,7 @@ function getState(element, handle, input) {
 }
 function getValidOptions(element, input) {
 	const original = isPlainObject(input) ? input : {};
-	return { ...getRestrictions(input == null ? element.getAttribute(ATTRIBUTE_MAXIMUM) ?? getProperties(element, "maxWidth", "maxHeight") : [original.maximumWidth, original.maximumHeight], input == null ? element.getAttribute(ATTRIBUTE_MINIMUM) ?? getProperties(element, "minWidth", "minHeight") : [original.minimumWidth, original.minimumHeight]) };
+	return { ...getRestrictions(input == null ? getAttribute(element, ATTRIBUTE_MAXIMUM) ?? getProperties(element, "maxWidth", "maxHeight") : [original.maximumWidth, original.maximumHeight], input == null ? getAttribute(element, ATTRIBUTE_MINIMUM) ?? getProperties(element, "minWidth", "minHeight") : [original.minimumWidth, original.minimumHeight]) };
 }
 function getXAndY(first, second) {
 	const [x, y] = typeof first === "string" && second == null ? first.split(",") : [first, second];
@@ -110,8 +113,10 @@ function getXAndY(first, second) {
 }
 function onKeydown(event) {
 	if (current == null || event.key !== "Escape") return;
-	current.state.element.style.height = `${current.state.height}px`;
-	current.state.element.style.width = `${current.state.width}px`;
+	setStyles(current.state.element, {
+		height: `${current.state.height}px`,
+		width: `${current.state.width}px`
+	});
 	resetResizable();
 }
 function onPointerdown(event) {

package/dist/js/sortable/sortable.embedded.d.mts

@@ -1,2 +1,2 @@
-import { d as OuiSortable, f as createSortable } from "../draggable-zszaW1qS.mjs";
+import { d as OuiSortable, f as createSortable } from "../draggable-fIYXd8eO.mjs";
 export { OuiSortable, createSortable };

package/dist/js/sortable/sortable.embedded.mjs

@@ -1,7 +1,9 @@
 import { attributable } from "../internal/attributable.mjs";
 import { OuiDraggable, addDraggable, getDraggableStates, removeDraggable } from "../internal/draggable.mjs";
 import { getPosition } from "@oscarpalmer/toretto/event";
+import { getAttribute, setAttribute, setAttributes } from "@oscarpalmer/toretto/attribute";
 import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
+import { setStyle } from "@oscarpalmer/toretto/style";
 import { findAncestor, getElementFromPosition } from "@oscarpalmer/toretto/find";
 import { createElement } from "@oscarpalmer/toretto/create";
 //#region src/js/sortable/sortable.embedded.ts
@@ -26,7 +28,7 @@ var OuiSortable = class extends OuiDraggable {
 			},
 			getDragged: getDragPlaceholder,
 			getOrigin: () => (getDraggableStates(element)?.sortable)?.origin
-		}, { connections: element.getAttribute(ATTRIBUTE_CONNECTIONS) });
+		}, { connections: getAttribute(element, ATTRIBUTE_CONNECTIONS) });
 	}
 };
 function afterEnd(insert, from, events, elements, position, valid) {
@@ -72,15 +74,15 @@ function getOriginalPosition(_, __, position) {
 }
 function getPositionPlaceholder(item) {
 	placeholder.position ??= createElement("div");
-	placeholder.position.setAttribute(ATTRIBUTE_PLACEHOLDER_POSITION, "");
-	if (item.state.origin != null) placeholder.position.style.setProperty("--placeholder-height", `${item.state.origin.getBoundingClientRect().height}px`);
+	setAttribute(placeholder.position, ATTRIBUTE_PLACEHOLDER_POSITION, "");
+	if (item.state.origin != null) setStyle(placeholder.position, "--placeholder-height", `${item.state.origin.getBoundingClientRect().height}px`);
 	return placeholder.position;
 }
 function onBegin(_, globals, item, element) {
 	item.state.origin = element;
 	setPlaceholder(globals, item, element);
-	element.setAttribute(ATTRIBUTE_ORIGIN, "");
-	document.body.setAttribute(ATTRIBUTE_ACTIVE, "");
+	setAttribute(element, ATTRIBUTE_ORIGIN, "");
+	setAttribute(document.body, ATTRIBUTE_ACTIVE, "");
 }
 function onCancel(_, item) {
 	item.state.origin?.removeAttribute(ATTRIBUTE_ORIGIN);
@@ -96,7 +98,7 @@ function onEnd(event, globals, item, reset) {
 	};
 	const target = getElementFromPosition(position)[0];
 	let element = findAncestor(target, SELECTOR_ITEM);
-	if (element?.hasAttribute(ATTRIBUTE_PLACEHOLDER_POSITION)) if (element.getAttribute(ATTRIBUTE_PLACEHOLDER_POSITION) === "after") element = element.previousElementSibling;
+	if (element?.hasAttribute(ATTRIBUTE_PLACEHOLDER_POSITION)) if (getAttribute(element, ATTRIBUTE_PLACEHOLDER_POSITION) === "after") element = element.previousElementSibling;
 	else element = element.nextElementSibling;
 	let insert = "insert";
 	let toInstance;
@@ -168,7 +170,7 @@ function onMove(event, globals, item, position) {
 			place = "after";
 			toElement.insertAdjacentElement(INSERT_AFTER, placeholder);
 		}
-		placeholder.setAttribute(ATTRIBUTE_PLACEHOLDER_POSITION, place);
+		setAttribute(placeholder, ATTRIBUTE_PLACEHOLDER_POSITION, place);
 	} else placeholder.remove();
 	return {
 		from: {
@@ -216,14 +218,14 @@ function setPlaceholder(state, item, origin) {
 	});
 }
 function updatePlaceholder(item, element) {
-	element.style.position = "fixed";
-	element.setAttribute(ATTRIBUTE_PLACEHOLDER_DRAG, "");
+	setAttribute(element, ATTRIBUTE_PLACEHOLDER_DRAG, "");
+	setStyle(element, "position", "fixed");
 	const state = getDraggableStates(item.state.element)?.sortable;
 	if (state == null) return;
-	if (state.horizontal) element.setAttribute(ATTRIBUTE_HORIZONTAL, "");
-	else element.removeAttribute(ATTRIBUTE_HORIZONTAL);
-	if (state.vertical) element.setAttribute(ATTRIBUTE_VERTICAL, "");
-	else element.removeAttribute(ATTRIBUTE_VERTICAL);
+	setAttributes(element, {
+		[ATTRIBUTE_HORIZONTAL]: state.horizontal ? "" : void 0,
+		[ATTRIBUTE_VERTICAL]: state.vertical ? "" : void 0
+	});
 }
 function validatePosition(_, from, to, position) {
 	let valid = true;

package/dist/js/sortable/sortable.standalone.d.mts

@@ -1,2 +1,2 @@
-import { d as OuiSortable, f as createSortable, t as CreateOuiDraggableOptions } from "../draggable-zszaW1qS.mjs";
+import { d as OuiSortable, f as createSortable, t as CreateOuiDraggableOptions } from "../draggable-fIYXd8eO.mjs";
 export { type CreateOuiDraggableOptions as CreateOuiSortableOptions, type OuiSortable, createSortable };

package/dist/js/splitter.mjs

@@ -1,8 +1,10 @@
+import { setAria } from "@oscarpalmer/toretto/aria";
 import { getPosition, on } from "@oscarpalmer/toretto/event";
 import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
+import { getAttribute, setAttribute } from "@oscarpalmer/toretto/attribute";
+import { setStyle, toggleStyles } from "@oscarpalmer/toretto/style";
 import { clamp } from "@oscarpalmer/atoms/number";
 import { findAncestor } from "@oscarpalmer/toretto/find";
-import { toggleStyles } from "@oscarpalmer/toretto/style";
 import supportsTouch from "@oscarpalmer/toretto/touch";
 import { round } from "@oscarpalmer/atoms/math";
 //#region src/js/splitter.ts
@@ -42,8 +44,7 @@ var OuiSplitter = class {
 		this.types = getTypes(this);
 		if (this.types.auto) RESIZE_OBSERVER.observe(this.element);
 		else RESIZE_OBSERVER.unobserve(this.element);
-		if (this.types.horizontal) this.element.setAttribute(ATTRIBUTE_HORIZONTAL, "");
-		else this.element.removeAttribute(ATTRIBUTE_HORIZONTAL);
+		setAttribute(this.element, ATTRIBUTE_HORIZONTAL, this.types.horizontal ? "" : void 0);
 		setAriaOrientation(this);
 	}
 	updateValues() {
@@ -72,7 +73,7 @@ var OuiSplitterElement = class extends HTMLElement {
 	* Maximum size for the first panel
 	*/
 	set max(value) {
-		this.setAttribute(ATTRIBUTE_MAX, String(value));
+		if (typeof value === "number") setAttribute(this, ATTRIBUTE_MAX, value.toString());
 	}
 	/**
 	* Minimum size for the first panel
@@ -84,7 +85,7 @@ var OuiSplitterElement = class extends HTMLElement {
 	* Minimum size for the first panel
 	*/
 	set min(value) {
-		this.setAttribute(ATTRIBUTE_MIN, String(value));
+		if (typeof value === "number") setAttribute(this, ATTRIBUTE_MIN, value.toString());
 	}
 	/**
 	* Current size for the first panel
@@ -96,23 +97,23 @@ var OuiSplitterElement = class extends HTMLElement {
 	* Current size for the first panel
 	*/
 	set size(value) {
-		this.setAttribute(ATTRIBUTE_SIZE, String(value));
+		if (typeof value === "number") setAttribute(this, ATTRIBUTE_SIZE, value.toString());
 	}
 	/**
 	* Orientation of the splitter
 	*/
 	get type() {
-		return this.getAttribute(ATTRIBUTE_TYPE) ?? "vertical";
+		return getAttribute(this, ATTRIBUTE_TYPE) ?? "vertical";
 	}
 	/**
 	* Orientation of the splitter
 	*/
 	set type(value) {
-		this.setAttribute(ATTRIBUTE_TYPE, value);
+		setAttribute(this, ATTRIBUTE_TYPE, value);
 	}
 	constructor() {
 		super();
-		const panels = [...this.children].filter((child) => child instanceof HTMLElement);
+		const panels = [...this.children].filter((child) => child instanceof Element);
 		if (panels.length !== 2) throw new Error(MESSAGE);
 		this.#splitter = new OuiSplitter(this, panels);
 	}
@@ -138,17 +139,19 @@ var OuiSplitterElement = class extends HTMLElement {
 };
 function createHandle() {
 	const handle = document.createElement("span");
-	handle.setAttribute("aria-hidden", "true");
-	handle.setAttribute(ATTRIBUTE_HANDLE, "");
+	setAria(handle, "hidden", "true");
+	setAttribute(handle, ATTRIBUTE_HANDLE, "");
 	return handle;
 }
 function createSeparator(splitter) {
 	const separator = document.createElement("div");
 	separator.role = "separator";
 	separator.tabIndex = 0;
-	separator.setAttribute("aria-controls", splitter.element.id);
-	separator.setAttribute("aria-label", "Resize panels");
-	separator.setAttribute(ATTRIBUTE_SEPARATOR, "");
+	setAria(separator, {
+		controls: splitter.element.id,
+		label: "Resize panels"
+	});
+	setAttribute(separator, ATTRIBUTE_SEPARATOR, "");
 	return separator;
 }
 function getContained(min, value, max) {
@@ -160,7 +163,7 @@ function getSize(splitter, value) {
 	return getContained(splitter.values.min, fraction, splitter.values.max);
 }
 function getTypes(splitter, width, height) {
-	const type = splitter.element.getAttribute("type")?.trim() ?? "";
+	const type = getAttribute(splitter.element, "type");
 	if (type === "horizontal") return {
 		auto: false,
 		horizontal: true
@@ -175,7 +178,7 @@ function getTypes(splitter, width, height) {
 	};
 }
 function getValue(element, name, defaultValue) {
-	const value = element.getAttribute(name);
+	const value = getAttribute(element, name);
 	if (isNullableOrWhitespace(value)) return defaultValue;
 	const parsed = Number.parseFloat(value);
 	if (Number.isNaN(parsed)) return defaultValue;
@@ -235,8 +238,7 @@ function onObservation(entries) {
 			const splitter = MAPPED_ELEMENTS.get(entry.target);
 			if (splitter == null) return;
 			splitter.types = getTypes(splitter, entry.contentRect.width, entry.contentRect.height);
-			if (splitter.types.horizontal) splitter.element.setAttribute(ATTRIBUTE_HORIZONTAL, "");
-			else splitter.element.removeAttribute(ATTRIBUTE_HORIZONTAL);
+			setAttribute(splitter.element, ATTRIBUTE_HORIZONTAL, splitter.types.horizontal ? "" : void 0);
 			setAriaOrientation(splitter);
 		}
 		frame = void 0;
@@ -247,8 +249,8 @@ function onPointerdown(event) {
 	splitter = MAPPED_ELEMENTS.get(findAncestor(event, SELECTOR_HANDLE));
 	if (splitter == null) return;
 	if (supportsTouch.value) event.preventDefault();
-	splitter.handle.setAttribute(ATTRIBUTE_ACTIVE, "");
-	splitter.separator.setAttribute(ATTRIBUTE_ACTIVE, "");
+	setAttribute(splitter.handle, ATTRIBUTE_ACTIVE, "");
+	setAttribute(splitter.separator, ATTRIBUTE_ACTIVE, "");
 	splitter.rectangle = splitter.element.getBoundingClientRect();
 	STYLING_TOGGLER.set();
 }
@@ -264,17 +266,19 @@ function onPointerup() {
 	if (splitter != null) onEnd(false);
 }
 function setAriaOrientation(splitter) {
-	splitter.separator.setAttribute("aria-orientation", splitter.types.horizontal ? "horizontal" : "vertical");
+	setAria(splitter.separator, "orientation", splitter.types.horizontal ? "horizontal" : "vertical");
 }
 function setAriaValue(splitter) {
-	splitter.separator.setAttribute("aria-valuemax", String(splitter.values.max));
-	splitter.separator.setAttribute("aria-valuemin", String(splitter.values.min));
-	splitter.separator.setAttribute("aria-valuenow", String(splitter.values.now.current));
+	setAria(splitter.separator, {
+		valuemax: splitter.values.max,
+		valuemin: splitter.values.min,
+		valuenow: splitter.values.now.current
+	});
 }
 function setSize(splitter, size, previous) {
 	splitter.values.now.current = size;
 	if (previous) splitter.values.now.previous = size;
-	splitter.element.style.setProperty("--oui-splitter-size", `${size}`);
+	setStyle(splitter.element, "--oui-splitter-size", `${size}`);
 	setAriaValue(splitter);
 }
 const SELECTOR = "oui-splitter";