@oscarpalmer/oui 0.27.0 → 0.29.0

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,11 +108,7 @@ 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`,
 	position: "below-start",
@@ -102,6 +116,7 @@ const options = {
 };
 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.d.mts

@@ -0,0 +1,2 @@
+import { a as createResizable, i as RESIZABLE_ATTRIBUTE_HANDLE, n as OuiResizable, r as RESIZABLE_ATTRIBUTE, t as CreateOuiResizableOptions } from "../resizable.embedded-CXrUVPzR.mjs";
+export { CreateOuiResizableOptions, OuiResizable, RESIZABLE_ATTRIBUTE, RESIZABLE_ATTRIBUTE_HANDLE, createResizable };

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

@@ -0,0 +1,191 @@
+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 supportsTouch from "@oscarpalmer/toretto/touch";
+//#region src/js/resizable/resizable.embedded.ts
+var OuiResizable = class {
+	#state;
+	constructor(state) {
+		this.#state = state;
+	}
+	destroy() {
+		destroyResizable(this.#state);
+	}
+	set() {
+		const [width, height] = getAndSetDimensions(this.#state.element, this.#state.options);
+		console.log("set", width, height);
+		this.#state.width = width;
+		this.#state.height = height;
+	}
+	reset() {
+		setStyles(this.#state.element, {
+			height: "",
+			width: ""
+		});
+	}
+};
+function addResizable(element, options) {
+	let item = items.get(element);
+	if (item == null) {
+		const handle = element.querySelector(SELECTOR_HANDLE_SCOPED);
+		if (!isHTMLOrSVGElement(handle)) return;
+		const state = getState(element, handle, options);
+		item = {
+			instance: new OuiResizable(state),
+			state
+		};
+		items.set(element, item);
+	}
+	return item?.instance;
+}
+/**
+* Creates _(or retrieves)_ a _OuiResizable_ instance for an element
+*
+* @param element Element to make resizable
+* @returns _OuiResizable_ instance
+*/
+function createResizable(element, options) {
+	if (!isHTMLOrSVGElement(element)) throw new TypeError(MESSAGE_ELEMENT);
+	if (!isHTMLOrSVGElement(element.querySelector(SELECTOR_HANDLE_SCOPED))) throw new Error(MESSAGE_HANDLE);
+	return addResizable(element, options ?? {});
+}
+function destroyResizable(state) {
+	state.element = void 0;
+	state.handle = void 0;
+}
+function getAndSetDimensions(element, options, input) {
+	let { height, width } = input ?? element.getBoundingClientRect();
+	if (options.maximumWidth > -1 && width > options.maximumWidth) width = options.maximumWidth;
+	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()) setStyles(element, {
+		height: `${height}px`,
+		width: `${width}px`
+	});
+	return [width, height];
+}
+function getProperties(element, widthProperty, heightProperty) {
+	const computed = getComputedStyle(element);
+	return [computed[widthProperty], computed[heightProperty]];
+}
+function getRestrictions(maximum, minimum) {
+	const [maximumWidth, maximumHeight] = getXAndY.apply(null, typeof maximum === "string" ? [maximum] : maximum);
+	const [minimumWidth, minimumHeight] = getXAndY.apply(null, typeof minimum === "string" ? [minimum] : minimum);
+	if (maximumWidth > -1 && minimumWidth > -1 && maximumWidth <= minimumWidth) throw new Error(MESSAGE_WIDTH);
+	if (maximumHeight > -1 && minimumHeight > -1 && maximumHeight <= minimumHeight) throw new Error(MESSAGE_HEIGHT);
+	return {
+		maximumHeight,
+		maximumWidth,
+		minimumHeight,
+		minimumWidth
+	};
+}
+function getState(element, handle, input) {
+	setAttribute(element, RESIZABLE_ATTRIBUTE, "");
+	const options = getValidOptions(element, input);
+	const [width, height] = getAndSetDimensions(element, options);
+	return {
+		element,
+		handle,
+		height,
+		options,
+		width,
+		styles: toggleStyles(element, styles)
+	};
+}
+function getValidOptions(element, input) {
+	const original = isPlainObject(input) ? input : {};
+	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];
+	let xAsNumber = typeof x === "string" ? Number.parseFloat(x) : getNumber(x);
+	let yAsNumber = typeof y === "string" ? Number.parseFloat(y) : getNumber(y);
+	if (Number.isNaN(xAsNumber) || xAsNumber <= 0) xAsNumber = -1;
+	if (Number.isNaN(yAsNumber) || yAsNumber <= 0) yAsNumber = -1;
+	return [xAsNumber, yAsNumber];
+}
+function onKeydown(event) {
+	if (current == null || event.key !== "Escape") return;
+	setStyles(current.state.element, {
+		height: `${current.state.height}px`,
+		width: `${current.state.width}px`
+	});
+	resetResizable();
+}
+function onPointerdown(event) {
+	if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || (supportsTouch.value ? event.type === "mousedown" : event.type === "touchstart" || event.button !== 0)) return;
+	const handle = findAncestor(event, SELECTOR_HANDLE);
+	const element = handle && findAncestor(handle, SELECTOR);
+	const stored = element && items.get(element);
+	const position = getPosition(event);
+	if (stored == null || position == null) return;
+	if (supportsTouch.value) event.preventDefault();
+	current = stored;
+	start = position;
+	current.state.styles.set();
+	styleToggler.set();
+}
+function onPointermove(event) {
+	if (current == null) return;
+	const { x, y } = getPosition(event) ?? {};
+	if (x == null || y == null) return;
+	const width = current.state.width + (x - (start?.x ?? 0));
+	const height = current.state.height + (y - (start?.y ?? 0));
+	getAndSetDimensions(current.state.element, current.state.options, {
+		height,
+		width
+	});
+}
+function onPointerup() {
+	if (current == null) return;
+	const { height, width } = current.state.element.getBoundingClientRect();
+	current.state.height = height;
+	current.state.width = width;
+	resetResizable();
+}
+function removeResizable(element) {
+	items.get(element)?.instance.destroy();
+	items.delete(element);
+}
+function resetResizable() {
+	current?.state.styles.remove();
+	styleToggler.remove();
+	current = void 0;
+	start = void 0;
+}
+const RESIZABLE_ATTRIBUTE = "oui-resizable";
+const RESIZABLE_ATTRIBUTE_HANDLE = `${RESIZABLE_ATTRIBUTE}-handle`;
+const ATTRIBUTE_MAXIMUM = `${RESIZABLE_ATTRIBUTE}-maximum`;
+const ATTRIBUTE_MINIMUM = `${RESIZABLE_ATTRIBUTE}-minimum`;
+const MESSAGE_ELEMENT = "The element must be an instance of HTMLElement or SVGElement";
+const MESSAGE_HEIGHT = "The maximum height must be greater than the minimum height";
+const MESSAGE_HANDLE = `The element must contain a child with the attribute "${RESIZABLE_ATTRIBUTE_HANDLE}"`;
+const MESSAGE_WIDTH = "The maximum width must be greater than the minimum width";
+const SELECTOR = `[${RESIZABLE_ATTRIBUTE}]`;
+const SELECTOR_HANDLE = `[${RESIZABLE_ATTRIBUTE_HANDLE}]`;
+const SELECTOR_HANDLE_SCOPED = `:scope > ${SELECTOR_HANDLE}`;
+const items = /* @__PURE__ */ new WeakMap();
+const styles = {
+	touchAction: "none",
+	userSelect: "none",
+	webkitUserSelect: "none"
+};
+const styleToggler = toggleStyles(document.body, styles);
+let current;
+let start;
+on(document, "keydown", onKeydown);
+on(document, "mousedown", onPointerdown);
+on(document, "pointermove", onPointermove);
+on(document, "pointerup", onPointerup);
+on(document, "touchcancel", onPointerup);
+on(document, "touchstart", onPointerdown, { passive: false });
+attributable(RESIZABLE_ATTRIBUTE, addResizable, removeResizable);
+//#endregion
+export { OuiResizable, RESIZABLE_ATTRIBUTE, RESIZABLE_ATTRIBUTE_HANDLE, createResizable };

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

@@ -0,0 +1,2 @@
+import { a as createResizable, n as OuiResizable, t as CreateOuiResizableOptions } from "../resizable.embedded-CXrUVPzR.mjs";
+export { type CreateOuiResizableOptions, type OuiResizable, createResizable as createOuiResizable };

package/dist/js/resizable/resizable.standalone.mjs

@@ -0,0 +1,2 @@
+import { createResizable } from "./resizable.embedded.mjs";
+export { createResizable as createOuiResizable };

package/dist/js/resizable.embedded-CXrUVPzR.d.mts

@@ -0,0 +1,35 @@
+import { StyleToggler } from "@oscarpalmer/toretto/style";
+
+//#region src/js/resizable/resizable.embedded.d.ts
+type CreateOuiResizableOptions = {
+  maximumHeight?: number;
+  maximumWidth?: number;
+  minimumHeight?: number;
+  minimumWidth?: number;
+};
+declare class OuiResizable {
+  #private;
+  constructor(state: OuiResizableState);
+  destroy(): void;
+  set(): void;
+  reset(): void;
+}
+type OuiResizableState = {
+  element: HTMLElement;
+  handle: HTMLElement;
+  height: number;
+  options: Required<CreateOuiResizableOptions>;
+  styles: StyleToggler;
+  width: number;
+};
+/**
+ * Creates _(or retrieves)_ a _OuiResizable_ instance for an element
+ *
+ * @param element Element to make resizable
+ * @returns _OuiResizable_ instance
+ */
+declare function createResizable(element: HTMLElement, options?: CreateOuiResizableOptions): OuiResizable;
+declare const RESIZABLE_ATTRIBUTE = "oui-resizable";
+declare const RESIZABLE_ATTRIBUTE_HANDLE = "oui-resizable-handle";
+//#endregion
+export { createResizable as a, RESIZABLE_ATTRIBUTE_HANDLE as i, OuiResizable as n, RESIZABLE_ATTRIBUTE as r, CreateOuiResizableOptions as t };

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 };