@oscarpalmer/oui 0.41.0 → 0.43.0

package/dist/js/grid/grid.dom.mjs

@@ -0,0 +1,171 @@
+import { createResizable } from "../resizable/resizable.embedded.mjs";
+import { RESIZABLE_ATTRIBUTE_HANDLE } from "../resizable/resizable.model.mjs";
+import { GRID_ATTRIBUTE_COLUMNS, GRID_ATTRIBUTE_ITEM, GRID_ATTRIBUTE_PLACEHOLDER, GRID_ATTRIBUTE_SPAN, GRID_SELECTOR_ITEM_SCOPED, OuiGridResizeHandlerEvent } from "./grid.model.mjs";
+import { getAttribute, setAttribute } from "@oscarpalmer/toretto/attribute";
+import { dispatch } from "@oscarpalmer/toretto/event";
+import { getStyle } from "@oscarpalmer/toretto/style";
+import { getNumber } from "@oscarpalmer/atoms/number";
+import { floor, max, min } from "@oscarpalmer/atoms/math";
+import { createElement } from "@oscarpalmer/toretto/create";
+import { select } from "@oscarpalmer/atoms/array/select";
+// src/js/grid/grid.dom.ts
+function collides(first, second) {
+	return first.x < second.x + second.width && second.x < first.x + first.width && first.y < second.y + second.height && second.y < first.y + first.height;
+}
+function createResizeHandle(state, item) {
+	const handle = createElement("div", {
+		aria: { label: "Resize grid item" },
+		attribute: { [RESIZABLE_ATTRIBUTE_HANDLE]: "" },
+		property: { textContent: "R" }
+	});
+	dispatch(state.host, new OuiGridResizeHandlerEvent({
+		handle,
+		item
+	}));
+	return handle;
+}
+function findFreeSpot(size, others, containerWidth) {
+	const candidate = {
+		height: size.height,
+		width: size.width,
+		x: 0,
+		y: 0
+	};
+	while (true) {
+		const blocker = others.find((other) => collides(candidate, other));
+		if (blocker == null) return candidate;
+		candidate.x = blocker.x + blocker.width;
+		if (candidate.x + candidate.width > containerWidth) {
+			candidate.x = 0;
+			candidate.y = min(select.reverse(others, (other) => other.y + other.height, (bottom) => bottom > candidate.y));
+		}
+	}
+}
+function getColumns(host, gap, attribute) {
+	const [first, second] = (attribute ?? getAttribute(host, "columns") ?? "").split(",");
+	const preferred = Number.parseInt(first ?? "", 10);
+	const minimum = Number.parseFloat(second ?? "");
+	const hasMinimum = minimum > 0;
+	const hasPreferred = preferred > 0;
+	if (!hasMinimum && !hasPreferred) return;
+	const { clientWidth } = host;
+	const count = max([1, min([hasPreferred ? preferred : Number.POSITIVE_INFINITY, hasMinimum ? floor((clientWidth + gap) / (minimum + gap)) : Number.POSITIVE_INFINITY])]);
+	return {
+		count,
+		attribute: [preferred, Number.isNaN(minimum) ? void 0 : minimum],
+		width: (clientWidth - gap * (count - 1)) / count
+	};
+}
+function getGridElements(state) {
+	const previous = new Set(state.elements.splice(0));
+	const next = [...state.host.querySelectorAll(GRID_SELECTOR_ITEM_SCOPED)];
+	const { length } = next;
+	for (let index = 0; index < length; index++) {
+		const element = next[index];
+		if (previous.has(element)) previous.delete(element);
+		setAttribute(element, GRID_ATTRIBUTE_ITEM, "");
+	}
+	if (state.active != null) previous.delete(state.active);
+	for (const element of previous) setAttribute(element, GRID_ATTRIBUTE_ITEM);
+	return next;
+}
+function getGap(host, input) {
+	let attribute;
+	let style;
+	let value;
+	input ??= getAttribute(host, "gap");
+	if (input != null) {
+		attribute = getNumber(input);
+		if (Number.isNaN(attribute) || attribute < 0) attribute = void 0;
+		else value = attribute;
+	}
+	if (value == null) {
+		style = getStyle(host, "gap", true);
+		if (style != null) value = getNumber(style.endsWith("px") ? style.slice(0, -2) : style);
+	}
+	return {
+		attribute,
+		style,
+		value: value == null ? 0 : max([value, 0])
+	};
+}
+function getGridColumns(state) {
+	return state.columns?.attribute;
+}
+function getGridPlaceholder(original) {
+	placeholder ??= createElement("div", {
+		attribute: { [GRID_ATTRIBUTE_PLACEHOLDER]: "" },
+		style: {
+			position: "absolute",
+			inset: "0"
+		}
+	});
+	if (original == null) return placeholder;
+	setAttribute(placeholder, GRID_ATTRIBUTE_SPAN, getAttribute(original, GRID_ATTRIBUTE_SPAN));
+	placeholder.style.width = `${original.offsetWidth}px`;
+	placeholder.style.height = `${original.offsetHeight}px`;
+	placeholder.style.transform = original.style.transform;
+	return placeholder;
+}
+function getSpan(element, count) {
+	const span = getNumber(getAttribute(element, GRID_ATTRIBUTE_SPAN));
+	return min([span > 0 ? span : 1, count]);
+}
+function setGridColumns(state, value) {
+	let columns;
+	if (typeof value === "number") columns = [value, void 0];
+	else if (Array.isArray(value)) {
+		const [preferred, minimum] = value;
+		if (typeof preferred === "number" && (minimum == null || typeof minimum === "number")) columns = [preferred, minimum];
+	}
+	setAttribute(state.host, GRID_ATTRIBUTE_COLUMNS, columns == null ? null : `${columns[0]},${columns[1]}`);
+}
+function updateGridPositions(state) {
+	const { elements: items } = state;
+	const { length } = items;
+	const bottoms = [0];
+	const width = state.host.clientWidth;
+	const gap = getGap(state.host);
+	const columns = getColumns(state.host, gap.value);
+	state.columns = columns;
+	state.gap = gap;
+	const placed = [];
+	for (let index = 0; index < length; index += 1) {
+		const item = items[index];
+		const spot = findFreeSpot({
+			height: item.offsetHeight + gap.value,
+			width: columns == null ? min([item.offsetWidth + gap.value, width + gap.value]) : getSpan(item, columns.count)
+		}, placed, columns?.count ?? width + gap.value);
+		bottoms.push(spot.y + spot.height);
+		placed.push(spot);
+		if (columns == null) item.style.transform = `translate3d(${spot.x}px, ${spot.y}px, 0)`;
+		else {
+			const step = columns.width + gap.value;
+			item.style.transform = `translate3d(${spot.x * step}px, ${spot.y}px, 0)`;
+			item.style.width = `${spot.width * step - gap.value}px`;
+		}
+	}
+	const height = max([0, max(bottoms) - gap.value]);
+	if (height !== state.height) {
+		state.height = height;
+		state.host.style.height = `${height}px`;
+	}
+	dispatch(state.host, "update");
+}
+function updateGridResizables(state) {
+	if (!state.host.hasAttribute("resizable")) return;
+	const { length } = state.elements;
+	for (let index = 0; index < length; index += 1) {
+		const element = state.elements[index];
+		if (element.hasAttribute("oui-grid-placeholder")) continue;
+		if (element.querySelector(":scope > [oui-resizable-handle]") == null) element.append(createResizeHandle(state, element));
+		createResizable(element, {
+			onBegin: state.callbacks.onResizeBegin,
+			onCancel: state.callbacks.onResizeUpdate,
+			onEnd: state.callbacks.onResizeUpdate,
+			onResize: state.callbacks.onResizeUpdate
+		});
+	}
+}
+let placeholder;
+export { getGridColumns, getGridElements, getGridPlaceholder, setGridColumns, updateGridPositions, updateGridResizables };

