@oscarpalmer/oui 0.29.1 → 0.30.0

package/dist/css/combobox.css

@@ -0,0 +1,26 @@
+/*! https://github.com/oscarpalmer/oui */
+
+:where([oui-combobox-content]) {
+  box-shadow: inset 0 1px 0 0 transparent, 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 2px -0.5px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.05), 0 4px 8px -2px rgba(0, 0, 0, 0.05), 0 8px 16px -4px rgba(0, 0, 0, 0.05), 0 16px 32px -8px rgba(0, 0, 0, 0.05), 0 32px 64px -16px rgba(0, 0, 0, 0.05), 0 64px 128px -32px rgba(0, 0, 0, 0.05);
+  width: -moz-fit-content;
+  width: fit-content;
+  height: -moz-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;
+}
+:where([oui-combobox-content]):popover-open {
+  display: flex !important;
+}
+
+:where([oui-combobox-list]) {
+  overflow: auto;
+}
+
+:where([oui-combobox-option]) {
+  cursor: pointer;
+}
+
+

package/dist/js/combobox.d.mts

@@ -0,0 +1,27 @@
+//#region src/js/combobox.d.ts
+declare global {
+  interface HTMLElementTagNameMap {
+    [TAGNAME]: OuiComboboxElement;
+  }
+}
+declare class OuiComboboxElement extends HTMLElement {
+  #private;
+  static formAssociated: boolean;
+  static observedAttributes: string[];
+  get disabled(): boolean;
+  set disabled(value: boolean);
+  get multiple(): boolean;
+  get name(): string;
+  set name(value: string);
+  get required(): boolean;
+  set required(value: boolean);
+  get type(): OuiComboboxType;
+  get value(): string;
+  set value(value: unknown);
+  constructor();
+  attributeChangedCallback(name: string, _: string | null, value: string | null): void;
+}
+type OuiComboboxType = 'autocomplete' | 'select';
+declare const TAGNAME = "oui-combobox";
+//#endregion
+export { OuiComboboxElement };

package/dist/js/combobox.mjs

