@oscarpalmer/oui 0.38.0 → 0.40.0

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

@@ -1,38 +1,43 @@
 import { attributable } from "../internal/attributable.mjs";
-import { OuiDraggable, addDraggable, getDraggableStates, removeDraggable } from "../internal/draggable.mjs";
+import { DRAGGABLE_SYMBOL } from "../internal/draggable/draggable.model.mjs";
+import { addDraggable, destroyDraggable, getDraggableElement, getDraggableStates, initializeDraggable, removeDraggable } from "../internal/draggable/index.mjs";
+import { SORTABLE_ATTRIBUTE, SORTABLE_ATTRIBUTE_ACTIVE, SORTABLE_ATTRIBUTE_CONNECTIONS, SORTABLE_ATTRIBUTE_CONTAINER, SORTABLE_ATTRIBUTE_DIRECTION, SORTABLE_ATTRIBUTE_HORIZONTAL, SORTABLE_ATTRIBUTE_ORIGIN, SORTABLE_ATTRIBUTE_PLACEHOLDER_DRAG, SORTABLE_ATTRIBUTE_PLACEHOLDER_POSITION, SORTABLE_ATTRIBUTE_VERTICAL, SORTABLE_CONTAINERS, SORTABLE_MESSAGE, SORTABLE_SELECTOR_ITEM, sortablePlaceholder } from "./sortable.model.mjs";
 import { getAttribute, setAttribute, setAttributes } from "@oscarpalmer/toretto/attribute";
-import { createElement } from "@oscarpalmer/toretto/create";
 import { dispatch, getEventPosition } from "@oscarpalmer/toretto/event";
 import { findAncestor, getElementFromPosition } from "@oscarpalmer/toretto/find";
-import { setStyle } from "@oscarpalmer/toretto/style";
 import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
+import { setStyle } from "@oscarpalmer/toretto/style";
+import { createElement } from "@oscarpalmer/toretto/create";
 //#region src/js/sortable/sortable.embedded.ts
