@oscarpalmer/oui 0.29.0 → 0.30.0

package/dist/js/internal/draggable.mjs

@@ -1,25 +1,24 @@
-import { getPosition, on } from "@oscarpalmer/toretto/event";
-import { getAttribute, setAttribute } from "@oscarpalmer/toretto/attribute";
-import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
-import { setStyle, setStyles, toggleStyles } from "@oscarpalmer/toretto/style";
 import { clamp } from "@oscarpalmer/atoms/number";
+import { getAttribute, setAttribute } from "@oscarpalmer/toretto/attribute";
+import { dispatch, getPosition, on } from "@oscarpalmer/toretto/event";
 import { findAncestor } from "@oscarpalmer/toretto/find";
+import { setStyle, setStyles, toggleStyles } from "@oscarpalmer/toretto/style";
+import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
 import supportsTouch from "@oscarpalmer/toretto/touch";
 //#region src/js/internal/draggable.ts
 var OuiDraggable = class {
 	#destroyed = false;
-	#name;
 	#state;
 	get element() {
 		return this.#state.element;
 	}
 	constructor(name, event, attribute, element, options, extras) {
-		this.#name = name;
 		this.#state = {
 			...extras,
 			attribute,
 			element,
 			event,
+			name,
 			options,
 			horizontal: true,
 			vertical: true,
@@ -34,7 +33,7 @@ var OuiDraggable = class {
 		setAttribute(element, attribute, "");
 		let states = globals.states.get(element);
 		states ??= {};
-		states[this.#name] = this.#state;
+		states[this.#state.name] = this.#state;
 		globals.states.set(element, states);
 	}
 	destroy() {
@@ -52,6 +51,12 @@ function addDraggable(element, options) {
 	instances[this.property] ??= new this.constructor(element, options);
 	return instances[this.property];
 }
+function cancelDrag(item) {
+	if (item == null) return;
+	item.state.options.drag.onCancel?.(globals, item);
+	dispatch(item.state.element, `${item.state.name}:cancel`, { detail: { element: item.state.options.getOrigin() } });
+	reset();
+}
 function destroyInstance(instance, state) {
 	unsetContainer({
 		instance,
@@ -87,10 +92,7 @@ function getNextPosition(item, position) {
 	};
 }
 function onKeydown(event) {
-	if (current == null || event.key !== KEY_ESCAPE) return;
-	current.state.options.drag.onCancel?.(globals, current);
-	current.state.element.dispatchEvent(new CustomEvent(`${current.state.event}:cancel`, { detail: { element: current.state.options.getOrigin() } }));
-	reset();
+	if (current != null && event.key === KEY_ESCAPE) cancelDrag(current);
 }
 function onPointerdown(event) {
 	if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || (supportsTouch.value ? event.type === "mousedown" : event.type === "touchstart" || event.button !== 0)) return;
@@ -128,16 +130,16 @@ function onPointerdown(event) {
 	};
 	globals.offset = item.state.options.position.getOffset(globals, item, element, position);
 	globals.original = item.state.options.position.getOriginal(globals, item, position);
-	const begin = new CustomEvent(`${item.state.event}:begin`, {
+	const dispatch = new CustomEvent(`${item.state.name}:begin`, {
 		detail: {
 			element,
 			position: { ...globals.original }
 		},
 		cancelable: true
 	});
-	item.state.element.dispatchEvent(begin);
+	item.state.element.dispatchEvent(dispatch);
 	setTimeout(() => {
-		if (begin.defaultPrevented) {
+		if (dispatch.defaultPrevented) {
 			item.state.options.drag.onCancel?.(globals, item);
 			reset();
 			return;
@@ -163,7 +165,14 @@ function onPointermove(event) {
 		calculated: next,
 		original: position
 	});
-	current.state.element.dispatchEvent(new CustomEvent(`${current.state.event}:move`, { detail }));
+	const dispatch = new CustomEvent(`${current.state.name}:move`, {
+		detail,
+		cancelable: true
+	});
+	current.state.element.dispatchEvent(dispatch);
+	setTimeout(() => {
+		if (dispatch.defaultPrevented) cancelDrag(current);
+	});
 }
 function onPointerup(event) {
 	current?.state.options.drag.onEnd?.(event, globals, current, reset);

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

@@ -1,5 +1,4 @@
 import { AriaRole, RemovableEventListener } from "@oscarpalmer/toretto/models";
-
 //#region src/js/internal/navigable.d.ts
 declare class OuiNavigable {
   active: OuiNavigableActive;

package/dist/js/internal/navigable.mjs

@@ -1,8 +1,8 @@
-import { getAria, setRole } from "@oscarpalmer/toretto/aria";
-import { on } from "@oscarpalmer/toretto/event";
-import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
 import { clamp } from "@oscarpalmer/atoms/number";
+import { getAria, setRole } from "@oscarpalmer/toretto/aria";
+import { dispatch, on } from "@oscarpalmer/toretto/event";
 import { findAncestor } from "@oscarpalmer/toretto/find";
+import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
 //#region src/js/internal/navigable.ts
 var OuiNavigable = class {
 	active = { index: 0 };
@@ -88,6 +88,7 @@ function updateNavigableFocus(navigable, focus, items) {
 	for (let index = 0; index < length; index += 1) updated[index].tabIndex = index === navigable.active.index ? 0 : -1;
 	navigable.active.element ??= updated[navigable.active.index];
 	if (focus) navigable.active.element?.focus();
+	dispatch(navigable.active.element, "navigable:change", { detail: { ...navigable.active } });
 }
 const KEYS_ABSOLUTE = /* @__PURE__ */ new Set(["End", "Home"]);
 const KEYS_ACTIVATE = /* @__PURE__ */ new Set(["Enter", " "]);

package/dist/js/menu.mjs

@@ -2,8 +2,8 @@ import { createEmbeddedFloatable, getOnBeforeToggleListener } from "./floatable/
 import { attributable } from "./internal/attributable.mjs";
 import { NAVIGABLE_KEYS_HORIZONTAL, NAVIGABLE_KEYS_VERTICAL, getNavigable, updateNavigableFocus } from "./internal/navigable.mjs";
 import { setAria, setRole } from "@oscarpalmer/toretto/aria";
-import { on } from "@oscarpalmer/toretto/event";
 import { setAttribute } from "@oscarpalmer/toretto/attribute";
+import { on } from "@oscarpalmer/toretto/event";
 import { findAncestor } from "@oscarpalmer/toretto/find";
 //#region src/js/menu.ts
 var OuiMenu = class {

package/dist/js/movable/movable.embedded.d.mts

@@ -1,2 +1,2 @@
-import { g as createMovable, h as OuiMovable, m as ATTRIBUTE_MOVABLE_HANDLE, p as ATTRIBUTE_MOVABLE } from "../draggable-fIYXd8eO.mjs";
+import { g as createMovable, h as OuiMovable, m as ATTRIBUTE_MOVABLE_HANDLE, p as ATTRIBUTE_MOVABLE } from "../draggable-a6w0J1OD.mjs";
 export { ATTRIBUTE_MOVABLE, ATTRIBUTE_MOVABLE_HANDLE, OuiMovable, createMovable };

package/dist/js/movable/movable.embedded.mjs

@@ -1,9 +1,9 @@
 import { attributable } from "../internal/attributable.mjs";
 import { OuiDraggable, addDraggable, getDraggableStates, removeDraggable } from "../internal/draggable.mjs";
-import { getPosition, on } from "@oscarpalmer/toretto/event";
 import { setAttribute } from "@oscarpalmer/toretto/attribute";
-import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
+import { getPosition, on } from "@oscarpalmer/toretto/event";
 import { getStyles, setStyle, setStyles } from "@oscarpalmer/toretto/style";
+import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
 //#region src/js/movable/movable.embedded.ts
 var OuiMovable = class extends OuiDraggable {
 	#element;
@@ -110,7 +110,7 @@ function onEnd(event, globals, item, reset) {
 	}
 	const container = state.container?.getBoundingClientRect();
 	if (container != null) setOffset(state, container);
-	const end = new CustomEvent(EVENT_END, {
+	const end = new CustomEvent("movable:end", {
 		detail: {
 			from: { ...globals.original },
 			to: getPosition(event)
@@ -162,7 +162,6 @@ const ATTRIBUTE_DIRECTION = `${ATTRIBUTE_MOVABLE}-direction`;
 const ATTRIBUTE_MOVABLE_HANDLE = `${ATTRIBUTE_MOVABLE}-handle`;
 const ATTRIBUTE_MOVING = `${ATTRIBUTE_MOVABLE}-moving`;
 const CONTAINERS = /* @__PURE__ */ new Map();
-const EVENT_END = "move:end";
 const MESSAGE = "The element must be an instance of HTMLElement or SVGElement";
 const MOVED = /* @__PURE__ */ new Set();
 const SELECTOR_HANDLE = `[${ATTRIBUTE_MOVABLE_HANDLE}]`;

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

@@ -1,2 +1,2 @@
-import { g as createMovable, h as OuiMovable, t as CreateOuiDraggableOptions } from "../draggable-fIYXd8eO.mjs";
+import { g as createMovable, h as OuiMovable, t as CreateOuiDraggableOptions } from "../draggable-a6w0J1OD.mjs";
 export { type CreateOuiDraggableOptions as CreateOuiMovableOptions, type OuiMovable, createMovable };

package/dist/js/popover.d.mts

@@ -1,7 +1,6 @@
-import { r as OuiFloatable } from "./floatable.embedded-DUR8bQBK.mjs";
+import { r as OuiFloatable } from "./floatable.embedded-Bct4U5Dm.mjs";
 import { i as OuiFocusTrap } from "./focus-trap.embedded-DR8NpZfr.mjs";
 import { RemovableEventListener } from "@oscarpalmer/toretto/models";
-
 //#region src/js/popover.d.ts
 declare class OuiPopover {
   #private;

package/dist/js/popover.mjs

@@ -2,8 +2,8 @@ import { createEmbeddedFloatable, getOnBeforeToggleListener } from "./floatable/
 import { attributable } from "./internal/attributable.mjs";
 import { createFocusTrap } from "./focus-trap/focus-trap.embedded.mjs";
 import { getAria, setAria } from "@oscarpalmer/toretto/aria";
-import { on } from "@oscarpalmer/toretto/event";
 import { setAttribute } from "@oscarpalmer/toretto/attribute";
+import { on } from "@oscarpalmer/toretto/event";
 import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
 //#region src/js/popover.ts
 var OuiPopover = class {
@@ -110,7 +110,7 @@ function removePopover(element) {
 const ATTRIBUTE = "oui-popover";
 const ATTRIBUTE_OPEN = `${ATTRIBUTE}-open`;
 const options = {
-	attribute: `${ATTRIBUTE}position`,
+	attribute: `${ATTRIBUTE}-position`,
 	position: "below-start",
 	reusable: false
 };

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

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

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

@@ -1,11 +1,11 @@
 import { attributable } from "../internal/attributable.mjs";
-import { getPosition, on } from "@oscarpalmer/toretto/event";
-import { isPlainObject } from "@oscarpalmer/atoms/is";
-import { getAttribute, setAttribute } from "@oscarpalmer/toretto/attribute";
-import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
-import { setStyles, toggleStyles } from "@oscarpalmer/toretto/style";
 import { getNumber } from "@oscarpalmer/atoms/number";
+import { getAttribute, setAttribute } from "@oscarpalmer/toretto/attribute";
+import { dispatch, getPosition, on } from "@oscarpalmer/toretto/event";
 import { findAncestor } from "@oscarpalmer/toretto/find";
+import { setStyles, toggleStyles } from "@oscarpalmer/toretto/style";
+import { isPlainObject } from "@oscarpalmer/atoms/is";
+import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
 import supportsTouch from "@oscarpalmer/toretto/touch";
 //#region src/js/resizable/resizable.embedded.ts
 var OuiResizable = class {
@@ -43,6 +43,15 @@ function addResizable(element, options) {
 	}
 	return item?.instance;
 }
+function cancelResize(item) {
+	if (item == null) return;
+	setStyles(item.state.element, {
+		height: `${item.state.height}px`,
+		width: `${item.state.width}px`
+	});
+	resetResizable();
+	dispatch(item.state.element, "resizable:cancel");
+}
 /**
 * Creates _(or retrieves)_ a _OuiResizable_ instance for an element
 *
@@ -112,12 +121,7 @@ function getXAndY(first, second) {
 	return [xAsNumber, yAsNumber];
 }
 function onKeydown(event) {
-	if (current == null || event.key !== "Escape") return;
-	setStyles(current.state.element, {
-		height: `${current.state.height}px`,
-		width: `${current.state.width}px`
-	});
-	resetResizable();
+	if (current != null && event.key === "Escape") cancelResize(current);
 }
 function onPointerdown(event) {
 	if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || (supportsTouch.value ? event.type === "mousedown" : event.type === "touchstart" || event.button !== 0)) return;
@@ -127,10 +131,15 @@ function onPointerdown(event) {
 	const position = getPosition(event);
 	if (stored == null || position == null) return;
 	if (supportsTouch.value) event.preventDefault();
-	current = stored;
-	start = position;
-	current.state.styles.set();
-	styleToggler.set();
+	const dispatch = new CustomEvent("resizable:begin", { cancelable: true });
+	element.dispatchEvent(dispatch);
+	setTimeout(() => {
+		if (dispatch.defaultPrevented) return;
+		current = stored;
+		start = position;
+		current.state.styles.set();
+		styleToggler.set();
+	});
 }
 function onPointermove(event) {
 	if (current == null) return;
@@ -142,13 +151,32 @@ function onPointermove(event) {
 		height,
 		width
 	});
+	const dispatch = new CustomEvent("resizable:resize", {
+		cancelable: true,
+		detail: {
+			height,
+			width
+		}
+	});
+	current.state.element.dispatchEvent(dispatch);
+	setTimeout(() => {
+		if (dispatch.defaultPrevented) cancelResize(current);
+	});
 }
 function onPointerup() {
 	if (current == null) return;
-	const { height, width } = current.state.element.getBoundingClientRect();
-	current.state.height = height;
-	current.state.width = width;
-	resetResizable();
+	const dispatch = new CustomEvent("resizable:end", { cancelable: true });
+	current.state.element.dispatchEvent(dispatch);
+	setTimeout(() => {
+		if (current == null || dispatch.defaultPrevented) {
+			cancelResize(current);
+			return;
+		}
+		const { height, width } = current.state.element.getBoundingClientRect();
+		current.state.height = height;
+		current.state.width = width;
+		resetResizable();
+	});
 }
 function removeResizable(element) {
 	items.get(element)?.instance.destroy();

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

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

package/dist/js/{resizable.embedded-CXrUVPzR.d.mts → resizable.embedded-3qoR0Bjm.d.mts}

@@ -1,5 +1,4 @@
 import { StyleToggler } from "@oscarpalmer/toretto/style";
-
 //#region src/js/resizable/resizable.embedded.d.ts
 type CreateOuiResizableOptions = {
   maximumHeight?: number;

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

@@ -1,2 +1,2 @@
-import { d as OuiSortable, f as createSortable } from "../draggable-fIYXd8eO.mjs";
+import { d as OuiSortable, f as createSortable } from "../draggable-a6w0J1OD.mjs";
 export { OuiSortable, createSortable };

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

@@ -1,11 +1,11 @@
 import { attributable } from "../internal/attributable.mjs";
 import { OuiDraggable, addDraggable, getDraggableStates, removeDraggable } from "../internal/draggable.mjs";
-import { getPosition } from "@oscarpalmer/toretto/event";
 import { getAttribute, setAttribute, setAttributes } from "@oscarpalmer/toretto/attribute";
-import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
-import { setStyle } from "@oscarpalmer/toretto/style";
-import { findAncestor, getElementFromPosition } from "@oscarpalmer/toretto/find";
 import { createElement } from "@oscarpalmer/toretto/create";
+import { getPosition } from "@oscarpalmer/toretto/event";
+import { findAncestor, getElementFromPosition } from "@oscarpalmer/toretto/find";
+import { setStyle } from "@oscarpalmer/toretto/style";
+import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
 //#region src/js/sortable/sortable.embedded.ts
 var OuiSortable = class extends OuiDraggable {
 	constructor(element, options) {
@@ -43,8 +43,8 @@ function afterEnd(insert, from, events, elements, position, valid) {
 	if (position == null) return;
 	const { height, top } = elements.target.getBoundingClientRect();
 	let insertion;
-	if (position.y < top + height / 2) insertion = INSERT_BEFORE;
-	else insertion = INSERT_AFTER;
+	if (position.y < top + height / 2) insertion = "beforebegin";
+	else insertion = "afterend";
 	elements.target?.insertAdjacentElement(insertion, elements.origin);
 	document.body.removeAttribute(ATTRIBUTE_ACTIVE);
 }
@@ -130,8 +130,8 @@ function onEnd(event, globals, item, reset) {
 		bubbles: false,
 		cancelable: true
 	};
-	const fromEvent = new CustomEvent(EVENT_END, options);
-	const toEvent = new CustomEvent(EVENT_END, options);
+	const fromEvent = new CustomEvent("sortable:end", options);
+	const toEvent = new CustomEvent("sortable:end", options);
 	item.instance.element.dispatchEvent(fromEvent);
 	if (item.instance !== toInstance) toInstance?.element.dispatchEvent(toEvent);
 	setTimeout(() => {
@@ -165,10 +165,10 @@ function onMove(event, globals, item, position) {
 		let place;
 		if (position.calculated.y < top + height / 2) {
 			place = "before";
-			toElement.insertAdjacentElement(INSERT_BEFORE, placeholder);
+			toElement.insertAdjacentElement("beforebegin", placeholder);
 		} else {
 			place = "after";
-			toElement.insertAdjacentElement(INSERT_AFTER, placeholder);
+			toElement.insertAdjacentElement("afterend", placeholder);
 		}
 		setAttribute(placeholder, ATTRIBUTE_PLACEHOLDER_POSITION, place);
 	} else placeholder.remove();
@@ -193,7 +193,7 @@ function setPlaceholder(state, item, origin) {
 	const element = getDragPlaceholder();
 	placeholder.drag.default.innerHTML = "";
 	updatePlaceholder(item, element);
-	const event = new CustomEvent(EVENT_PLACEHOLDER, {
+	const event = new CustomEvent("sortable:placeholder", {
 		cancelable: true,
 		detail: {
 			origin,
@@ -248,10 +248,6 @@ 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 EVENT_END = "sort:end";
-const EVENT_PLACEHOLDER = "sort:placeholder";
-const INSERT_AFTER = "afterend";
-const INSERT_BEFORE = "beforebegin";
 const MESSAGE = "The element must be an instance of HTMLElement or SVGElement";
 const SELECTOR = `[${ATTRIBUTE}]`;
 const SELECTOR_ITEM = `[${ATTRIBUTE}] > *`;

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

@@ -1,2 +1,2 @@
-import { d as OuiSortable, f as createSortable, t as CreateOuiDraggableOptions } from "../draggable-fIYXd8eO.mjs";
+import { d as OuiSortable, f as createSortable, t as CreateOuiDraggableOptions } from "../draggable-a6w0J1OD.mjs";
 export { type CreateOuiDraggableOptions as CreateOuiSortableOptions, type OuiSortable, createSortable };

package/dist/js/splitter.d.mts

@@ -1,7 +1,7 @@
 //#region src/js/splitter.d.ts
 declare global {
   interface HTMLElementTagNameMap {
-    [SELECTOR]: OuiSplitterElement;
+    [TAGNAME]: OuiSplitterElement;
   }
 }
 declare class OuiSplitterElement extends HTMLElement {
@@ -44,6 +44,6 @@ declare class OuiSplitterElement extends HTMLElement {
   disconnectedCallback(): void;
   attributeChangedCallback(name: string): void;
 }
-declare const SELECTOR = "oui-splitter";
+declare const TAGNAME = "oui-splitter";
 //#endregion
 export { OuiSplitterElement };

package/dist/js/splitter.mjs

@@ -1,10 +1,10 @@
+import { clamp } from "@oscarpalmer/atoms/number";
 import { setAria } from "@oscarpalmer/toretto/aria";
-import { getPosition, on } from "@oscarpalmer/toretto/event";
-import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
 import { getAttribute, setAttribute } from "@oscarpalmer/toretto/attribute";
-import { setStyle, toggleStyles } from "@oscarpalmer/toretto/style";
-import { clamp } from "@oscarpalmer/atoms/number";
+import { getPosition, on } from "@oscarpalmer/toretto/event";
 import { findAncestor } from "@oscarpalmer/toretto/find";
+import { setStyle, toggleStyles } from "@oscarpalmer/toretto/style";
+import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
 import supportsTouch from "@oscarpalmer/toretto/touch";
 import { round } from "@oscarpalmer/atoms/math";
 //#region src/js/splitter.ts
@@ -281,11 +281,11 @@ function setSize(splitter, size, previous) {
 	setStyle(splitter.element, "--oui-splitter-size", `${size}`);
 	setAriaValue(splitter);
 }
-const SELECTOR = "oui-splitter";
-const ATTRIBUTE_ACTIVE = `${SELECTOR}-active`;
-const ATTRIBUTE_HANDLE = `${SELECTOR}-handle`;
-const ATTRIBUTE_HORIZONTAL = `${SELECTOR}-horizontal`;
-const ATTRIBUTE_SEPARATOR = `${SELECTOR}-separator`;
+const TAGNAME = "oui-splitter";
+const ATTRIBUTE_ACTIVE = `${TAGNAME}-active`;
+const ATTRIBUTE_HANDLE = `${TAGNAME}-handle`;
+const ATTRIBUTE_HORIZONTAL = `${TAGNAME}-horizontal`;
+const ATTRIBUTE_SEPARATOR = `${TAGNAME}-separator`;
 const KEYS_ABSOLUTE = /* @__PURE__ */ new Set(["End", "Home"]);
 const KEYS_HORIZONTAL = /* @__PURE__ */ new Set(["ArrowDown", "ArrowUp"]);
 const KEYS_NEGATIVE = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowUp"]);
@@ -296,7 +296,7 @@ const KEYS_ALL = /* @__PURE__ */ new Set([
 	...KEYS_VERTICAL
 ]);
 const MAPPED_ELEMENTS = /* @__PURE__ */ new WeakMap();
-const MESSAGE = `<${SELECTOR}> must have exactly two panels.`;
+const MESSAGE = `<${TAGNAME}> must have exactly two panels.`;
 const METHODS_CONNECT = ["delete", "set"];
 const METHODS_OBSERVE = ["unobserve", "observe"];
 const NAVIGATION_MAXIMUM_PERCENTAGE = .9;
@@ -314,12 +314,12 @@ const VALUE_DECIMALS = 6;
 let index = 0;
 let frame;
 let splitter;
-customElements.define(SELECTOR, OuiSplitterElement);
 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(TAGNAME, OuiSplitterElement);
 //#endregion
 export { OuiSplitterElement };

package/dist/js/tooltip.d.mts

@@ -1,5 +1,4 @@
-import { r as OuiFloatable } from "./floatable.embedded-DUR8bQBK.mjs";
-
+import { r as OuiFloatable } from "./floatable.embedded-Bct4U5Dm.mjs";
 //#region src/js/tooltip.d.ts
 declare class OuiTooltip {
   #private;

package/dist/js/tooltip.mjs

@@ -1,11 +1,11 @@
 import { createEmbeddedFloatable } from "./floatable/floatable.embedded.mjs";
 import { attributable } from "./internal/attributable.mjs";
 import { getAria } from "@oscarpalmer/toretto/aria";
-import { on } from "@oscarpalmer/toretto/event";
-import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
 import { setAttribute } from "@oscarpalmer/toretto/attribute";
-import { findAncestor } from "@oscarpalmer/toretto/find";
 import { createElement } from "@oscarpalmer/toretto/create";
+import { on } from "@oscarpalmer/toretto/event";
+import { findAncestor } from "@oscarpalmer/toretto/find";
+import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
 //#region src/js/tooltip.ts
 var OuiTooltip = class {
 	#state;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oscarpalmer/oui",
-	"version": "0.29.0",
+	"version": "0.30.0",
 	"description": "Styles, components, and utilities for building websites and applications.",
 	"keywords": [
 		"css",
@@ -33,6 +33,10 @@
 			"types": "./dist/js/index.d.mts",
 			"default": "./dist/js/index.mjs"
 		},
+		"./combobox": {
+			"types": "./dist/js/combobox.d.mts",
+			"default": "./dist/js/combobox.mjs"
+		},
 		"./dialog": {
 			"types": "./dist/js/dialog.d.mts",
 			"default": "./dist/js/dialog.mjs"
@@ -94,7 +98,7 @@
 		"@oscarpalmer/toretto": "^0.47.3"
 	},
 	"devDependencies": {
-		"@oxlint/plugins": "^1.73",
+		"@oxlint/plugins": "^1.74",
 		"@vitest/coverage-istanbul": "^4.1",
 		"autoprefixer": "^10.5",
 		"concurrently": "^10",

package/src/css/combobox.scss

@@ -0,0 +1,26 @@
+/*! https://github.com/oscarpalmer/oui */
+
+@use './mixins.scss' as mixins;
+
+:where([oui-combobox-content]) {
+	@include mixins.shadow-overlay;
+
+	width: fit-content;
+	height: fit-content;
+	max-width: max(25vw, 32rem);
+	max-height: max(25vh, 32rem);
+	min-width: var(--oui-combobox-width, auto);
+	flex-flow: column nowrap;
+
+	&:popover-open {
+		display: flex !important;
+	}
+}
+
+:where([oui-combobox-list]) {
+	overflow: auto;
+}
+
+:where([oui-combobox-option]) {
+	cursor: pointer;
+}