@@ -0,0 +1,474 @@
+import { createEmbeddedFloatable } from "./floatable/floatable.embedded.mjs";
+import { clamp } from "@oscarpalmer/atoms/number";
+import { getString } from "@oscarpalmer/atoms/string";
+import { getAria, setAria } from "@oscarpalmer/toretto/aria";
+import { getAttribute, setAttribute, setAttributes } from "@oscarpalmer/toretto/attribute";
+import { createElement } from "@oscarpalmer/toretto/create";
+import { dispatch, on } from "@oscarpalmer/toretto/event";
+import { findAncestor } from "@oscarpalmer/toretto/find";
+import { setProperty } from "@oscarpalmer/toretto/property";
+import { setStyle } from "@oscarpalmer/toretto/style";
+//#region src/js/combobox.ts
+var OuiComboboxElement = class extends HTMLElement {
+	static formAssociated = true;
+	static observedAttributes = [
+		"disabled",
+		"required",
+		"value"
+	];
+	#internals;
+	#state;
+	get disabled() {
+		return this.#state?.disabled ?? false;
+	}
+	set disabled(value) {
+		if (typeof value === "boolean" && value !== this.#state.disabled) setDisabled(this, this.#state, value);
+	}
+	get multiple() {
+		return this.hasAttribute("multiple");
+	}
+	get name() {
+		return this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		if (typeof value === "string") this.setAttribute("name", value);
+	}
+	get required() {
+		return this.hasAttribute("required");
+	}
+	set required(value) {
+		if (typeof value === "boolean" && value !== this.#state.required) setRequired(this, this.#state, value);
+	}
+	get type() {
+		return this.#state.type;
+	}
+	get value() {
+		return this.#state.value;
+	}
+	set value(value) {
+		const [option, all] = getOption(this.#state, value);
+		if (option != null) setNext(this, this.#state, all, "set", option);
+	}
+	constructor() {
+		super();
+		this.#internals = this.attachInternals();
+		this.#state = getState(this, this.#internals);
+		comboboxes.set(this.#state.content, this);
+		states.set(this, this.#state);
+		states.set(this.#state.content, this.#state);
+	}
+	attributeChangedCallback(name, _, value) {
+		switch (name) {
+			case "disabled":
+				this.disabled = this.hasAttribute("disabled");
+				break;
+			case "required":
+				this.required = this.hasAttribute("required");
+				break;
+			case "value":
+				this.value = value;
+				break;
+		}
+	}
+};
+function filterOptions(state, options, clear) {
+	if (clear || state.autocomplete.none) state.filter = "";
+	const filter = state.filter.toLocaleLowerCase();
+	const all = options ?? getOptions(state)[0];
+	const { length } = all;
+	const visible = [];
+	for (let index = 0; index < length; index += 1) {
+		const option = all[index];
+		option.hidden = option.textContent?.toLocaleLowerCase().includes(filter) === false;
+		if (!option.hidden) visible.push(option);
+	}
+	if (visible.length > 0) return state.active != null && visible.includes(state.active) ? state.active : visible[0];
+}
+function getAnchor(type, id, element, label, select, autocomplete) {
+	const anchor = type === "autocomplete" ? getInput(id, element, label, select) : getBox(id, element, label, select);
+	setAria(anchor, "autocomplete", autocomplete.value);
+	setAttributes(anchor, {
+		[ATTRIBUTE_ANCHOR]: "",
+		"aria-controls": `${id}_content`,
+		"aria-expanded": false,
+		"aria-haspopup": "listbox",
+		"aria-labelledby": label.id,
+		role: "combobox"
+	});
+	return anchor;
+}
+function getAutoComplete(element, select) {
+	let value;
+	if (select) value = "list";
+	else {
+		const attribute = getAttribute(element, "autocomplete");
+		value = AUTOCOMPLETES.has(attribute) ? attribute : "none";
+	}
+	return {
+		value,
+		both: value === "both",
+		inline: value === "inline",
+		list: value === "list",
+		none: value === "none"
+	};
+}
+function getBox(id, element, label, select) {
+	return createElement("div", {
+		id,
+		innerHTML: select.selectedOptions[0]?.textContent ?? "",
+		tabIndex: 0
+	});
+}
+function getContent(type, id, element, anchor, label, select, autocomplete) {
+	const content = createElement("div", { id: `${id}_content` }, {
+		[ATTRIBUTE_CONTENT]: "",
+		popover: "",
+		role: "listbox",
+		tabindex: -1,
+		"aria-labelledby": label.id
+	});
+	const list = createElement("ul", {}, { [ATTRIBUTE_LIST]: "" });
+	const options = [...select.options];
+	const selected = [];
+	for (let index = 0; index < options.length; index += 1) {
+		const option = options[index];
+		const item = createElement("li", {
+			id: `${id}_option_${index}`,
+			textContent: option.textContent
+		}, {
+			[ATTRIBUTE_OPTION]: "",
+			[ATTRIBUTE_OPTION_CURRENT]: index === 0 ? "" : void 0,
+			role: "option",
+			value: option.value,
+			"aria-selected": !autocomplete.none && option.selected
+		});
+		if (option.selected) selected.push(item);
+		list.append(item);
+	}
+	content.append(list);
+	return [content, selected];
+}
+function getId() {
+	index += 1;
+	return `oui_combobox_${index}`;
+}
+function getInput(id, element, label, select) {
+	return createElement("input", {
+		id,
+		value: select.selectedOptions[0]?.textContent ?? ""
+	}, {
+		[ATTRIBUTE_ANCHOR]: "",
+		autocomplete: "off",
+		type: "text"
+	});
+}
+function getOption(state, value) {
+	const [all] = getOptions(state);
+	const valueAsString = getString(value);
+	filterOptions(state, all, true);
+	let match;
+	for (const option of all) if (option.getAttribute("value")?.toLocaleLowerCase() === valueAsString) {
+		match = option;
+		break;
+	}
+	return [match, all];
+}
+function getOptions(state) {
+	const all = [...state.content.querySelectorAll(`[${ATTRIBUTE_OPTION}]`)].filter((option) => option instanceof HTMLElement);
+	return [all, all.filter((option) => !option.hidden)];
+}
+function getSelected(update, state, element, next) {
+	if (state.autocomplete.none) return false;
+	if (update === "navigation") {
+		if (state.autocomplete.both) return element === next;
+		return getAria(element, "selected") === "true";
+	}
+	if (update === "none") return getAria(element, "selected") === "true";
+	if (update === "set") return element === next;
+	return state.autocomplete.both && element === next;
+}
+function getState(element, internals) {
+	const select = element.querySelector("select");
+	if (select == null) throw new Error(MESSAGE_SELECT);
+	const label = element.querySelector(`label[for="${select.id}"]`);
+	if (label == null) throw new Error(MESSAGE_LABEL);
+	select.hidden = true;
+	element.id = select.id;
+	element.name = select.name === "" ? select.id : select.name;
+	const disabled = element.disabled || select.disabled;
+	const multiple = element.multiple || select.multiple;
+	const required = element.required || select.required;
+	const id = getId();
+	const type = multiple ? "select" : getType(element);
+	const autocomplete = getAutoComplete(element, type === "select");
+	label.htmlFor = id;
+	label.id = `${id}_label`;
+	const anchor = getAnchor(type, id, element, label, select, autocomplete);
+	const [content, selected] = getContent(type, id, element, anchor, label, select, autocomplete);
+	const floatable = createEmbeddedFloatable(anchor, content, {
+		position: "below-start",
+		reusable: false
+	});
+	floatable.update();
+	select.insertAdjacentElement("afterend", anchor);
+	anchor.insertAdjacentElement("afterend", content);
+	select.remove();
+	const state = {
+		anchor,
+		autocomplete,
+		content,
+		disabled,
+		floatable,
+		id,
+		internals,
+		label,
+		multiple,
+		required,
+		select,
+		selected,
+		type,
+		filter: "",
+		listeners: [],
+		value: ""
+	};
+	state.listeners.push(on(content, "click", (event) => {
+		onContent(event, content);
+	}), on(content, "toggle", () => {
+		setAria(anchor, {
+			activedescendant: floatable.open ? state.active?.id : void 0,
+			expanded: floatable.open
+		});
+		if (floatable.open) setStyle(content, "--oui-combobox-width", `${anchor.getBoundingClientRect().width}px`);
+	}));
+	setDisabled(element, state, disabled);
+	return state;
+}
+function getType(element) {
+	const type = getAttribute(element, ATTRIBUTE_TYPE);
+	return TYPES.has(type) ? type : "select";
+}
+function onAnchor(event, handler) {
+	if (event.ctrlKey || event.metaKey || event.shiftKey) return;
+	const combobox = findAncestor(event, TAGNAME);
+	const state = states.get(combobox);
+	if (combobox == null || state == null) return;
+	if (findAncestor(event, SELECTOR_ANCHOR) != null) handler(event, combobox, state);
+}
+function onAnchorKeydown(event, combobox, state) {
+	let preventDefault = true;
+	switch (true) {
+		case event.key === "Enter":
+			onEnter(combobox, state);
+			break;
+		case event.key === "Escape":
+			onEscape(combobox, state);
+			break;
+		case state.type === "select" && KEYS_ABSOLUTE.has(event.key):
+			onNavigation(event, combobox, state);
+			break;
+		case KEYS_NAVIGATION.has(event.key):
+			onNavigation(event, combobox, state);
+			break;
+		default:
+			preventDefault = false;
+			if (event.key === "Tab") onTab(combobox, state);
+			break;
+	}
+	if (preventDefault) {
+		event.preventDefault();
+		event.stopPropagation();
+	}
+}
+function onAnchorKeyup(event, combobox, state) {
+	if (state.type === "select") return;
+	let preventDefault = true;
+	const typed = event.key.length === 1 && EXPRESSION_TYPED.test(event.key);
+	if (typed) state.filter += event.key;
+	if (state.anchor instanceof HTMLInputElement && (KEYS_REMOVE.has(event.key) || state.anchor.value.length < state.filter.length)) {
+		state.filter = state.anchor.value;
+		filterOptions(state);
+	}
+	switch (true) {
+		case typed:
+			onTyped(combobox, state);
+			break;
+		case KEYS_REMOVE.has(event.key):
+			onRemove(combobox, state);
+			break;
+		default:
+			preventDefault = false;
+			break;
+	}
+	if (preventDefault) {
+		event.preventDefault();
+		event.stopPropagation();
+	}
+}
+function onClick(event) {
+	const combobox = findAncestor(event, TAGNAME);
+	const state = states.get(combobox);
+	if (combobox == null || state == null) return;
+	const label = findAncestor(event, "label");
+	if (label != null) {
+		if (label === state.label && combobox.type === "select") state.anchor.focus();
+		return;
+	}
+	if (findAncestor(event, SELECTOR_ANCHOR) != null) {
+		state.floatable.show();
+		return;
+	}
+}
+function onContent(event, content) {
+	const combobox = comboboxes.get(content);
+	const state = states.get(content);
+	if (combobox == null || state == null) return;
+	const option = findAncestor(event, SELECTOR_OPTION);
+	if (option instanceof HTMLElement) setNext(combobox, state, getOptions(state)[0], "set", option);
+	state.anchor.focus();
+}
+function onEnter(combobox, state) {
+	if (state.floatable.open) setNext(combobox, state, getOptions(state)[0], "set", state.active);
+	else state.floatable.show();
+}
+function onEscape(combobox, state) {
+	if (!state.floatable.open) return;
+	if (state.type === "select") state.floatable.hide();
+	else setNext(combobox, state, getOptions(state)[0], "set", state.active);
+}
+function onKeydown(event) {
+	onAnchor(event, onAnchorKeydown);
+}
+function onKeyup(event) {
+	onAnchor(event, onAnchorKeyup);
+}
+function onNavigation(event, combobox, state) {
+	let skip = false;
+	if (!state.floatable.open) {
+		skip = true;
+		state.floatable.show();
+	}
+	const [all, visible] = getOptions(state);
+	if (visible.length === 0) return;
+	let next;
+	if (skip ?? state.active == null) next = state.active ?? visible[0];
+	else {
+		const current = visible.findIndex((option) => option.id === state.active?.id);
+		let index;
+		switch (event.key) {
+			case "ArrowDown":
+			case "ArrowUp":
+				index = clamp(current + (event.key === "ArrowDown" ? 1 : -1), 0, visible.length - 1, true);
+				break;
+			case "End":
+				index = visible.length - 1;
+				break;
+			case "Home":
+				index = 0;
+				break;
+			case "PageDown":
+			case "PageUp":
+				index = clamp(current + (event.key === "PageDown" ? 10 : -10), 0, visible.length - 1);
+				break;
+			default: break;
+		}
+		if (index != null) next = visible[index];
+	}
+	setNext(combobox, state, all, state.autocomplete.none ? "none" : "navigation", next);
+}
+function onRemove(combobox, state) {
+	const [all] = getOptions(state);
+	setNext(combobox, state, all, "none", filterOptions(state, all));
+}
+function onTab(combobox, state) {
+	if (combobox !== document.activeElement || !combobox.contains(document.activeElement)) state.floatable.hide();
+}
+function onTyped(combobox, state) {
+	function open() {
+		if (state.anchor instanceof HTMLInputElement && state.anchor.value.length > 0 && (state.autocomplete.both || state.autocomplete.list)) state.floatable.show();
+	}
+	if (!state.autocomplete.none) {
+		const next = filterOptions(state);
+		state.active = next != null && next.textContent?.toLocaleLowerCase().indexOf(state.filter.toLocaleLowerCase()) === 0 ? next : void 0;
+		if (next != null) open();
+		setNext(combobox, state, getOptions(state)[0], "typed", next);
+	} else open();
+}
+function setDisabled(combobox, state, value) {
+	state.disabled = value;
+	setAria(state.anchor, "disabled", value);
+	setProperty(combobox, "disabled", value);
+	if (state.anchor instanceof HTMLInputElement) state.anchor.readOnly = value;
+}
+function setNext(combobox, state, all, update, next) {
+	for (const option of all) setAttribute(option, ATTRIBUTE_OPTION_CURRENT, option === next ? "" : void 0);
+	state.active = next;
+	setAria(state.anchor, "activedescendant", next?.id);
+	next?.scrollIntoView(scrollOptions);
+	setValue(combobox, state, update, next);
+}
+function setRequired(combobox, state, value) {
+	state.required = value;
+	setAria(state.anchor, "required", value);
+	setProperty(combobox, "required", value);
+}
+function setValue(combobox, state, update, next) {
+	if (state.disabled) return;
+	const [all] = getOptions(state);
+	for (const option of all) setAria(option, "selected", getSelected(update, state, option, next));
+	state.select.value = next?.getAttribute("value") ?? "";
+	if (state.value !== state.select.value) {
+		state.value = state.select.value;
+		state.internals.setFormValue(state.value);
+		dispatch(combobox, "change");
+		dispatch(state.select, "change");
+	}
+	if (next == null || update === "none") return;
+	if (update === "set" || state.autocomplete.both || state.autocomplete.inline) {
+		const textContent = next.textContent ?? "";
+		if (state.anchor instanceof HTMLInputElement) state.anchor.value = textContent;
+		else state.anchor.innerHTML = textContent;
+		if (state.anchor instanceof HTMLInputElement) state.anchor.setSelectionRange(update === "typed" ? state.filter.length : textContent.length, textContent.length);
+	}
+	if (update === "set") state.floatable.hide();
+}
+const TAGNAME = "oui-combobox";
+const ATTRIBUTE_ANCHOR = `${TAGNAME}-anchor`;
+const ATTRIBUTE_CONTENT = `${TAGNAME}-content`;
+const ATTRIBUTE_LIST = `${TAGNAME}-list`;
+const ATTRIBUTE_OPTION = `${TAGNAME}-option`;
+const ATTRIBUTE_OPTION_CURRENT = `${TAGNAME}-option-current`;
+const ATTRIBUTE_TYPE = "type";
+const AUTOCOMPLETES = /* @__PURE__ */ new Set([
+	"both",
+	"inline",
+	"list",
+	"none"
+]);
+const EXPRESSION_TYPED = /\p{L}|\s/u;
+const KEYS_ABSOLUTE = /* @__PURE__ */ new Set(["End", "Home"]);
+const KEYS_NAVIGATION = /* @__PURE__ */ new Set([
+	"ArrowDown",
+	"ArrowUp",
+	"PageDown",
+	"PageUp"
+]);
+const KEYS_REMOVE = /* @__PURE__ */ new Set(["Backspace", "Delete"]);
+const MESSAGE_LABEL = `<${TAGNAME}> must contain a <label> element for the <select> element`;
+const MESSAGE_SELECT = `<${TAGNAME}> must contain a <select> element`;
+const SELECTOR_ANCHOR = `[${ATTRIBUTE_ANCHOR}]`;
+const SELECTOR_OPTION = `[${ATTRIBUTE_OPTION}]`;
+const TYPES = /* @__PURE__ */ new Set(["autocomplete", "select"]);
+const comboboxes = /* @__PURE__ */ new WeakMap();
+const scrollOptions = {
+	behavior: "smooth",
+	block: "nearest",
+	inline: "nearest"
+};
+const states = /* @__PURE__ */ new WeakMap();
+let index = 0;
+on(document, "click", onClick);
+on(document, "keydown", onKeydown, { passive: false });
+on(document, "keyup", onKeyup, { passive: false });
+customElements.define(TAGNAME, OuiComboboxElement);
+//#endregion
+export { OuiComboboxElement };

package/dist/js/dialog.d.mts

@@ -1,7 +1,8 @@
-import { h as OuiMovable } from "./draggable-fIYXd8eO.mjs";
-import { n as OuiResizable } from "./resizable.embedded-CXrUVPzR.mjs";
+import { h as OuiMovable } from "./draggable-a6w0J1OD.mjs";
+import "./movable/movable.standalone.mjs";
+import { n as OuiResizable } from "./resizable.embedded-3qoR0Bjm.mjs";
+import "./resizable/resizable.standalone.mjs";
 import { RemovableEventListener } from "@oscarpalmer/toretto/models";
-
 //#region src/js/dialog.d.ts
 declare class OuiDialog {
   #private;

package/dist/js/dialog.mjs

@@ -4,8 +4,8 @@ import { ATTRIBUTE_MOVABLE_HANDLE, createMovable } from "./movable/movable.embed
 import "./movable/movable.standalone.mjs";
 import { RESIZABLE_ATTRIBUTE_HANDLE, createResizable } from "./resizable/resizable.embedded.mjs";
 import { getAria, setAria } from "@oscarpalmer/toretto/aria";
-import { on } from "@oscarpalmer/toretto/event";
 import { getAttribute, setAttribute } from "@oscarpalmer/toretto/attribute";
+import { on } from "@oscarpalmer/toretto/event";
 import { setStyles } from "@oscarpalmer/toretto/style";
 //#region src/js/dialog.ts
 var OuiDialog = class {

package/dist/js/{draggable-fIYXd8eO.d.mts → draggable-a6w0J1OD.d.mts}

@@ -1,6 +1,5 @@
 import { StyleToggler } from "@oscarpalmer/toretto/style";
 import { EventPosition, PlainObject } from "@oscarpalmer/atoms/models";
-
 //#region src/js/movable/movable.embedded.d.ts
 declare class OuiMovable extends OuiDraggable<OuiMovableState> {
   #private;
@@ -134,9 +133,9 @@ type OuiDraggableState = {
   attribute: string;
   container?: HTMLElement;
   element: HTMLElement;
-  event: string;
   hasHandles?: boolean;
   horizontal: boolean;
+  name: keyof OuiDraggableStates;
   options: OuiDraggableOptions;
   styling: StyleToggler;
   vertical: boolean;

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

@@ -1,2 +1,2 @@
-import { a as OuiFloatablePosition, c as getOnBeforeToggleListener, i as OuiFloatableOptions, l as removeFloatable, n as CreateOuiFloatableOptions, o as createEmbeddedFloatable, r as OuiFloatable, s as createFloatable, t as ATTRIBUTE_FLOATABLE } from "../floatable.embedded-DUR8bQBK.mjs";
+import { a as OuiFloatablePosition, c as getOnBeforeToggleListener, i as OuiFloatableOptions, l as removeFloatable, n as CreateOuiFloatableOptions, o as createEmbeddedFloatable, r as OuiFloatable, s as createFloatable, t as ATTRIBUTE_FLOATABLE } from "../floatable.embedded-Bct4U5Dm.mjs";
 export { ATTRIBUTE_FLOATABLE, CreateOuiFloatableOptions, OuiFloatable, OuiFloatableOptions, OuiFloatablePosition, createEmbeddedFloatable, createFloatable, getOnBeforeToggleListener, removeFloatable };

package/dist/js/floatable/floatable.embedded.mjs

@@ -1,9 +1,9 @@
 import { getAria } from "@oscarpalmer/toretto/aria";
+import { getAttribute, setAttribute } from "@oscarpalmer/toretto/attribute";
 import { on } from "@oscarpalmer/toretto/event";
+import { setStyle, setStyles } from "@oscarpalmer/toretto/style";
 import { isPlainObject } from "@oscarpalmer/atoms/is";
-import { getAttribute, setAttribute } from "@oscarpalmer/toretto/attribute";
 import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
-import { setStyle, setStyles } from "@oscarpalmer/toretto/style";
 //#region src/js/floatable/floatable.embedded.ts
 var OuiFloatable = class {
 	#destroyed = false;

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

@@ -1,2 +1,2 @@
-import { a as OuiFloatablePosition, n as CreateOuiFloatableOptions, r as OuiFloatable, s as createFloatable } from "../floatable.embedded-DUR8bQBK.mjs";
+import { a as OuiFloatablePosition, n as CreateOuiFloatableOptions, r as OuiFloatable, s as createFloatable } from "../floatable.embedded-Bct4U5Dm.mjs";
 export { type CreateOuiFloatableOptions, type OuiFloatable, type OuiFloatablePosition, createFloatable };

package/dist/js/{floatable.embedded-DUR8bQBK.d.mts → floatable.embedded-Bct4U5Dm.d.mts}

@@ -1,5 +1,4 @@
 import { RemovableEventListener } from "@oscarpalmer/toretto/models";
-
 //#region src/js/floatable/floatable.embedded.d.ts
 type CreateOuiFloatableOptions = {
   /**

package/dist/js/focus-trap/focus-trap.embedded.mjs

@@ -1,10 +1,10 @@
 import { attributable } from "../internal/attributable.mjs";
+import { clamp } from "@oscarpalmer/atoms/number";
+import { setAttribute } from "@oscarpalmer/toretto/attribute";
 import { on } from "@oscarpalmer/toretto/event";
+import { findAncestor } from "@oscarpalmer/toretto/find";
 import { isPlainObject } from "@oscarpalmer/atoms/is";
-import { setAttribute } from "@oscarpalmer/toretto/attribute";
 import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
-import { clamp } from "@oscarpalmer/atoms/number";
-import { findAncestor } from "@oscarpalmer/toretto/find";
 import { getFocusable } from "@oscarpalmer/toretto/focusable";
 //#region src/js/focus-trap/focus-trap.embedded.ts
 var OuiFocusTrap = class {
@@ -172,11 +172,16 @@ function onTab(event) {
 	const element = findAncestor(event, SELECTOR);
 	const instance = instances.get(element);
 	if (instance == null) return;
-	if (!instance.disabled) event.preventDefault();
-	const elements = getFocusable(element);
-	const index = elements.indexOf(event.target);
-	if (index === -1 || elements.length === 0) tabToTrap(instance, elements, element);
-	else tabToElement(instance, elements, index, event.shiftKey ? -1 : 1);
+	const dispatch = new CustomEvent("focus-trap:tab", { cancelable: true });
+	element.dispatchEvent(dispatch);
+	setTimeout(() => {
+		if (dispatch.defaultPrevented) return;
+		if (!instance.disabled) event.preventDefault();
+		const elements = getFocusable(element);
+		const index = elements.indexOf(event.target);
+		if (index === -1 || elements.length === 0) tabToTrap(instance, elements, element);
+		else tabToElement(instance, elements, index, event.shiftKey ? -1 : 1);
+	});
 }
 function removeFocusTrap(element) {
 	instances.get(element)?.destroy();

package/dist/js/index.d.mts

@@ -1,9 +1,14 @@
-import { d as OuiSortable, f as createSortable, g as createMovable, h as OuiMovable, t as CreateOuiDraggableOptions } from "./draggable-fIYXd8eO.mjs";
-import { a as createResizable, n as OuiResizable, t as CreateOuiResizableOptions } from "./resizable.embedded-CXrUVPzR.mjs";
+import { OuiComboboxElement } from "./combobox.mjs";
+import { d as OuiSortable, f as createSortable, g as createMovable, h as OuiMovable, t as CreateOuiDraggableOptions } from "./draggable-a6w0J1OD.mjs";
+import "./movable/movable.standalone.mjs";
+import { a as createResizable, n as OuiResizable, t as CreateOuiResizableOptions } from "./resizable.embedded-3qoR0Bjm.mjs";
+import "./resizable/resizable.standalone.mjs";
 import { OuiDialog, getDialog } from "./dialog.mjs";
-import { a as OuiFloatablePosition, n as CreateOuiFloatableOptions, r as OuiFloatable, s as createFloatable } from "./floatable.embedded-DUR8bQBK.mjs";
+import { a as OuiFloatablePosition, n as CreateOuiFloatableOptions, r as OuiFloatable, s as createFloatable } from "./floatable.embedded-Bct4U5Dm.mjs";
+import "./floatable/floatable.standalone.mjs";
 import { a as OuiFocusTrapOptions, i as OuiFocusTrap, o as createFocusTrap } from "./focus-trap.embedded-DR8NpZfr.mjs";
 import { OuiPopover, getPopover } from "./popover.mjs";
+import "./sortable/sortable.standalone.mjs";
 import { OuiSplitterElement } from "./splitter.mjs";
 import { OuiTooltip, getTooltip, setTooltipDelay } from "./tooltip.mjs";
-export { type CreateOuiFloatableOptions, type CreateOuiDraggableOptions as CreateOuiMovableOptions, type CreateOuiDraggableOptions as CreateOuiSortableOptions, type CreateOuiResizableOptions, type OuiDialog, type OuiFloatable, type OuiFloatablePosition, type OuiFocusTrap, type OuiFocusTrapOptions, type OuiMovable, type OuiPopover, type OuiResizable, type OuiSortable, OuiSplitterElement, type OuiTooltip, createFloatable, createFocusTrap, createMovable, createResizable as createOuiResizable, createSortable, getDialog, getPopover, getTooltip, setTooltipDelay };
+export { type CreateOuiFloatableOptions, type CreateOuiDraggableOptions as CreateOuiMovableOptions, type CreateOuiDraggableOptions as CreateOuiSortableOptions, type CreateOuiResizableOptions, OuiComboboxElement, type OuiDialog, type OuiFloatable, type OuiFloatablePosition, type OuiFocusTrap, type OuiFocusTrapOptions, type OuiMovable, type OuiPopover, type OuiResizable, type OuiSortable, OuiSplitterElement, type OuiTooltip, createFloatable, createFocusTrap, createMovable, createResizable as createOuiResizable, createSortable, getDialog, getPopover, getTooltip, setTooltipDelay };

package/dist/js/index.mjs

@@ -1,4 +1,5 @@
 import { createFloatable } from "./floatable/floatable.embedded.mjs";
+import { OuiComboboxElement } from "./combobox.mjs";
 import { createMovable } from "./movable/movable.embedded.mjs";
 import "./movable/movable.standalone.mjs";
 import { createResizable } from "./resizable/resizable.embedded.mjs";
@@ -14,4 +15,4 @@ import { createSortable } from "./sortable/sortable.embedded.mjs";
 import "./sortable/sortable.standalone.mjs";
 import { OuiSplitterElement } from "./splitter.mjs";
 import { getTooltip, setTooltipDelay } from "./tooltip.mjs";
-export { OuiSplitterElement, createFloatable, createFocusTrap, createMovable, createResizable as createOuiResizable, createSortable, getDialog, getPopover, getTooltip, setTooltipDelay };
+export { OuiComboboxElement, OuiSplitterElement, createFloatable, createFocusTrap, createMovable, createResizable as createOuiResizable, createSortable, getDialog, getPopover, getTooltip, setTooltipDelay };

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

@@ -1,2 +1,2 @@
-import { a as OuiDraggableGlobals, c as addDraggable, i as OuiDraggableBound, l as getDraggableStates, n as OuiDragMovePosition, o as OuiDraggableItem, r as OuiDraggable, s as OuiDraggableState, t as CreateOuiDraggableOptions, u as removeDraggable } from "../draggable-fIYXd8eO.mjs";
+import { a as OuiDraggableGlobals, c as addDraggable, i as OuiDraggableBound, l as getDraggableStates, n as OuiDragMovePosition, o as OuiDraggableItem, r as OuiDraggable, s as OuiDraggableState, t as CreateOuiDraggableOptions, u as removeDraggable } from "../draggable-a6w0J1OD.mjs";
 export { CreateOuiDraggableOptions, OuiDragMovePosition, OuiDraggable, OuiDraggableBound, OuiDraggableGlobals, OuiDraggableItem, OuiDraggableState, addDraggable, getDraggableStates, removeDraggable };