package/dist/js/grid/grid.event.d.mts

@@ -0,0 +1,7 @@
+import { a as OuiResizableEventDetail } from "../resizable.model-BOufXDXx.mjs";
+import { k as GridState } from "../grid.model-SiNst5db.mjs";
+export declare function onBeginResizeGridItem(state: GridState, element: Element, size: OuiResizableEventDetail): void;
+export declare function onGridAttributeChanged(state: GridState, name: string): void;
+export declare function onGridItemResized(type: string, state: GridState, element: Element, size: OuiResizableEventDetail): void;
+export declare function onGridMutation(state: GridState): void;
+export declare function onGridResized(entries: ResizeObserverEntry[]): void;

package/dist/js/grid/grid.event.mjs

@@ -0,0 +1 @@
+export { t as onBeginResizeGridItem, n as onGridAttributeChanged, r as onGridItemResized, i as onGridMutation, a as onGridResized } from "../grid.event-K_pG2vmS.mjs";

package/dist/js/grid/grid.misc.d.mts

@@ -0,0 +1,6 @@
+import { O as GridSort, k as GridState } from "../grid.model-SiNst5db.mjs";
+export declare function connectGrid(state: GridState): void;
+export declare function createGridState(host: HTMLElement): GridState;
+export declare function disconnectGrid(state: GridState): void;
+export declare function endGridSort(sort: GridSort, target?: HTMLElement): undefined;
+export declare function updateGrid(state: GridState): void;

package/dist/js/grid/grid.misc.mjs

@@ -0,0 +1 @@
+export { o as connectGrid, s as createGridState, c as disconnectGrid, l as endGridSort, u as updateGrid } from "../grid.event-K_pG2vmS.mjs";

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

