@oscarpalmer/oui 0.27.0 → 0.28.0

package/dist/css/floatable.css

@@ -30,6 +30,15 @@
   transition-delay: 0.125s;
 }
 
+:where([oui-dialog]) {
+  position: relative;
+}
+
+:where([oui-dialog-resizer]) {
+  position: absolute;
+  inset: auto 0 0 auto;
+}
+
 :where([oui-popover], [oui-tooltip-content]) {
   --margin-bottom: 0.5em;
   --margin-left: 0.5em;

package/dist/js/dialog.d.mts

@@ -1,4 +1,5 @@
 import { h as OuiMovable } from "./draggable-zszaW1qS.mjs";
+import { n as OuiResizable } from "./resizable.embedded-CXrUVPzR.mjs";
 import { RemovableEventListener } from "@oscarpalmer/toretto/models";
 
 //#region src/js/dialog.d.ts
@@ -32,6 +33,7 @@ type OuiDialogState = {
   listeners: RemovableEventListener[];
   modal: boolean;
   movable?: OuiMovable;
+  resizable?: OuiResizable;
 };
 /**
  * Get the _OuiDialog_ for an element

package/dist/js/dialog.mjs

@@ -2,6 +2,7 @@ import { getOnBeforeToggleListener } from "./floatable/floatable.embedded.mjs";
 import { attributable } from "./internal/attributable.mjs";
 import { ATTRIBUTE_MOVABLE_HANDLE, createMovable } from "./movable/movable.embedded.mjs";
 import "./movable/movable.standalone.mjs";
+import { RESIZABLE_ATTRIBUTE_HANDLE, createResizable } from "./resizable/resizable.embedded.mjs";
 import { on } from "@oscarpalmer/toretto/event";
 //#region src/js/dialog.ts
 var OuiDialog = class {
@@ -48,9 +49,13 @@ function destroyDialog(state) {
 	state.element.setAttribute(ARIA_MODAL, String(state.modal));
 	state.element.removeAttribute(ATTRIBUTE_OPEN);
 	for (const listener of state.listeners) listener();
+	state.movable?.destroy();
+	state.resizable?.destroy();
 	state.dialog = void 0;
 	state.element = void 0;
 	state.listeners = void 0;
+	state.movable = void 0;
+	state.resizable = void 0;
 }
 /**
 * Get the _OuiDialog_ for an element
@@ -67,6 +72,12 @@ function getMovable(element) {
 	for (const handle of handles) handle.setAttribute(ATTRIBUTE_MOVABLE_HANDLE, "");
 	return createMovable(element, { container: element.getAttribute(ATTRIBUTE_CONTAINER) ?? void 0 });
 }
+function getResizable(element) {
+	const handle = element.querySelector(SELECTOR_RESIZER);
+	if (handle == null) return;
+	handle.setAttribute(RESIZABLE_ATTRIBUTE_HANDLE, "");
+	return createResizable(element);
+}
 function getState(element) {
 	const state = {
 		element,
@@ -78,18 +89,23 @@ function getState(element) {
 				element.setAttribute(ARIA_MODAL, String(modal));
 				element.setAttribute(ATTRIBUTE_OPEN, "");
 				element.focus();
+				setTimeout(() => {
+					state.resizable?.set();
+				}, 500);
 			} else {
 				element.removeAttribute(ATTRIBUTE_OPEN);
 				element.setAttribute(ARIA_MODAL, String(state.modal));
 				element.style.inset = "";
 				element.style.position = "";
 				element.style.transform = "";
+				state.resizable?.reset();
 			}
 		})],
 		modal: element.getAttribute(ARIA_MODAL) === TRUE
 	};
 	state.dialog = new OuiDialog(state);
 	state.movable = getMovable(element);
+	state.resizable = getResizable(element);
 	return state;
 }
 function removeDialog(element) {
@@ -107,6 +123,7 @@ 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 = /* @__PURE__ */ new WeakMap();
 attributable(ATTRIBUTE, addDialog, removeDialog);

package/dist/js/index.d.mts

@@ -1,8 +1,9 @@
-import { g as createMovable, h as OuiMovable, t as CreateOuiDraggableOptions } from "./draggable-zszaW1qS.mjs";
+import { d as OuiSortable, f as createSortable, g as createMovable, h as OuiMovable, t as CreateOuiDraggableOptions } from "./draggable-zszaW1qS.mjs";
+import { a as createResizable, n as OuiResizable, t as CreateOuiResizableOptions } from "./resizable.embedded-CXrUVPzR.mjs";
 import { OuiDialog, getDialog } from "./dialog.mjs";
 import { c as createFloatable, i as OuiFloatable, n as CreateOuiFloatableOptions, o as OuiFloatablePosition } from "./floatable.embedded-YxGwzgbE.mjs";
 import { a as OuiFocusTrapOptions, i as OuiFocusTrap, o as createFocusTrap } from "./focus-trap.embedded-DR8NpZfr.mjs";
 import { OuiPopover, getPopover } from "./popover.mjs";
 import { OuiSplitterElement } from "./splitter.mjs";
 import { OuiTooltip, getTooltip, setTooltipDelay } from "./tooltip.mjs";
-export { type CreateOuiFloatableOptions, type CreateOuiDraggableOptions as CreateOuiMovableOptions, type OuiDialog, type OuiFloatable, type OuiFloatablePosition, type OuiFocusTrap, type OuiFocusTrapOptions, type OuiMovable, type OuiPopover, OuiSplitterElement, type OuiTooltip, createFloatable, createFocusTrap, createMovable, getDialog, getPopover, getTooltip, setTooltipDelay };
+export { type CreateOuiFloatableOptions, type CreateOuiDraggableOptions as CreateOuiMovableOptions, type CreateOuiDraggableOptions as CreateOuiSortableOptions, type CreateOuiResizableOptions, type OuiDialog, type OuiFloatable, type OuiFloatablePosition, type OuiFocusTrap, type OuiFocusTrapOptions, type OuiMovable, type OuiPopover, type OuiResizable, type OuiSortable, OuiSplitterElement, type OuiTooltip, createFloatable, createFocusTrap, createMovable, createResizable as createOuiResizable, createSortable, getDialog, getPopover, getTooltip, setTooltipDelay };

package/dist/js/index.mjs

@@ -1,13 +1,16 @@
 import { createFloatable } from "./floatable/floatable.embedded.mjs";
 import { createMovable } from "./movable/movable.embedded.mjs";
 import "./movable/movable.standalone.mjs";
+import { createResizable } from "./resizable/resizable.embedded.mjs";
 import { getDialog } from "./dialog.mjs";
-import "./sortable/sortable.embedded.mjs";
 import "./toolbar.mjs";
 import "./floatable/floatable.standalone.mjs";
 import { createFocusTrap } from "./focus-trap/focus-trap.embedded.mjs";
 import "./focus-trap/focus-trap.standalone.mjs";
 import { getPopover } from "./popover.mjs";
+import "./resizable/resizable.standalone.mjs";
+import { createSortable } from "./sortable/sortable.embedded.mjs";
+import "./sortable/sortable.standalone.mjs";
 import { OuiSplitterElement } from "./splitter.mjs";
 import { getTooltip, setTooltipDelay } from "./tooltip.mjs";
-export { OuiSplitterElement, createFloatable, createFocusTrap, createMovable, getDialog, getPopover, getTooltip, setTooltipDelay };
+export { OuiSplitterElement, createFloatable, createFocusTrap, createMovable, createResizable as createOuiResizable, createSortable, getDialog, getPopover, getTooltip, setTooltipDelay };

package/dist/js/internal/draggable.mjs

@@ -261,7 +261,7 @@ on(document, "keydown", onKeydown);
 on(document, "mousedown", onPointerdown);
 on(document, "pointermove", onPointermove);
 on(document, "pointerup", onPointerup);
-on(document, "touchcancel", onPointerup, { passive: false });
+on(document, "touchcancel", onPointerup);
 on(document, "touchstart", onPointerdown, { passive: false });
 //#endregion
 export { OuiDraggable, addDraggable, getDraggableStates, removeDraggable };

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,186 @@
+import { attributable } from "../internal/attributable.mjs";
+import { getPosition, on } from "@oscarpalmer/toretto/event";
+import { isPlainObject } from "@oscarpalmer/atoms/is";
+import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
+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 {
+	#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() {
+		this.#state.element.style.height = "";
+		this.#state.element.style.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()) {
+		element.style.height = `${height}px`;
+		element.style.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) {
+	element.setAttribute(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 ? 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]) };
+}
+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;
+	current.state.element.style.height = `${current.state.height}px`;
+	current.state.element.style.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/splitter.mjs

