@oscarpalmer/oui 0.36.0 → 0.38.0

package/dist/js/internal/navigable.mjs

@@ -1,8 +1,9 @@
-import { getAria, setRole } from "@oscarpalmer/toretto/aria";
-import { dispatch, on } from "@oscarpalmer/toretto/event";
-import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
 import { clamp } from "@oscarpalmer/atoms/number";
+import { getAria, setAria, setRole } from "@oscarpalmer/toretto/aria";
+import { getAttribute } from "@oscarpalmer/toretto/attribute";
+import { 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 };
@@ -13,12 +14,19 @@ var OuiNavigable = class {
 	constructor(element, options) {
 		this.element = element;
 		this.options = options;
-		this.listeners = [on(element, "focusin", (event) => {
-			onFocusin(this, event);
-		}), on(element, "keydown", (event) => {
-			onKeydown(this, event);
-		}, { passive: false })];
-		this.orientation = getOrientation(element, options);
+		this.listeners = [
+			on(element, "click", (event) => {
+				onClick(this, event);
+			}, { passive: false }),
+			on(element, "focusin", (event) => {
+				onFocusin(this, event);
+			}),
+			on(element, "keydown", (event) => {
+				onKeydown(this, event);
+			}, { passive: false })
+		];
+		this.orientation = options?.orientation ?? getNavigableOrientation(element, options.vertical);
+		setAria(element, "orientation", this.orientation);
 		if (options.role != null) setRole(element, options.role);
 	}
 	destroy() {
@@ -27,6 +35,10 @@ var OuiNavigable = class {
 		this.active.element = void 0;
 		this.element = void 0;
 	}
+	navigate(index, focus) {
+		const items = getItems(this.element, this.options.selector);
+		if (index >= 0 && index < items.length) onNavigate(this, index, items, focus ?? false);
+	}
 };
 function getItems(container, selector) {
 	return [...container.querySelectorAll(selector)].filter(isValidItem);
@@ -34,13 +46,28 @@ function getItems(container, selector) {
 function getNavigable(element, options) {
 	return new OuiNavigable(element, options);
 }
-function getOrientation(element, options) {
-	const attribute = getAria(element, "orientation");
-	return ORIENTATIONS.has(attribute) ? attribute : options.vertical ? ORIENTATION_VERTICAL : ORIENTATION_HORIZONTAL;
+function getNavigableOrientation(element, vertical, aria) {
+	const attribute = aria ?? true ? getAria(element, "orientation") : getAttribute(element, "orientation");
+	return ORIENTATIONS.has(attribute) ? attribute : vertical ? ORIENTATION_VERTICAL : ORIENTATION_HORIZONTAL;
 }
 function isValidItem(element) {
 	return "disabled" in element ? element.disabled !== true : true;
 }
+function onClick(navigable, event) {
+	const item = findAncestor(event, navigable.options.selector);
+	const items = getItems(navigable.element, navigable.options.selector);
+	const index = items.indexOf(item);
+	if (index === -1) return;
+	if (index !== navigable.active.index) onNavigate(navigable, index, items, false);
+	navigable.options.onActivate?.(navigable);
+	item.focus();
+}
+function onNavigate(navigable, index, items, focus) {
+	navigable.active.element = items[index];
+	navigable.active.index = index;
+	updateNavigableFocus(navigable, focus, items);
+	navigable.options.onNavigation?.(navigable);
+}
 function onFocusin(navigable, event) {
 	const item = findAncestor(event, navigable.options.selector);
 	if (!isHTMLOrSVGElement(item) || !isValidItem(item)) return;
@@ -63,10 +90,14 @@ function onKeydown(navigable, event) {
 	const mustActivate = KEYS_ACTIVATE.has(event.key);
 	const shouldActivate = navigable.options.onShouldActivate?.(event, navigable) === true;
 	if (mustActivate || shouldActivate || navigable.options.onPreventNavigation?.(event, navigable) === true) event.stopPropagation();
-	if (mustActivate || shouldActivate) return;
+	if (mustActivate || shouldActivate) {
+		navigable.options.onActivate?.(navigable);
+		return;
+	}
 	const items = getItems(navigable.element, navigable.options.selector);
 	const { length } = items;
 	if (length === 0) return;
+	event.preventDefault();
 	let index;
 	if (KEYS_ABSOLUTE.has(event.key)) index = event.key === "Home" ? 0 : items.length - 1;
 	else {
@@ -76,10 +107,7 @@ function onKeydown(navigable, event) {
 			index = clamp(navigable.active.index + (KEYS_NEXT.has(event.key) ? 1 : -1), 0, length - 1, true);
 		}
 	}
-	if (index == null || index === navigable.active.index) return;
-	navigable.active.element = items[index];
-	navigable.active.index = index;
-	updateNavigableFocus(navigable, true, items);
+	if (index != null && index !== navigable.active.index) onNavigate(navigable, index, items, true);
 }
 function updateNavigableFocus(navigable, focus, items) {
 	const updated = items ?? getItems(navigable.element, navigable.options.selector);
@@ -88,7 +116,6 @@ 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", " "]);
@@ -105,4 +132,4 @@ const ORIENTATION_HORIZONTAL = "horizontal";
 const ORIENTATION_VERTICAL = "vertical";
 const ORIENTATIONS = /* @__PURE__ */ new Set([ORIENTATION_HORIZONTAL, ORIENTATION_VERTICAL]);
 //#endregion
-export { NAVIGABLE_KEYS_HORIZONTAL, NAVIGABLE_KEYS_VERTICAL, OuiNavigable, getNavigable, updateNavigableFocus };
+export { NAVIGABLE_KEYS_HORIZONTAL, NAVIGABLE_KEYS_VERTICAL, OuiNavigable, getNavigable, getNavigableOrientation, updateNavigableFocus };

package/dist/js/listbox/event.listbox.mjs

@@ -1,2 +1,2 @@
-import { d as onListboxNavigation, f as onListboxToggle, l as onListboxEnter, u as onListboxFilter } from "../misc.listbox-BI-XsTOf.mjs";
+import { d as onListboxNavigation, f as onListboxToggle, l as onListboxEnter, u as onListboxFilter } from "../misc.listbox-Cyz2CRDy.mjs";
 export { onListboxEnter, onListboxFilter, onListboxNavigation, onListboxToggle };

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

@@ -27,6 +27,14 @@ declare class OuiListboxElement extends HTMLElement {
    * Set the filter value
    */
   set filter(value: string);
+  /**
+   * Form element associated with the listbox
+   */
+  get form(): HTMLFormElement | null;
+  /**
+   * Label elements associated with the listbox
+   */
+  get labels(): NodeList;
   /**
    * Maximum number of selected options
    */
@@ -71,6 +79,14 @@ declare class OuiListboxElement extends HTMLElement {
    * Selected options
    */
   get selected(): HTMLElement[];
+  /**
+   * Validation message for the listbox
+   */
+  get validationMessage(): string;
+  /**
+   * Validity state for the listbox
+   */
+  get validity(): ValidityState;
   /**
    * Current value
    */
@@ -87,8 +103,18 @@ declare class OuiListboxElement extends HTMLElement {
    * Set the values
    */
   set values(values: unknown[]);
+  /**
+   * Can the listbox be validated?
+   */
+  get willValidate(): boolean;
   constructor();
   attributeChangedCallback(name: string, _: string | null, value: string | null): void;
+  /**
+   * Check if the listbox is valid
+   *
+   * @returns `true` if the listbox is valid, otherwise `false`
+   */
+  checkValidity(): boolean;
   /**
    * Clear all selected options
    */
@@ -98,6 +124,18 @@ declare class OuiListboxElement extends HTMLElement {
   formDisabledCallback(disabled: boolean): void;
   formResetCallback(): void;
   formStateRestoreCallback(state: string | File | FormData, reason: unknown): void;
+  /**
+   * Check if the listbox is valid and report any validation errors
+   *
+   * @returns `true` if the listbox is valid, otherwise `false`
+   */
+  reportValidity(): boolean;
+  /**
+   * Set a custom validation message for the listbox
+   *
+   * @param message Validation message
+   */
+  setCustomValidity(message: string): void;
   /**
    * Set listbox localizations for a specific language
    *

package/dist/js/listbox/index.mjs

@@ -1,7 +1,7 @@
-import { C as setListboxDisabled, D as setListboxReadonly, O as setListboxRequired, T as setListboxLimit, a as setListboxValue, o as setListboxValues, w as setListboxFilter } from "../listbox.data-BWd0PCy7.mjs";
+import { C as setListboxDisabled, D as setListboxReadonly, O as setListboxRequired, T as setListboxLimit, a as setListboxValue, o as setListboxValues, w as setListboxFilter } from "../listbox.data-C7CRa5Ya.mjs";
 import { attachListbox, detachListbox } from "../internal/listbox/listbox.state.mjs";
 import { LISTBOX_TAGNAME } from "./constants.listbox.mjs";
-import { c as onDetachListbox, i as createListboxState, n as setListboxLocalizations, o as listboxStates, r as updateListboxLocalizations, s as onAttachListbox } from "../misc.listbox-BI-XsTOf.mjs";
+import { c as onDetachListbox, i as createListboxState, n as setListboxLocalizations, o as listboxStates, r as updateListboxLocalizations, s as onAttachListbox } from "../misc.listbox-Cyz2CRDy.mjs";
 import { getAttribute } from "@oscarpalmer/toretto/attribute";
 import { parse } from "@oscarpalmer/atoms/string";
 //#region src/js/listbox/index.ts
@@ -41,6 +41,18 @@ var OuiListboxElement = class extends HTMLElement {
 		setListboxFilter(this.#state, value);
 	}
 	/**
+	* Form element associated with the listbox
+	*/
+	get form() {
+		return this.#internals.form;
+	}
+	/**
+	* Label elements associated with the listbox
+	*/
+	get labels() {
+		return this.#internals.labels;
+	}
+	/**
 	* Maximum number of selected options
 	*/
 	get max() {
@@ -107,6 +119,18 @@ var OuiListboxElement = class extends HTMLElement {
 		return this.#state.options.selected.slice();
 	}
 	/**
+	* Validation message for the listbox
+	*/
+	get validationMessage() {
+		return this.#internals.validationMessage;
+	}
+	/**
+	* Validity state for the listbox
+	*/
+	get validity() {
+		return this.#internals.validity;
+	}
+	/**
 	* Current value
 	*/
 	get value() {
@@ -130,6 +154,12 @@ var OuiListboxElement = class extends HTMLElement {
 	set values(values) {
 		setListboxValues(this.#state, values);
 	}
+	/**
+	* Can the listbox be validated?
+	*/
+	get willValidate() {
+		return this.#internals.willValidate;
+	}
 	constructor() {
 		super();
 		this.#internals = this.attachInternals();
@@ -148,6 +178,14 @@ var OuiListboxElement = class extends HTMLElement {
 		}
 	}
 	/**
+	* Check if the listbox is valid
+	*
+	* @returns `true` if the listbox is valid, otherwise `false`
+	*/
+	checkValidity() {
+		return this.#internals.checkValidity();
+	}
+	/**
 	* Clear all selected options
 	*/
 	clear() {
@@ -173,6 +211,22 @@ var OuiListboxElement = class extends HTMLElement {
 		if (this.#state == null) this.#restored = parsed;
 		else setListboxValues(this.#state, parsed);
 	}
+	/**
+	* Check if the listbox is valid and report any validation errors
+	*
+	* @returns `true` if the listbox is valid, otherwise `false`
+	*/
+	reportValidity() {
+		return this.#internals.reportValidity();
+	}
+	/**
+	* Set a custom validation message for the listbox
+	*
+	* @param message Validation message
+	*/
+	setCustomValidity(message) {
+		this.#internals.setValidity({ customError: message !== "" }, message, this);
+	}
 	setLocalizations(first, second) {
 		updateListboxLocalizations(this.#state.localizations.global, this.#state.localizations.component, first, second);
 	}

package/dist/js/listbox/misc.listbox.mjs

@@ -1,2 +1,2 @@
-import { n as setListboxLocalizations, r as updateListboxLocalizations, t as getListboxId } from "../misc.listbox-BI-XsTOf.mjs";
+import { n as setListboxLocalizations, r as updateListboxLocalizations, t as getListboxId } from "../misc.listbox-Cyz2CRDy.mjs";
 export { getListboxId, setListboxLocalizations, updateListboxLocalizations };

package/dist/js/listbox/state.listbox.mjs

@@ -1,2 +1,2 @@
-import { a as listboxLocalizations, c as onDetachListbox, i as createListboxState, o as listboxStates, s as onAttachListbox } from "../misc.listbox-BI-XsTOf.mjs";
+import { a as listboxLocalizations, c as onDetachListbox, i as createListboxState, o as listboxStates, s as onAttachListbox } from "../misc.listbox-Cyz2CRDy.mjs";
 export { createListboxState, listboxLocalizations, listboxStates, onAttachListbox, onDetachListbox };

package/dist/js/{listbox.data-BWd0PCy7.mjs → listbox.data-C7CRa5Ya.mjs}

@@ -2,8 +2,8 @@ import { getLocalization, localize } from "./l10n.mjs";
 import { listboxScrollOptions } from "./internal/listbox/listbox.constants.mjs";
 import { updateListboxForm, updateListboxValidity } from "./internal/listbox/listbox.form.mjs";
 import { setAria } from "@oscarpalmer/toretto/aria";
-import { dispatch } from "@oscarpalmer/toretto/event";
 import { setAttribute } from "@oscarpalmer/toretto/attribute";
+import { dispatch } from "@oscarpalmer/toretto/event";
 import { getString } from "@oscarpalmer/atoms/string";
 import { getData } from "@oscarpalmer/toretto/data";
 import { createElement, setAria as setAria$1, setAttribute as setAttribute$1 } from "@oscarpalmer/toretto";
@@ -134,13 +134,14 @@ function createListboxInput(parameters, value) {
 			autocorrect: "off",
 			autocomplete: "off",
 			form: "",
-			spellcheck: "false",
-			type: "text"
+			inputmode: "text",
+			spellcheck: "false"
 		},
 		property: {
 			id,
 			value,
-			role: isAutocomplete || listbox ? "combobox" : "searchbox"
+			role: isAutocomplete || listbox ? "combobox" : "searchbox",
+			type: "text"
 		}
 	});
 	if (isAutocomplete || listbox) setAria$1(input, "expanded", listbox);

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, setAttributes } 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/{misc.listbox-BI-XsTOf.mjs → misc.listbox-Cyz2CRDy.mjs}

@@ -1,11 +1,11 @@
 import { getLocalizations, updateLocalizations } from "./l10n.mjs";
-import { b as updateListboxValueLabel, c as createListboxContent, n as filterListbox, s as toggleListboxOption, t as applyListboxSelection, v as updateListboxMessage, x as generateListboxIds, y as updateListboxPreview } from "./listbox.data-BWd0PCy7.mjs";
+import { b as updateListboxValueLabel, c as createListboxContent, n as filterListbox, s as toggleListboxOption, t as applyListboxSelection, v as updateListboxMessage, x as generateListboxIds, y as updateListboxPreview } from "./listbox.data-C7CRa5Ya.mjs";
 import { initializeListboxState } from "./internal/listbox/listbox.state.mjs";
 import { getBooleanAriaValue } from "./internal/misc.mjs";
 import { processListboxKeydown } from "./internal/listbox/listbox.event.mjs";
 import { LISTBOX_ATTRIBUTES, LISTBOX_MESSAGES, LISTBOX_SELECTORS, LISTBOX_TAGNAME } from "./listbox/constants.listbox.mjs";
+import { setAttributes } from "@oscarpalmer/toretto/attribute";
 import { on } from "@oscarpalmer/toretto/event";
-import { setAttribute, setAttributes } from "@oscarpalmer/toretto/attribute";
 import { findAncestor } from "@oscarpalmer/toretto/find";
 import { getData } from "@oscarpalmer/toretto/data";
 import { noop } from "@oscarpalmer/atoms/function";
@@ -59,7 +59,6 @@ function createListboxState(element, internals) {
 	const label = element.querySelector(`label[for="${select.id}"]`);
 	if (label == null) throw new Error(LISTBOX_MESSAGES.label);
 	element.id = select.id;
-	setAttribute(element, "name", select.name === "" ? select.id : select.name);
 	const disabled = getBooleanAriaValue(element, "disabled") || select.disabled;
 	const multiple = element.multiple || select.multiple;
 	const readonly = getBooleanAriaValue(element, "readonly");

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 { dispatch, getEventPosition, on } from "@oscarpalmer/toretto/event";
 import { setAttribute } from "@oscarpalmer/toretto/attribute";
-import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
+import { dispatch, getEventPosition, 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,14 +110,11 @@ function onEnd(event, globals, item, reset) {
 	}
 	const container = state.container?.getBoundingClientRect();
 	if (container != null) setOffset(state, container);
-	const dispatched = dispatch(state.element, "movable:end", { detail: {
+	if (dispatch(state.element, "oui:movable:end", { detail: {
 		from: { ...globals.original },
 		to: getEventPosition(event)
-	} });
-	setTimeout(() => {
-		if (dispatched.defaultPrevented) onCancel(globals, item);
-		reset();
-	});
+	} }).defaultPrevented) onCancel(globals, item);
+	reset();
 }
 function onMove(_, globals, __, position) {
 	setAttribute(globals.element?.node, ATTRIBUTE_MOVING, "");

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 {
@@ -74,7 +74,7 @@ function getState(anchor, content) {
 		anchor,
 		content,
 		floatable: createEmbeddedFloatable(anchor, content, options),
-		focusTrap: getAria(content, "modal") === "true" ? createFocusTrap(content, { noescape: true }) : void 0,
+		focusTrap: getAria(content, "modal") === true ? createFocusTrap(content, { noescape: true }) : void 0,
 		listeners: [getOnBeforeToggleListener(content), on(content, "toggle", (event) => {
 			const expanded = event.newState === "open";
 			if (expanded) {

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

@@ -1,12 +1,12 @@
 import { attributable } from "../internal/attributable.mjs";
-import { dispatch, getEventPosition, 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, getEventPosition, on } from "@oscarpalmer/toretto/event";
 import { findAncestor } from "@oscarpalmer/toretto/find";
+import { setStyles, toggleStyles } from "@oscarpalmer/toretto/style";
 import supportsTouch from "@oscarpalmer/toretto/touch";
+import { isPlainObject } from "@oscarpalmer/atoms/is";
+import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
 //#region src/js/resizable/resizable.embedded.ts
 var OuiResizable = class {
 	#state;
@@ -49,7 +49,7 @@ function cancelResize(item) {
 		width: `${item.state.width}px`
 	});
 	resetResizable();
-	dispatch(item.state.element, "resizable:cancel");
+	dispatch(item.state.element, "oui:resizable:cancel");
 }
 /**
 * Creates _(or retrieves)_ a _OuiResizable_ instance for an element
@@ -130,14 +130,11 @@ function onPointerdown(event) {
 	const position = getEventPosition(event);
 	if (stored == null || position == null) return;
 	if (supportsTouch.value) event.preventDefault();
-	const dispatched = dispatch(element, "resizable:begin");
-	setTimeout(() => {
-		if (dispatched.defaultPrevented) return;
-		current = stored;
-		start = position;
-		current.state.styles.set();
-		styleToggler.set();
-	});
+	if (dispatch(element, "oui:resizable:begin").defaultPrevented) return;
+	current = stored;
+	start = position;
+	current.state.styles.set();
+	styleToggler.set();
 }
 function onPointermove(event) {
 	if (current == null) return;
@@ -149,27 +146,20 @@ function onPointermove(event) {
 		height,
 		width
 	});
-	const dispatched = dispatch(current.state.element, "resizable:resize", { detail: {
+	if (dispatch(current.state.element, "oui:resizable:resize", { detail: {
 		height,
 		width
-	} });
-	setTimeout(() => {
-		if (dispatched.defaultPrevented) cancelResize(current);
-	});
+	} }).defaultPrevented) cancelResize(current);
 }
 function onPointerup() {
-	if (current == null) return;
-	const dispatched = dispatch(current.state.element, "resizable:end");
-	setTimeout(() => {
-		if (current == null || dispatched.defaultPrevented) {
-			cancelResize(current);
-			return;
-		}
-		const { height, width } = current.state.element.getBoundingClientRect();
-		current.state.height = height;
-		current.state.width = width;
-		resetResizable();
-	});
+	if (current == null || dispatch(current.state.element, "oui:resizable:end").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/sortable/sortable.embedded.mjs

@@ -1,11 +1,11 @@
 import { attributable } from "../internal/attributable.mjs";
 import { OuiDraggable, addDraggable, getDraggableStates, removeDraggable } from "../internal/draggable.mjs";
-import { dispatch, getEventPosition } 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 { dispatch, getEventPosition } from "@oscarpalmer/toretto/event";
+import { findAncestor, getElementFromPosition } from "@oscarpalmer/toretto/find";
+import { setStyle } from "@oscarpalmer/toretto/style";
+import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
 //#region src/js/sortable/sortable.embedded.ts
 var OuiSortable = class extends OuiDraggable {
 	constructor(element, options) {

package/dist/js/splitter.mjs

@@ -1,12 +1,13 @@
+import { round } from "@oscarpalmer/atoms/math";
+import { clamp } from "@oscarpalmer/atoms/number";
 import { setAria } from "@oscarpalmer/toretto/aria";
-import { getEventPosition, 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 { createElement } from "@oscarpalmer/toretto/create";
+import { getEventPosition, on } from "@oscarpalmer/toretto/event";
 import { findAncestor } from "@oscarpalmer/toretto/find";
+import { setStyle, toggleStyles } from "@oscarpalmer/toretto/style";
 import supportsTouch from "@oscarpalmer/toretto/touch";
-import { round } from "@oscarpalmer/atoms/math";
+import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
 //#region src/js/splitter.ts
 const ATTRIBUTE_MAX = "max";
 const ATTRIBUTE_MIN = "min";
@@ -135,21 +136,23 @@ var OuiSplitterElement = class extends HTMLElement {
 	}
 };
 function createHandle() {
-	const handle = document.createElement("span");
-	setAria(handle, "hidden", "true");
-	setAttribute(handle, ATTRIBUTE_HANDLE, "");
-	return handle;
+	return createElement("span", {
+		aria: { hidden: true },
+		attribute: { [ATTRIBUTE_HANDLE]: "" }
+	});
 }
 function createSeparator(splitter) {
-	const separator = document.createElement("div");
-	separator.role = "separator";
-	separator.tabIndex = 0;
-	setAria(separator, {
-		controls: splitter.element.id,
-		label: "Resize panels"
+	return createElement("div", {
+		aria: {
+			controls: splitter.element.id,
+			label: "Resize panels"
+		},
+		attribute: { [ATTRIBUTE_SEPARATOR]: "" },
+		property: {
+			role: "separator",
+			tabIndex: 0
+		}
 	});
-	setAttribute(separator, ATTRIBUTE_SEPARATOR, "");
-	return separator;
 }
 function getContained(min, value, max) {
 	return round(clamp(value, min, max), VALUE_DECIMALS);

package/dist/js/{state.combobox-4xq0FPCF.mjs → state.combobox-Qm3FWzYW.mjs}

@@ -1,16 +1,16 @@
 import { createEmbeddedFloatable } from "./floatable/floatable.embedded.mjs";
 import { getLocalizations, updateLocalizations } from "./l10n.mjs";
 import { LISTBOX_KEYS, LISTBOX_TYPES } from "./internal/listbox/listbox.constants.mjs";
-import { b as updateListboxValueLabel, i as filterListboxOptions, n as filterListbox, r as filterListboxOption, s as toggleListboxOption, t as applyListboxSelection, v as updateListboxMessage, x as generateListboxIds, y as updateListboxPreview } from "./listbox.data-BWd0PCy7.mjs";
+import { b as updateListboxValueLabel, i as filterListboxOptions, n as filterListbox, r as filterListboxOption, s as toggleListboxOption, t as applyListboxSelection, v as updateListboxMessage, x as generateListboxIds, y as updateListboxPreview } from "./listbox.data-C7CRa5Ya.mjs";
 import { initializeListboxState } from "./internal/listbox/listbox.state.mjs";
 import { COMBOBOX_ATTRIBUTES, COMBOBOX_ATTRIBUTE_SELECTION_ITEM, COMBOBOX_AUTOCOMPLETES, COMBOBOX_MESSAGES, COMBOBOX_SELECTORS, COMBOBOX_TAGNAME } from "./combobox/constants.combobox.mjs";
 import { getAttributeValue, getBooleanAriaValue } from "./internal/misc.mjs";
 import { createComboboxAnchor, createComboboxContent, updateComboboxAutocomplete, updateComboboxSelection, updateComboboxSelectionItems, updateComboboxTabindices } from "./combobox/dom.combobox.mjs";
 import { processListboxKeydown } from "./internal/listbox/listbox.event.mjs";
+import { clamp } from "@oscarpalmer/atoms/number";
 import { setAria } from "@oscarpalmer/toretto/aria";
-import { on } from "@oscarpalmer/toretto/event";
 import { setAttributes } from "@oscarpalmer/toretto/attribute";
-import { clamp } from "@oscarpalmer/atoms/number";
+import { on } from "@oscarpalmer/toretto/event";
 import { getData } from "@oscarpalmer/toretto/data";
 import { findAncestor, getData as getData$1 } from "@oscarpalmer/toretto";
 import { noop } from "@oscarpalmer/atoms/function";

package/dist/js/tabs.d.mts

@@ -0,0 +1,25 @@
+//#region src/js/tabs.d.ts
+declare global {
+  interface HTMLElementTagNameMap {
+    [TAGNAME]: OuiTabsElement;
+  }
+}
+declare class OuiTabsEvent extends Event {
+  oldIndex: number;
+  newIndex: number;
+  constructor(name: 'oui:beforechange' | 'oui:change', oldIndex: number, newIndex: number, cancelable: boolean);
+}
+declare class OuiTabsElement extends HTMLElement {
+  #private;
+  static observedAttributes: string[];
+  get active(): number;
+  set active(value: number);
+  get panel(): HTMLElement;
+  get tab(): HTMLButtonElement;
+  attributeChangedCallback(name: string, _: string | null, value: string | null): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+}
+declare const TAGNAME = "oui-tabs";
+//#endregion
+export { OuiTabsElement, OuiTabsEvent };