@@ -0,0 +1,2 @@
+import { A as OuiGridEventSortDetail, C as GRID_SYMBOL, D as GridItem, E as GridGap, F as OuiGridSortEvent, I as gridStyling, M as OuiGridResizeEventDetail, N as OuiGridResizeHandlerEvent, O as GridSort, P as OuiGridResizeHandlerEventDetail, S as GRID_SELECTOR_ITEM_SCOPED, T as GridColumns, _ as GRID_EVENT_SORT_CANCEL, a as GRID_ATTRIBUTE_ITEM_HANDLE, b as GRID_SELECTOR_HANDLE, c as GRID_ATTRIBUTE_SORTABLE, d as GRID_EVENT_RESIZE_BEGIN, f as GRID_EVENT_RESIZE_CANCEL, g as GRID_EVENT_SORT_BEGIN, h as GRID_EVENT_RESIZE_HANDLE, i as GRID_ATTRIBUTE_ITEM_ACTIVE, j as OuiGridResizeEvent, k as GridState, l as GRID_ATTRIBUTE_SORTING, m as GRID_EVENT_RESIZE_END, n as GRID_ATTRIBUTE_GAP, o as GRID_ATTRIBUTE_PLACEHOLDER, p as GRID_EVENT_RESIZE_CHANGE, r as GRID_ATTRIBUTE_ITEM, s as GRID_ATTRIBUTE_RESIZABLE, t as GRID_ATTRIBUTE_COLUMNS, u as GRID_ATTRIBUTE_SPAN, v as GRID_EVENT_SORT_CHANGE, w as GRID_TAGNAME, x as GRID_SELECTOR_ITEM, y as GRID_EVENT_SORT_END } from "../grid.model-SiNst5db.mjs";
+export { GRID_ATTRIBUTE_COLUMNS, GRID_ATTRIBUTE_GAP, GRID_ATTRIBUTE_ITEM, GRID_ATTRIBUTE_ITEM_ACTIVE, GRID_ATTRIBUTE_ITEM_HANDLE, GRID_ATTRIBUTE_PLACEHOLDER, GRID_ATTRIBUTE_RESIZABLE, GRID_ATTRIBUTE_SORTABLE, GRID_ATTRIBUTE_SORTING, GRID_ATTRIBUTE_SPAN, GRID_EVENT_RESIZE_BEGIN, GRID_EVENT_RESIZE_CANCEL, GRID_EVENT_RESIZE_CHANGE, GRID_EVENT_RESIZE_END, GRID_EVENT_RESIZE_HANDLE, GRID_EVENT_SORT_BEGIN, GRID_EVENT_SORT_CANCEL, GRID_EVENT_SORT_CHANGE, GRID_EVENT_SORT_END, GRID_SELECTOR_HANDLE, GRID_SELECTOR_ITEM, GRID_SELECTOR_ITEM_SCOPED, GRID_SYMBOL, GRID_TAGNAME, GridColumns, GridGap, GridItem, GridSort, GridState, OuiGridEventSortDetail, OuiGridResizeEvent, OuiGridResizeEventDetail, OuiGridResizeHandlerEvent, OuiGridResizeHandlerEventDetail, OuiGridSortEvent, gridStyling };

package/dist/js/grid/grid.model.mjs

@@ -0,0 +1,39 @@
+import { toggleStyles } from "@oscarpalmer/toretto/style";
+// src/js/grid/grid.model.ts
+var OuiGridResizeEvent = class extends CustomEvent {};
+var OuiGridResizeHandlerEvent = class extends CustomEvent {
+	constructor(detail) {
+		super(GRID_EVENT_RESIZE_HANDLE, { detail });
+	}
+};
+var OuiGridSortEvent = class extends CustomEvent {};
+const GRID_TAGNAME = "oui-grid";
+const GRID_ATTRIBUTE_COLUMNS = "columns";
+const GRID_ATTRIBUTE_GAP = "gap";
+const GRID_ATTRIBUTE_ITEM = `${GRID_TAGNAME}-item`;
+const GRID_ATTRIBUTE_ITEM_ACTIVE = `${GRID_ATTRIBUTE_ITEM}-active`;
+const GRID_ATTRIBUTE_ITEM_HANDLE = `${GRID_ATTRIBUTE_ITEM}-handle`;
+const GRID_ATTRIBUTE_PLACEHOLDER = `${GRID_TAGNAME}-placeholder`;
+const GRID_ATTRIBUTE_RESIZABLE = "resizable";
+const GRID_ATTRIBUTE_SORTABLE = "sortable";
+const GRID_ATTRIBUTE_SORTING = `${GRID_TAGNAME}-sorting`;
+const GRID_ATTRIBUTE_SPAN = `${GRID_TAGNAME}-span`;
+const GRID_EVENT_RESIZE_BEGIN = "resize:begin";
+const GRID_EVENT_RESIZE_CANCEL = "resize:cancel";
+const GRID_EVENT_RESIZE_CHANGE = "resize:change";
+const GRID_EVENT_RESIZE_END = "resize:end";
+const GRID_EVENT_RESIZE_HANDLE = "resize:handle";
+const GRID_EVENT_SORT_BEGIN = "sort:begin";
+const GRID_EVENT_SORT_CANCEL = "sort:cancel";
+const GRID_EVENT_SORT_CHANGE = "sort:change";
+const GRID_EVENT_SORT_END = "sort:end";
+const GRID_SELECTOR_HANDLE = `[${GRID_ATTRIBUTE_ITEM_HANDLE}]`;
+const GRID_SELECTOR_ITEM = `${GRID_TAGNAME} > *`;
+const GRID_SELECTOR_ITEM_SCOPED = `:scope > *`;
+const GRID_SYMBOL = Symbol(GRID_TAGNAME);
+const gridStyling = toggleStyles(document.body, {
+	touchAction: "none",
+	userSelect: "none",
+	webkitUserSelect: "none"
+});
+export { GRID_ATTRIBUTE_COLUMNS, GRID_ATTRIBUTE_GAP, GRID_ATTRIBUTE_ITEM, GRID_ATTRIBUTE_ITEM_ACTIVE, GRID_ATTRIBUTE_ITEM_HANDLE, GRID_ATTRIBUTE_PLACEHOLDER, GRID_ATTRIBUTE_RESIZABLE, GRID_ATTRIBUTE_SORTABLE, GRID_ATTRIBUTE_SORTING, GRID_ATTRIBUTE_SPAN, GRID_EVENT_RESIZE_BEGIN, GRID_EVENT_RESIZE_CANCEL, GRID_EVENT_RESIZE_CHANGE, GRID_EVENT_RESIZE_END, GRID_EVENT_RESIZE_HANDLE, GRID_EVENT_SORT_BEGIN, GRID_EVENT_SORT_CANCEL, GRID_EVENT_SORT_CHANGE, GRID_EVENT_SORT_END, GRID_SELECTOR_HANDLE, GRID_SELECTOR_ITEM, GRID_SELECTOR_ITEM_SCOPED, GRID_SYMBOL, GRID_TAGNAME, OuiGridResizeEvent, OuiGridResizeHandlerEvent, OuiGridSortEvent, gridStyling };