-var OuiSortable = class extends OuiDraggable {
-	constructor(element, options) {
-		super("sortable", "sort", ATTRIBUTE, element, {
-			container: {
-				attribute: ATTRIBUTE_CONTAINER,
-				map: CONTAINERS
-			},
-			direction: { attribute: ATTRIBUTE_DIRECTION },
-			drag: {
-				onBegin,
-				onCancel,
-				onEnd,
-				onMove
-			},
-			input: options,
-			position: {
-				getOffset: getOffsetPosition,
-				getOriginal: getOriginalPosition
-			},
-			getDragged: getDragPlaceholder,
-			getOrigin: () => (getDraggableStates(element)?.sortable)?.origin
-		}, { connections: getAttribute(element, ATTRIBUTE_CONNECTIONS) });
-	}
-};
+function OuiSortable(element, options) {
+	this[DRAGGABLE_SYMBOL] = initializeDraggable(this, "sortable", "sort", SORTABLE_ATTRIBUTE, element, {
+		container: {
+			attribute: SORTABLE_ATTRIBUTE_CONTAINER,
+			map: SORTABLE_CONTAINERS
+		},
+		direction: { attribute: SORTABLE_ATTRIBUTE_DIRECTION },
+		drag: {
+			onBegin,
+			onCancel,
+			onEnd,
+			onMove
+		},
+		input: options,
+		position: {
+			getOffset: getOffsetPosition,
+			getOriginal: getOriginalPosition
+		},
+		getDragged: getDragPlaceholder,
+		getOrigin: () => (getDraggableStates(element)?.sortable)?.origin
+	}, { connections: getAttribute(element, SORTABLE_ATTRIBUTE_CONNECTIONS) });
+}
+OuiSortable.prototype.destroy = destroySortable;
+Object.defineProperties(OuiSortable.prototype, { element: {
+	enumerable: true,
+	get: getDraggableElement
+} });
 function afterEnd(insert, from, events, elements, position, valid) {
-	elements.origin?.removeAttribute(ATTRIBUTE_ORIGIN);
+	elements.origin?.removeAttribute(SORTABLE_ATTRIBUTE_ORIGIN);
 	from.state.origin = void 0;
 	resetPlaceholders();
 	if (!valid || events.some((event) => event?.defaultPrevented)) return;
@@ -46,7 +51,7 @@ function afterEnd(insert, from, events, elements, position, valid) {
 	if (position.y < top + height / 2) insertion = "beforebegin";
 	else insertion = "afterend";
 	elements.target?.insertAdjacentElement(insertion, elements.origin);
-	document.body.removeAttribute(ATTRIBUTE_ACTIVE);
+	document.body.removeAttribute(SORTABLE_ATTRIBUTE_ACTIVE);
 }
 /**
 * Creates _(or retrieves)_ a _OuiSortable_ instance for an element
@@ -55,12 +60,15 @@ function afterEnd(insert, from, events, elements, position, valid) {
 * @returns _OuiSortable_ instance
 */
 function createSortable(element, options) {
-	if (!isHTMLOrSVGElement(element)) throw new TypeError(MESSAGE);
+	if (!isHTMLOrSVGElement(element)) throw new TypeError(SORTABLE_MESSAGE);
 	return addSortable(element, options);
 }
+function destroySortable() {
+	destroyDraggable(this);
+}
 function getDragPlaceholder() {
-	placeholder.drag.default ??= createElement("div");
-	return placeholder.drag.custom ?? placeholder.drag.default;
+	sortablePlaceholder.drag.default ??= createElement("div");
+	return sortablePlaceholder.drag.custom ?? sortablePlaceholder.drag.default;
 }
 function getOffsetPosition(_, item, element, position) {
 	const rectangle = element.getBoundingClientRect();
@@ -73,20 +81,20 @@ function getOriginalPosition(_, __, position) {
 	return position;
 }
 function getPositionPlaceholder(item) {
-	placeholder.position ??= createElement("div");
-	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;
+	sortablePlaceholder.position ??= createElement("div");
+	setAttribute(sortablePlaceholder.position, SORTABLE_ATTRIBUTE_PLACEHOLDER_POSITION, "");
+	if (item.state.origin != null) setStyle(sortablePlaceholder.position, "--placeholder-height", `${item.state.origin.getBoundingClientRect().height}px`);
+	return sortablePlaceholder.position;
 }
 function onBegin(_, globals, item, element) {
 	item.state.origin = element;
 	setPlaceholder(globals, item, element);
-	setAttribute(element, ATTRIBUTE_ORIGIN, "");
-	setAttribute(document.body, ATTRIBUTE_ACTIVE, "");
+	setAttribute(element, SORTABLE_ATTRIBUTE_ORIGIN, "");
+	setAttribute(document.body, SORTABLE_ATTRIBUTE_ACTIVE, "");
 }
 function onCancel(_, item) {
-	item.state.origin?.removeAttribute(ATTRIBUTE_ORIGIN);
-	document.body.removeAttribute(ATTRIBUTE_ACTIVE);
+	item.state.origin?.removeAttribute(SORTABLE_ATTRIBUTE_ORIGIN);
+	document.body.removeAttribute(SORTABLE_ATTRIBUTE_ACTIVE);
 	resetPlaceholders();
 	item.state.origin = void 0;
 }
@@ -97,16 +105,16 @@ function onEnd(event, globals, item, reset) {
 		y: 0
 	};
 	const target = getElementFromPosition(position)[0];
-	let element = findAncestor(target, SELECTOR_ITEM);
-	if (element?.hasAttribute(ATTRIBUTE_PLACEHOLDER_POSITION)) {
-		if (getAttribute(element, ATTRIBUTE_PLACEHOLDER_POSITION) === "after") element = element.previousElementSibling;
+	let element = findAncestor(target, SORTABLE_SELECTOR_ITEM);
+	if (element?.hasAttribute(SORTABLE_ATTRIBUTE_PLACEHOLDER_POSITION)) {
+		if (getAttribute(element, SORTABLE_ATTRIBUTE_PLACEHOLDER_POSITION) === "after") element = element.previousElementSibling;
 		else element = element.nextElementSibling;
 	}
 	let insert = "insert";
 	let toInstance;
 	let toState;
 	if (element == null) {
-		element = findAncestor(target, SELECTOR);
+		element = findAncestor(target, SORTABLE_SELECTOR_ITEM);
 		toInstance = globals.instances.get(element)?.sortable;
 		toState = globals.states.get(element)?.sortable;
 		insert = element == null ? void 0 : element.children.length === 0 ? "append" : "prepend";
@@ -145,11 +153,11 @@ function onEnd(event, globals, item, reset) {
 }
 function onMove(event, globals, item, position) {
 	const fromElement = item.state.origin;
-	const toElement = findAncestor(event, SELECTOR_ITEM);
+	const toElement = findAncestor(event, SORTABLE_SELECTOR_ITEM);
 	let toInstance;
 	let toState;
 	if (toElement == null) {
-		const element = findAncestor(event, SELECTOR);
+		const element = findAncestor(event, SORTABLE_SELECTOR_ITEM);
 		toInstance = globals.instances.get(element)?.sortable;
 		toState = globals.states.get(element)?.sortable;
 	} else {
@@ -171,7 +179,7 @@ function onMove(event, globals, item, position) {
 			place = "after";
 			toElement.insertAdjacentElement("afterend", placeholder);
 		}
-		setAttribute(placeholder, ATTRIBUTE_PLACEHOLDER_POSITION, place);
+		setAttribute(placeholder, SORTABLE_ATTRIBUTE_PLACEHOLDER_POSITION, place);
 	} else placeholder.remove();
 	return {
 		from: {
@@ -185,23 +193,23 @@ function onMove(event, globals, item, position) {
 	};
 }
 function resetPlaceholders() {
-	placeholder.drag.custom?.remove();
-	placeholder.drag.default?.remove();
-	placeholder.position?.remove();
-	placeholder.drag.custom = void 0;
+	sortablePlaceholder.drag.custom?.remove();
+	sortablePlaceholder.drag.default?.remove();
+	sortablePlaceholder.position?.remove();
+	sortablePlaceholder.drag.custom = void 0;
 }
 function setPlaceholder(state, item, origin) {
 	const element = getDragPlaceholder();
-	placeholder.drag.default.innerHTML = "";
+	if (sortablePlaceholder.drag.default != null) sortablePlaceholder.drag.default.innerHTML = "";
 	updatePlaceholder(item, element);
 	const dispatched = dispatch(item.instance.element, "sortable:placeholder", { detail: {
 		origin,
-		parent: item.state.element,
+		parent: item.instance.element,
 		placeholder: element,
 		create: (value) => {
 			if (!isHTMLOrSVGElement(value)) return;
 			const element = value;
-			placeholder.drag.custom = element;
+			sortablePlaceholder.drag.custom = element;
 			updatePlaceholder(item, element);
 			state.element = {
 				rectangle: element.getBoundingClientRect(),
@@ -210,18 +218,18 @@ function setPlaceholder(state, item, origin) {
 		}
 	} });
 	setTimeout(() => {
-		if (!dispatched.defaultPrevented && placeholder.drag.custom == null) placeholder.drag.default?.append(element.cloneNode(true));
-		document.body.append(placeholder.drag.custom ?? placeholder.drag.default ?? "");
+		if (!dispatched.defaultPrevented && sortablePlaceholder.drag.custom == null) sortablePlaceholder.drag.default?.append(element.cloneNode(true));
+		document.body.append(sortablePlaceholder.drag.custom ?? sortablePlaceholder.drag.default ?? "");
 	});
 }
 function updatePlaceholder(item, element) {
-	setAttribute(element, ATTRIBUTE_PLACEHOLDER_DRAG, "");
+	setAttribute(element, SORTABLE_ATTRIBUTE_PLACEHOLDER_DRAG, "");
 	setStyle(element, "position", "fixed");
 	const state = getDraggableStates(item.state.element)?.sortable;
 	if (state == null) return;
 	setAttributes(element, {
-		[ATTRIBUTE_HORIZONTAL]: state.horizontal ? "" : void 0,
-		[ATTRIBUTE_VERTICAL]: state.vertical ? "" : void 0
+		[SORTABLE_ATTRIBUTE_HORIZONTAL]: state.horizontal ? "" : void 0,
+		[SORTABLE_ATTRIBUTE_VERTICAL]: state.vertical ? "" : void 0
 	});
 }
 function validatePosition(_, from, to, position) {
@@ -234,33 +242,12 @@ function validatePosition(_, from, to, position) {
 	if (valid && to?.state.connections != null) valid = from.state.element.matches(to.state.connections);
 	return valid;
 }
-const ATTRIBUTE = "oui-sortable";
-const ATTRIBUTE_ACTIVE = `${ATTRIBUTE}-active`;
-const ATTRIBUTE_CONNECTIONS = `${ATTRIBUTE}-connections`;
-const ATTRIBUTE_CONTAINER = `${ATTRIBUTE}-container`;
-const ATTRIBUTE_DIRECTION = `${ATTRIBUTE}-direction`;
-const ATTRIBUTE_HORIZONTAL = `${ATTRIBUTE}-horizontal`;
-const ATTRIBUTE_ORIGIN = `${ATTRIBUTE}-origin`;
-const ATTRIBUTE_PLACEHOLDER_DRAG = `${ATTRIBUTE}-placeholder-drag`;
-const ATTRIBUTE_PLACEHOLDER_POSITION = `${ATTRIBUTE}-placeholder-position`;
-const ATTRIBUTE_VERTICAL = `${ATTRIBUTE}-vertical`;
-const CONTAINERS = /* @__PURE__ */ new Map();
-const MESSAGE = "The element must be an instance of HTMLElement or SVGElement";
-const SELECTOR = `[${ATTRIBUTE}]`;
-const SELECTOR_ITEM = `[${ATTRIBUTE}] > *`;
 const bound = {
 	constructor: OuiSortable,
 	property: "sortable"
 };
-const placeholder = {
-	drag: {
-		custom: void 0,
-		default: void 0
-	},
-	position: void 0
-};
 const addSortable = addDraggable.bind(bound);
 const removeSortable = removeDraggable.bind(bound);
-attributable(ATTRIBUTE, addSortable, removeSortable);
+attributable(SORTABLE_ATTRIBUTE, addSortable, removeSortable);
 //#endregion
-export { OuiSortable, createSortable };
+export { createSortable };

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

@@ -0,0 +1,2 @@
+import { $ as OuiSortable, _t as sortablePlaceholder, at as SORTABLE_ATTRIBUTE_CONNECTIONS, ct as SORTABLE_ATTRIBUTE_HORIZONTAL, dt as SORTABLE_ATTRIBUTE_PLACEHOLDER_POSITION, et as OuiSortablePlaceholder, ft as SORTABLE_ATTRIBUTE_VERTICAL, gt as SORTABLE_SELECTOR_ITEM, ht as SORTABLE_SELECTOR, it as SORTABLE_ATTRIBUTE_ACTIVE, lt as SORTABLE_ATTRIBUTE_ORIGIN, mt as SORTABLE_MESSAGE, nt as OuiSortableState, ot as SORTABLE_ATTRIBUTE_CONTAINER, pt as SORTABLE_CONTAINERS, rt as SORTABLE_ATTRIBUTE, st as SORTABLE_ATTRIBUTE_DIRECTION, tt as OuiSortablePlaceholderDrag, ut as SORTABLE_ATTRIBUTE_PLACEHOLDER_DRAG } from "../movable.model-BHaK_mKw.mjs";
+export { OuiSortable, OuiSortablePlaceholder, OuiSortablePlaceholderDrag, OuiSortableState, SORTABLE_ATTRIBUTE, SORTABLE_ATTRIBUTE_ACTIVE, SORTABLE_ATTRIBUTE_CONNECTIONS, SORTABLE_ATTRIBUTE_CONTAINER, SORTABLE_ATTRIBUTE_DIRECTION, SORTABLE_ATTRIBUTE_HORIZONTAL, SORTABLE_ATTRIBUTE_ORIGIN, SORTABLE_ATTRIBUTE_PLACEHOLDER_DRAG, SORTABLE_ATTRIBUTE_PLACEHOLDER_POSITION, SORTABLE_ATTRIBUTE_VERTICAL, SORTABLE_CONTAINERS, SORTABLE_MESSAGE, SORTABLE_SELECTOR, SORTABLE_SELECTOR_ITEM, sortablePlaceholder };

package/dist/js/sortable/sortable.model.mjs

@@ -0,0 +1,24 @@
+//#region src/js/sortable/sortable.model.ts
+const SORTABLE_ATTRIBUTE = "oui-sortable";
+const SORTABLE_ATTRIBUTE_ACTIVE = `${SORTABLE_ATTRIBUTE}-active`;
+const SORTABLE_ATTRIBUTE_CONNECTIONS = `${SORTABLE_ATTRIBUTE}-connections`;
+const SORTABLE_ATTRIBUTE_CONTAINER = `${SORTABLE_ATTRIBUTE}-container`;
+const SORTABLE_ATTRIBUTE_DIRECTION = `${SORTABLE_ATTRIBUTE}-direction`;
+const SORTABLE_ATTRIBUTE_HORIZONTAL = `${SORTABLE_ATTRIBUTE}-horizontal`;
+const SORTABLE_ATTRIBUTE_ORIGIN = `${SORTABLE_ATTRIBUTE}-origin`;
+const SORTABLE_ATTRIBUTE_PLACEHOLDER_DRAG = `${SORTABLE_ATTRIBUTE}-placeholder-drag`;
+const SORTABLE_ATTRIBUTE_PLACEHOLDER_POSITION = `${SORTABLE_ATTRIBUTE}-placeholder-position`;
+const SORTABLE_ATTRIBUTE_VERTICAL = `${SORTABLE_ATTRIBUTE}-vertical`;
+const SORTABLE_CONTAINERS = /* @__PURE__ */ new Map();
+const SORTABLE_MESSAGE = "The element must be an instance of HTMLElement or SVGElement";
+const SORTABLE_SELECTOR = `[${SORTABLE_ATTRIBUTE}]`;
+const SORTABLE_SELECTOR_ITEM = `[${SORTABLE_ATTRIBUTE}] > *`;
+const sortablePlaceholder = {
+	drag: {
+		custom: void 0,
+		default: void 0
+	},
+	position: void 0
+};
+//#endregion
+export { SORTABLE_ATTRIBUTE, SORTABLE_ATTRIBUTE_ACTIVE, SORTABLE_ATTRIBUTE_CONNECTIONS, SORTABLE_ATTRIBUTE_CONTAINER, SORTABLE_ATTRIBUTE_DIRECTION, SORTABLE_ATTRIBUTE_HORIZONTAL, SORTABLE_ATTRIBUTE_ORIGIN, SORTABLE_ATTRIBUTE_PLACEHOLDER_DRAG, SORTABLE_ATTRIBUTE_PLACEHOLDER_POSITION, SORTABLE_ATTRIBUTE_VERTICAL, SORTABLE_CONTAINERS, SORTABLE_MESSAGE, SORTABLE_SELECTOR, SORTABLE_SELECTOR_ITEM, sortablePlaceholder };

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

@@ -1,2 +1,3 @@
-import { d as OuiSortable, f as createSortable, t as CreateOuiDraggableOptions } from "../draggable-a6w0J1OD.mjs";
+import { $ as OuiSortable, p as CreateOuiDraggableOptions } from "../movable.model-BHaK_mKw.mjs";
+import { t as createSortable } from "../sortable.embedded-DzBKAwSG.mjs";
 export { type CreateOuiDraggableOptions as CreateOuiSortableOptions, type OuiSortable, createSortable };

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

@@ -0,0 +1,11 @@
+import { $ as OuiSortable, p as CreateOuiDraggableOptions } from "./movable.model-BHaK_mKw.mjs";
+//#region src/js/sortable/sortable.embedded.d.ts
+/**
+ * Creates _(or retrieves)_ a _OuiSortable_ instance for an element
+ *
+ * @param element Element to make sortable
+ * @returns _OuiSortable_ instance
+ */
+declare function createSortable(element: HTMLElement, options?: CreateOuiDraggableOptions): OuiSortable;
+//#endregion
+export { createSortable as t };

package/dist/js/{splitter.d.mts → splitter/index.d.mts}

@@ -1,11 +1,14 @@
-//#region src/js/splitter.d.ts
+import { D as SPLITTER_SYMBOL, O as SPLITTER_TAGNAME, n as OuiSplitter } from "../splitter.model-DOLNjLVS.mjs";
+//#region src/js/splitter/index.d.ts
 declare global {
   interface HTMLElementTagNameMap {
-    [TAGNAME]: OuiSplitterElement;
+    [SPLITTER_TAGNAME]: OuiSplitterElement;
   }
 }
-declare class OuiSplitterElement extends HTMLElement {
-  #private;
+export interface OuiSplitterElement {
+  [SPLITTER_SYMBOL]: OuiSplitter;
+}
+export declare class OuiSplitterElement extends HTMLElement {
   static readonly observedAttributes: string[];
   /**
    * Maximum size for the first panel
@@ -44,6 +47,4 @@ declare class OuiSplitterElement extends HTMLElement {
   disconnectedCallback(): void;
   attributeChangedCallback(name: string): void;
 }
-declare const TAGNAME = "oui-splitter";
-//#endregion
-export { OuiSplitterElement };
+//#endregion

package/dist/js/splitter/index.mjs

@@ -0,0 +1,284 @@
+import { SPLITTER_ATTRIBUTE_ACTIVE, SPLITTER_ATTRIBUTE_HANDLE, SPLITTER_ATTRIBUTE_HORIZONTAL, SPLITTER_ATTRIBUTE_SEPARATOR, SPLITTER_ATTRIBUTE_SIZE, SPLITTER_ATTRIBUTE_TYPE, SPLITTER_KEYS_ABSOLUTE, SPLITTER_KEYS_ALL, SPLITTER_KEYS_HORIZONTAL, SPLITTER_KEYS_NEGATIVE, SPLITTER_KEYS_VERTICAL, SPLITTER_MESSAGE, SPLITTER_METHODS_OBSERVE, SPLITTER_NAVIGATION_MAXIMUM_PERCENTAGE, SPLITTER_NAVIGATION_MINIMUM_PERCENTAGE, SPLITTER_NAVIGATION_MODIFIER, SPLITTER_SELECTOR_HANDLE, SPLITTER_SYMBOL, SPLITTER_TAGNAME, splitterStyling } from "./splitter.model.mjs";
+import { setAria } from "@oscarpalmer/toretto/aria";
+import { getAttribute, setAttribute } from "@oscarpalmer/toretto/attribute";
+import { getEventPosition, on } from "@oscarpalmer/toretto/event";
+import { findAncestor } from "@oscarpalmer/toretto/find";
+import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
+import { setStyle } from "@oscarpalmer/toretto/style";
+import { filter } from "@oscarpalmer/atoms/array/filter";
+import { clamp } from "@oscarpalmer/atoms/number";
+import { supportsTouch } from "@oscarpalmer/toretto/touch";
+import { createElement } from "@oscarpalmer/toretto/create";
+import { round } from "@oscarpalmer/atoms/math";
+//#region src/js/splitter/index.ts
+function OuiSplitter(element, panels) {
+	this.element = element;
+	this.panels = panels;
+	if (isNullableOrWhitespace(element.id)) element.id = `oui_splitter_${++index}`;
+	this.values = getValues(element);
+	this.handle = createHandle();
+	this.rectangle = element.getBoundingClientRect();
+	this.separator = createSeparator(this);
+	this.separator.append(this.handle);
+	panels[0].insertAdjacentElement("afterend", this.separator);
+	this.updateOrientation();
+	this.updateValues();
+}
+OuiSplitter.prototype.updateObserver = updateObserver;
+OuiSplitter.prototype.updateOrientation = updateOrientation;
+OuiSplitter.prototype.updateValues = updateValues;
+var OuiSplitterElement = class extends HTMLElement {
+	static observedAttributes = [
+		"max",
+		"min",
+		SPLITTER_ATTRIBUTE_SIZE,
+		SPLITTER_ATTRIBUTE_TYPE
+	];
+	/**
+	* Maximum size for the first panel
+	*/
+	get max() {
+		return this[SPLITTER_SYMBOL].values.max;
+	}
+	/**
+	* Maximum size for the first panel
+	*/
+	set max(value) {
+		if (typeof value === "number") setAttribute(this, "max", value.toString());
+	}
+	/**
+	* Minimum size for the first panel
+	*/
+	get min() {
+		return this[SPLITTER_SYMBOL].values.min;
+	}
+	/**
+	* Minimum size for the first panel
+	*/
+	set min(value) {
+		if (typeof value === "number") setAttribute(this, "min", value.toString());
+	}
+	/**
+	* Current size for the first panel
+	*/
+	get size() {
+		return this[SPLITTER_SYMBOL].values.now.current;
+	}
+	/**
+	* Current size for the first panel
+	*/
+	set size(value) {
+		if (typeof value === "number") setAttribute(this, SPLITTER_ATTRIBUTE_SIZE, value.toString());
+	}
+	/**
+	* Orientation of the splitter
+	*/
+	get type() {
+		return getAttribute(this, "type") ?? "vertical";
+	}
+	/**
+	* Orientation of the splitter
+	*/
+	set type(value) {
+		setAttribute(this, SPLITTER_ATTRIBUTE_TYPE, value);
+	}
+	constructor() {
+		super();
+		const panels = filter([...this.children], (child) => child instanceof Element);
+		if (panels.length !== 2) throw new Error(SPLITTER_MESSAGE);
+		this[SPLITTER_SYMBOL] = new OuiSplitter(this, panels);
+	}
+	connectedCallback() {
+		this[SPLITTER_SYMBOL].updateObserver(1);
+	}
+	disconnectedCallback() {
+		this[SPLITTER_SYMBOL].updateObserver(0);
+	}
+	attributeChangedCallback(name) {
+		switch (name) {
+			case "max":
+			case "min":
+			case SPLITTER_ATTRIBUTE_SIZE:
+				this[SPLITTER_SYMBOL].updateValues();
+				break;
+			case SPLITTER_ATTRIBUTE_TYPE: this[SPLITTER_SYMBOL].updateOrientation();
+		}
+	}
+};
+function createHandle() {
+	return createElement("span", {
+		aria: { hidden: true },
+		attribute: { [SPLITTER_ATTRIBUTE_HANDLE]: "" }
+	});
+}
+function createSeparator(splitter) {
+	return createElement("div", {
+		aria: {
+			controls: splitter.element.id,
+			label: "Resize panels"
+		},
+		attribute: { [SPLITTER_ATTRIBUTE_SEPARATOR]: "" },
+		property: {
+			role: "separator",
+			tabIndex: 0
+		}
+	});
+}
+function getContained(min, value, max) {
+	return round(clamp(value, min, max), 6);
+}
+function getSize(splitter, value) {
+	const { height, left, top, width } = splitter.rectangle;
+	const fraction = (value - (splitter.types.horizontal ? top : left)) / (splitter.types.horizontal ? height : width);
+	return getContained(splitter.values.min, fraction, splitter.values.max);
+}
+function getTypes(splitter, width, height) {
+	const type = getAttribute(splitter.element, "type");
+	if (type === "horizontal") return {
+		auto: false,
+		horizontal: true
+	};
+	if (type === "auto") return {
+		auto: true,
+		horizontal: (height ?? splitter.rectangle.height) > (width ?? splitter.rectangle.width)
+	};
+	return {
+		auto: false,
+		horizontal: false
+	};
+}
+function getValue(element, name, defaultValue) {
+	const value = getAttribute(element, name);
+	if (isNullableOrWhitespace(value)) return defaultValue;
+	const parsed = Number.parseFloat(value);
+	if (Number.isNaN(parsed)) return defaultValue;
+	if (parsed < 0) return defaultValue;
+	return parsed > 1 ? parsed / 100 : parsed;
+}
+function getValues(element) {
+	const values = {
+		max: getValue(element, "max", SPLITTER_NAVIGATION_MAXIMUM_PERCENTAGE),
+		min: getValue(element, "min", SPLITTER_NAVIGATION_MINIMUM_PERCENTAGE),
+		now: {
+			current: .5,
+			previous: .5
+		}
+	};
+	const value = getContained(values.min, getValue(element, SPLITTER_ATTRIBUTE_SIZE, values.now.current), values.max);
+	values.now.current = value;
+	values.now.previous = value;
+	return values;
+}
+function onEnd(reset) {
+	if (splitter == null) return;
+	splitter.handle.removeAttribute(SPLITTER_ATTRIBUTE_ACTIVE);
+	splitter.separator.removeAttribute(SPLITTER_ATTRIBUTE_ACTIVE);
+	if (reset) setSize(splitter, splitter.values.now.previous);
+	else splitter.values.now.previous = splitter.values.now.current;
+	splitter = void 0;
+	splitterStyling.remove();
+}
+function onKeydown(event) {
+	switch (true) {
+		case SPLITTER_KEYS_ALL.has(event.key):
+			onNavigate(event);
+			break;
+		case event.key === "Escape": onEnd(true);
+	}
+}
+function onNavigate(event) {
+	const separator = findAncestor(event, "[oui-splitter-separator]");
+	if (separator == null) return;
+	const splitter = findAncestor(separator, SPLITTER_TAGNAME)?.[SPLITTER_SYMBOL];
+	if (splitter == null) return;
+	const { types, values } = splitter;
+	if (SPLITTER_KEYS_ABSOLUTE.has(event.key)) {
+		setSize(splitter, event.key === "End" ? values.max : values.min, true);
+		return;
+	}
+	if (types.horizontal && !SPLITTER_KEYS_HORIZONTAL.has(event.key) || !(types.horizontal || SPLITTER_KEYS_VERTICAL.has(event.key))) return;
+	const offset = SPLITTER_KEYS_NEGATIVE.has(event.key) ? -1 : 1;
+	setSize(splitter, getContained(values.min, values.now.current + offset * SPLITTER_NAVIGATION_MODIFIER, values.max), true);
+}
+function onObservation(entries) {
+	if (frame != null) cancelAnimationFrame(frame);
+	frame = requestAnimationFrame(() => {
+		for (const entry of entries) {
+			const splitter = entry.target instanceof OuiSplitterElement || entry.target.hasAttribute(SPLITTER_ATTRIBUTE_HANDLE) || entry.target.hasAttribute(SPLITTER_ATTRIBUTE_SEPARATOR) ? findAncestor(entry.target, SPLITTER_TAGNAME)?.[SPLITTER_SYMBOL] : void 0;
+			if (splitter == null) return;
+			splitter.types = getTypes(splitter, entry.contentRect.width, entry.contentRect.height);
+			setAttribute(splitter.element, SPLITTER_ATTRIBUTE_HORIZONTAL, splitter.types.horizontal ? "" : void 0);
+			setAriaOrientation(splitter);
+		}
+		frame = void 0;
+	});
+}
+function onPointerdown(event) {
+	if (supportsTouch.value ? event.type === "mousedown" : event.type === "touchstart") return;
+	const handle = findAncestor(event, SPLITTER_SELECTOR_HANDLE);
+	if (handle == null) return;
+	splitter = findAncestor(handle, SPLITTER_TAGNAME)?.[SPLITTER_SYMBOL];
+	if (splitter == null) return;
+	if (supportsTouch.value) event.preventDefault();
+	setAttribute(splitter.handle, SPLITTER_ATTRIBUTE_ACTIVE, "");
+	setAttribute(splitter.separator, SPLITTER_ATTRIBUTE_ACTIVE, "");
+	splitter.rectangle = splitter.element.getBoundingClientRect();
+	splitterStyling.set();
+}
+function onPointermove(event) {
+	if (splitter == null) return;
+	const position = getEventPosition(event);
+	if (position != null) {
+		splitter.values.now.current = getSize(splitter, splitter.types.horizontal ? position.y : position.x);
+		setSize(splitter, splitter.values.now.current);
+	}
+}
+function onPointerup() {
+	if (splitter != null) onEnd(false);
+}
+function setAriaOrientation(splitter) {
+	setAria(splitter.separator, "orientation", splitter.types.horizontal ? "horizontal" : "vertical");
+}
+function setAriaValue(splitter) {
+	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;
+	setStyle(splitter.element, "--oui-splitter-size", `${size}`);
+	setAriaValue(splitter);
+}
+function updateObserver(add) {
+	if (this.types.auto) observer[SPLITTER_METHODS_OBSERVE[add]](this.element);
+}
+function updateOrientation() {
+	this.types = getTypes(this);
+	if (this.types.auto) observer.observe(this.element);
+	else observer.unobserve(this.element);
+	setAttribute(this.element, SPLITTER_ATTRIBUTE_HORIZONTAL, this.types.horizontal ? "" : void 0);
+	setAriaOrientation(this);
+}
+function updateValues() {
+	this.values = getValues(this.element);
+	requestAnimationFrame(() => {
+		setSize(this, this.values.now.current);
+		setAriaValue(this);
+	});
+}
+const observer = new ResizeObserver(onObservation);
+let index = 0;
+let frame;
+let splitter;
+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 });
+customElements.define(SPLITTER_TAGNAME, OuiSplitterElement);
+//#endregion
+export { OuiSplitterElement };

package/dist/js/splitter/splitter.model.d.mts

@@ -0,0 +1,2 @@
+import { A as splitterStyling, C as SPLITTER_NAVIGATION_MAXIMUM_TOTAL, D as SPLITTER_SYMBOL, E as SPLITTER_SELECTOR_HANDLE, O as SPLITTER_TAGNAME, S as SPLITTER_NAVIGATION_MAXIMUM_PERCENTAGE, T as SPLITTER_NAVIGATION_MODIFIER, _ as SPLITTER_KEYS_NEGATIVE, a as OuiSplitterValuesNow, b as SPLITTER_METHODS_CONNECT, c as SPLITTER_ATTRIBUTE_HORIZONTAL, d as SPLITTER_ATTRIBUTE_SEPARATOR, f as SPLITTER_ATTRIBUTE_SIZE, g as SPLITTER_KEYS_HORIZONTAL, h as SPLITTER_KEYS_ALL, i as OuiSplitterValues, k as SPLITTER_VALUE_DECIMALS, l as SPLITTER_ATTRIBUTE_MAX, m as SPLITTER_KEYS_ABSOLUTE, n as OuiSplitter, o as SPLITTER_ATTRIBUTE_ACTIVE, p as SPLITTER_ATTRIBUTE_TYPE, r as OuiSplitterTypes, s as SPLITTER_ATTRIBUTE_HANDLE, t as GenericOuiSplitterElement, u as SPLITTER_ATTRIBUTE_MIN, v as SPLITTER_KEYS_VERTICAL, w as SPLITTER_NAVIGATION_MINIMUM_PERCENTAGE, x as SPLITTER_METHODS_OBSERVE, y as SPLITTER_MESSAGE } from "../splitter.model-DOLNjLVS.mjs";
+export { GenericOuiSplitterElement, OuiSplitter, OuiSplitterTypes, OuiSplitterValues, OuiSplitterValuesNow, SPLITTER_ATTRIBUTE_ACTIVE, SPLITTER_ATTRIBUTE_HANDLE, SPLITTER_ATTRIBUTE_HORIZONTAL, SPLITTER_ATTRIBUTE_MAX, SPLITTER_ATTRIBUTE_MIN, SPLITTER_ATTRIBUTE_SEPARATOR, SPLITTER_ATTRIBUTE_SIZE, SPLITTER_ATTRIBUTE_TYPE, SPLITTER_KEYS_ABSOLUTE, SPLITTER_KEYS_ALL, SPLITTER_KEYS_HORIZONTAL, SPLITTER_KEYS_NEGATIVE, SPLITTER_KEYS_VERTICAL, SPLITTER_MESSAGE, SPLITTER_METHODS_CONNECT, SPLITTER_METHODS_OBSERVE, SPLITTER_NAVIGATION_MAXIMUM_PERCENTAGE, SPLITTER_NAVIGATION_MAXIMUM_TOTAL, SPLITTER_NAVIGATION_MINIMUM_PERCENTAGE, SPLITTER_NAVIGATION_MODIFIER, SPLITTER_SELECTOR_HANDLE, SPLITTER_SYMBOL, SPLITTER_TAGNAME, SPLITTER_VALUE_DECIMALS, splitterStyling };

package/dist/js/splitter/splitter.model.mjs

@@ -0,0 +1,37 @@
+import { toggleStyles } from "@oscarpalmer/toretto/style";
+//#region src/js/splitter/splitter.model.ts
+const SPLITTER_TAGNAME = "oui-splitter";
+const SPLITTER_ATTRIBUTE_ACTIVE = `${SPLITTER_TAGNAME}-active`;
+const SPLITTER_ATTRIBUTE_HANDLE = `${SPLITTER_TAGNAME}-handle`;
+const SPLITTER_ATTRIBUTE_HORIZONTAL = `${SPLITTER_TAGNAME}-horizontal`;
+const SPLITTER_ATTRIBUTE_MAX = "max";
+const SPLITTER_ATTRIBUTE_MIN = "min";
+const SPLITTER_ATTRIBUTE_SIZE = "size";
+const SPLITTER_ATTRIBUTE_TYPE = "type";
+const SPLITTER_ATTRIBUTE_SEPARATOR = `${SPLITTER_TAGNAME}-separator`;
+const SPLITTER_KEYS_ABSOLUTE = /* @__PURE__ */ new Set(["End", "Home"]);
+const SPLITTER_KEYS_HORIZONTAL = /* @__PURE__ */ new Set(["ArrowDown", "ArrowUp"]);
+const SPLITTER_KEYS_NEGATIVE = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowUp"]);
+const SPLITTER_KEYS_VERTICAL = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowRight"]);
+const SPLITTER_KEYS_ALL = /* @__PURE__ */ new Set([
+	...SPLITTER_KEYS_ABSOLUTE,
+	...SPLITTER_KEYS_HORIZONTAL,
+	...SPLITTER_KEYS_VERTICAL
+]);
+const SPLITTER_MESSAGE = `<${SPLITTER_TAGNAME}> must have exactly two panels.`;
+const SPLITTER_METHODS_CONNECT = ["delete", "set"];
+const SPLITTER_METHODS_OBSERVE = ["unobserve", "observe"];
+const SPLITTER_NAVIGATION_MAXIMUM_PERCENTAGE = .9;
+const SPLITTER_NAVIGATION_MAXIMUM_TOTAL = 100;
+const SPLITTER_NAVIGATION_MINIMUM_PERCENTAGE = .1;
+const SPLITTER_NAVIGATION_MODIFIER = .05;
+const SPLITTER_SELECTOR_HANDLE = `[${SPLITTER_ATTRIBUTE_HANDLE}]`;
+const SPLITTER_SYMBOL = Symbol(SPLITTER_TAGNAME);
+const SPLITTER_VALUE_DECIMALS = 6;
+const splitterStyling = toggleStyles(document.body, {
+	touchAction: "none",
+	userSelect: "none",
+	webkitUserSelect: "none"
+});
+//#endregion
+export { SPLITTER_ATTRIBUTE_ACTIVE, SPLITTER_ATTRIBUTE_HANDLE, SPLITTER_ATTRIBUTE_HORIZONTAL, SPLITTER_ATTRIBUTE_MAX, SPLITTER_ATTRIBUTE_MIN, SPLITTER_ATTRIBUTE_SEPARATOR, SPLITTER_ATTRIBUTE_SIZE, SPLITTER_ATTRIBUTE_TYPE, SPLITTER_KEYS_ABSOLUTE, SPLITTER_KEYS_ALL, SPLITTER_KEYS_HORIZONTAL, SPLITTER_KEYS_NEGATIVE, SPLITTER_KEYS_VERTICAL, SPLITTER_MESSAGE, SPLITTER_METHODS_CONNECT, SPLITTER_METHODS_OBSERVE, SPLITTER_NAVIGATION_MAXIMUM_PERCENTAGE, SPLITTER_NAVIGATION_MAXIMUM_TOTAL, SPLITTER_NAVIGATION_MINIMUM_PERCENTAGE, SPLITTER_NAVIGATION_MODIFIER, SPLITTER_SELECTOR_HANDLE, SPLITTER_SYMBOL, SPLITTER_TAGNAME, SPLITTER_VALUE_DECIMALS, splitterStyling };