@@ -315,7 +315,7 @@ on(document, "keydown", onKeydown);
 on(document, "mousedown", onPointerdown);
 on(document, "pointermove", onPointermove);
 on(document, "pointerup", onPointerup);
-on(document, "touchcancel", onPointerup, { passive: false });
+on(document, "touchcancel", onPointerup);
 on(document, "touchstart", onPointerdown, { passive: false });
 //#endregion
 export { OuiSplitterElement };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oscarpalmer/oui",
-	"version": "0.27.0",
+	"version": "0.28.0",
 	"description": "Styles, components, and utilities for building websites and applications.",
 	"keywords": [
 		"css",
@@ -53,6 +53,10 @@
 			"types": "./dist/js/popover.d.mts",
 			"default": "./dist/js/popover.mjs"
 		},
+		"./resizable": {
+			"types": "./dist/js/resizable/resizable.standalone.d.mts",
+			"default": "./dist/js/resizable/resizable.standalone.mjs"
+		},
 		"./sortable": {
 			"types": "./dist/js/sortable/sortable.standalone.d.mts",
 			"default": "./dist/js/sortable/sortable.standalone.mjs"

package/src/css/floatable.scss

@@ -36,6 +36,15 @@
 	transition-delay: 0.125s;
 }
 
+:where([oui-dialog]) {
+	position: relative;
+}
+
+:where([oui-dialog-resizer]) {
+	position: absolute;
+	inset: auto 0 0 auto;
+}
+
 :where([oui-popover], [oui-tooltip-content]) {
 	@include mixins.floatable;
 }