package/dist/js/grid/index.d.mts

@@ -0,0 +1,22 @@
+import { C as GRID_SYMBOL, E as GridGap, k as GridState, w as GRID_TAGNAME } from "../grid.model-SiNst5db.mjs";
+declare global {
+  interface HTMLElementTagNameMap {
+    [GRID_TAGNAME]: OuiGridElement;
+  }
+}
+export interface OuiGridElement {
+  [GRID_SYMBOL]: GridState;
+}
+export declare class OuiGridElement extends HTMLElement {
+  static readonly observedAttributes: string[];
+  get columns(): [number, number | undefined] | undefined;
+  set columns(value: number | [number, number | undefined] | undefined);
+  get gap(): GridGap;
+  set gap(value: number);
+  constructor();
+  attributeChangedCallback(name: string): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  update(): void;
+  updateResizers(updater: (item: HTMLElement, handle: HTMLElement) => void): void;
+}

package/dist/js/grid/index.mjs

@@ -0,0 +1,48 @@
+import { RESIZABLE_SELECTOR_HANDLE_SCOPED } from "../resizable/resizable.model.mjs";
+import { getGridColumns, setGridColumns } from "./grid.dom.mjs";
+import { c as disconnectGrid, n as onGridAttributeChanged, o as connectGrid, s as createGridState, u as updateGrid } from "../grid.event-K_pG2vmS.mjs";
+import { GRID_ATTRIBUTE_COLUMNS, GRID_SYMBOL, GRID_TAGNAME } from "./grid.model.mjs";
+import { setAttribute } from "@oscarpalmer/toretto/attribute";
+// src/js/grid/index.ts
+var OuiGridElement = class extends HTMLElement {
+	static observedAttributes = [GRID_ATTRIBUTE_COLUMNS, "gap"];
+	get columns() {
+		return getGridColumns(this[GRID_SYMBOL]);
+	}
+	set columns(value) {
+		setGridColumns(this[GRID_SYMBOL], value);
+	}
+	get gap() {
+		return { ...this[GRID_SYMBOL].gap };
+	}
+	set gap(value) {
+		setAttribute(this, "gap", typeof value === "number" ? value : void 0);
+	}
+	constructor() {
+		super();
+		this[GRID_SYMBOL] = createGridState(this);
+	}
+	attributeChangedCallback(name) {
+		onGridAttributeChanged(this[GRID_SYMBOL], name);
+	}
+	connectedCallback() {
+		connectGrid(this[GRID_SYMBOL]);
+	}
+	disconnectedCallback() {
+		disconnectGrid(this[GRID_SYMBOL]);
+	}
+	update() {
+		updateGrid(this[GRID_SYMBOL]);
+	}
+	updateResizers(updater) {
+		if (!this.hasAttribute("resizable")) return;
+		const { length } = this[GRID_SYMBOL].elements;
+		for (let index = 0; index < length; index += 1) {
+			const element = this[GRID_SYMBOL].elements[index];
+			const handle = element.querySelector(RESIZABLE_SELECTOR_HANDLE_SCOPED);
+			if (handle != null) updater(element, handle);
+		}
+	}
+};
+customElements.define(GRID_TAGNAME, OuiGridElement);
+export { OuiGridElement };

package/dist/js/grid.event-K_pG2vmS.mjs

