@oscarpalmer/oui 0.42.0 → 0.43.0

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-vCxaFdOA.mjs";
-import { c as OuiDialog } from "./dialog.model-Dv_h9Kns.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-D9mb-Wm_.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 };

package/dist/js/index.mjs

@@ -6,6 +6,7 @@ import { createFocusTrap } from "./focus-trap/focus-trap.embedded.mjs";
 import "./focus-trap/focus-trap.standalone.mjs";
 import { createMovable } from "./movable/movable.embedded.mjs";
 import "./movable/movable.standalone.mjs";
+import { OuiResizableEvent } from "./resizable/resizable.model.mjs";
 import { createResizable } from "./resizable/resizable.embedded.mjs";
 import "./resizable/resizable.standalone.mjs";
 import { createSortable } from "./sortable/sortable.embedded.mjs";
@@ -13,14 +14,15 @@ import "./sortable/sortable.standalone.mjs";
 import { OuiColorPickerEvent } from "./color-picker/color-picker.model.mjs";
 import { setColorPickerLocalizations } from "./color-picker/color-picker.misc.mjs";
 import { OuiColorPickerElement } from "./color-picker/index.mjs";
-import { D as setComboboxLocalizations } from "./combobox.state-AstCICiH.mjs";
+import { D as setComboboxLocalizations } from "./combobox.state-Bjt0dwe3.mjs";
 import { OuiComboboxElement } from "./combobox/index.mjs";
 import { getDialog } from "./dialog/index.mjs";
-import { s as setListboxLocalizations } from "./listbox.state-BrN296BM.mjs";
+import { OuiGridElement } from "./grid/index.mjs";
+import { s as setListboxLocalizations } from "./listbox.state-DO58GDqc.mjs";
 import { OuiListboxElement } from "./listbox/index.mjs";
 import { getPopover } from "./popover/index.mjs";
 import { OuiSplitterElement } from "./splitter/index.mjs";
 import { OuiTabsEvent } from "./tabs/tabs.model.mjs";
 import { OuiTabsElement } from "./tabs/index.mjs";
 import { getTooltip, setTooltipDelay } from "./tooltip/index.mjs";
-export { OuiColorPickerElement, OuiColorPickerEvent, OuiComboboxElement, OuiListboxElement, OuiSplitterElement, OuiTabsElement, OuiTabsEvent, createFloatable, createFocusTrap, createMovable, createResizable as createOuiResizable, createSortable, getDialog, getPopover, getTooltip, setColorPickerLocalizations, setComboboxLocalizations, setListboxLocalizations, setTooltipDelay };
+export { OuiColorPickerElement, OuiColorPickerEvent, OuiComboboxElement, OuiGridElement, OuiListboxElement, OuiResizableEvent, OuiSplitterElement, OuiTabsElement, OuiTabsEvent, createFloatable, createFocusTrap, createMovable, createResizable as createOuiResizable, createSortable, getDialog, getPopover, getTooltip, setColorPickerLocalizations, setComboboxLocalizations, setListboxLocalizations, setTooltipDelay };

package/dist/js/internal/attributable.d.mts

@@ -1,3 +1 @@
-//#region src/js/internal/attributable.d.ts
-export declare function attributable(attribute: string, add: (element: Element) => void, remove: (element: Element) => void): void;
-//#endregion
+export declare function attributable(attribute: string, add: (element: Element) => void, remove: (element: Element) => void): void;

package/dist/js/internal/attributable.mjs

@@ -1,5 +1,5 @@
 import { filter } from "@oscarpalmer/atoms/array/filter";