package/src/css/form.scss

@@ -173,9 +173,9 @@
 
 	:where(
 		&.oui-validate:not([disabled], [readonly], [aria-disabled='true' i]):is(
-				:user-invalid:not([aria-invalid='false' i]),
-				[aria-invalid='true' i]
-			)
+			:user-invalid:not([aria-invalid='false' i]),
+			[aria-invalid='true' i]
+		)
 	) {
 		@include invalid;
 
@@ -201,9 +201,9 @@
 
 	:where(
 		&.oui-validate:not([disabled], [readonly], [aria-disabled='true' i]):is(
-				:user-valid:not([aria-invalid='true' i]),
-				[aria-invalid='false' i]
-			)
+			:user-valid:not([aria-invalid='true' i]),
+			[aria-invalid='false' i]
+		)
 	) {
 		@include valid;
 

package/src/js/dialog.ts

@@ -4,6 +4,8 @@ import {getOnBeforeToggleListener} from './floatable/floatable.embedded';
 import {attributable} from './internal/attributable';
 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';
 
 // #region Types
 
@@ -82,6 +84,7 @@ type OuiDialogState = {
 	listeners: RemovableEventListener[];
 	modal: boolean;
 	movable?: OuiMovable;
+	resizable?: OuiResizable;
 };
 
 // #endregion
@@ -108,9 +111,14 @@ function destroyDialog(state: OuiDialogState): void {
 		listener();
 	}
 
+	state.movable?.destroy();
+	state.resizable?.destroy();
+
 	state.dialog = undefined as never;
 	state.element = undefined as never;
 	state.listeners = undefined as never;
+	state.movable = undefined;
+	state.resizable = undefined;
 }
 
 /**
@@ -139,6 +147,18 @@ function getMovable(element: HTMLDialogElement): OuiMovable | undefined {
 	});
 }
 
+function getResizable(element: HTMLDialogElement): OuiResizable | undefined {
+	const handle = element.querySelector(SELECTOR_RESIZER);
+
+	if (handle == null) {
+		return;
+	}
+
+	handle.setAttribute(RESIZABLE_ATTRIBUTE_HANDLE, '');
+
+	return createResizable(element);
+}
+
 function getState(element: HTMLDialogElement): OuiDialogState {
 	const state: OuiDialogState = {
 		element,
@@ -157,6 +177,10 @@ function getState(element: HTMLDialogElement): OuiDialogState {
 					element.setAttribute(ATTRIBUTE_OPEN, '');
 
 					element.focus();
+
+					setTimeout(() => {
+						state.resizable?.set();
+					}, 500);
 				} else {
 					element.removeAttribute(ATTRIBUTE_OPEN);
 					element.setAttribute(ARIA_MODAL, String(state.modal));
@@ -164,6 +188,8 @@ function getState(element: HTMLDialogElement): OuiDialogState {
 					element.style.inset = '';
 					element.style.position = '';
 					element.style.transform = '';
+
+					state.resizable?.reset();
 				}
 			}),
 		],
@@ -171,7 +197,9 @@ function getState(element: HTMLDialogElement): OuiDialogState {
 	};
 
 	state.dialog = new OuiDialog(state);
+
 	state.movable = getMovable(element);
+	state.resizable = getResizable(element);
 
 	return state;
 }
@@ -210,6 +238,8 @@ const SELECTOR_MOVER = `[${ATTRIBUTE}-mover]`;
 
 const SELECTOR_MODAL = ':modal';
 
+const SELECTOR_RESIZER = `[${ATTRIBUTE}-resizer]`;
+
 const TRUE = 'true';
 
 const states = new WeakMap<HTMLElement, OuiDialogState>();

package/src/js/index.ts

@@ -1,4 +1,3 @@
-import './sortable/sortable.embedded';
 import './toolbar';
 
 export * from './dialog';
@@ -6,5 +5,7 @@ export * from './floatable/floatable.standalone';
 export * from './focus-trap/focus-trap.standalone';
 export * from './movable/movable.standalone';
 export * from './popover';
+export * from './resizable/resizable.standalone';
+export * from './sortable/sortable.standalone';
 export * from './splitter';
 export * from './tooltip';

package/src/js/internal/draggable.ts

@@ -650,7 +650,7 @@ on(document, 'keydown', onKeydown);
 on(document, 'mousedown', onPointerdown);
 on(document, 'pointermove', onPointermove);
 on(document, 'pointerup', onPointerup);
-on(document, 'touchcancel', onPointerup, {passive: false});
+on(document, 'touchcancel', onPointerup);
 on(document, 'touchstart', onPointerdown, {passive: false});
 
 // #endregion

package/src/js/resizable/resizable.embedded.ts

@@ -0,0 +1,383 @@
+import {isPlainObject} from '@oscarpalmer/atoms/is';
+import type {EventPosition} from '@oscarpalmer/atoms/models';
+import {getNumber} from '@oscarpalmer/atoms/number';
+import {getPosition, on} from '@oscarpalmer/toretto/event';
+import {findAncestor} from '@oscarpalmer/toretto/find';
+import {isHTMLOrSVGElement} from '@oscarpalmer/toretto/is';
+import {toggleStyles, type StyleToggler} from '@oscarpalmer/toretto/style';
+import supportsTouch from '@oscarpalmer/toretto/touch';
+import {attributable} from '../internal/attributable';
+
+// #region Types
+
+export type CreateOuiResizableOptions = {
+	maximumHeight?: number;
+	maximumWidth?: number;
+	minimumHeight?: number;
+	minimumWidth?: number;
+};
+
+export class OuiResizable {
+	readonly #state: OuiResizableState;
+
+	constructor(state: OuiResizableState) {
+		this.#state = state;
+	}
+
+	destroy(): void {
+		destroyResizable(this.#state);
+	}
+
+	set(): void {
+		const [width, height] = getAndSetDimensions(this.#state.element, this.#state.options);
+
+		console.log('set', width, height);
+
+		this.#state.width = width;
+		this.#state.height = height;
+	}
+
+	reset(): void {
+		this.#state.element.style.height = '';
+		this.#state.element.style.width = '';
+	}
+}
+
+type OuiResizableItem = {
+	instance: OuiResizable;
+	state: OuiResizableState;
+};
+
+type OuiResizableState = {
+	element: HTMLElement;
+	handle: HTMLElement;
+	height: number;
+	options: Required<CreateOuiResizableOptions>;
+	styles: StyleToggler;
+	width: number;
+};
+
+// #endregion
+
+// #region Functions
+
+function addResizable(
+	element: HTMLElement,
+	options?: CreateOuiResizableOptions,
+): OuiResizable | undefined {
+	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);
+		const instance = new OuiResizable(state);
+
+		item = {
+			instance,
+			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
+ */
+export function createResizable(
+	element: HTMLElement,
+	options?: CreateOuiResizableOptions,
+): OuiResizable {
+	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: OuiResizableState): void {
+	state.element = undefined as never;
+	state.handle = undefined as never;
+}
+
+function getAndSetDimensions(
+	element: HTMLElement,
+	options: Required<CreateOuiResizableOptions>,
+	input?: Pick<DOMRect, 'height' | 'width'>,
+): [number, number] {
+	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()) {
+		element.style.height = `${height}px`;
+		element.style.width = `${width}px`;
+	}
+
+	return [width, height];
+}
+
+function getProperties(
+	element: HTMLElement,
+	widthProperty: 'maxWidth' | 'minWidth',
+	heightProperty: 'maxHeight' | 'minHeight',
+): [string, string] {
+	const computed = getComputedStyle(element);
+
+	return [computed[widthProperty], computed[heightProperty]];
+}
+
+function getRestrictions(
+	maximum: string | [unknown, unknown],
+	minimum: string | [unknown, unknown],
+): Required<CreateOuiResizableOptions> {
+	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: HTMLElement,
+	handle: HTMLElement,
+	input?: CreateOuiResizableOptions,
+): OuiResizableState {
+	element.setAttribute(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: HTMLElement,
+	input?: CreateOuiResizableOptions,
+): Required<CreateOuiResizableOptions> {
+	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],
+		),
+	};
+}
+
+function getXAndY(first: unknown, second?: unknown): [number, number] {
+	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: KeyboardEvent): void {
+	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`;
+
+	resetResizable();
+}
+
+function onPointerdown(event: MouseEvent | TouchEvent): void {
+	if (
+		event.altKey ||
+		event.ctrlKey ||
+		event.metaKey ||
+		event.shiftKey ||
+		(supportsTouch.value
+			? event.type === 'mousedown'
+			: event.type === 'touchstart' || (event as MouseEvent).button !== 0)
+	) {
+		return;
+	}
+
+	const handle = findAncestor(event, SELECTOR_HANDLE);
+	const element = handle && findAncestor(handle, SELECTOR);
+	const stored = element && items.get(element as HTMLElement);
+	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: MouseEvent | TouchEvent): void {
+	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(): void {
+	if (current == null) {
+		return;
+	}
+
+	const {height, width} = current.state.element.getBoundingClientRect();
+
+	current.state.height = height;
+	current.state.width = width;
+
+	resetResizable();
+}
+
+function removeResizable(element: HTMLElement): void {
+	items.get(element)?.instance.destroy();
+
+	items.delete(element);
+}
+
+function resetResizable(): void {
+	current?.state.styles.remove();
+	styleToggler.remove();
+
+	current = undefined;
+	start = undefined;
+}
+
+// #endregion
+
+// #region Variables
+
+export const RESIZABLE_ATTRIBUTE = 'oui-resizable';
+
+export 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 = new WeakMap<HTMLElement, OuiResizableItem>();
+
+const styles = {
+	touchAction: 'none',
+	userSelect: 'none',
+	webkitUserSelect: 'none',
+};
+
+const styleToggler = toggleStyles(document.body, styles);
+
+let current: OuiResizableItem | undefined;
+
+let start: EventPosition | undefined;
+
+// #endregion
+
+// #region Initialization
+
+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

package/src/js/resizable/resizable.standalone.ts

@@ -0,0 +1,5 @@
+export {
+	createResizable as createOuiResizable,
+	type CreateOuiResizableOptions,
+	type OuiResizable,
+} from './resizable.embedded';

package/src/js/splitter.ts

@@ -557,5 +557,5 @@ on(document, 'keydown', onKeydown);
 on(document, 'mousedown', onPointerdown);
 on(document, 'pointermove', onPointermove);
 on(document, 'pointerup', onPointerup);
-on(document, 'touchcancel', onPointerup, {passive: false});
+on(document, 'touchcancel', onPointerup);
 on(document, 'touchstart', onPointerdown, {passive: false});