@@ -0,0 +1,192 @@
+import { ignoreEvent } from "./internal/misc.mjs";
+import { getResizable } from "./resizable/resizable.embedded.mjs";
+import { getGridElements, getGridPlaceholder, updateGridPositions, updateGridResizables } from "./grid/grid.dom.mjs";
+import { GRID_ATTRIBUTE_ITEM_ACTIVE, GRID_ATTRIBUTE_SORTABLE, GRID_ATTRIBUTE_SORTING, GRID_ATTRIBUTE_SPAN, GRID_EVENT_RESIZE_BEGIN, GRID_EVENT_RESIZE_CANCEL, GRID_EVENT_RESIZE_CHANGE, GRID_EVENT_RESIZE_END, GRID_EVENT_SORT_BEGIN, GRID_EVENT_SORT_CANCEL, GRID_EVENT_SORT_CHANGE, GRID_EVENT_SORT_END, GRID_SELECTOR_HANDLE, GRID_SELECTOR_ITEM, GRID_SYMBOL, GRID_TAGNAME, OuiGridResizeEvent, OuiGridSortEvent, gridStyling } from "./grid/grid.model.mjs";
+import { setAttribute } from "@oscarpalmer/toretto/attribute";
+import { dispatch, getEventPosition, on } from "@oscarpalmer/toretto/event";
+import { findAncestor } from "@oscarpalmer/toretto/find";
+import { supportsTouch } from "@oscarpalmer/toretto/touch";
+import { max, min, round } from "@oscarpalmer/atoms/math";
+import { getString } from "@oscarpalmer/atoms/string";
+// src/js/grid/grid.misc.ts
+function connectGrid(state) {
+	state.elements = getGridElements(state);
+	state.mutationObserver.observe(state.host, mutationOptions);
+	resizeObserver.observe(state.host);
+	updateGridResizables(state);
+}
+function createGridState(host) {
+	const state = {
+		host,
+		callbacks: {
+			onResizeBegin: (element, size) => onBeginResizeGridItem(state, element, size),
+			onResizeCancel: (element, size) => onGridItemResized(GRID_EVENT_RESIZE_CANCEL, state, element, size),
+			onResizeEnd: (element, size) => onGridItemResized(GRID_EVENT_RESIZE_END, state, element, size),
+			onResizeUpdate: (element, size) => onGridItemResized(GRID_EVENT_RESIZE_CHANGE, state, element, size)
+		},
+		elements: [],
+		gap: { value: 0 },
+		mutationObserver: new MutationObserver(() => onGridMutation(state)),
+		sortable: host.hasAttribute(GRID_ATTRIBUTE_SORTABLE)
+	};
+	return state;
+}
+function disconnectGrid(state) {
+	state.mutationObserver.disconnect();
+	resizeObserver.unobserve(state.host);
+}
+function endGridSort(sort, target) {
+	sort.item.style.pointerEvents = sort.style.pointerEvents;
+	sort.item.style.position = "";
+	sort.item.style.transform = sort.style.transform;
+	sort.item.style.zIndex = sort.style.zIndex;
+	sort.state.active = void 0;
+	const placeholder = getGridPlaceholder();
+	if (target == null) {
+		placeholder?.replaceWith(sort.item);
+		dispatch(sort.state.host, new OuiGridSortEvent(GRID_EVENT_SORT_CANCEL, { detail: { item: sort.item } }));
+	} else {
+		const event = new OuiGridSortEvent(GRID_EVENT_SORT_END, { detail: {
+			destination: target,
+			item: sort.item
+		} });
+		if (dispatch(sort.state.host, event).defaultPrevented) placeholder?.replaceWith(sort.item);
+		else {
+			const next = sort.state.elements.indexOf(target);
+			if (sort.index < next) target?.after(sort.item);
+			else target?.before(sort.item);
+			placeholder?.remove();
+			updateGridPositions(sort.state);
+			updateGridResizables(sort.state);
+		}
+	}
+	setAttribute(sort.state.host, GRID_ATTRIBUTE_SORTING);
+	setAttribute(sort.item, GRID_ATTRIBUTE_ITEM_ACTIVE);
+	gridStyling.remove();
+}
+function updateGrid(state) {
+	if (state.host.isConnected) updateGridPositions(state);
+}
+const mutationOptions = { childList: true };
+const resizeObserver = new ResizeObserver(onGridResized);
+// src/js/grid/grid.event.ts
+function onBeginResizeGridItem(state, element, size) {
+	const event = new OuiGridResizeEvent(GRID_EVENT_RESIZE_BEGIN, { detail: {
+		...size,
+		item: element
+	} });
+	if (dispatch(state.host, event).defaultPrevented) return;
+	const { columns } = state;
+	if (columns == null) return;
+	const resizable = getResizable(element);
+	if (resizable == null) return;
+	state.active = element;
+	const step = columns.width + state.gap.value;
+	resizable.configure({
+		maximumWidth: columns.count * step - state.gap.value,
+		minimumWidth: columns.width,
+		stepWidth: step
+	});
+}
+function onGridAttributeChanged(state, name) {
+	if (!state.host.isConnected) return;
+	if (name === "columns" || name === "gap") updateGridPositions(state);
+}
+function onGridItemResized(type, state, element, size) {
+	const event = new OuiGridResizeEvent(type, { detail: {
+		...size,
+		item: element
+	} });
+	if (dispatch(state.host, event).defaultPrevented) return;
+	const { columns } = state;
+	if (columns != null) {
+		const span = max([1, min([round((size.width + state.gap.value) / (columns.width + state.gap.value)), columns.count])]);
+		setAttribute(element, GRID_ATTRIBUTE_SPAN, getString(span));
+	}
+	updateGridPositions(state);
+	if (type === "resize:cancel" || type === "resize:end") state.active = void 0;
+}
+function onGridMutation(state) {
+	state.elements = getGridElements(state);
+	updateGridPositions(state);
+	updateGridResizables(state);
+}
+function onGridResized(entries) {
+	const { length } = entries;
+	for (let index = 0; index < length; index += 1) {
+		const entry = entries[index];
+		if (GRID_SYMBOL in entry.target) updateGridPositions(entry.target[GRID_SYMBOL]);
+	}
+}
+function onKeydown(event) {
+	if (event.key === "Escape" && sort != null) sort = endGridSort(sort);
+}
+function onPointerdown(event) {
+	if (ignoreEvent(event, supportsTouch.value)) return;
+	const item = findAncestor(event, GRID_SELECTOR_ITEM);
+	if (item == null) return;
+	const handle = item.querySelector(GRID_SELECTOR_HANDLE);
+	if (handle != null && !(event.target === handle || handle.contains(event.target))) return;
+	const grid = findAncestor(item, GRID_TAGNAME);
+	if (grid == null) return;
+	const state = grid[GRID_SYMBOL];
+	if (!state.sortable) return;
+	if (supportsTouch.value) event.preventDefault();
+	const dispatched = new OuiGridSortEvent(GRID_EVENT_SORT_BEGIN, { detail: { item } });
+	if (dispatch(state.host, dispatched).defaultPrevented) return;
+	state.active = item;
+	const placeholder = getGridPlaceholder(item);
+	const position = getEventPosition(event);
+	const rectangle = item.getBoundingClientRect();
+	item.replaceWith(placeholder);
+	document.body.append(item);
+	sort = {
+		item,
+		state,
+		index: state.elements.indexOf(item),
+		offset: {
+			x: position.x - rectangle.left,
+			y: position.y - rectangle.top
+		},
+		style: {
+			pointerEvents: item.style.pointerEvents,
+			transform: item.style.transform,
+			zIndex: item.style.zIndex
+		}
+	};
+	setAttribute(sort.state.host, GRID_ATTRIBUTE_SORTING, "");
+	setAttribute(sort.item, GRID_ATTRIBUTE_ITEM_ACTIVE, "");
+	gridStyling.set();
+	onPointermove(event);
+}
+function onPointermove(event) {
+	if (sort == null) return;
+	const { x, y } = getEventPosition(event);
+	sort.item.style.pointerEvents = "none";
+	sort.item.style.position = "fixed";
+	sort.item.style.transform = `translate3d(${x - sort.offset.x}px, ${y - sort.offset.y}px, 0)`;
+	sort.item.style.zIndex = "1000";
+	const dispatched = new OuiGridSortEvent(GRID_EVENT_SORT_CHANGE, { detail: { item: sort.item } });
+	if (dispatch(sort.state.host, dispatched).defaultPrevented) sort = endGridSort(sort);
+}
+function onPointerup(event) {
+	if (sort == null) return;
+	const target = findAncestor(event, GRID_SELECTOR_ITEM);
+	if (target == null) {
+		sort = endGridSort(sort);
+		return;
+	}
+	if (findAncestor(target, "oui-grid")?.[GRID_SYMBOL] !== sort.state) {
+		sort = endGridSort(sort);
+		return;
+	}
+	sort = endGridSort(sort, target);
+}
+let sort;
+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 });
+export { onGridResized as a, disconnectGrid as c, onGridMutation as i, endGridSort as l, onGridAttributeChanged as n, connectGrid as o, onGridItemResized as r, createGridState as s, onBeginResizeGridItem as t, updateGrid as u };