-//#region src/js/internal/attributable.ts
+// src/js/internal/attributable.ts
 function attributable(attribute, add, remove) {
 	new MutationObserver((entries) => {
 		const { length } = entries;
@@ -7,7 +7,7 @@ function attributable(attribute, add, remove) {
 			const entry = entries[index];
 			if (entry.type === "attributes" && entry.target instanceof Element) {
 				if (entry.target.hasAttribute(attribute)) handleAdded(attribute, [entry.target], add);
-				else handleRemoved([entry.target], remove);
+				else remove(entry.target);
 			} else if (entry.type === "childList") {
 				handleAdded(attribute, entry.addedNodes, add);
 				handleRemoved(entry.removedNodes, remove);
@@ -37,9 +37,9 @@ function handleRemoved(nodes, remove) {
 	const { length } = elements;
 	for (let index = 0; index < length; index += 1) {
 		const element = elements[index];
+		if (element.isConnected) continue;
 		remove(element);
 		if (element.hasChildNodes()) handleRemoved(element.childNodes, remove);
 	}
 }
-//#endregion
 export { attributable };

package/dist/js/internal/draggable/draggable.model.d.mts

@@ -1,2 +1,2 @@
-import { A as OuiDraggableGlobals, B as OuiDraggableOptionsDrag, C as OuiDragCancel, D as OuiDraggable, E as OuiDragMovePosition, F as OuiDraggableOptionsContainer, G as OuiDraggableStates, H as OuiDraggableOptionsPositionGetOffset, I as OuiDraggableOptionsContainerOnDestroy, J as draggableHorizontals, K as draggableContainers, L as OuiDraggableOptionsContainerOnInitialize, M as OuiDraggableInstances, N as OuiDraggableItem, O as OuiDraggableBound, P as OuiDraggableOptions, Q as draggableVerticals, R as OuiDraggableOptionsDirection, S as OuiDragBegin, T as OuiDragMove, U as OuiDraggableOptionsPositionGetOriginal, V as OuiDraggableOptionsPosition, W as OuiDraggableState, X as draggableStyleToggler, Y as draggableProperties, Z as draggableStyles, _ as DRAGGABLE_SELECTOR, b as DRAGGABLE_SELECTOR_SORTABLE_ITEM, g as DRAGGABLE_KEY_ESCAPE, h as DRAGGABLE_ATTRIBUTE_SORTABLE, j as OuiDraggableGlobalsElement, k as OuiDraggableDirection, m as DRAGGABLE_ATTRIBUTE_MOVABLE, p as CreateOuiDraggableOptions, q as draggableGlobals, v as DRAGGABLE_SELECTOR_MOVABLE_HANDLE, w as OuiDragEnd, x as DRAGGABLE_SYMBOL, y as DRAGGABLE_SELECTOR_SORTABLE_HANDLE, z as OuiDraggableOptionsDirectionOnAfter } from "../../movable.model-D9nnPWKk.mjs";
-export { CreateOuiDraggableOptions, DRAGGABLE_ATTRIBUTE_MOVABLE, DRAGGABLE_ATTRIBUTE_SORTABLE, DRAGGABLE_KEY_ESCAPE, DRAGGABLE_SELECTOR, DRAGGABLE_SELECTOR_MOVABLE_HANDLE, DRAGGABLE_SELECTOR_SORTABLE_HANDLE, DRAGGABLE_SELECTOR_SORTABLE_ITEM, DRAGGABLE_SYMBOL, OuiDragBegin, OuiDragCancel, OuiDragEnd, OuiDragMove, OuiDragMovePosition, OuiDraggable, OuiDraggableBound, OuiDraggableDirection, OuiDraggableGlobals, OuiDraggableGlobalsElement, OuiDraggableInstances, OuiDraggableItem, OuiDraggableOptions, OuiDraggableOptionsContainer, OuiDraggableOptionsContainerOnDestroy, OuiDraggableOptionsContainerOnInitialize, OuiDraggableOptionsDirection, OuiDraggableOptionsDirectionOnAfter, OuiDraggableOptionsDrag, OuiDraggableOptionsPosition, OuiDraggableOptionsPositionGetOffset, OuiDraggableOptionsPositionGetOriginal, OuiDraggableState, OuiDraggableStates, draggableContainers, draggableGlobals, draggableHorizontals, draggableProperties, draggableStyleToggler, draggableStyles, draggableVerticals };
+import { $ as draggableStyleToggler, A as OuiDraggableDirection, B as OuiDraggableOptionsContainerOnInitialize, C as OuiDragBegin, D as OuiDragMovePosition, E as OuiDragMove, F as OuiDraggableInstances, G as OuiDraggableOptionsPositionGetOffset, H as OuiDraggableOptionsDirectionOnAfter, I as OuiDraggableItem, J as OuiDraggableStates, K as OuiDraggableOptionsPositionGetOriginal, L as OuiDraggableOptions, M as OuiDraggableEventDetail, N as OuiDraggableGlobals, O as OuiDraggable, P as OuiDraggableGlobalsElement, Q as draggableProperties, R as OuiDraggableOptionsContainer, S as DRAGGABLE_SYMBOL, T as OuiDragEnd, U as OuiDraggableOptionsDrag, V as OuiDraggableOptionsDirection, W as OuiDraggableOptionsPosition, X as draggableGlobals, Y as draggableContainers, Z as draggableHorizontals, _ as DRAGGABLE_KEY_ESCAPE, b as DRAGGABLE_SELECTOR_SORTABLE_HANDLE, et as draggableStyles, g as DRAGGABLE_ATTRIBUTE_SORTABLE, h as DRAGGABLE_ATTRIBUTE_MOVABLE, j as OuiDraggableEvent, k as OuiDraggableBound, m as CreateOuiDraggableOptions, q as OuiDraggableState, tt as draggableVerticals, v as DRAGGABLE_SELECTOR, w as OuiDragCancel, x as DRAGGABLE_SELECTOR_SORTABLE_ITEM, y as DRAGGABLE_SELECTOR_MOVABLE_HANDLE, z as OuiDraggableOptionsContainerOnDestroy } from "../../movable.model-CQ3AbTrq.mjs";
+export { CreateOuiDraggableOptions, DRAGGABLE_ATTRIBUTE_MOVABLE, DRAGGABLE_ATTRIBUTE_SORTABLE, DRAGGABLE_KEY_ESCAPE, DRAGGABLE_SELECTOR, DRAGGABLE_SELECTOR_MOVABLE_HANDLE, DRAGGABLE_SELECTOR_SORTABLE_HANDLE, DRAGGABLE_SELECTOR_SORTABLE_ITEM, DRAGGABLE_SYMBOL, OuiDragBegin, OuiDragCancel, OuiDragEnd, OuiDragMove, OuiDragMovePosition, OuiDraggable, OuiDraggableBound, OuiDraggableDirection, OuiDraggableEvent, OuiDraggableEventDetail, OuiDraggableGlobals, OuiDraggableGlobalsElement, OuiDraggableInstances, OuiDraggableItem, OuiDraggableOptions, OuiDraggableOptionsContainer, OuiDraggableOptionsContainerOnDestroy, OuiDraggableOptionsContainerOnInitialize, OuiDraggableOptionsDirection, OuiDraggableOptionsDirectionOnAfter, OuiDraggableOptionsDrag, OuiDraggableOptionsPosition, OuiDraggableOptionsPositionGetOffset, OuiDraggableOptionsPositionGetOriginal, OuiDraggableState, OuiDraggableStates, draggableContainers, draggableGlobals, draggableHorizontals, draggableProperties, draggableStyleToggler, draggableStyles, draggableVerticals };

package/dist/js/internal/draggable/draggable.model.mjs

@@ -1,5 +1,6 @@
 import { toggleStyles } from "@oscarpalmer/toretto/style";
-//#region src/js/internal/draggable/draggable.model.ts
+// src/js/internal/draggable/draggable.model.ts
+var OuiDraggableEvent = class extends CustomEvent {};
 const DRAGGABLE_ATTRIBUTE_MOVABLE = "oui-movable";
 const DRAGGABLE_ATTRIBUTE_SORTABLE = "oui-sortable";
 const DRAGGABLE_KEY_ESCAPE = "Escape";
@@ -33,5 +34,4 @@ const draggableStyles = {
 };
 const draggableStyleToggler = toggleStyles(document.body, draggableStyles);
 const draggableVerticals = /* @__PURE__ */ new Set(["vertical", "y"]);
-//#endregion
-export { DRAGGABLE_ATTRIBUTE_MOVABLE, DRAGGABLE_ATTRIBUTE_SORTABLE, DRAGGABLE_KEY_ESCAPE, DRAGGABLE_SELECTOR, DRAGGABLE_SELECTOR_MOVABLE_HANDLE, DRAGGABLE_SELECTOR_SORTABLE_HANDLE, DRAGGABLE_SELECTOR_SORTABLE_ITEM, DRAGGABLE_SYMBOL, draggableContainers, draggableGlobals, draggableHorizontals, draggableProperties, draggableStyleToggler, draggableStyles, draggableVerticals };
+export { DRAGGABLE_ATTRIBUTE_MOVABLE, DRAGGABLE_ATTRIBUTE_SORTABLE, DRAGGABLE_KEY_ESCAPE, DRAGGABLE_SELECTOR, DRAGGABLE_SELECTOR_MOVABLE_HANDLE, DRAGGABLE_SELECTOR_SORTABLE_HANDLE, DRAGGABLE_SELECTOR_SORTABLE_ITEM, DRAGGABLE_SYMBOL, OuiDraggableEvent, draggableContainers, draggableGlobals, draggableHorizontals, draggableProperties, draggableStyleToggler, draggableStyles, draggableVerticals };

package/dist/js/internal/draggable/index.d.mts

@@ -1,6 +1,5 @@
-import { D as OuiDraggable, G as OuiDraggableStates, M as OuiDraggableInstances, O as OuiDraggableBound, P as OuiDraggableOptions, W as OuiDraggableState, p as CreateOuiDraggableOptions } from "../../movable.model-D9nnPWKk.mjs";
+import { F as OuiDraggableInstances, J as OuiDraggableStates, L as OuiDraggableOptions, O as OuiDraggable, k as OuiDraggableBound, m as CreateOuiDraggableOptions, q as OuiDraggableState } from "../../movable.model-CQ3AbTrq.mjs";
 import { PlainObject } from "@oscarpalmer/atoms/models";
-//#region src/js/internal/draggable/index.d.ts
 export declare function addDraggable<Property extends keyof OuiDraggableInstances, Instance extends OuiDraggableInstances[Property]>(this: OuiDraggableBound<Property, Instance>, element: Element, options?: CreateOuiDraggableOptions): Instance;
 export declare function destroyDraggable<ExtraState extends PlainObject>(draggable: OuiDraggable<ExtraState>): void;
 export declare function getDraggableStates(element: Element): OuiDraggableStates | undefined;
@@ -9,5 +8,4 @@ export declare function initializeDraggable<ExtraState extends PlainObject>(drag
 export declare function removeDraggable<Property extends keyof OuiDraggableInstances, Instance extends OuiDraggableInstances[Property]>(this: {
   constructor: new (element: Element) => Instance;
   property: Property;
-}, element: Element): void;
-//#endregion
+}, element: Element): void;