package/dist/js/grid.model-SiNst5db.d.mts

@@ -0,0 +1,90 @@
+import { a as OuiResizableEventDetail } from "./resizable.model-BOufXDXx.mjs";
+import { StyleToggler } from "@oscarpalmer/toretto/style";
+import { EventPosition } from "@oscarpalmer/toretto/models";
+type GridColumns = {
+  attribute: [number, number | undefined];
+  count: number;
+  width: number;
+};
+type GridGap = {
+  attribute?: number;
+  style?: string;
+  value: number;
+};
+type GridItem = {
+  height: number;
+  width: number;
+  x: number;
+  y: number;
+};
+type GridSort = {
+  index: number;
+  item: HTMLElement;
+  offset: EventPosition;
+  state: GridState;
+  style: GridSortStyle;
+};
+type GridSortStyle = {
+  pointerEvents: string;
+  transform: string;
+  zIndex: string;
+};
+type GridState = {
+  active?: HTMLElement;
+  callbacks: GridStateCallbacks;
+  columns?: GridColumns;
+  elements: HTMLElement[];
+  gap: GridGap;
+  height?: number;
+  host: HTMLElement;
+  mutationObserver: MutationObserver;
+  sortable: boolean;
+};
+type GridStateCallbacks = {
+  onResizeBegin: (element: Element, size: OuiResizableEventDetail) => void;
+  onResizeCancel: (element: Element, size: OuiResizableEventDetail) => void;
+  onResizeEnd: (element: Element, size: OuiResizableEventDetail) => void;
+  onResizeUpdate: (element: Element, size: OuiResizableEventDetail) => void;
+};
+declare class OuiGridResizeEvent extends CustomEvent<OuiGridResizeEventDetail> {}
+type OuiGridResizeEventDetail = {
+  item: HTMLElement;
+} & OuiResizableEventDetail;
+declare class OuiGridResizeHandlerEvent extends CustomEvent<OuiGridResizeHandlerEventDetail> {
+  constructor(detail: OuiGridResizeHandlerEventDetail);
+}
+type OuiGridResizeHandlerEventDetail = {
+  handle: HTMLElement;
+  item: HTMLElement;
+};
+declare class OuiGridSortEvent extends CustomEvent<OuiGridEventSortDetail> {}
+type OuiGridEventSortDetail = {
+  destination?: HTMLElement;
+  item: HTMLElement;
+};
+declare const GRID_TAGNAME = "oui-grid";
+declare const GRID_ATTRIBUTE_COLUMNS = "columns";
+declare const GRID_ATTRIBUTE_GAP = "gap";
+declare const GRID_ATTRIBUTE_ITEM: string;
+declare const GRID_ATTRIBUTE_ITEM_ACTIVE: string;
+declare const GRID_ATTRIBUTE_ITEM_HANDLE: string;
+declare const GRID_ATTRIBUTE_PLACEHOLDER: string;
+declare const GRID_ATTRIBUTE_RESIZABLE = "resizable";
+declare const GRID_ATTRIBUTE_SORTABLE = "sortable";
+declare const GRID_ATTRIBUTE_SORTING: string;
+declare const GRID_ATTRIBUTE_SPAN: string;
+declare const GRID_EVENT_RESIZE_BEGIN = "resize:begin";
+declare const GRID_EVENT_RESIZE_CANCEL = "resize:cancel";
+declare const GRID_EVENT_RESIZE_CHANGE = "resize:change";
+declare const GRID_EVENT_RESIZE_END = "resize:end";
+declare const GRID_EVENT_RESIZE_HANDLE = "resize:handle";
+declare const GRID_EVENT_SORT_BEGIN = "sort:begin";
+declare const GRID_EVENT_SORT_CANCEL = "sort:cancel";
+declare const GRID_EVENT_SORT_CHANGE = "sort:change";
+declare const GRID_EVENT_SORT_END = "sort:end";
+declare const GRID_SELECTOR_HANDLE: string;
+declare const GRID_SELECTOR_ITEM: string;
+declare const GRID_SELECTOR_ITEM_SCOPED: string;
+declare const GRID_SYMBOL: unique symbol;
+declare const gridStyling: StyleToggler;
+export { OuiGridEventSortDetail as A, GRID_SYMBOL as C, GridItem as D, GridGap as E, OuiGridSortEvent as F, gridStyling as I, OuiGridResizeEventDetail as M, OuiGridResizeHandlerEvent as N, GridSort as O, OuiGridResizeHandlerEventDetail as P, GRID_SELECTOR_ITEM_SCOPED as S, GridColumns as T, GRID_EVENT_SORT_CANCEL as _, GRID_ATTRIBUTE_ITEM_HANDLE as a, GRID_SELECTOR_HANDLE as b, GRID_ATTRIBUTE_SORTABLE as c, GRID_EVENT_RESIZE_BEGIN as d, GRID_EVENT_RESIZE_CANCEL as f, GRID_EVENT_SORT_BEGIN as g, GRID_EVENT_RESIZE_HANDLE as h, GRID_ATTRIBUTE_ITEM_ACTIVE as i, OuiGridResizeEvent as j, GridState as k, GRID_ATTRIBUTE_SORTING as l, GRID_EVENT_RESIZE_END as m, GRID_ATTRIBUTE_GAP as n, GRID_ATTRIBUTE_PLACEHOLDER as o, GRID_EVENT_RESIZE_CHANGE as p, GRID_ATTRIBUTE_ITEM as r, GRID_ATTRIBUTE_RESIZABLE as s, GRID_ATTRIBUTE_COLUMNS as t, GRID_ATTRIBUTE_SPAN as u, GRID_EVENT_SORT_CHANGE as v, GRID_TAGNAME as w, GRID_SELECTOR_ITEM as x, GRID_EVENT_SORT_END as y };

package/dist/js/index.d.mts

@@ -1,30 +1,31 @@
-import { c as OuiFloatable, t as CreateOuiFloatableOptions, u as OuiFloatablePosition } from "./floatable.model-DXsQgoU7.mjs";
-import { N as OuiColorPickerEvent } from "./color-picker.constants-BZgXQr5o.mjs";
-import { a as setColorPickerLocalizations } from "./color-picker.misc-BIS3R6jk.mjs";
-import { OuiColorPickerElement } from "./color-picker/index.mjs";
-import { i as setComboboxLocalizations } from "./combobox.misc-DRDFk6X8.mjs";
-import { OuiComboboxElement } from "./combobox/index.mjs";
-import { $ as OuiSortable, p as CreateOuiDraggableOptions, u as OuiMovable } from "./movable.model-D9nnPWKk.mjs";
-import { n as OuiResizable, t as CreateOuiResizableOptions } from "./resizable.model-YEtcC9li.mjs";
-import { c as OuiDialog } from "./dialog.model-HVzYWoDo.mjs";
-import { getDialog } from "./dialog/index.mjs";
-import { n as createFloatable } from "./floatable.embedded-ncshL3Sa.mjs";
+import { c as OuiFloatable, t as CreateOuiFloatableOptions, u as OuiFloatablePosition } from "./floatable.model-jS5Ui5Av.mjs";
+import { N as OuiColorPickerEvent } from "./color-picker.constants-DdttC4ab.mjs";
+import { a as setColorPickerLocalizations } from "./color-picker.misc-BH_tFyWR.mjs";
 import "./floatable/floatable.standalone.mjs";
-import { c as OuiFocusTrap, l as OuiFocusTrapOptions } from "./focus-trap.model-CpltX5B5.mjs";
-import { t as createFocusTrap } from "./focus-trap.embedded-DpcPkP7c.mjs";
-import { t as createMovable } from "./movable.embedded-C1bDTLGs.mjs";
+import { i as setComboboxLocalizations } from "./combobox.misc-Csh9lm9_.mjs";
 import "./movable/movable.standalone.mjs";
-import { t as createResizable } from "./resizable.embedded-BemH-7Re.mjs";
+import { d as OuiMovable, m as CreateOuiDraggableOptions, nt as OuiSortable } from "./movable.model-CQ3AbTrq.mjs";
+import { i as OuiResizableEvent, n as OuiResizable, t as CreateOuiResizableOptions } from "./resizable.model-BOufXDXx.mjs";
+import { c as OuiDialog } from "./dialog.model-cYq7rTKL.mjs";
 import "./resizable/resizable.standalone.mjs";
-import { t as createSortable } from "./sortable.embedded-CrEGff9k.mjs";
+import { n as createFloatable } from "./floatable.embedded-Cr1KX6GZ.mjs";
 import "./sortable/sortable.standalone.mjs";
-import { n as setListboxLocalizations } from "./listbox.misc-DwfB4Mu_.mjs";
+import { l as OuiFocusTrap, u as OuiFocusTrapOptions } from "./focus-trap.model-wg0iAZ7x.mjs";
+import { t as createFocusTrap } from "./focus-trap.embedded-BVXcd4OO.mjs";
+import { OuiColorPickerElement } from "./color-picker/index.mjs";
+import { t as createMovable } from "./movable.embedded-HjPPob-Z.mjs";
+import { OuiComboboxElement } from "./combobox/index.mjs";
+import { t as createResizable } from "./resizable.embedded-DQclAEP-.mjs";
+import { getDialog } from "./dialog/index.mjs";
+import { t as createSortable } from "./sortable.embedded-B5LPz-c_.mjs";
+import { OuiGridElement } from "./grid/index.mjs";
+import { n as setListboxLocalizations } from "./listbox.misc-CkW28nUS.mjs";
 import { OuiListboxElement } from "./listbox/index.mjs";
-import { t as OuiPopover } from "./popover.model-DiLdz0Hc.mjs";
+import { t as OuiPopover } from "./popover.model-CrrIdSmS.mjs";
 import { getPopover } from "./popover/index.mjs";
 import { OuiSplitterElement } from "./splitter/index.mjs";
-import { r as OuiTabsEvent } from "./tabs.model-BHPy7fPo.mjs";
+import { r as OuiTabsEvent } from "./tabs.model-CvylbR2o.mjs";
 import { OuiTabsElement } from "./tabs/index.mjs";
-import { t as OuiTooltip } from "./tooltip.model-BpNStw5z.mjs";
+import { t as OuiTooltip } from "./tooltip.model-BI3UK-VU.mjs";
 import { getTooltip, setTooltipDelay } from "./tooltip/index.mjs";
-export { type CreateOuiFloatableOptions, type CreateOuiDraggableOptions as CreateOuiMovableOptions, type CreateOuiDraggableOptions as CreateOuiSortableOptions, type CreateOuiResizableOptions, OuiColorPickerElement, OuiColorPickerEvent, OuiComboboxElement, type OuiDialog, type OuiFloatable, type OuiFloatablePosition, type OuiFocusTrap, type OuiFocusTrapOptions, OuiListboxElement, type OuiMovable, type OuiPopover, type OuiResizable, type OuiSortable, OuiSplitterElement, OuiTabsElement, OuiTabsEvent, type OuiTooltip, createFloatable, createFocusTrap, createMovable, createResizable as createOuiResizable, createSortable, getDialog, getPopover, getTooltip, setColorPickerLocalizations, setComboboxLocalizations, setListboxLocalizations, setTooltipDelay };
+export { type CreateOuiFloatableOptions, type CreateOuiDraggableOptions as CreateOuiMovableOptions, type CreateOuiDraggableOptions as CreateOuiSortableOptions, type CreateOuiResizableOptions, OuiColorPickerElement, OuiColorPickerEvent, OuiComboboxElement, type OuiDialog, type OuiFloatable, type OuiFloatablePosition, type OuiFocusTrap, type OuiFocusTrapOptions, OuiGridElement, OuiListboxElement, type OuiMovable, type OuiPopover, type OuiResizable, OuiResizableEvent, type OuiSortable, OuiSplitterElement, OuiTabsElement, OuiTabsEvent, type OuiTooltip, createFloatable, createFocusTrap, createMovable, createResizable as createOuiResizable, createSortable, getDialog, getPopover, getTooltip, setColorPickerLocalizations, setComboboxLocalizations, setListboxLocalizations, setTooltipDelay };