@oscarpalmer/oui 0.32.0 → 0.33.0

package/dist/js/index.mjs

@@ -1,18 +1,4875 @@
-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";
-import { getDialog } from "./dialog.mjs";
-import "./menu.mjs";
-import "./toolbar.mjs";
-import "./floatable/floatable.standalone.mjs";
-import { createFocusTrap } from "./focus-trap/focus-trap.embedded.mjs";
-import "./focus-trap/focus-trap.standalone.mjs";
-import { getPopover } from "./popover.mjs";
-import "./resizable/resizable.standalone.mjs";
-import { createSortable } from "./sortable/sortable.embedded.mjs";
-import "./sortable/sortable.standalone.mjs";
-import { OuiSplitterElement } from "./splitter.mjs";
-import { getTooltip, setTooltipDelay } from "./tooltip.mjs";
-export { OuiComboboxElement, OuiSplitterElement, createFloatable, createFocusTrap, createMovable, createResizable as createOuiResizable, createSortable, getDialog, getPopover, getTooltip, setTooltipDelay };
+//#region node_modules/@oscarpalmer/toretto/dist/internal/is.mjs
+/**
+* Is the value an event position?
+*
+* @param value Value to check
+* @returns `true` if it's an event position, otherwise `false`
+*/
+function isEventPosition(value) {
+	return typeof value === "object" && value != null && typeof value.x === "number" && typeof value.y === "number";
+}
+/**
+* Is the value an event target?
+*
+* @param value Value to check
+* @returns `true` if it's an event target, otherwise `false`
+*/
+function isEventTarget(value) {
+	return typeof value === "object" && value != null && typeof value.addEventListener === "function" && typeof value.removeEventListener === "function" && typeof value.dispatchEvent === "function";
+}
+/**
+* Is the value an _HTML_ or _SVG_ element?
+*
+* @param value Value to check
+* @returns `true` if it's an _HTML_ or _SVG_ element, otherwise `false`
+*/
+function isHTMLOrSVGElement(value) {
+	return value instanceof HTMLElement || value instanceof SVGElement;
+}
+/**
+* Is the value an input element? _(`<input>`, `<select>`, or `<textarea>`)_
+*
+* @param value Value to check
+* @returns `true` if it's an input element, otherwise `false`
+*/
+function isInputElement(value) {
+	return value instanceof HTMLInputElement || value instanceof HTMLSelectElement || value instanceof HTMLTextAreaElement;
+}
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/internal/is.mjs
+/**
+* Is the value a number?
+*
+* @param value Value to check
+* @returns `true` if the value is a `number`, otherwise `false`
+*/
+function isNumber(value) {
+	return typeof value === "number" && !Number.isNaN(value);
+}
+/**
+* Is the value a plain object?
+*
+* @param value Value to check
+* @returns `true` if the value is a plain object, otherwise `false`
+*/
+function isPlainObject(value) {
+	if (value === null || typeof value !== "object") return false;
+	if (Symbol.toStringTag in value || Symbol.iterator in value) return false;
+	const prototype = Object.getPrototypeOf(value);
+	return prototype === null || prototype === Object.prototype || Object.getPrototypeOf(prototype) === null;
+}
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/internal/string.mjs
+/**
+* Get the string value from any value
+*
+* @param value Original value
+* @returns String representation of the value
+*
+* @example
+* ```typescript
+* getString(null)       // => ''
+* getString('foo')      // => 'foo'
+* getString(123)        // => '123'
+* getString(true)       // => 'true'
+* getString([1, 2, 3])  // => '1,2,3'
+* getString({a: 1})     // => '{"a":1}'
+* getString(() => 123)  // => '123'
+* ```
+*/
+function getString(value) {
+	if (typeof value === "string") return value;
+	if (value == null) return "";
+	if (typeof value === "function") return getString(value());
+	if (typeof value !== "object") return String(value);
+	const asString = String(value.valueOf?.() ?? value);
+	return asString.startsWith("[object ") ? JSON.stringify(value) : asString;
+}
+/**
+* Join an array of values into a string _(while ignoring empty values)_
+*
+* _(`null`, `undefined`, and any values that become whitespace-only strings are considered empty)_
+*
+* @param array Array of values
+* @param delimiter Delimiter to use between values
+* @returns Joined string
+*/
+function join(array, delimiter) {
+	if (!Array.isArray(array)) return "";
+	const { length } = array;
+	if (length === 0) return "";
+	const values = [];
+	for (let index = 0; index < length; index += 1) {
+		const item = getString(array[index]);
+		if (item.length > 0) values.push(item);
+	}
+	return values.join(typeof delimiter === "string" ? delimiter : "");
+}
+/**
+* Split a string into words _(and other readable parts)_
+*
+* @param value Original string
+* @returns Array of words found in the string
+*/
+function words(value) {
+	return typeof value === "string" ? value.match(EXPRESSION_WORDS) ?? [] : [];
+}
+const EXPRESSION_WORDS = /[^\x00-\x2f\x3a-\x40\x5b-\x60\x7b-\x7f]+/g;
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/string/index.mjs
+/**
+* Parse a JSON string into its proper value _(or `undefined` if it fails)_
+*
+* @param value JSON string to parse
+* @param reviver Reviver function to transform the parsed values
+* @returns Parsed value or `undefined` if parsing fails
+*/
+function parse(value, reviver) {
+	try {
+		return JSON.parse(value, reviver);
+	} catch {
+		return;
+	}
+}
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/internal/number.mjs
+/**
+* Clamp a number between a minimum and maximum value
+*
+* @param value Value to clamp
+* @param minimum Minimum value
+* @param maximum Maximum value
+* @param loop If `true`, the value will loop around when smaller than the minimum or larger than the maximum _(defaults to `false`)_
+* @returns Clamped value
+*
+* @example
+* ```typescript
+* clamp(10, 0, 5);       // => 5
+* clamp(10, 0, 5, true); // => 0
+* ```
+*/
+function clamp(value, minimum, maximum, loop) {
+	if (![
+		value,
+		minimum,
+		maximum
+	].every(isNumber)) return NaN;
+	if (value < minimum) return loop === true ? maximum : minimum;
+	return value > maximum ? loop === true ? minimum : maximum : value;
+}
+/**
+* Get the number value from an unknown value
+*
+* _(Based on Lodash)_
+*
+* @param value Original value
+* @returns Original value as a number, or `Number.NaN` if the value is unable to be parsed
+*/
+function getNumber(value) {
+	if (typeof value === "number") return value;
+	if (typeof value === "bigint" || typeof value === "boolean") return Number(value);
+	if (value == null || typeof value === "symbol") return NaN;
+	if (typeof value === "function") return getNumber(value());
+	let parsed = value.valueOf();
+	if (typeof parsed === "object") parsed = parsed.toString();
+	if (typeof parsed !== "string") return getNumber(parsed);
+	const trimmed = parsed.trim();
+	if (trimmed.length === 0) return NaN;
+	if (EXPRESSION_ZEROISH.test(parsed)) return 0;
+	const isBinary = EXPRESSION_BINARY.test(trimmed);
+	if (isBinary || EXPRESSION_OCTAL.test(trimmed)) return Number.parseInt(trimmed.slice(2), isBinary ? 2 : OCTAL_VALUE);
+	return Number(trimmed);
+}
+const EXPRESSION_BINARY = /^0b[01]+$/i;
+const EXPRESSION_OCTAL = /^0o[0-7]+$/i;
+const EXPRESSION_ZEROISH = /^\s*0+\s*$/;
+const OCTAL_VALUE = 8;
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/internal/sized.mjs
+function getSizedMaximum(first, second) {
+	let actual;
+	if (typeof first === "number") actual = first;
+	else actual = typeof second === "number" ? second : MAXIMUM_DEFAULT;
+	return clamp(actual, 1, MAXIMUM_ABSOLUTE);
+}
+const MAXIMUM_ABSOLUTE = 16777216;
+const MAXIMUM_DEFAULT = 1048576;
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/sized/map.mjs
+/**
+* A _Map_ with a maximum size
+*
+* Behavior is similar to a _LRU_ cache, where the least recently used entries are removed
+*/
+var SizedMap = class extends Map {
+	/**
+	* The maximum size of the _Map_
+	*/
+	#maximumSize;
+	/**
+	* Is the _Map_ full?
+	*/
+	get full() {
+		return super.size >= this.#maximumSize;
+	}
+	get maximum() {
+		return this.#maximumSize;
+	}
+	constructor(first, second) {
+		const maximum = getSizedMaximum(first, second);
+		super();
+		this.#maximumSize = maximum;
+		if (Array.isArray(first)) {
+			const { length } = first;
+			if (length <= maximum) for (let index = 0; index < length; index += 1) this.set(...first[index]);
+			else for (let index = 0; index < maximum; index += 1) this.set(...first[length - maximum + index]);
+		}
+	}
+	/**
+	* @inheritdoc
+	*/
+	get(key) {
+		if (super.has(key)) {
+			const value = super.get(key);
+			this.#setValue(key, value, true);
+			return value;
+		}
+	}
+	/**
+	* @inheritdoc
+	*/
+	set(key, value) {
+		return this.#setValue(key, value, super.has(key));
+	}
+	#setValue(key, value, has) {
+		if (has) super.delete(key);
+		else if (super.size >= this.#maximumSize) super.delete(super.keys().next().value);
+		super.set(key, value);
+		return this;
+	}
+};
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/function/memoize.mjs
+/**
+* A _Memoized_ function instance, caching and retrieving results based on the its parameters _(or a custom cache key)_
+*/
+var Memoized = class {
+	#state;
+	/**
+	* Maximum cache size
+	*
+	* @returns Maximum cache size _(or `Number.NaN` if the instance has been destroyed)_
+	*/
+	get maximum() {
+		return this.#state.cache?.maximum ?? NaN;
+	}
+	/**
+	* Current cache size
+	*
+	* @returns Current cache size _(or `Number.NaN` if the instance has been destroyed)_
+	*/
+	get size() {
+		return this.#state.cache?.size ?? NaN;
+	}
+	constructor(callback, options) {
+		const cache = new SizedMap(options.cacheSize);
+		const getter = (...parameters) => {
+			const key = options.cacheKey?.(...parameters) ?? (parameters.length === 1 ? parameters[0] : join(parameters.map(getString), SEPARATOR));
+			if (cache.has(key)) return cache.get(key);
+			const value = callback(...parameters);
+			cache.set(key, value);
+			return value;
+		};
+		this.#state = {
+			cache,
+			getter
+		};
+	}
+	/**
+	* Clear the cache
+	*/
+	clear() {
+		this.#state.cache?.clear();
+	}
+	/**
+	* Delete a result from the cache
+	*
+	* @param key Key to delete
+	* @returns `true` if the key existed and was removed, otherwise `false`
+	*/
+	delete(key) {
+		return this.#state.cache?.delete(key) ?? false;
+	}
+	/**
+	* Destroy the instance
+	*
+	* _(When a Memoized instance is destroyed, its cache and callback are removed, and calls to `run` will throw an error)_
+	*/
+	destroy() {
+		this.#state.cache?.clear();
+		this.#state.cache = void 0;
+		this.#state.getter = void 0;
+	}
+	/**
+	* Get a result from the cache
+	*
+	* @param key Key to get
+	* @returns Cached result or `undefined` if it does not exist
+	*/
+	get(key) {
+		return this.#state.cache?.get(key);
+	}
+	/**
+	* Does the result exist?
+	*
+	* @param key Key to check
+	* @returns `true` if the result exists, otherwise `false`
+	*/
+	has(key) {
+		return this.#state.cache?.has(key) ?? false;
+	}
+	/**
+	* Run the callback with the provided parameters
+	*
+	* @param parameters Parameters to pass to the callback
+	* @returns Cached or computed _(then cached)_ result
+	*/
+	run(...parameters) {
+		if (this.#state.cache == null || this.#state.getter == null) throw new Error(MEMOIZED_ERROR_DESTROYED);
+		return this.#state.getter(...parameters);
+	}
+};
+function getMemoizationOptions(input) {
+	const { cacheKey, cacheSize } = isPlainObject(input) ? input : {};
+	return {
+		cacheKey: typeof cacheKey === "function" ? cacheKey : void 0,
+		cacheSize: typeof cacheSize === "number" && cacheSize > 0 ? cacheSize : DEFAULT_CACHE_SIZE
+	};
+}
+/**
+* Memoize a function, caching and retrieving results based on the first parameter
+*
+* @param callback Callback to memoize
+* @param options Memoization options
+* @returns _Memoized_ instance
+*/
+function memoize(callback, options) {
+	if (typeof callback !== "function") throw new TypeError(MEMOIZED_ERROR_CALLBACK);
+	return new Memoized(callback, getMemoizationOptions(options));
+}
+const DEFAULT_CACHE_SIZE = 1024;
+const MEMOIZED_ERROR_CALLBACK = "Memoized requires a callback function";
+const MEMOIZED_ERROR_DESTROYED = "The Memoized instance has been destroyed";
+const SEPARATOR = "_";
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/string/case.mjs
+/**
+* Convert a string to camel case _(thisIsCamelCase)_
+*
+* @param value String to convert
+* @returns Camel-cased string
+*/
+function camelCase(value) {
+	return toCase(CASE_CAMEL, value, true, false);
+}
+/**
+* Capitalize the first letter of a string _(and lowercase the rest)_
+*
+* @param value String to capitalize
+* @returns Capitalized string
+*/
+function capitalize(value) {
+	if (typeof value !== "string" || value.length === 0) return "";
+	memoizedCapitalize ??= memoize((v) => v.length === 1 ? v.toLocaleUpperCase() : `${v.charAt(0).toLocaleUpperCase()}${v.slice(1).toLocaleLowerCase()}`);
+	return memoizedCapitalize.run(value);
+}
+/**
+* Convert a string to kebab case _(this-is-kebab-case)_
+*
+* @param value String to convert
+* @returns Kebab-cased string
+*/
+function kebabCase(value) {
+	return toCase(CASE_KEBAB, value, false, false);
+}
+function toCase(type, value, capitalizeAny, capitalizeFirst) {
+	caseMemoizers[type] ??= memoize(toCaseCallback.bind({
+		type,
+		capitalizeAny,
+		capitalizeFirst
+	}));
+	return caseMemoizers[type].run(value);
+}
+function toCaseCallback(value) {
+	if (typeof value !== "string") return "";
+	if (value.length < 1) return value;
+	const { capitalizeAny, capitalizeFirst, type } = this;
+	const parts = words(value);
+	const partsLength = parts.length;
+	const cased = [];
+	for (let partIndex = 0; partIndex < partsLength; partIndex += 1) {
+		const items = parts[partIndex].replace(EXPRESSION_ACRONYM, (full, one, two, three) => three === S ? full : `${one}-${two}${three}`).replace(EXPRESSION_CAMEL_CASE, REPLACEMENT_CAMEL_CASE).split("-");
+		const itemsLength = items.length;
+		const partResult = [];
+		let itemCount = 0;
+		for (let itemIndex = 0; itemIndex < itemsLength; itemIndex += 1) {
+			const item = items[itemIndex];
+			if (item.length === 0) continue;
+			if (!capitalizeAny || itemCount === 0 && partIndex === 0 && !capitalizeFirst) partResult.push(item.toLocaleLowerCase());
+			else partResult.push(capitalize(item));
+			itemCount += 1;
+		}
+		cased.push(join(partResult, delimiters[type]));
+	}
+	return join(cased, delimiters[type]);
+}
+const CASE_CAMEL = "camel";
+const CASE_KEBAB = "kebab";
+const CASE_PASCAL = "pascal";
+const CASE_SNAKE = "snake";
+const DELIMTER_EMPTY = "";
+const DELIMITER_HYPHEN = "-";
+const DELIMITER_UNDERSCORE = "_";
+const EXPRESSION_CAMEL_CASE = /(\p{Ll})(\p{Lu})/gu;
+const EXPRESSION_ACRONYM = /(\p{Lu}*)(\p{Lu})(\p{Ll}+)/gu;
+const REPLACEMENT_CAMEL_CASE = "$1-$2";
+const S = "s";
+const caseMemoizers = {};
+const delimiters = {
+	[CASE_CAMEL]: DELIMTER_EMPTY,
+	[CASE_KEBAB]: DELIMITER_HYPHEN,
+	[CASE_PASCAL]: DELIMTER_EMPTY,
+	[CASE_SNAKE]: DELIMITER_UNDERSCORE
+};
+let memoizedCapitalize;
+//#endregion
+//#region node_modules/@oscarpalmer/toretto/dist/internal/property.mjs
+function getPropertyValue(element, name, value) {
+	if (isInputElement(element) && name === "value") return getString(value);
+	return value;
+}
+function updateProperty(element, name, value, dispatch) {
+	let property = name;
+	if (!(property in element)) property = camelCase(name);
+	const next = getPropertyValue(element, name, value);
+	if (!(property in element) || Object.is(element[property], next)) return;
+	element[property] = next;
+	const event = dispatch && elementEvents[element.tagName]?.[property];
+	if (typeof event === "string") element.dispatchEvent(new Event(event, {
+		bubbles: true,
+		cancelable: true
+	}));
+}
+const elementEvents = {
+	DETAILS: { open: "toggle" },
+	INPUT: {
+		checked: "change",
+		value: "input"
+	},
+	SELECT: { value: "change" },
+	TEXTAREA: { value: "input" }
+};
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/is.mjs
+/**
+* Is the value `undefined`, `null`, or stringified as a whitespace-only string?
+*
+* @param value Value to check
+* @returns `true` if the value is nullable or matches a whitespace-only string, otherwise `false`
+*/
+function isNullableOrWhitespace(value) {
+	return value == null || EXPRESSION_WHITESPACE$1.test(getString(value));
+}
+const EXPRESSION_WHITESPACE$1 = /^\s*$/;
+//#endregion
+//#region node_modules/@oscarpalmer/toretto/dist/internal/attribute.mjs
+function isAttribute(value) {
+	return value instanceof Attr || isPlainObject(value) && typeof value.name === "string" && "value" in value;
+}
+function updateAttribute(element, name, value, dispatch) {
+	const lowerCaseName = name.toLowerCase();
+	const isBoolean = booleanAttributesSet.has(lowerCaseName);
+	const next = isBoolean ? value === true || typeof value === "string" && (value === "" || value.toLowerCase() === lowerCaseName) : value == null ? "" : value;
+	if (isBoolean || dispatchedAttributes.has(name)) updateProperty(element, name, next, dispatch);
+	updateElementValue(element, name, isBoolean ? next ? "" : null : value, element.setAttribute, element.removeAttribute, false);
+}
+/**
+* List of boolean attributes
+*/
+const booleanAttributes = Object.freeze([
+	"async",
+	"autofocus",
+	"autoplay",
+	"checked",
+	"controls",
+	"default",
+	"defer",
+	"disabled",
+	"formnovalidate",
+	"hidden",
+	"inert",
+	"ismap",
+	"itemscope",
+	"loop",
+	"multiple",
+	"muted",
+	"nomodule",
+	"novalidate",
+	"open",
+	"playsinline",
+	"readonly",
+	"required",
+	"reversed",
+	"selected"
+]);
+const booleanAttributesSet = new Set(booleanAttributes);
+const dispatchedAttributes = /* @__PURE__ */ new Set([
+	"checked",
+	"open",
+	"value"
+]);
+document.createElement("form");
+//#endregion
+//#region node_modules/@oscarpalmer/toretto/dist/internal/element-value.mjs
+function getValueForAttribute(value, json) {
+	if (typeof value === "string") return value;
+	return json ? JSON.stringify(value) : getString(value);
+}
+function ignoreSetAttribute(element, name) {
+	if (element instanceof HTMLTextAreaElement && name === "value") return true;
+	return false;
+}
+function normalizeKey(key, style) {
+	return style && key.startsWith(CSS_VARIABLE_PREFIX$1) ? key : kebabCase(key);
+}
+function setElementValue(element, first, second, third, callback, style) {
+	if (!(element instanceof Element)) return;
+	if (typeof first === "string") setElementValues(element, first, second, third, callback, style);
+	else if (isAttribute(first)) setElementValues(element, first.name, first.value, third, callback, style);
+}
+function setElementValues(element, first, second, third, callback, style) {
+	if (!(element instanceof Element)) return;
+	const dispatch = third !== false;
+	if (typeof first === "string") {
+		callback(element, normalizeKey(first, style), second, dispatch);
+		return;
+	}
+	const isArray = Array.isArray(first);
+	if (!isArray && !(typeof first === "object" && first !== null)) return;
+	const entries = isArray ? first : Object.entries(first).map(([name, value]) => ({
+		name,
+		value
+	}));
+	const { length } = entries;
+	for (let index = 0; index < length; index += 1) {
+		const entry = entries[index];
+		if (typeof entry === "object" && typeof entry?.name === "string") callback(element, normalizeKey(entry.name, style), entry.value, dispatch);
+	}
+}
+function updateElementValue(element, key, value, set, remove, json) {
+	if (value == null) remove.call(element, key);
+	else if (!ignoreSetAttribute(element, key)) set.call(element, key, getValueForAttribute(value, json));
+}
+const CSS_VARIABLE_PREFIX$1 = "--";
+//#endregion
+//#region node_modules/@oscarpalmer/toretto/dist/aria.mjs
+function getAria(element, value) {
+	if (!(element instanceof Element)) return Array.isArray(value) ? {} : void 0;
+	if (!Array.isArray(value)) return typeof value === "string" ? getAriaValue(element, value) : void 0;
+	const arias = {};
+	const { length } = value;
+	for (let index = 0; index < length; index += 1) {
+		const attribute = value[index];
+		if (typeof attribute === "string") arias[attribute.replace(ATTRIBUTE_ARIA_PREFIX, "")] = getAriaValue(element, attribute);
+	}
+	return arias;
+}
+function getAriaValue(element, attribute) {
+	const name = getName$1(attribute);
+	const value = element.getAttribute(name) ?? void 0;
+	if (ariaBooleanAttributesSet.has(name) && typeof value === "string" && EXPRESSION_BOOLEAN.test(value)) return value.toLowerCase() === "true";
+	return value;
+}
+function getName$1(value) {
+	return EXPRESSION_ARIA_PREFIX.test(value) ? value : `${ATTRIBUTE_ARIA_PREFIX}${value}`;
+}
+function setAria(element, first, second) {
+	setElementValues(element, first, second, null, updateAriaAttribute);
+}
+/**
+* Set the role of an element
+*
+* @param element Element for role
+* @param role Role to set _(or `undefined` to remove it)_
+*/
+function setRole(element, role) {
+	if (!(element instanceof Element)) return;
+	if (typeof role === "string") element.setAttribute("role", role);
+	else element.removeAttribute("role");
+}
+function updateAriaAttribute(element, key, value) {
+	const name = getName$1(key);
+	let actual = value;
+	if (ariaBooleanAttributesSet.has(name) && typeof value === "string" && EXPRESSION_BOOLEAN.test(value)) actual = value.toLowerCase() === "true";
+	updateElementValue(element, name, actual, element.setAttribute, element.removeAttribute, false);
+}
+const ATTRIBUTE_ARIA_PREFIX = "aria-";
+const EXPRESSION_ARIA_PREFIX = /^aria-/i;
+const EXPRESSION_BOOLEAN = /^(true|false)$/i;
+/**
+* List of _ARIA_ attributes that can be treated as boolean values
+*/
+const ariaBooleanAttributes = Object.freeze([
+	"aria-atomic",
+	"aria-busy",
+	"aria-checked",
+	"aria-current",
+	"aria-disabled",
+	"aria-expanded",
+	"aria-haspopup",
+	"aria-hidden",
+	"aria-invalid",
+	"aria-modal",
+	"aria-multiline",
+	"aria-multiselectable",
+	"aria-pressed",
+	"aria-readonly",
+	"aria-required",
+	"aria-selected"
+]);
+/**
+* Set of _ARIA_ attributes that can be treated as boolean values
+*/
+const ariaBooleanAttributesSet = new Set(ariaBooleanAttributes);
+//#endregion
+//#region node_modules/@oscarpalmer/toretto/dist/internal/get-value.mjs
+function getBoolean(value, defaultValue) {
+	return typeof value === "boolean" ? value : defaultValue ?? false;
+}
+function getAttributeValue$1(element, name, parseValue) {
+	const normalized = kebabCase(name);
+	const attribute = element.attributes[normalized];
+	const value = attribute instanceof Attr ? attribute.value : void 0;
+	return EXPRESSION_DATA_PREFIX.test(normalized) && typeof value === "string" && parseValue ? parse(value) ?? value : value;
+}
+function getStyleValue(element, property, computed) {
+	if (property.startsWith(CSS_VARIABLE_PREFIX)) return element.style.getPropertyValue(property);
+	const name = camelCase(property);
+	return computed ? getComputedStyle(element)[name] : element.style[name];
+}
+const EXPRESSION_DATA_PREFIX = /^data-/i;
+const CSS_VARIABLE_PREFIX = "--";
+//#endregion
+//#region node_modules/@oscarpalmer/toretto/dist/attribute/get.attribute.mjs
+function getAttribute(element, name, parseValues) {
+	if (element instanceof Element && typeof name === "string") return getAttributeValue$1(element, kebabCase(name), parseValues !== false);
+}
+//#endregion
+//#region node_modules/@oscarpalmer/toretto/dist/attribute/set.attribute.mjs
+function setAttribute(element, first, second, third) {
+	setElementValue(element, first, second, third, updateAttribute);
+}
+function setAttributes(element, attributes, dispatch) {
+	setElementValues(element, attributes, null, dispatch, updateAttribute);
+}
+//#endregion
+//#region node_modules/@oscarpalmer/toretto/dist/event/delegation.mjs
+function addDelegatedHandler(doc, type, name, passive) {
+	if (DELEGATED.has(name)) return;
+	DELEGATED.add(name);
+	doc.addEventListener(type, passive ? HANDLER_PASSIVE : HANDLER_ACTIVE, { passive });
+}
+function addDelegatedListener(target, type, name, listener, passive) {
+	target[name] ??= /* @__PURE__ */ new Set();
+	target[name].add(listener);
+	addDelegatedHandler(document, type, name, passive);
+	return () => {
+		removeDelegatedListener(target, name, listener);
+	};
+}
+function delegatedEventHandler(event) {
+	const key = `@${event.type}${this ? EVENT_SUFFIX_PASSIVE : EVENT_SUFFIX_ACTIVE}`;
+	const items = event.composedPath();
+	const { length } = items;
+	let cancelled = false;
+	let target = items[0];
+	const originalStopPropagation = event.stopPropagation;
+	event.stopPropagation = function() {
+		cancelled = true;
+		originalStopPropagation.call(event);
+	};
+	event.stopImmediatePropagation = event.stopPropagation.bind(event);
+	Object.defineProperties(event, {
+		currentTarget: {
+			configurable: true,
+			get() {
+				return target;
+			}
+		},
+		target: {
+			configurable: true,
+			value: target
+		}
+	});
+	for (let index = 0; index < length; index += 1) {
+		const item = items[index];
+		const listeners = item[key];
+		if (item.disabled || listeners == null) continue;
+		target = item;
+		for (const listener of listeners) {
+			listener.call(item, event);
+			if (cancelled) return;
+		}
+	}
+}
+function getDelegatedName(target, type, options) {
+	if (isEventTarget(target) && EVENT_TYPES.has(type) && !options.capture && !options.once && options.signal == null) return `@${type}${options.passive ? EVENT_SUFFIX_PASSIVE : EVENT_SUFFIX_ACTIVE}`;
+}
+function removeDelegatedListener(target, name, listener) {
+	const handlers = target[name];
+	if (handlers == null || !handlers.has(listener)) return false;
+	handlers.delete(listener);
+	if (handlers.size === 0) target[name] = void 0;
+	return true;
+}
+const DELEGATED = /* @__PURE__ */ new Set();
+const EVENT_SUFFIX_ACTIVE = ":active";
+const EVENT_SUFFIX_PASSIVE = ":passive";
+const EVENT_TYPES = /* @__PURE__ */ new Set([
+	"beforeinput",
+	"click",
+	"dblclick",
+	"contextmenu",
+	"focusin",
+	"focusout",
+	"input",
+	"keydown",
+	"keyup",
+	"mousedown",
+	"mousemove",
+	"mouseout",
+	"mouseover",
+	"mouseup",
+	"pointerdown",
+	"pointermove",
+	"pointerout",
+	"pointerover",
+	"pointerup",
+	"touchend",
+	"touchmove",
+	"touchstart"
+]);
+const HANDLER_ACTIVE = delegatedEventHandler.bind(false);
+const HANDLER_PASSIVE = delegatedEventHandler.bind(true);
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/internal/function/misc.mjs
+/**
+* A function that does nothing, which can be useful, I guess…
+*/
+function noop() {}
+//#endregion
+//#region node_modules/@oscarpalmer/toretto/dist/event/index.mjs
+function createDispatchOptions(options) {
+	return {
+		bubbles: getBoolean(options?.bubbles, true),
+		cancelable: getBoolean(options?.cancelable, true),
+		composed: getBoolean(options?.composed)
+	};
+}
+function createEvent(type, options) {
+	const hasOptions = isPlainObject(options);
+	if (hasOptions && "detail" in options) return new CustomEvent(type, {
+		...createDispatchOptions(options),
+		detail: options?.detail
+	});
+	return new Event(type, createDispatchOptions(hasOptions ? options : {}));
+}
+function createEventOptions(options) {
+	return {
+		capture: getBoolean(options?.capture),
+		once: getBoolean(options?.once),
+		passive: getBoolean(options?.passive, true),
+		signal: options?.signal instanceof AbortSignal ? options.signal : void 0
+	};
+}
+function dispatch(target, type, options) {
+	if (!isEventTarget(target) || typeof type !== "string") return;
+	const event = createEvent(type, options);
+	target.dispatchEvent(event);
+	return event;
+}
+/**
+* Get the X- and Y-coordinates from a pointer event
+*
+* @param event Pointer event
+* @returns X- and Y-coordinates
+*/
+function getPosition$1(event) {
+	let x;
+	let y;
+	if (event instanceof MouseEvent) {
+		x = event.clientX;
+		y = event.clientY;
+	} else if (event instanceof TouchEvent) {
+		x = event.touches[0]?.clientX;
+		y = event.touches[0]?.clientY;
+	}
+	return typeof x === "number" && typeof y === "number" ? {
+		x,
+		y
+	} : void 0;
+}
+function on(target, type, listener, options) {
+	if (!isEventTarget(target) || typeof type !== "string" || typeof listener !== "function") return noop;
+	const extended = createEventOptions(options);
+	const delegated = getDelegatedName(target, type, extended);
+	if (delegated != null) return addDelegatedListener(target, type, delegated, listener, extended.passive);
+	target.addEventListener(type, listener, extended);
+	if (extended.once) return noop;
+	return () => {
+		target.removeEventListener(type, listener, extended);
+	};
+}
+//#endregion
+//#region node_modules/@oscarpalmer/toretto/dist/find/relative.mjs
+function findAncestor(origin, selector) {
+	const element = getElement(origin);
+	if (element == null || selector == null) return null;
+	if (typeof selector === "string") {
+		if (Element.prototype.matches.call(element, selector)) return element;
+		return Element.prototype.closest.call(element, selector);
+	}
+	if (typeof selector !== "function") return null;
+	if (selector(element)) return element;
+	let parent = element.parentElement;
+	while (parent != null && !selector(parent)) {
+		if (parent === document.body) return null;
+		parent = parent.parentElement;
+	}
+	return parent;
+}
+function getElement(origin) {
+	if (origin instanceof Element) return origin;
+	return origin instanceof Event && origin.target instanceof Element ? origin.target : void 0;
+}
+//#endregion
+//#region node_modules/@oscarpalmer/toretto/dist/find/index.mjs
+/**
+* Get elements from an event position
+*
+* @param position Event position
+* @returns Elements at the event position
+*/
+function getElementFromPosition(position) {
+	if (!isEventPosition(position) || typeof document.elementFromPoint !== "function") return [];
+	const { x, y } = position;
+	const elements = [];
+	const events = [];
+	let current;
+	while (true) {
+		current = document.elementFromPoint(x, y);
+		if (current == null || elements.indexOf(current) !== -1) break;
+		if (!(current instanceof HTMLElement)) continue;
+		elements.push(current);
+		events.push({
+			value: current.style.getPropertyValue(STYLE_POINTER_EVENTS),
+			priority: current.style.getPropertyPriority(STYLE_POINTER_EVENTS)
+		});
+		current.style.setProperty(STYLE_POINTER_EVENTS, STYLE_NONE$1, STYLE_IMPORTANT);
+	}
+	const { length } = elements;
+	for (let index = 0; index < length; index += 1) {
+		const element = elements[index];
+		const event = events[index];
+		if (element instanceof HTMLElement) element.style.setProperty(STYLE_POINTER_EVENTS, event.value ?? "", event.priority);
+	}
+	return elements;
+}
+const STYLE_IMPORTANT = "important";
+const STYLE_NONE$1 = "none";
+const STYLE_POINTER_EVENTS = "pointer-events";
+Node.ELEMENT_NODE, Node.TEXT_NODE, Node.PROCESSING_INSTRUCTION_NODE, Node.COMMENT_NODE, Node.DOCUMENT_TYPE_NODE;
+//#endregion
+//#region node_modules/@oscarpalmer/toretto/dist/style.mjs
+/**
+* Get styles from an element
+*
+* @param element Element to get the styles from
+* @param names Styles to get
+* @param computed Get the computed styles? _(defaults to `false`)_
+* @returns Style values
+*/
+function getStyles(element, names, computed) {
+	const styles = {};
+	if (!(element instanceof Element && Array.isArray(names))) return styles;
+	const { length } = names;
+	for (let index = 0; index < length; index += 1) {
+		const name = names[index];
+		if (typeof name === "string") styles[name] = getStyleValue(element, name, computed === true);
+	}
+	return styles;
+}
+/**
+* Set a style on an element
+*
+* @param element Element to set the style on
+* @param name Style name
+* @param value Style value
+*/
+function setStyle(element, name, value) {
+	setElementValues(element, name, value, null, updateStyleProperty, true);
+}
+/**
+* Set styles on an element
+*
+* @param element Element to set the styles on
+* @param styles Styles to set
+*/
+function setStyles(element, styles) {
+	setElementValues(element, styles, null, null, updateStyleProperty, true);
+}
+/**
+* Toggle styles for an element
+*
+* @param element Element to style
+* @param styles Styles to be set or removed
+* @returns Style toggler
+*/
+function toggleStyles(element, styles) {
+	function toggle(set) {
+		hasSet = set;
+		let next;
+		if (set) {
+			values = getStyles(element, keys);
+			next = styles;
+		} else {
+			next = { ...values };
+			values = {};
+			for (let index = 0; index < length; index += 1) values[keys[index]] = void 0;
+		}
+		setStyles(element, next);
+	}
+	const keys = Object.keys(styles);
+	const { length } = keys;
+	let hasSet = false;
+	let values = {};
+	return {
+		set() {
+			if (!hasSet) toggle(true);
+		},
+		remove() {
+			if (hasSet) toggle(false);
+		}
+	};
+}
+function updateStyleProperty(element, key, value) {
+	updateElementValue(element, key, value, function(name, style) {
+		if (name.startsWith(VARIABLE_PREFIX)) this.style.setProperty(name, getString(style));
+		else this.style[name] = getString(style);
+	}, function(name) {
+		if (name.startsWith(VARIABLE_PREFIX)) this.style.removeProperty(name);
+		else this.style[name] = "";
+		if (this.getAttribute(ATTRIBUTE_STYLE) === "") this.removeAttribute(ATTRIBUTE_STYLE);
+	}, false);
+}
+const ATTRIBUTE_STYLE = "style";
+const VARIABLE_PREFIX = "--";
+//#endregion
+//#region src/js/floatable/floatable.embedded.ts
+var OuiFloatable = class {
+	#destroyed = false;
+	#state;
+	/**
+	* Is the floatable open?
+	*/
+	get open() {
+		return this.#state.content.checkVisibility();
+	}
+	/**
+	* Open or close the floatable
+	*/
+	set open(value) {
+		if (value === true) this.show();
+		else if (value === false) this.hide();
+	}
+	constructor(state, standalone) {
+		this.#state = state;
+		const { anchor, content } = state;
+		if (standalone) {
+			setAttribute(content, ATTRIBUTE_FLOATABLE, "");
+			content.popover = "manual";
+		} else content.popover ??= "auto";
+		setStyle(anchor, "anchorName", state.name);
+		setStyle(content, "positionAnchor", state.name);
+	}
+	/**
+	* Destroy the floatable, removing it from the DOM and cleaning up references
+	*/
+	destroy() {
+		if (this.#destroyed) return;
+		this.#destroyed = true;
+		removeFloatable(this.#state.content);
+		this.#state.anchor = null;
+		this.#state.content = null;
+	}
+	/**
+	* Closes the floatable
+	*/
+	hide() {
+		if (!this.#destroyed && this.open) this.#state.content.hidePopover();
+	}
+	/**
+	* Opens the floatable
+	*/
+	show() {
+		if (!this.#destroyed && !this.open) this.#state.content.showPopover();
+	}
+	/**
+	* Update the position of the floatable, with an optional new position
+	*
+	* @param position Optional new position
+	*/
+	update(position) {
+		if (!this.#destroyed) setPosition(this.#state, position);
+	}
+};
+function getAnchorName(anchor) {
+	let { anchorName } = anchor.style;
+	if (anchorName.length > 0) return anchorName;
+	index$4 += 1;
+	return `--oui-floatable-anchor-${index$4}`;
+}
+function createEmbeddedFloatable(anchor, content, options) {
+	return createInstance(anchor, content, options, false);
+}
+/**
+* Create a _OuiFloatable_ for an anchor and content element
+*
+* @param anchor Anchor element
+* @param content Content element
+* @param options _OuiFloatable_ options
+* @returns _OuiFloatable_ instance
+*/
+function createFloatable(anchor, content, options) {
+	const { open, position } = getOptions$1(options);
+	const floatable = createInstance(anchor, content, {
+		position,
+		reusable: false
+	}, true);
+	floatable?.update(position);
+	if (open) floatable?.show();
+	return floatable;
+}
+function createInstance(anchor, content, options, standalone) {
+	if (!isHTMLOrSVGElement(anchor) || !isHTMLOrSVGElement(content)) throw new TypeError(MESSAGE$6);
+	let floatable = options.reusable ? void 0 : instances$2.get(content);
+	if (floatable == null) {
+		floatable = new OuiFloatable(getState$5(anchor, content, options), standalone);
+		if (!options.reusable) instances$2.set(content, floatable);
+	}
+	return floatable;
+}
+function getOnBeforeToggleListener(element) {
+	return on(element, "beforetoggle", (event) => {
+		const { newState, source } = event;
+		if (newState === "open" && source != null && getAria(source, "disabled") === "true") event.preventDefault();
+	}, { passive: false });
+}
+function getOptions$1(input) {
+	const object = isPlainObject(input) ? input : {};
+	return {
+		open: typeof object.open === "boolean" ? object.open : true,
+		position: object.position != null && object.position in AREAS ? object.position : "below"
+	};
+}
+function getPosition(state, override) {
+	if (override != null && override in AREAS) return override;
+	const { anchor, options } = state;
+	if (options.attribute == null) return options.position;
+	const attribute = getAttribute(anchor, options.attribute);
+	return attribute != null && attribute in AREAS ? attribute : options.position;
+}
+function getState$5(anchor, content, options) {
+	return {
+		anchor,
+		content,
+		name: getAnchorName(anchor),
+		options
+	};
+}
+function removeFloatable(content) {
+	instances$2.get(content)?.destroy();
+	instances$2.delete(content);
+}
+function setPosition(state, override) {
+	const position = getPosition(state, override);
+	const area = AREAS[position];
+	setAttribute(state.content, ATTRIBUTE_POSITION, POSITIONS[area]);
+	setStyles(state.content, {
+		positionAnchor: state.name,
+		positionArea: area
+	});
+}
+const AREAS = {
+	above: "block-start",
+	"above-end": "start span-start",
+	"above-start": "start span-end",
+	below: "block-end",
+	"below-end": "end span-start",
+	"below-start": "end span-end",
+	end: "center end",
+	"end-bottom": "span-start end",
+	"end-top": "span-end end",
+	start: "center start",
+	"start-bottom": "span-start start",
+	"start-top": "span-end start"
+};
+const ATTRIBUTE_FLOATABLE = "oui-floatable";
+const ATTRIBUTE_POSITION = "oui-position";
+const MESSAGE$6 = "Anchor and content must be an HTMLElement or SVGElement";
+const POSITIONS = Object.fromEntries(Object.entries(AREAS).map(([position, area]) => [area, position]));
+const instances$2 = /* @__PURE__ */ new WeakMap();
+let index$4 = 0;
+//#endregion
+//#region src/js/internal/attributable.ts
+function attributable(attribute, add, remove) {
+	new MutationObserver((entries) => {
+		const { length } = entries;
+		for (let index = 0; index < length; index += 1) {
+			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 if (entry.type === "childList") {
+				handleAdded(attribute, entry.addedNodes, add);
+				handleRemoved(entry.removedNodes, remove);
+			}
+		}
+	}).observe(document, {
+		attributeFilter: [attribute],
+		attributes: true,
+		childList: true,
+		subtree: true
+	});
+	requestAnimationFrame(() => {
+		handleAdded(attribute, document.querySelectorAll(`[${attribute}]`), add);
+	});
+}
+function handleAdded(attribute, nodes, add) {
+	const elements = [...nodes].filter((node) => node instanceof Element);
+	const { length } = elements;
+	for (let index = 0; index < length; index += 1) {
+		const element = elements[index];
+		if (element.hasAttribute(attribute)) add(element);
+		if (element.hasChildNodes()) handleAdded(attribute, element.childNodes, add);
+	}
+}
+function handleRemoved(nodes, remove) {
+	const elements = [...nodes].filter((node) => node instanceof Element);
+	const { length } = elements;
+	for (let index = 0; index < length; index += 1) {
+		const element = elements[index];
+		remove(element);
+		if (element.hasChildNodes()) handleRemoved(element.childNodes, remove);
+	}
+}
+//#endregion
+//#region src/js/internal/navigable.ts
+var OuiNavigable = class {
+	active = { index: 0 };
+	element;
+	listeners;
+	options;
+	orientation;
+	constructor(element, options) {
+		this.element = element;
+		this.options = options;
+		this.listeners = [on(element, "focusin", (event) => {
+			onFocusin$1(this, event);
+		}), on(element, "keydown", (event) => {
+			onKeydown$5(this, event);
+		}, { passive: false })];
+		this.orientation = getOrientation(element, options);
+		if (options.role != null) setRole(element, options.role);
+	}
+	destroy() {
+		const listeners = this.listeners.splice(0);
+		for (const listener of listeners) listener();
+		this.active.element = void 0;
+		this.element = void 0;
+	}
+};
+function getItems(container, selector) {
+	return [...container.querySelectorAll(selector)].filter(isValidItem);
+}
+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 isValidItem(element) {
+	return "disabled" in element ? element.disabled !== true : true;
+}
+function onFocusin$1(navigable, event) {
+	const item = findAncestor(event, navigable.options.selector);
+	if (!isHTMLOrSVGElement(item) || !isValidItem(item)) return;
+	const items = getItems(navigable.element, navigable.options.selector);
+	const index = items.indexOf(item);
+	if (index === -1) return;
+	navigable.active.element = item;
+	navigable.active.index = index;
+	updateNavigableFocus(navigable, false, items);
+}
+function onKeydown$5(navigable, event) {
+	const escaped = event.key === "Escape";
+	const stopPropagation = navigable.options.onShouldDeactivate?.(event, navigable);
+	if (escaped || stopPropagation != null) {
+		if (escaped || stopPropagation) event.stopPropagation();
+		navigable.options.onDeactivate?.(event, navigable);
+		return;
+	}
+	if (!KEYS_ALL$1.has(event.key)) return;
+	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;
+	const items = getItems(navigable.element, navigable.options.selector);
+	const { length } = items;
+	if (length === 0) return;
+	let index;
+	if (KEYS_ABSOLUTE$1.has(event.key)) index = event.key === "Home" ? 0 : items.length - 1;
+	else {
+		const direction = NAVIGABLE_KEYS_HORIZONTAL.has(event.key) ? ORIENTATION_HORIZONTAL : ORIENTATION_VERTICAL;
+		if (navigable.orientation === direction) {
+			if (navigable.active.element instanceof HTMLSelectElement) event.preventDefault();
+			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);
+}
+function updateNavigableFocus(navigable, focus, items) {
+	const updated = items ?? getItems(navigable.element, navigable.options.selector);
+	const { length } = updated;
+	if (length === 0) return;
+	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$1 = /* @__PURE__ */ new Set(["End", "Home"]);
+const KEYS_ACTIVATE = /* @__PURE__ */ new Set(["Enter", " "]);
+const NAVIGABLE_KEYS_HORIZONTAL = /* @__PURE__ */ new Set(["ArrowRight", "ArrowLeft"]);
+const NAVIGABLE_KEYS_VERTICAL = /* @__PURE__ */ new Set(["ArrowDown", "ArrowUp"]);
+const KEYS_ALL$1 = /* @__PURE__ */ new Set([
+	...KEYS_ABSOLUTE$1,
+	...KEYS_ACTIVATE,
+	...NAVIGABLE_KEYS_HORIZONTAL,
+	...NAVIGABLE_KEYS_VERTICAL
+]);
+const KEYS_NEXT = /* @__PURE__ */ new Set(["ArrowDown", "ArrowRight"]);
+const ORIENTATION_HORIZONTAL = "horizontal";
+const ORIENTATION_VERTICAL = "vertical";
+const ORIENTATIONS = /* @__PURE__ */ new Set([ORIENTATION_HORIZONTAL, ORIENTATION_VERTICAL]);
+//#endregion
+//#region src/js/menu.ts
+var OuiMenu = class {
+	content;
+	element;
+	floatable;
+	navigable;
+	toggle;
+	get open() {
+		return this.floatable.open;
+	}
+	constructor(element, navigable) {
+		this.element = element;
+		this.navigable = navigable;
+		this.content = navigable.element;
+		this.toggle = element.querySelector(SELECTOR_MENU_TOGGLE);
+		this.floatable = createEmbeddedFloatable(this.toggle, this.content, {
+			attribute: ATTRIBUTE_MENU_POSITION,
+			position: findAncestor(element.parentElement, SELECTOR_MENU_CONTENT) == null ? "below-start" : "end-top",
+			reusable: false
+		});
+		this.navigable.listeners.push(getOnBeforeToggleListener(this.content), on(this.content, "click", (event) => {
+			event.stopPropagation();
+			if (findAncestor(event, SELECTOR_MENU_TOGGLE) != null) return;
+			const elements = document.querySelectorAll(SELECTOR_MENU_CONTENT);
+			for (const element of elements) menus.get(element)?.floatable.hide();
+			const menu = menus.get(elements[0]);
+			if (menu != null && event.pointerId === -1) updateNavigableFocus(menu.navigable, true);
+		}), on(this.content, "toggle", (event) => {
+			const expanded = event.newState === "open";
+			if (expanded) {
+				this.floatable?.update();
+				updateNavigableFocus(this.navigable, true);
+			}
+			setAria(this.toggle, "expanded", expanded);
+		}));
+		this.floatable.update();
+		initializeMenu(this);
+		updateNavigableFocus(this.navigable, false);
+	}
+	destroy() {
+		this.floatable.destroy();
+		this.navigable.destroy();
+		this.floatable = void 0;
+		this.navigable = void 0;
+	}
+};
+var OuiMenubar = class {
+	element;
+	navigable;
+	constructor(element, navigable) {
+		this.element = element;
+		this.navigable = navigable;
+		updateNavigableFocus(this.navigable, false);
+	}
+	destroy() {
+		this.navigable.destroy();
+		this.navigable = void 0;
+	}
+};
+function addInstance(instances, ctor, element, content, options) {
+	if (!instances.has(content)) instances.set(content, new ctor(element, getNavigable(content, {
+		...options,
+		onDeactivate,
+		onPreventNavigation,
+		onShouldActivate,
+		onShouldDeactivate
+	})));
+}
+function addMenu(element) {
+	const content = element.querySelector(SELECTOR_MENU_CONTENT);
+	const toggle = element.querySelector(SELECTOR_MENU_TOGGLE);
+	if (content != null && toggle != null) addInstance(menus, OuiMenu, element, content, {
+		selector: SELECTOR_MENU_ITEM,
+		vertical: true
+	});
+}
+function addMenubar(element) {
+	addInstance(menubars, OuiMenubar, element, element, {
+		role: "menubar",
+		selector: SELECTOR_MENUBAR_ITEM,
+		vertical: false
+	});
+}
+function getId$2(element, value) {
+	let { id } = element;
+	if (id == null || id.trim().length === 0) {
+		id = value == null ? `oui_menu_${++index$3}` : `${value}_toggle`;
+		element.id = id;
+	}
+	return id;
+}
+function initializeMenu(menu) {
+	const id = getId$2(menu.content);
+	setAttribute(menu.toggle, "popovertarget", id);
+	setAria(menu.toggle, {
+		controls: id,
+		expanded: "false",
+		haspopup: "menu"
+	});
+	setAttributes(menu.content, {
+		popover: "",
+		tabindex: "-1"
+	});
+	setRole(menu.content, "menu");
+}
+function onDeactivate(_, navigable) {
+	const menu = menus.get(navigable.element);
+	if (menu == null) return;
+	menu.floatable.hide();
+	const element = findAncestor(menu.element.parentElement, SELECTORS);
+	if (element == null) return;
+	const instance = menubars.get(element) ?? menus.get(element);
+	if (instance != null) updateNavigableFocus(instance.navigable, true);
+}
+function onPreventNavigation(_, navigable) {
+	return findAncestor((menubars.get(navigable.element) ?? menus.get(navigable.element))?.element.parentElement, SELECTORS) != null;
+}
+function onShouldActivate(event, navigable) {
+	let activate = false;
+	if (menubars.has(navigable.element)) activate = navigable.orientation === "horizontal" ? NAVIGABLE_KEYS_VERTICAL.has(event.key) : NAVIGABLE_KEYS_HORIZONTAL.has(event.key);
+	else if (menus.has(navigable.element)) activate = navigable.orientation === "horizontal" ? NAVIGABLE_KEYS_VERTICAL.has(event.key) : event.key === "ArrowRight";
+	if (activate) {
+		const target = event.target instanceof HTMLElement && event.target.matches(SELECTOR_MENU_TOGGLE) ? event.target : void 0;
+		if (target == null) activate = false;
+		else target.click();
+	}
+	return activate;
+}
+function onShouldDeactivate(event, navigable) {
+	if (menubars.has(navigable.element)) return;
+	const menu = menus.get(navigable.element);
+	if (menu == null) return;
+	const horizontal = navigable.orientation === "horizontal";
+	const altKey = horizontal ? "ArrowDown" : "ArrowRight";
+	const baseKey = horizontal ? "ArrowUp" : "ArrowLeft";
+	if (event.key === baseKey) return findAncestor(menu.element.parentElement, SELECTOR_MENU_CONTENT) != null;
+	if (event.key === altKey && event.target instanceof HTMLElement && !event.target.hasAttribute("popovertarget")) return false;
+}
+function removeInstance$1(instances, element) {
+	instances.get(element)?.destroy();
+	instances.delete(element);
+}
+function removeMenu(element) {
+	removeInstance$1(menus, element);
+}
+function removeMenubar(element) {
+	removeInstance$1(menubars, element);
+}
+const ATTRIBUTE_MENU = "oui-menu";
+const ATTRIBUTE_MENU_POSITION = "oui-menu-position";
+const ATTRIBUTE_MENUBAR = "oui-menubar";
+const SELECTOR_MENUBAR = `[${ATTRIBUTE_MENUBAR}]`;
+const SELECTOR_MENUBAR_ITEM = `:scope > [${ATTRIBUTE_MENUBAR}-item], :scope > * > [${ATTRIBUTE_MENUBAR}-item]`;
+const SELECTOR_MENU_CONTENT = `[${ATTRIBUTE_MENU}-content]`;
+const SELECTOR_MENU_ITEM = `:scope > [${ATTRIBUTE_MENU}-item], :scope > * > [${ATTRIBUTE_MENU}-item]`;
+const SELECTOR_MENU_TOGGLE = `[${ATTRIBUTE_MENU}-toggle]`;
+const SELECTORS = `${SELECTOR_MENUBAR}, ${SELECTOR_MENU_CONTENT}`;
+const menubars = /* @__PURE__ */ new WeakMap();
+const menus = /* @__PURE__ */ new WeakMap();
+let index$3 = 0;
+attributable(ATTRIBUTE_MENU, addMenu, removeMenu);
+attributable(ATTRIBUTE_MENUBAR, addMenubar, removeMenubar);
+//#endregion
+//#region src/js/toolbar.ts
+var OuiToolbar = class {
+	#navigable;
+	constructor(navigable) {
+		this.#navigable = navigable;
+		updateNavigableFocus(this.#navigable, false);
+	}
+	destroy() {
+		this.#navigable.destroy();
+		this.#navigable = void 0;
+	}
+};
+function addToolbar(element) {
+	if (!instances$1.has(element)) instances$1.set(element, new OuiToolbar(getNavigable(element, {
+		role: "toolbar",
+		selector: SELECTOR$5,
+		vertical: false
+	})));
+}
+function removeToolbar(element) {
+	instances$1.get(element)?.destroy();
+	instances$1.delete(element);
+}
+const ATTRIBUTE$4 = "oui-toolbar";
+const SELECTOR$5 = `[${ATTRIBUTE$4}-item]`;
+const instances$1 = /* @__PURE__ */ new WeakMap();
+attributable(ATTRIBUTE$4, addToolbar, removeToolbar);
+//#endregion
+//#region node_modules/@oscarpalmer/toretto/dist/data.mjs
+function getData(element, keys, parseValues) {
+	if (!(element instanceof Element)) return;
+	const noParse = parseValues === false;
+	if (typeof keys === "string") return getDataValue(element, keys, noParse);
+	const { length } = keys;
+	const data = {};
+	for (let index = 0; index < length; index += 1) {
+		const key = keys[index];
+		data[key] = getDataValue(element, key, noParse);
+	}
+	return data;
+}
+function getDataValue(element, key, noParse) {
+	const value = element.dataset[camelCase(key)];
+	if (value == null) return;
+	if (noParse) return value;
+	return parse(value) ?? value;
+}
+function getName(original) {
+	return `${ATTRIBUTE_DATA_PREFIX}${kebabCase(original.replace(EXPRESSION_DATA_PREFIX, ""))}`;
+}
+function setData(element, first, second) {
+	setElementValues(element, first, second, null, updateDataAttribute);
+}
+function updateDataAttribute(element, key, value) {
+	updateElementValue(element, getName(key), value, element.setAttribute, element.removeAttribute, true);
+}
+const ATTRIBUTE_DATA_PREFIX = "data-";
+//#endregion
+//#region node_modules/@oscarpalmer/toretto/dist/property/set.property.mjs
+/**
+* Set the values of one or more properties on an element
+*
+* Also updates attributes for boolean/dispatchable properties, and if `dispatch` is `true`, will dispatch events for dispatchable properties
+*
+* @param target Target element
+* @param properties Properties to set
+* @param dispatch Dispatch events for properties? _(defaults to `true`)_
+*/
+function setProperties$1(target, properties, dispatch) {
+	if (!(target instanceof Element) || !isPlainObject(properties)) return;
+	const shouldDispatch = dispatch !== false;
+	const keys = Object.keys(properties);
+	const { length } = keys;
+	for (let index = 0; index < length; index += 1) setPropertyValue(target, keys[index], properties[keys[index]], shouldDispatch);
+}
+function setPropertyValue(element, property, value, dispatch) {
+	if (booleanAttributesSet.has(property.toLowerCase()) || dispatchedAttributes.has(property)) setAttribute(element, property, value, dispatch);
+	else updateProperty(element, property, value, dispatch);
+}
+//#endregion
+//#region node_modules/@oscarpalmer/toretto/dist/create.mjs
+function createElement(tag, values) {
+	if (typeof tag !== "string") throw new TypeError(MESSAGE$5);
+	const element = document.createElement(tag);
+	const { aria, attribute, data, property, style } = getElementValues(values);
+	setAria(element, aria ?? {});
+	setAttributes(element, attribute ?? {});
+	setData(element, data ?? {});
+	setProperties$1(element, property ?? {});
+	setStyles(element, style ?? {});
+	return element;
+}
+function getElementValues(input) {
+	if (!isPlainObject(input)) return {};
+	return {
+		aria: isPlainObject(input.aria) ? input.aria : void 0,
+		attribute: isPlainObject(input.attribute) ? input.attribute : void 0,
+		data: isPlainObject(input.data) ? input.data : void 0,
+		property: isPlainObject(input.property) ? input.property : void 0,
+		style: isPlainObject(input.style) ? input.style : void 0
+	};
+}
+const MESSAGE$5 = "Tag name must be a string";
+//#endregion
+//#region src/js/combobox.ts
+var OuiComboboxElement = class extends HTMLElement {
+	static formAssociated = true;
+	static observedAttributes = [
+		"max",
+		"min",
+		"required",
+		"value"
+	];
+	#internals;
+	#restored;
+	#state;
+	/**
+	* Is the combobox disabled?
+	*/
+	get disabled() {
+		return this.#state?.disabled ?? false;
+	}
+	/**
+	* Should the combobox be disabled?
+	*/
+	set disabled(value) {
+		if (typeof value === "boolean" && value !== this.disabled) setDisabled$1(this.#state, value);
+	}
+	/**
+	* Current filter value
+	*/
+	get filter() {
+		return this.#state.filter.element.value;
+	}
+	/**
+	* Set the filter value
+	*/
+	set filter(value) {
+		setFilter(this.#state, value);
+	}
+	/**
+	* Maximum number of selected options
+	*/
+	get max() {
+		return this.#state?.max;
+	}
+	/**
+	* Set the maximum number of selected options
+	*/
+	set max(value) {
+		setLimit("max", this.#state, value);
+	}
+	/**
+	* Minimum number of selected options
+	*/
+	get min() {
+		return this.#state?.min;
+	}
+	/**
+	* Set the minimum number of selected options
+	*/
+	set min(value) {
+		setLimit("min", this.#state, value);
+	}
+	/**
+	* Does the combobox allow multiple values?
+	*/
+	get multiple() {
+		return this.hasAttribute("multiple");
+	}
+	/**
+	* Name of the combobox
+	*/
+	get name() {
+		return getAttribute(this, "name") ?? "";
+	}
+	/**
+	* Is the combobox readonly?
+	*/
+	get readonly() {
+		return this.#state?.readonly ?? false;
+	}
+	/**
+	* Should the combobox be readonly?
+	*/
+	set readonly(value) {
+		if (typeof value === "boolean" && value !== this.readonly) setReadonly(this.#state, value);
+	}
+	/**
+	* Is the combobox required?
+	*/
+	get required() {
+		return this.#state?.required ?? false;
+	}
+	/**
+	* Should the combobox be required?
+	*/
+	set required(value) {
+		if (typeof value === "boolean" && value !== this.required) setRequired(this.#state, value);
+	}
+	/**
+	* Selected options
+	*/
+	get selected() {
+		return this.#state.options.selected.slice();
+	}
+	/**
+	* Type of combobox
+	*/
+	get type() {
+		return this.#state.type;
+	}
+	/**
+	* Current value
+	*/
+	get value() {
+		return this.#state.values.current[0];
+	}
+	/**
+	* Set the value
+	*/
+	set value(value) {
+		setValue(this.#state, value);
+	}
+	/**
+	* Current values
+	*/
+	get values() {
+		return this.#state.values.current.slice();
+	}
+	/**
+	* Set the values
+	*/
+	set values(value) {
+		setValues(this.#state, value);
+	}
+	constructor() {
+		super();
+		this.#internals = this.attachInternals();
+	}
+	attributeChangedCallback(name, _, value) {
+		if (this.#state == null) return;
+		switch (name) {
+			case "required":
+				this[name] = this.hasAttribute(name);
+				break;
+			case "max":
+			case "min":
+				setLimit(name, this.#state, value);
+				break;
+			case "value":
+				this.value = value ?? "";
+				break;
+			default: break;
+		}
+	}
+	/**
+	* Clear all selected options
+	*/
+	clear() {
+		setValues(this.#state, []);
+	}
+	connectedCallback() {
+		if (this.#state == null) this.#initialize();
+		else attachCombobox(this.#state);
+	}
+	disconnectedCallback() {
+		if (this.#state != null) detachCombobox(this.#state);
+	}
+	formDisabledCallback(disabled) {
+		this.disabled = disabled;
+	}
+	formResetCallback() {
+		setValues(this.#state, this.#state.values.initial, false);
+	}
+	formStateRestoreCallback(state, reason) {
+		if (reason !== "restore") return;
+		const parsed = typeof state === "string" ? parse(state) : void 0;
+		if (!Array.isArray(parsed)) return;
+		if (this.#state == null) this.#restored = parsed;
+		else setValues(this.#state, parsed);
+	}
+	setLocalizations(first, second) {
+		updateLocalizations(typeof first === "string" ? { [first]: second } : first, this.#state.localizations);
+	}
+	#initialize() {
+		this.tabIndex = -1;
+		this.#state = createState(this, this.#internals);
+		if (this.#restored != null) {
+			setValues(this.#state, this.#restored, false);
+			this.#restored = void 0;
+		}
+	}
+};
+function applySelection(parameters) {
+	const { added, emit, option, selected, state } = parameters;
+	const { length } = state.options.all;
+	for (let index = 0; index < length; index += 1) {
+		const option = state.options.all[index];
+		setAria(option, "selected", (selected ?? state.options.selected).includes(option));
+	}
+	const values = parameters.values ?? (state.autocomplete.none ? [state.filter.element.value] : (selected ?? state.options.selected).map((option) => getData(option, "value", false) ?? ""));
+	if (values.length === 0) values.push("");
+	if (selected != null) state.options.selected = selected;
+	if (!(values.length === state.values.current.length ? values.some((value) => !state.values.current.includes(value)) : true)) return;
+	updateForm(state, values, emit);
+	updatePreview("set", state, option);
+	updateSelection(state, option, added, selected);
+}
+function attachCombobox(state) {
+	const { anchor, content, filter, label, listeners, select } = state;
+	label.element.htmlFor = filter.element.id;
+	label.element.id = `${state.id}_label`;
+	select.hidden = true;
+	select.insertAdjacentElement("afterend", anchor.container ?? anchor.element);
+	(anchor.container ?? anchor.element).insertAdjacentElement("afterend", content);
+	select.remove();
+	state.floatable = createEmbeddedFloatable(anchor.container ?? anchor.element, content, {
+		position: "below-start",
+		reusable: false
+	});
+	state.floatable.update();
+	listeners.push(on(state.host, "focusout", () => {
+		setTimeout(() => {
+			onFocusout$1(state);
+		});
+	}), on(content, "click", (event) => {
+		onClickContent(event, content);
+	}), on(content, "toggle", () => {
+		setAria(anchor.element, "expanded", state.floatable.open);
+		setAria(filter.element, "activedescendant", state.floatable.open ? state.active?.id : void 0);
+		if (state.floatable.open) filter.element.focus();
+	}));
+	states$4.map.set(state.host, state);
+	states$4.map.set(state.content, state);
+	states$4.set.add(state);
+}
+function createAnchor(parameters) {
+	const { autocomplete, id, label, select, type } = parameters;
+	let container;
+	let element;
+	let selection;
+	if (parameters.type === "autocomplete") element = createInput({
+		id,
+		label,
+		type,
+		autocomplete: autocomplete.value,
+		value: select.selectedOptions[0]?.textContent ?? ""
+	});
+	else ({container, element, selection} = createButton(parameters));
+	setAttribute(container ?? element, ATTRIBUTE_ANCHOR, "");
+	return {
+		container,
+		element,
+		selection
+	};
+}
+function createButton(parameters) {
+	const { id, label, multiple, select } = parameters;
+	const element = createElement("button", {
+		aria: {
+			controls: `${id}_content`,
+			expanded: false,
+			haspopup: "listbox",
+			labelledby: `${label.id} ${id}`
+		},
+		property: {
+			id,
+			textContent: multiple ? "" : select.selectedOptions[0]?.textContent ?? ""
+		}
+	});
+	if (!multiple) return { element };
+	const container = createElement("div");
+	const selection = createSelection(id, select);
+	container.append(selection.container, element);
+	return {
+		container,
+		element,
+		selection
+	};
+}
+function createContent(parameters) {
+	const { autocomplete, id, label, multiple, select, type } = parameters;
+	const element = createElement("div", {
+		aria: { labelledby: label.id },
+		attribute: {
+			[ATTRIBUTE_CONTENT$1]: "",
+			popover: ""
+		},
+		property: {
+			id: `${id}_content`,
+			tabIndex: -1
+		}
+	});
+	const filter = createFilter({
+		id,
+		label,
+		type,
+		autocomplete: autocomplete.value
+	});
+	const list = createList({
+		autocomplete,
+		id,
+		label,
+		multiple,
+		select
+	});
+	const message = createMessage();
+	if (filter != null) element.append(filter.container);
+	element.append(list.element, message);
+	return {
+		element,
+		filter,
+		list,
+		message
+	};
+}
+function createFilter(parameters) {
+	const { autocomplete, id, label, type } = parameters;
+	if (type === "autocomplete") return;
+	const container = createElement("div", { attribute: { [ATTRIBUTE_FILTER]: "" } });
+	const element = createInput({
+		autocomplete,
+		id,
+		label,
+		type,
+		value: ""
+	});
+	setAttribute(element, ATTRIBUTE_FILTER_INPUT, "");
+	container.append(element);
+	return {
+		container,
+		element
+	};
+}
+function createGroup(parameters) {
+	const { autocomplete, group, groupOptions, selected } = parameters;
+	const element = createElement("li", {
+		aria: { label: group.label },
+		property: { role: "group" }
+	});
+	const list = createElement("ul", { property: { role: "none" } });
+	const header = createHeader(group);
+	element.append(header, list);
+	return {
+		element,
+		header,
+		options: createOptions({
+			autocomplete,
+			list,
+			selected,
+			group: header.id,
+			options: groupOptions
+		})
+	};
+}
+function createHeader(group) {
+	return createElement("div", {
+		aria: { hidden: true },
+		attribute: { [ATTRIBUTE_HEADER]: "" },
+		property: {
+			id: group.id,
+			textContent: group.label
+		}
+	});
+}
+function createInput(parameters) {
+	const { autocomplete, id, label, type, value } = parameters;
+	return createElement("input", {
+		aria: {
+			autocomplete,
+			controls: `${id}_list`,
+			expanded: type === "select",
+			haspopup: "listbox",
+			labelledby: label.id
+		},
+		attribute: {
+			autocorrect: "off",
+			autocomplete: "off",
+			form: "",
+			spellcheck: "false",
+			type: "text"
+		},
+		property: {
+			id,
+			value,
+			role: "combobox"
+		}
+	});
+}
+function createList(parameters) {
+	const { autocomplete, id, label, multiple, select } = parameters;
+	const element = createElement("ul", {
+		aria: {
+			labelledby: label.id,
+			multiselectable: multiple
+		},
+		attribute: {
+			[ATTRIBUTE_LIST]: "",
+			tabindex: -1
+		},
+		property: {
+			id: `${id}_list`,
+			role: "listbox"
+		}
+	});
+	const children = [...select.children];
+	const childrenLength = children.length;
+	const options = [];
+	const selected = [];
+	let groups;
+	for (let childIndex = 0; childIndex < childrenLength; childIndex += 1) {
+		const child = children[childIndex];
+		if (child instanceof HTMLOptionElement) {
+			const option = createOption({
+				autocomplete,
+				index: childIndex,
+				option: child
+			});
+			element.append(option);
+			options.push(option);
+			if (child.selected) selected.push(option);
+			continue;
+		}
+		if (!(child instanceof HTMLOptGroupElement)) continue;
+		const group = createGroup({
+			autocomplete,
+			selected,
+			group: child,
+			groupOptions: [...child.children]
+		});
+		groups ??= [];
+		element.append(group.element, ...group.options);
+		groups.push(group);
+		options.push(...group.options);
+	}
+	return {
+		element,
+		groups,
+		options,
+		selected
+	};
+}
+function createMessage() {
+	return createElement("div", {
+		aria: { live: "polite" },
+		attribute: { [ATTRIBUTE_MESSAGE]: "" },
+		property: {
+			hidden: true,
+			role: "status"
+		}
+	});
+}
+function createOption(parameters) {
+	const { autocomplete, group, option } = parameters;
+	const item = createElement("li", {
+		aria: { selected: !autocomplete.none && option.selected },
+		attribute: { [ATTRIBUTE_OPTION]: "" },
+		property: {
+			id: option.id,
+			role: "option",
+			textContent: option.textContent
+		}
+	});
+	setData(item, {
+		group,
+		value: option.value
+	});
+	return item;
+}
+function createOptions(parameters) {
+	const { autocomplete, group, list, options, selected } = parameters;
+	const items = [];
+	for (let index = 0; index < options.length; index += 1) {
+		const option = options[index];
+		const item = createOption({
+			autocomplete,
+			group,
+			index,
+			option
+		});
+		items.push(item);
+		if (option.selected) selected.push(item);
+		list.append(item);
+	}
+	return items;
+}
+function createSelection(id, select) {
+	const container = createElement("ul", {
+		attribute: { [ATTRIBUTE_SELECTION]: "" },
+		property: { id: `${id}_selection` }
+	});
+	const options = [...select.selectedOptions];
+	const items = [];
+	createSelectionItems({
+		container,
+		items,
+		options
+	});
+	const { button } = items[0] ?? {};
+	if (button != null) button.tabIndex = 0;
+	return {
+		items,
+		container
+	};
+}
+function createSelectionItem(option, state) {
+	const element = createElement("li");
+	const localization = state == null ? option.textContent : getLocalization("remove", state);
+	const button = createElement("button", {
+		aria: { label: typeof localization === "function" ? localization(option.textContent ?? "", getData(option, "value", false) ?? "") : localization },
+		attribute: {
+			[ATTRIBUTE_SELECTION_ITEM]: "",
+			tabindex: -1
+		},
+		data: { option: option.id }
+	});
+	const icon = createElement("span", {
+		aria: { hidden: true },
+		property: { innerHTML: "&times;" }
+	});
+	const label = createElement("span", { property: { textContent: option.textContent } });
+	button.append(icon, label);
+	element.append(button);
+	return {
+		button,
+		element
+	};
+}
+function createSelectionItems(parameters) {
+	const { container, items, options, state } = parameters;
+	const { length } = options;
+	for (let index = 0; index < length; index += 1) {
+		const option = options[index];
+		const item = createSelectionItem(option, state);
+		container.append(item.element);
+		items.push(item);
+	}
+}
+function createState(element, internals) {
+	const select = element.querySelector("select");
+	if (select == null || select.id === "") throw new Error(MESSAGE_SELECT);
+	const label = element.querySelector(`label[for="${select.id}"]`);
+	if (label == null) throw new Error(MESSAGE_LABEL);
+	element.id = select.id;
+	setAttribute(element, "name", select.name === "" ? select.id : select.name);
+	const disabled = getBooleanAria(element, "disabled") || select.disabled;
+	const multiple = element.multiple || select.multiple;
+	const readonly = getBooleanAria(element, "readonly");
+	const required = getBooleanAria(element, "required") || select.required;
+	const id = getId$1();
+	const type = multiple ? "select" : getAttributeValue(element, "type", TYPES, "select");
+	const autocomplete = getAutoComplete(element, type === "select");
+	const labelId = label.id;
+	label.htmlFor = id;
+	label.id = `${id}_label`;
+	generateIds(id, select);
+	const anchor = createAnchor({
+		autocomplete,
+		id,
+		label,
+		multiple,
+		select,
+		type
+	});
+	const content = createContent({
+		autocomplete,
+		id,
+		label,
+		multiple,
+		select,
+		type
+	});
+	const values = content.list.selected.length === 0 ? [""] : content.list.selected.map((option) => getData(option, "value", false) ?? "");
+	const state = {
+		autocomplete,
+		disabled,
+		id,
+		internals,
+		multiple,
+		readonly,
+		required,
+		select,
+		type,
+		anchor: {
+			container: anchor.container,
+			element: anchor.element
+		},
+		active: content.list.selected[0],
+		content: content.element,
+		filter: {
+			element: content.filter?.element ?? anchor.element,
+			value: ""
+		},
+		floatable: void 0,
+		groups: content.list.groups,
+		host: element,
+		label: {
+			element: label,
+			id: labelId
+		},
+		listeners: [],
+		localizations: {},
+		message: content.message,
+		name: element.name,
+		options: {
+			all: content.list.options,
+			selected: content.list.selected
+		},
+		selection: anchor.selection,
+		values: {
+			current: values.slice(),
+			initial: values.slice()
+		}
+	};
+	attachCombobox(state);
+	setDisabled$1(state, disabled);
+	setLimit("max", state, getAttribute(element, "max"));
+	setLimit("min", state, getAttribute(element, "min"));
+	setReadonly(state, readonly);
+	setRequired(state, required);
+	filterOptions(state);
+	if (content.list.selected.length > 0) updatePreview("set", state, content.list.selected[0]);
+	updateForm(state, state.values.current, false);
+	updateMessage(state, getVisible(state).length);
+	return state;
+}
+function detachCombobox(state) {
+	const { content, floatable, host, label, select } = state;
+	const listeners = state.listeners.splice(0);
+	const { length } = listeners;
+	for (let index = 0; index < length; index += 1) listeners[index]();
+	floatable.destroy();
+	const anchor = state.anchor.container ?? state.anchor.element;
+	anchor.insertAdjacentElement("beforebegin", select);
+	anchor.remove();
+	content.remove();
+	label.element.htmlFor = select.id;
+	label.element.id = state.label.id;
+	select.hidden = false;
+	states$4.map.delete(host);
+	states$4.map.delete(content);
+	states$4.set.delete(state);
+}
+function filterOptions(state) {
+	function filter(options) {
+		const { length } = options;
+		let count = 0;
+		for (let index = 0; index < length; index += 1) {
+			const option = options[index];
+			option.hidden = !state.autocomplete.none && !option.textContent.toLocaleLowerCase().includes(value);
+			if (!option.hidden) {
+				count += 1;
+				visible.push(option);
+			}
+		}
+		return count === 0;
+	}
+	const value = state.filter.element.value.toLocaleLowerCase();
+	const visible = [];
+	if (state.groups == null) filter(state.options.all);
+	else {
+		const groupsLength = state.groups.length;
+		for (let groupIndex = 0; groupIndex < groupsLength; groupIndex += 1) {
+			const { element, options } = state.groups[groupIndex];
+			element.hidden = filter(options);
+		}
+	}
+	updateMessage(state, visible.length);
+	return state.active != null && visible.includes(state.active) ? state.active : visible[0];
+}
+function filterOption(state, value, textContent) {
+	const filterTextContent = textContent ?? false;
+	const filter = getString(value).toLocaleLowerCase();
+	filterOptions(state);
+	const { length } = state.options.all;
+	let match;
+	for (let index = 0; index < length; index += 1) {
+		const option = state.options.all[index];
+		if ((filterTextContent ? option.textContent : getData(option, "value", false) ?? "").toLocaleLowerCase() === filter) {
+			match = option;
+			break;
+		}
+	}
+	return match;
+}
+function generateIds(prefix, select) {
+	const elements = [...select.children].flatMap((child) => child instanceof HTMLOptGroupElement ? [child, ...[...child.children].filter((groupChild) => groupChild instanceof HTMLOptionElement)] : child instanceof HTMLOptionElement ? [child] : []);
+	const { length } = elements;
+	for (let index = 0; index < length; index += 1) {
+		const element = elements[index];
+		if (element.id === "") element.id = `${prefix}${element instanceof HTMLOptGroupElement ? "_group_" : "_option_"}${index}`;
+	}
+}
+function getAttributeValue(element, attribute, possible, defaultValue) {
+	const value = getAttribute(element, attribute);
+	return possible.has(value) ? value : defaultValue;
+}
+function getAutoComplete(element, select) {
+	let value;
+	if (select) value = "list";
+	else value = getAttributeValue(element, "autocomplete", AUTOCOMPLETES, "none");
+	return {
+		value,
+		both: value === "both",
+		inline: value === "inline",
+		list: value === "list",
+		none: value === "none"
+	};
+}
+function getBooleanAria(element, attribute) {
+	const value = getAria(element, attribute);
+	return value === true || value === "true";
+}
+function getId$1() {
+	index$2 += 1;
+	return `oui_combobox_${index$2}`;
+}
+function getLanguage(state) {
+	return (state.host.closest("[lang]")?.getAttribute("lang") ?? document.documentElement.lang).toLowerCase();
+}
+function getLocalization(key, state) {
+	const language = getLanguage(state);
+	const allLocalizations = [state.localizations, LOCALIZATIONS.globals];
+	const { length } = allLocalizations;
+	let localization;
+	let shortLanguage;
+	for (let index = 0; index < length; index += 1) {
+		const localizations = allLocalizations[index];
+		localization = localizations?.[language]?.[key];
+		if (localization != null) break;
+		shortLanguage ??= language.split("-")[0];
+		if (shortLanguage === language) continue;
+		localization = localizations?.[shortLanguage]?.[key];
+		if (localization != null) break;
+	}
+	return localization ?? LOCALIZATIONS.defaults[key];
+}
+function getVisible(state) {
+	return state.options.all.filter((option) => !option.hidden);
+}
+function hasTextSelection(element) {
+	return element instanceof HTMLInputElement && element.selectionStart !== element.selectionEnd;
+}
+function onClickContent(event, content) {
+	const state = states$4.map.get(content);
+	if (state == null) return;
+	if (state.disabled) return;
+	const option = findAncestor(event, SELECTOR_OPTION);
+	if (!(option instanceof HTMLElement)) state.filter.element.focus();
+	else if (state.readonly) updatePreview("set", state, option);
+	else toggleOption(state, option);
+}
+function onClickDocument(event) {
+	const combobox = findAncestor(event, TAGNAME$1);
+	const state = states$4.map.get(combobox);
+	if (combobox == null || state == null) return;
+	const label = findAncestor(event, "label");
+	if (label != null) {
+		if (label === state.label.element && combobox.type === "select") {
+			state.anchor.element.focus();
+			if (!state.disabled) state.floatable.show();
+		}
+		return;
+	}
+	const selection = findAncestor(event, `[${ATTRIBUTE_SELECTION_ITEM}]`);
+	if (selection != null) {
+		const option = state.options.selected.find((option) => option.id === getData(selection, "option", false));
+		if (state.disabled) state.anchor.element.focus();
+		else if (state.readonly) updateTabindices(state, option);
+		else toggleOption(state, option);
+		return;
+	}
+	if (findAncestor(event, SELECTOR_ANCHOR) != null && !state.disabled) {
+		state.floatable.show();
+		return;
+	}
+}
+function onEnter(state) {
+	if (state.disabled || state.readonly) return;
+	if (hasTextSelection(state.anchor.element)) onSelection(state);
+	else toggleOption(state, state.active);
+}
+function onEscape$1(state) {
+	state.floatable.hide();
+}
+function onFilter(type, state, manual, emit) {
+	if (state.disabled || state.readonly) return;
+	const diff = state.filter.value !== state.filter.element.value;
+	if (!state.autocomplete.inline && state.filter.element.value.length > 0 && !(manual ?? false)) state.floatable.show();
+	const option = state.autocomplete.none ? state.active ?? state.options.all[0] : filterOptions(state);
+	let update;
+	if (type.includes("delete")) update = "none";
+	else if (type.includes("insert")) update = "typed";
+	if (update != null) if (state.autocomplete.none) applySelection({
+		state,
+		added: false,
+		emit: (emit ?? true) && diff
+	});
+	else updatePreview(update, state, option);
+	if (diff) {
+		state.filter.value = state.filter.element.value;
+		dispatch(state.host, "input");
+	}
+}
+function onFocusout$1(state) {
+	if (state.disabled || state.readonly || state.type === "select" || state.host === document.activeElement || state.host.contains(document.activeElement)) return;
+	const option = filterOption(state, state.filter.element.value, true);
+	applySelection({
+		option,
+		state,
+		added: false,
+		selected: option == null ? [] : [option]
+	});
+}
+function onInput(event) {
+	const combobox = findAncestor(event, TAGNAME$1);
+	const state = states$4.map.get(combobox);
+	if (combobox != null && state != null && event.target === state.filter.element) onFilter(event.inputType, state);
+}
+function onKeydown$4(event) {
+	const combobox = findAncestor(event, TAGNAME$1);
+	const state = states$4.map.get(combobox);
+	if (combobox == null || state == null) return;
+	const item = findAncestor(event, SELECTOR_SELECTION_ITEM);
+	if (item instanceof HTMLElement) {
+		onKeydownSelection(event, state, item);
+		return;
+	}
+	onKeydownFilter(event, state);
+}
+function onKeydownFilter(event, state) {
+	const ignore = state.disabled || state.readonly;
+	const isSelect = state.type === "select";
+	let preventDefault = ignore;
+	switch (true) {
+		case event.key === " ":
+			if (!state.disabled) state.floatable.show();
+			break;
+		case event.key === "Enter":
+			preventDefault = state.floatable.open;
+			if (preventDefault) onEnter(state);
+			else if (!ignore && state.type === "select") state.floatable.show();
+			else if (!ignore) state.internals.form?.requestSubmit();
+			break;
+		case event.key === "Escape":
+			preventDefault = false;
+			onEscape$1(state);
+			break;
+		case !isSelect && KEYS_SELECTION.has(event.key):
+			if (!ignore && hasTextSelection(state.anchor.element)) onSelection(state);
+			break;
+		case KEYS_NAVIGATION.has(event.key):
+			if (!state.disabled) onNavigation(event, state);
+			break;
+		default:
+			preventDefault = false;
+			if (event.key === "Tab") onTab$1(state);
+			break;
+	}
+	if (preventDefault) {
+		event.preventDefault();
+		event.stopPropagation();
+	}
+}
+function onKeydownSelection(event, state, item) {
+	if (KEYS_ACTIVATION.has(event.key)) {
+		event.preventDefault();
+		onRemoveSelection(state, item);
+		return;
+	}
+	if (state.disabled || state.selection == null) return;
+	const { length } = state.selection.items;
+	const index = state.selection.items.findIndex((selection) => selection.button === item);
+	let next;
+	switch (event.key) {
+		case "ArrowDown":
+			state.anchor.element.focus();
+			state.anchor.element.click();
+			return;
+		case "ArrowRight":
+		case "ArrowLeft":
+			next = clamp(index + (event.key === "ArrowRight" ? 1 : -1), 0, length - 1, true);
+			break;
+		case "End":
+			next = length - 1;
+			break;
+		case "Home":
+			next = 0;
+			break;
+		default: break;
+	}
+	if (next == null) return;
+	event.preventDefault();
+	for (let index = 0; index < length; index += 1) {
+		const { button } = state.selection.items[index];
+		const selected = index === next;
+		button.tabIndex = selected ? 0 : -1;
+		if (selected) button.focus();
+	}
+}
+function onNavigation(event, state) {
+	let skip = false;
+	if (!state.floatable.open) {
+		skip = true;
+		state.floatable.show();
+	}
+	const visible = getVisible(state);
+	if (visible.length === 0) return;
+	let next;
+	if (skip || state.active == null) next = state.active ?? visible.at(event.key === "ArrowDown" ? 0 : -1);
+	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];
+	}
+	let preview;
+	if (state.type === "autocomplete" && (state.autocomplete.both || state.autocomplete.inline)) preview = "set";
+	else preview = "none";
+	updatePreview(preview, state, next ?? state.active ?? visible[0]);
+}
+function onRemoveSelection(state, item) {
+	if (state.disabled || state.readonly) return;
+	const option = state.options.selected.find((option) => option.id === getData(item, "option", false));
+	if (option != null) toggleOption(state, option);
+}
+function onSelection(state) {
+	state.filter.value = state.anchor.element === state.filter.element ? state.filter.element.value : "";
+	filterOptions(state);
+	toggleOption(state, state.active);
+}
+function onTab$1(state) {
+	setTimeout(() => {
+		if (state.host === document.activeElement) return;
+		if (state.selection?.container.contains(document.activeElement) || !state.host.contains(document.activeElement)) state.floatable.hide();
+	});
+}
+function setDisabled$1(state, value) {
+	state.filter.element.readOnly = state.readonly || value;
+	setProperties("disabled", state, value);
+}
+function setFilter(state, value) {
+	if (typeof value !== "string") return;
+	const type = value.length < state.filter.element.value.length ? "deleteContentBackward" : "insertText";
+	state.filter.element.value = value;
+	onFilter(type, state);
+}
+function setLimit(type, state, value) {
+	let actual = value;
+	if (typeof actual === "string") actual = Number.parseInt(actual, 10);
+	if (typeof actual === "number" && !Number.isNaN(actual) && actual >= 0 ? actual !== state[type] : actual == null) {
+		state[type] = actual;
+		setAttribute(state.host, type, actual);
+		updateValidity(state);
+	}
+}
+function setLocalizations(first, second) {
+	updateLocalizations(typeof first === "string" ? { [first]: second } : first);
+}
+function setProperties(key, state, value) {
+	state[key] = value;
+	const elements = [
+		state.host,
+		state.anchor.element,
+		state.filter.element
+	];
+	const { length } = elements;
+	for (let index = 0; index < length; index += 1) {
+		const element = elements[index];
+		setAria(element, key, key !== "readonly" || !(element instanceof HTMLButtonElement) ? value : void 0);
+	}
+}
+function setReadonly(state, value) {
+	state.filter.element.readOnly = state.disabled || value;
+	setProperties("readonly", state, value);
+}
+function setRequired(state, value) {
+	setProperties("required", state, value);
+	updateValidity(state);
+}
+function setValue(state, value, emit) {
+	if (state.autocomplete.none) {
+		state.filter.element.value = getString(value);
+		onFilter("insertText", state, true, emit);
+		return;
+	}
+	if (filterOption(state, value) != null) setValues(state, [value], emit);
+}
+function setValues(state, value, emit) {
+	if (!Array.isArray(value)) return;
+	const values = (state.multiple ? value : value.slice(0, 1)).map((value) => getString(value).toLocaleLowerCase());
+	if (values.length === 0) values.push("");
+	if (state.autocomplete.none) {
+		setValue(state, values[0], emit);
+		return;
+	}
+	const { length } = state.options.all;
+	const selected = [];
+	for (let index = 0; index < length; index += 1) {
+		const option = state.options.all[index];
+		if (values.includes(getData(option, "value", false)?.toLocaleLowerCase() ?? "")) selected.push(option);
+	}
+	applySelection({
+		emit,
+		selected,
+		state,
+		added: true,
+		option: selected[0] ?? state.options.all[0],
+		values: state.autocomplete.none ? values : void 0
+	});
+}
+function toggleOption(state, option) {
+	if (option == null || !state.multiple && state.options.selected.includes(option)) {
+		state.floatable.hide();
+		return;
+	}
+	const selected = state.options.selected.slice();
+	let added = true;
+	if (state.multiple) {
+		const index = selected.indexOf(option);
+		if (index === -1) selected.push(option);
+		else {
+			added = false;
+			selected.splice(index, 1);
+		}
+	} else selected.splice(0, selected.length, option);
+	applySelection({
+		added,
+		option,
+		selected,
+		state,
+		values: state.autocomplete.none && option != null ? [option.textContent] : void 0
+	});
+	if (!state.multiple) state.floatable.hide();
+}
+function updateAnchor(state) {
+	if (!state.multiple) return;
+	const localization = getLocalization("selected", state);
+	setAria(state.anchor.element, "label", typeof localization === "function" ? localization(state.options.selected.length) : localization.replace("{amount}", state.options.selected.length.toString()));
+}
+function updateAutocomplete(preview, state, active) {
+	if (state.multiple) return;
+	const content = active?.textContent ?? state.filter.element.value;
+	if (preview === "typed" && !content.toLocaleLowerCase().startsWith(state.filter.element.value.toLocaleLowerCase())) return;
+	if (state.anchor.element instanceof HTMLInputElement) {
+		const contentLength = content.length;
+		const filterLength = state.filter.element.value.length;
+		if (preview === "set" || preview === "typed") {
+			state.anchor.element.value = content;
+			state.anchor.element.setSelectionRange(preview === "typed" ? filterLength : contentLength, contentLength);
+		}
+	} else state.anchor.element.textContent = content;
+}
+function updateForm(state, values, emit) {
+	let value;
+	if (state.multiple) {
+		const { length } = values;
+		value = new FormData();
+		for (let index = 0; index < length; index += 1) value.append(state.name, values[index]);
+	} else value = values[0];
+	state.values.current = values;
+	state.internals.setFormValue(value, JSON.stringify(values));
+	updateAnchor(state);
+	updateValidity(state);
+	if (emit ?? true) dispatch(state.host, "change");
+}
+function updateLocalizations(values, destination) {
+	if (typeof values !== "object" || values == null) return;
+	const localizations = destination ?? LOCALIZATIONS.globals;
+	const languages = Object.keys(values);
+	const languagesLength = languages.length;
+	let updated = false;
+	for (let languagesIndex = 0; languagesIndex < languagesLength; languagesIndex += 1) {
+		const language = languages[languagesIndex];
+		const languageValue = values[language];
+		if (typeof languageValue !== "object" || languageValue == null) continue;
+		const normalizedLanguage = language.toLowerCase();
+		localizations[normalizedLanguage] ??= {};
+		const keys = Object.keys(languageValue);
+		const keysLength = keys.length;
+		for (let keysIndex = 0; keysIndex < keysLength; keysIndex += 1) {
+			const key = keys[keysIndex];
+			const keyValue = languageValue[key];
+			const normalizedKey = key.toLowerCase();
+			if (LOCALIZATIONS.keys.has(normalizedKey) && (typeof keyValue === "string" || typeof keyValue === "function")) {
+				updated = true;
+				localizations[normalizedLanguage][normalizedKey] = keyValue;
+			}
+		}
+	}
+	if (!updated) return;
+	for (const state of states$4.set) {
+		updateAnchor(state);
+		updateMessage(state, getVisible(state).length);
+		updateSelectionItems(state);
+	}
+}
+function updateMessage(state, visible) {
+	setAttribute(state.message, ATTRIBUTE_HIDDEN, visible > 0 ? "" : void 0);
+	if (visible === 0) {
+		const localization = getLocalization("empty", state);
+		state.message.textContent = typeof localization === "function" ? localization() : localization;
+	} else {
+		const localization = getLocalization("results", state);
+		state.message.textContent = typeof localization === "function" ? localization(visible) : localization.replace("{amount}", visible.toString());
+	}
+	state.message.hidden = false;
+}
+function updatePreview(preview, state, active) {
+	const { length } = state.options.all;
+	for (let index = 0; index < length; index += 1) {
+		const option = state.options.all[index];
+		setAttribute(option, ATTRIBUTE_OPTION_ACTIVE, option === active ? "" : void 0);
+	}
+	state.active = active;
+	setAria(state.filter.element, "activedescendant", state.floatable.open ? active?.id : void 0);
+	if (state.floatable.open) active?.scrollIntoView(scrollOptions);
+	if (preview !== "none") updateAutocomplete(preview, state, active);
+}
+function updateSelection(state, active, added, selected) {
+	if (state.selection == null) return;
+	let options = active == null ? [] : [active];
+	if (selected != null) {
+		options = selected;
+		const { length } = state.selection.items;
+		for (let index = 0; index < length; index += 1) state.selection.items[index].element.remove();
+		state.selection.items.splice(0);
+	}
+	if (added) {
+		createSelectionItems({
+			options,
+			state,
+			container: state.selection.container,
+			items: state.selection.items
+		});
+		return;
+	}
+	let current = state.selection.items.findIndex((item) => getData(item.button, "option", false) === active?.id);
+	if (current === -1) return;
+	state.selection.items[current].element.remove();
+	state.selection.items.splice(current, 1);
+	if (state.selection.items.length === 0) {
+		state.anchor.element.focus();
+		return;
+	}
+	const { length } = state.selection.items;
+	if (current < 0) current = 0;
+	else if (current >= length) current = length - 1;
+	for (let index = 0; index < length; index += 1) {
+		const { button } = state.selection.items[index];
+		button.tabIndex = index === current ? 0 : -1;
+	}
+	state.selection.items[current].button.focus();
+}
+function updateSelectionItems(state) {
+	if (state.selection == null) return;
+	const localization = getLocalization("remove", state);
+	const { length } = state.selection.items;
+	for (let index = 0; index < length; index += 1) {
+		const item = state.selection.items[index];
+		const option = state.options.selected.find((option) => option.id === getData(item.button, "option", false));
+		if (option == null) continue;
+		setAria(item.button, "label", typeof localization === "function" ? localization(option?.textContent ?? "", getData(option, "value", false) ?? "") : localization.replace("{label}", option?.textContent ?? ""));
+	}
+}
+function updateTabindices(state, active) {
+	if (active == null || state.selection == null) return;
+	const next = state.selection.items.find((item) => getData(item.button, "option", false) === active.id);
+	if (next == null) return;
+	const { length } = state.selection.items;
+	for (let index = 0; index < length; index += 1) {
+		const item = state.selection.items[index];
+		item.button.tabIndex = item === next ? 0 : -1;
+	}
+	next.button.focus();
+}
+function updateValidity(state) {
+	if (state.autocomplete.none) {
+		const valueMissing = state.required && state.filter.element.value.length === 0;
+		const localization = getLocalization("input", state);
+		state.internals.setValidity({ valueMissing }, typeof localization === "function" ? localization() : localization);
+		state.internals.checkValidity();
+		return;
+	}
+	let error;
+	let message;
+	switch (true) {
+		case state.required && state.options.selected.length === 0: {
+			error = "badInput";
+			const localization = getLocalization("input", state);
+			message = typeof localization === "function" ? localization() : localization;
+			break;
+		}
+		case state.multiple && typeof state.max === "number" && state.options.selected.length > state.max: {
+			error = "rangeOverflow";
+			const localization = getLocalization("max", state);
+			message = typeof localization === "function" ? localization(state.max) : localization.replace("{max}", state.max.toString());
+			break;
+		}
+		case state.multiple && typeof state.min === "number" && state.options.selected.length < state.min: {
+			error = "rangeUnderflow";
+			const localization = getLocalization("min", state);
+			message = typeof localization === "function" ? localization(state.min) : localization.replace("{min}", state.min.toString());
+			break;
+		}
+		default: break;
+	}
+	state.internals.setValidity(error == null ? {} : { [error]: true }, message);
+	state.internals.checkValidity();
+}
+const TAGNAME$1 = "oui-combobox";
+const ATTRIBUTE_ANCHOR = `${TAGNAME$1}-anchor`;
+const ATTRIBUTE_CONTENT$1 = `${TAGNAME$1}-content`;
+const ATTRIBUTE_FILTER = `${TAGNAME$1}-filter`;
+const ATTRIBUTE_FILTER_INPUT = `${ATTRIBUTE_FILTER}-input`;
+const ATTRIBUTE_HEADER = `${TAGNAME$1}-header`;
+const ATTRIBUTE_HIDDEN = `${TAGNAME$1}-hidden`;
+const ATTRIBUTE_LIST = `${TAGNAME$1}-list`;
+const ATTRIBUTE_MESSAGE = `${TAGNAME$1}-message`;
+const ATTRIBUTE_OPTION = `${TAGNAME$1}-option`;
+const ATTRIBUTE_OPTION_ACTIVE = `${TAGNAME$1}-option-active`;
+const ATTRIBUTE_SELECTION = `${TAGNAME$1}-selection`;
+const ATTRIBUTE_SELECTION_ITEM = `${TAGNAME$1}-selection-item`;
+const AUTOCOMPLETES = /* @__PURE__ */ new Set([
+	"both",
+	"inline",
+	"list",
+	"none"
+]);
+const KEYS_ACTIVATION = /* @__PURE__ */ new Set([
+	" ",
+	"Backspace",
+	"Delete",
+	"Enter"
+]);
+const KEYS_NAVIGATION = /* @__PURE__ */ new Set([
+	"ArrowDown",
+	"ArrowUp",
+	"PageDown",
+	"PageUp"
+]);
+const KEYS_SELECTION = /* @__PURE__ */ new Set(["ArrowRight", "End"]);
+const LOCALIZATIONS = {
+	defaults: {
+		empty: "No results found",
+		input: "Please enter a value",
+		invalid: "Please select an option from the list",
+		max: (max) => `Please select fewer options (maximum is ${max})`,
+		min: (min) => `Please select more options (minimum is ${min})`,
+		remove: (label) => `Remove ${label}`,
+		results: (amount) => `${amount} results available`,
+		selected: (amount) => `${amount} selected`
+	},
+	globals: {},
+	keys: /* @__PURE__ */ new Set([
+		"empty",
+		"input",
+		"invalid",
+		"max",
+		"min",
+		"remove",
+		"results",
+		"selected"
+	])
+};
+const MESSAGE_LABEL = `<${TAGNAME$1}> must contain a <label> element for the <select> element`;
+const MESSAGE_SELECT = `<${TAGNAME$1}> must contain a valid <select> element`;
+const SELECTOR_ANCHOR = `[${ATTRIBUTE_ANCHOR}]`;
+const SELECTOR_SELECTION_ITEM = `[${ATTRIBUTE_SELECTION_ITEM}]`;
+const SELECTOR_OPTION = `[${ATTRIBUTE_OPTION}]`;
+const TYPES = /* @__PURE__ */ new Set(["autocomplete", "select"]);
+const scrollOptions = {
+	behavior: "auto",
+	block: "nearest",
+	inline: "nearest"
+};
+const states$4 = {
+	map: /* @__PURE__ */ new WeakMap(),
+	set: /* @__PURE__ */ new Set()
+};
+let index$2 = 0;
+on(document, "click", onClickDocument);
+on(document, "input", onInput, { passive: false });
+on(document, "keydown", onKeydown$4, { passive: false });
+customElements.define(TAGNAME$1, OuiComboboxElement);
+//#endregion
+//#region node_modules/@oscarpalmer/toretto/dist/touch.mjs
+function getSupport() {
+	if (window == null || navigator == null) return false;
+	if ("matchMedia" in window) {
+		const media = matchMedia?.("(pointer: coarse)");
+		if (typeof media?.matches === "boolean" && media.matches) return true;
+	}
+	if ("ontouchstart" in window) return true;
+	if (typeof navigator.maxTouchPoints === "number" && navigator.maxTouchPoints > 0) return true;
+	if (typeof navigator.msMaxTouchPoints === "number" && navigator.msMaxTouchPoints > 0) return true;
+	return false;
+}
+/**
+* Does the device support touch events?
+*/
+const supportsTouch = (() => {
+	let support = getSupport();
+	const instance = Object.create({
+		get() {
+			return support;
+		},
+		update() {
+			support = getSupport();
+			return support;
+		}
+	});
+	Object.defineProperty(instance, "value", { get() {
+		return support;
+	} });
+	return instance;
+})();
+//#endregion
+//#region src/js/internal/draggable.ts
+var OuiDraggable = class {
+	#destroyed = false;
+	#state;
+	get element() {
+		return this.#state.element;
+	}
+	constructor(name, event, attribute, element, options, extras) {
+		this.#state = {
+			...extras,
+			attribute,
+			element,
+			event,
+			name,
+			options,
+			horizontal: true,
+			vertical: true,
+			styling: toggleStyles(element, styles$1)
+		};
+		const item = {
+			instance: this,
+			state: this.#state
+		};
+		setContainer(item);
+		setDirection(item);
+		setAttribute(element, attribute, "");
+		let states = globals.states.get(element);
+		states ??= {};
+		states[this.#state.name] = this.#state;
+		globals.states.set(element, states);
+	}
+	destroy() {
+		if (this.#destroyed) return;
+		this.#destroyed = true;
+		destroyInstance(this, this.#state);
+	}
+};
+function addDraggable(element, options) {
+	let instances = globals.instances.get(element);
+	if (instances == null) {
+		instances = {};
+		globals.instances.set(element, instances);
+	}
+	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,
+		state
+	});
+	state.element.removeAttribute(state.attribute);
+	state.styling.remove();
+	state.container = void 0;
+	state.element = void 0;
+	state.options = void 0;
+	state.styling = void 0;
+}
+function getDraggableStates(element) {
+	return globals.states.get(element);
+}
+function getHandle(event, isMovable) {
+	return findAncestor(event, isMovable ? SELECTOR_MOVABLE_HANDLE : SELECTOR_SORTABLE_HANDLE);
+}
+function getNextPosition(item, position) {
+	let x = globals.original?.x ?? 0;
+	let y = globals.original?.y ?? 0;
+	if (item.state.horizontal) {
+		x = position.x - (globals.offset?.x ?? 0);
+		if (globals.container != null && globals.element != null) x = clamp(x, globals.container.left, globals.container.right - globals.element.rectangle.width);
+	}
+	if (item.state.vertical) {
+		y = position.y - (globals.offset?.y ?? 0);
+		if (globals.container != null && globals.element != null) y = clamp(y, globals.container.top, globals.container.bottom - globals.element.rectangle.height);
+	}
+	return {
+		x,
+		y
+	};
+}
+function onKeydown$3(event) {
+	if (current$1 != null && event.key === KEY_ESCAPE) cancelDrag(current$1);
+}
+function onPointerdown$4(event) {
+	if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || (supportsTouch.value ? event.type === "mousedown" : event.type === "touchstart" || event.button !== 0)) return;
+	const container = findAncestor(event, SELECTOR$4);
+	const instances = globals.instances.get(container);
+	const states = globals.states.get(container);
+	if (instances == null || states == null) return;
+	const isMovable = container.hasAttribute(ATTRIBUTE_MOVABLE$1);
+	const item = {
+		instance: isMovable ? instances.movable : instances.sortable,
+		state: isMovable ? states.movable : states.sortable
+	};
+	if (item.instance == null || item.state == null) return;
+	if (supportsTouch.value) event.preventDefault();
+	let element = container;
+	if (!isMovable) {
+		element = findAncestor(event, SELECTOR_SORTABLE_ITEM);
+		if (element == null || element.parentElement !== container) return;
+	}
+	let handle = element;
+	item.state.hasHandles ??= element.querySelector(SELECTOR_SORTABLE_HANDLE) != null;
+	if (item.state.hasHandles) handle = getHandle(event, isMovable);
+	if (handle == null) return;
+	const dragged = item.state.options.getDragged();
+	const rectangle = dragged.getBoundingClientRect();
+	const position = getPosition$1(event) ?? {
+		x: 0,
+		y: 0
+	};
+	current$1 = item;
+	globals.container = item.state.container?.getBoundingClientRect();
+	globals.element = {
+		rectangle,
+		node: dragged
+	};
+	globals.offset = item.state.options.position.getOffset(globals, item, element, position);
+	globals.original = item.state.options.position.getOriginal(globals, item, position);
+	const dispatched = dispatch(item.state.element, `${item.state.name}:begin`, { detail: {
+		element,
+		position: { ...globals.original }
+	} });
+	setTimeout(() => {
+		if (dispatched.defaultPrevented) {
+			item.state.options.drag.onCancel?.(globals, item);
+			reset();
+			return;
+		}
+		const next = getNextPosition(item, position);
+		setStyles(dragged, {
+			position: "fixed",
+			inset: `${next.y}px auto auto ${next.x}px`,
+			transform: "translate3d(0, 0, 0)"
+		});
+		item.state.options.drag.onBegin?.(event, globals, item, element, handle, next);
+		item.state.styling.set();
+		styleToggler$1.set();
+	});
+}
+function onPointermove$3(event) {
+	if (current$1 == null) return;
+	const position = getPosition$1(event);
+	if (position == null) return;
+	const next = getNextPosition(current$1, position);
+	if (globals.element != null) setStyle(globals.element.node, "inset", `${next.y}px auto auto ${next.x}px`);
+	const detail = current$1.state.options.drag.onMove(event, globals, current$1, {
+		calculated: next,
+		original: position
+	});
+	const dispatched = dispatch(current$1.state.element, `${current$1.state.name}:move`, { detail });
+	setTimeout(() => {
+		if (dispatched.defaultPrevented) cancelDrag(current$1);
+	});
+}
+function onPointerup$2(event) {
+	current$1?.state.options.drag.onEnd?.(event, globals, current$1, reset);
+}
+function removeDraggable(element) {
+	const { property } = this;
+	removeInstance(globals.instances, property, element);
+	removeInstance(globals.states, property, element);
+}
+function removeInstance(map, name, element) {
+	const instances = map.get(element);
+	if (instances == null || instances[name] == null) return;
+	if (typeof instances[name].destroy === "function") instances[name].destroy();
+	instances[name] = void 0;
+	if (instances[properties[name]] == null) map.delete(element);
+}
+function reset() {
+	current$1?.state.styling.remove();
+	styleToggler$1.remove();
+	current$1 = void 0;
+	globals.container = void 0;
+	globals.element = void 0;
+	globals.offset = void 0;
+	globals.original = void 0;
+}
+function setContainer(item) {
+	const { container } = item.state.options.input ?? {};
+	if (isHTMLOrSVGElement(container)) {
+		setContainerElement(item, container);
+		return;
+	}
+	const selector = container ?? getAttribute(item.instance.element, item.state.options.container.attribute);
+	if (typeof selector !== "string") return;
+	const element = containers.has(selector) ? item.state.element.ownerDocument.body : document.querySelector(selector) ?? void 0;
+	if (isHTMLOrSVGElement(element)) setContainerElement(item, element);
+}
+function setContainerElement(item, element) {
+	item.state.container = element;
+	const set = item.state.options.container.map.get(element);
+	if (set == null) item.state.options.container.map.set(element, /* @__PURE__ */ new Set([item.instance]));
+	else set.add(item.instance);
+	item.state.options.container.onInitialize?.(item);
+}
+function setDirection(item) {
+	const direction = getAttribute(item.state.element, item.state.options.direction.attribute);
+	if (horizontals.has(direction)) item.state.vertical = false;
+	else if (verticals.has(direction)) item.state.horizontal = false;
+	item.state.options.direction.onAfter?.(item);
+}
+function unsetContainer(item) {
+	const { container } = item.state;
+	if (container == null) return;
+	const set = item.state.options.container.map.get(container);
+	let empty = false;
+	if (set != null) {
+		set.delete(item.instance);
+		if (set.size === 0) {
+			empty = true;
+			item.state.options.container.map.delete(container);
+		}
+	}
+	item.state.options.container.onDestroy?.(item, container, empty);
+}
+const ATTRIBUTE_MOVABLE$1 = "oui-movable";
+const ATTRIBUTE_SORTABLE = "oui-sortable";
+const KEY_ESCAPE = "Escape";
+const SELECTOR$4 = `[${ATTRIBUTE_MOVABLE$1}], [${ATTRIBUTE_SORTABLE}]`;
+const SELECTOR_MOVABLE_HANDLE = `[${ATTRIBUTE_MOVABLE$1}-handle]`;
+const SELECTOR_SORTABLE_HANDLE = `[${ATTRIBUTE_SORTABLE}-handle]`;
+const SELECTOR_SORTABLE_ITEM = `[${ATTRIBUTE_SORTABLE}] > *`;
+const containers = /* @__PURE__ */ new Set([
+	"body",
+	"document",
+	"window"
+]);
+const horizontals = /* @__PURE__ */ new Set(["horizontal", "x"]);
+const properties = {
+	movable: "sortable",
+	sortable: "movable"
+};
+const globals = {
+	container: void 0,
+	element: void 0,
+	instances: /* @__PURE__ */ new WeakMap(),
+	offset: void 0,
+	original: void 0,
+	states: /* @__PURE__ */ new WeakMap()
+};
+const styles$1 = {
+	touchAction: "none",
+	userSelect: "none",
+	webkitUserSelect: "none"
+};
+const styleToggler$1 = toggleStyles(document.body, styles$1);
+const verticals = /* @__PURE__ */ new Set(["vertical", "y"]);
+let current$1;
+on(document, "keydown", onKeydown$3);
+on(document, "mousedown", onPointerdown$4);
+on(document, "pointermove", onPointermove$3);
+on(document, "pointerup", onPointerup$2);
+on(document, "touchcancel", onPointerup$2);
+on(document, "touchstart", onPointerdown$4, { passive: false });
+//#endregion
+//#region src/js/movable/movable.embedded.ts
+var OuiMovable = class extends OuiDraggable {
+	#element;
+	#style;
+	constructor(element, options) {
+		const style = getStyles(element, ["inset", "position"]);
+		super("movable", "move", ATTRIBUTE_MOVABLE, element, {
+			container: {
+				attribute: ATTRIBUTE_CONTAINER$2,
+				map: CONTAINERS$1,
+				onDestroy: destroyContainer,
+				onInitialize: initializeContainer
+			},
+			direction: {
+				attribute: ATTRIBUTE_DIRECTION$1,
+				onAfter: afterDirection
+			},
+			drag: {
+				onBegin: onBegin$1,
+				onCancel: onCancel$1,
+				onEnd: onEnd$2,
+				onMove: onMove$1
+			},
+			input: options,
+			position: {
+				getOffset: getOffsetPosition$1,
+				getOriginal: getOriginalPosition$1
+			},
+			getDragged() {
+				return element;
+			},
+			getOrigin() {
+				return element;
+			}
+		}, {
+			style,
+			hasHandles: element.querySelector(SELECTOR_HANDLE$2) != null,
+			moved: false
+		});
+		this.#element = element;
+		this.#style = style;
+	}
+	/**
+	* Destroys the _Movable_
+	*/
+	destroy() {
+		MOVED.delete(this);
+		setStyles(this.#element, this.#style);
+		this.#element = void 0;
+		this.#style = void 0;
+		super.destroy();
+	}
+};
+function afterDirection(item) {
+	const container = item.state.container?.getBoundingClientRect();
+	if (container != null) setOffset(item.state, container);
+}
+/**
+* Creates _(or retrieves)_ a _OuiMovable_ instance for an element
+*
+* @param element Element to make movable
+* @returns _OuiMovable_ instance
+*/
+function createMovable(element, options) {
+	if (!isHTMLOrSVGElement(element)) throw new TypeError(MESSAGE$4);
+	return addMovable(element, options);
+}
+function destroyContainer(_, container, empty) {
+	if (empty) resizer.unobserve(container);
+}
+function getOffsetPosition$1(globals, _, __, position) {
+	return {
+		x: position.x - (globals.element?.rectangle.left ?? 0),
+		y: position.y - (globals.element?.rectangle.top ?? 0)
+	};
+}
+function getOriginalPosition$1(globals) {
+	return {
+		x: globals.element?.rectangle.left ?? 0,
+		y: globals.element?.rectangle.top ?? 0
+	};
+}
+function initializeContainer(item) {
+	resizer.observe(item.state.container);
+}
+function onBegin$1() {}
+function onCancel$1(globals, item) {
+	const { element, moved, style } = item.state;
+	const { x, y } = globals.original ?? {
+		x: 0,
+		y: 0
+	};
+	if (moved) setStyle(element, "inset", `${y}px auto auto ${x}px`);
+	else setStyles(element, style);
+	element.removeAttribute(ATTRIBUTE_MOVING);
+}
+function onEnd$2(event, globals, item, reset) {
+	const movable = item.instance;
+	const state = item.state;
+	state.element.removeAttribute(ATTRIBUTE_MOVING);
+	if (!state.moved) {
+		state.moved = true;
+		if (state.container != null) MOVED.add(movable);
+	}
+	const container = state.container?.getBoundingClientRect();
+	if (container != null) setOffset(state, container);
+	const dispatched = dispatch(state.element, "movable:end", { detail: {
+		from: { ...globals.original },
+		to: getPosition$1(event)
+	} });
+	setTimeout(() => {
+		if (dispatched.defaultPrevented) onCancel$1(globals, item);
+		reset();
+	});
+}
+function onMove$1(_, globals, __, position) {
+	setAttribute(globals.element?.node, ATTRIBUTE_MOVING, "");
+	return {
+		from: { ...globals.original },
+		to: { ...position.calculated }
+	};
+}
+function onResize(entries) {
+	const { length } = entries;
+	for (let index = 0; index < length; index += 1) {
+		const entry = entries[index];
+		const set = CONTAINERS$1.get(entry.target);
+		if (set == null) continue;
+		for (const movable of set) reposition(movable);
+	}
+}
+function onScroll() {
+	for (const moved of MOVED) reposition(moved);
+}
+function reposition(movable) {
+	const state = getDraggableStates(movable.element)?.movable;
+	if (state == null || !state.moved || state.container == null) return;
+	const container = state.container.getBoundingClientRect();
+	const x = container.left + (state.offset?.x ?? 0);
+	const y = container.top + (state.offset?.y ?? 0);
+	setStyle(state.element, "inset", `${y}px auto auto ${x}px`);
+}
+function setOffset(state, container) {
+	state.offset = {};
+	const element = state.element.getBoundingClientRect();
+	state.offset.y = element.top - container.top;
+	state.offset.x = element.left - container.left;
+}
+const ATTRIBUTE_MOVABLE = "oui-movable";
+const ATTRIBUTE_CONTAINER$2 = `${ATTRIBUTE_MOVABLE}-container`;
+const ATTRIBUTE_DIRECTION$1 = `${ATTRIBUTE_MOVABLE}-direction`;
+const ATTRIBUTE_MOVABLE_HANDLE = `${ATTRIBUTE_MOVABLE}-handle`;
+const ATTRIBUTE_MOVING = `${ATTRIBUTE_MOVABLE}-moving`;
+const CONTAINERS$1 = /* @__PURE__ */ new Map();
+const MESSAGE$4 = "The element must be an instance of HTMLElement or SVGElement";
+const MOVED = /* @__PURE__ */ new Set();
+const SELECTOR_HANDLE$2 = `[${ATTRIBUTE_MOVABLE_HANDLE}]`;
+const bound$1 = {
+	constructor: OuiMovable,
+	property: "movable"
+};
+const resizer = new ResizeObserver(onResize);
+const addMovable = addDraggable.bind(bound$1);
+const removeMovable = removeDraggable.bind(bound$1);
+on(document, "scroll", onScroll);
+attributable(ATTRIBUTE_MOVABLE, addMovable, removeMovable);
+//#endregion
+//#region src/js/resizable/resizable.embedded.ts
+var OuiResizable = class {
+	#state;
+	constructor(state) {
+		this.#state = state;
+	}
+	destroy() {
+		destroyResizable(this.#state);
+	}
+	set() {
+		const [width, height] = getAndSetDimensions(this.#state.element, this.#state.options);
+		this.#state.width = width;
+		this.#state.height = height;
+	}
+	reset() {
+		setStyles(this.#state.element, {
+			height: "",
+			width: ""
+		});
+	}
+};
+function addResizable(element, options) {
+	let item = items.get(element);
+	if (item == null) {
+		const handle = element.querySelector(SELECTOR_HANDLE_SCOPED);
+		if (!isHTMLOrSVGElement(handle)) return;
+		const state = getState$4(element, handle, options);
+		item = {
+			instance: new OuiResizable(state),
+			state
+		};
+		items.set(element, item);
+	}
+	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
+*
+* @param element Element to make resizable
+* @returns _OuiResizable_ instance
+*/
+function createResizable(element, options) {
+	if (!isHTMLOrSVGElement(element)) throw new TypeError(MESSAGE_ELEMENT);
+	if (!isHTMLOrSVGElement(element.querySelector(SELECTOR_HANDLE_SCOPED))) throw new Error(MESSAGE_HANDLE);
+	return addResizable(element, options ?? {});
+}
+function destroyResizable(state) {
+	state.element = void 0;
+	state.handle = void 0;
+}
+function getAndSetDimensions(element, options, input) {
+	let { height, width } = input ?? element.getBoundingClientRect();
+	if (options.maximumWidth > -1 && width > options.maximumWidth) width = options.maximumWidth;
+	else if (options.minimumWidth > -1 && width < options.minimumWidth) width = options.minimumWidth;
+	if (options.maximumHeight > -1 && height > options.maximumHeight) height = options.maximumHeight;
+	else if (options.minimumHeight > -1 && height < options.minimumHeight) height = options.minimumHeight;
+	if (element.checkVisibility()) setStyles(element, {
+		height: `${height}px`,
+		width: `${width}px`
+	});
+	return [width, height];
+}
+function getProperties(element, widthProperty, heightProperty) {
+	const computed = getComputedStyle(element);
+	return [computed[widthProperty], computed[heightProperty]];
+}
+function getRestrictions(maximum, minimum) {
+	const [maximumWidth, maximumHeight] = getXAndY.apply(null, typeof maximum === "string" ? [maximum] : maximum);
+	const [minimumWidth, minimumHeight] = getXAndY.apply(null, typeof minimum === "string" ? [minimum] : minimum);
+	if (maximumWidth > -1 && minimumWidth > -1 && maximumWidth <= minimumWidth) throw new Error(MESSAGE_WIDTH);
+	if (maximumHeight > -1 && minimumHeight > -1 && maximumHeight <= minimumHeight) throw new Error(MESSAGE_HEIGHT);
+	return {
+		maximumHeight,
+		maximumWidth,
+		minimumHeight,
+		minimumWidth
+	};
+}
+function getState$4(element, handle, input) {
+	setAttribute(element, RESIZABLE_ATTRIBUTE, "");
+	const options = getValidOptions(element, input);
+	const [width, height] = getAndSetDimensions(element, options);
+	return {
+		element,
+		handle,
+		height,
+		options,
+		width,
+		styles: toggleStyles(element, styles)
+	};
+}
+function getValidOptions(element, input) {
+	const original = isPlainObject(input) ? input : {};
+	return { ...getRestrictions(input == null ? getAttribute(element, ATTRIBUTE_MAXIMUM) ?? getProperties(element, "maxWidth", "maxHeight") : [original.maximumWidth, original.maximumHeight], input == null ? getAttribute(element, ATTRIBUTE_MINIMUM) ?? getProperties(element, "minWidth", "minHeight") : [original.minimumWidth, original.minimumHeight]) };
+}
+function getXAndY(first, second) {
+	const [x, y] = typeof first === "string" && second == null ? first.split(",") : [first, second];
+	let xAsNumber = typeof x === "string" ? Number.parseFloat(x) : getNumber(x);
+	let yAsNumber = typeof y === "string" ? Number.parseFloat(y) : getNumber(y);
+	if (Number.isNaN(xAsNumber) || xAsNumber <= 0) xAsNumber = -1;
+	if (Number.isNaN(yAsNumber) || yAsNumber <= 0) yAsNumber = -1;
+	return [xAsNumber, yAsNumber];
+}
+function onKeydown$2(event) {
+	if (current != null && event.key === "Escape") cancelResize(current);
+}
+function onPointerdown$3(event) {
+	if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || (supportsTouch.value ? event.type === "mousedown" : event.type === "touchstart" || event.button !== 0)) return;
+	const handle = findAncestor(event, SELECTOR_HANDLE$1);
+	const element = handle && findAncestor(handle, SELECTOR$3);
+	const stored = element && items.get(element);
+	const position = getPosition$1(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();
+	});
+}
+function onPointermove$2(event) {
+	if (current == null) return;
+	const { x, y } = getPosition$1(event) ?? {};
+	if (x == null || y == null) return;
+	const width = current.state.width + (x - (start?.x ?? 0));
+	const height = current.state.height + (y - (start?.y ?? 0));
+	getAndSetDimensions(current.state.element, current.state.options, {
+		height,
+		width
+	});
+	const dispatched = dispatch(current.state.element, "resizable:resize", { detail: {
+		height,
+		width
+	} });
+	setTimeout(() => {
+		if (dispatched.defaultPrevented) cancelResize(current);
+	});
+}
+function onPointerup$1() {
+	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();
+	});
+}
+function removeResizable(element) {
+	items.get(element)?.instance.destroy();
+	items.delete(element);
+}
+function resetResizable() {
+	current?.state.styles.remove();
+	styleToggler.remove();
+	current = void 0;
+	start = void 0;
+}
+const RESIZABLE_ATTRIBUTE = "oui-resizable";
+const RESIZABLE_ATTRIBUTE_HANDLE = `${RESIZABLE_ATTRIBUTE}-handle`;
+const ATTRIBUTE_MAXIMUM = `${RESIZABLE_ATTRIBUTE}-maximum`;
+const ATTRIBUTE_MINIMUM = `${RESIZABLE_ATTRIBUTE}-minimum`;
+const MESSAGE_ELEMENT = "The element must be an instance of HTMLElement or SVGElement";
+const MESSAGE_HEIGHT = "The maximum height must be greater than the minimum height";
+const MESSAGE_HANDLE = `The element must contain a child with the attribute "${RESIZABLE_ATTRIBUTE_HANDLE}"`;
+const MESSAGE_WIDTH = "The maximum width must be greater than the minimum width";
+const SELECTOR$3 = `[${RESIZABLE_ATTRIBUTE}]`;
+const SELECTOR_HANDLE$1 = `[${RESIZABLE_ATTRIBUTE_HANDLE}]`;
+const SELECTOR_HANDLE_SCOPED = `:scope > ${SELECTOR_HANDLE$1}`;
+const items = /* @__PURE__ */ new WeakMap();
+const styles = {
+	touchAction: "none",
+	userSelect: "none",
+	webkitUserSelect: "none"
+};
+const styleToggler = toggleStyles(document.body, styles);
+let current;
+let start;
+on(document, "keydown", onKeydown$2);
+on(document, "mousedown", onPointerdown$3);
+on(document, "pointermove", onPointermove$2);
+on(document, "pointerup", onPointerup$1);
+on(document, "touchcancel", onPointerup$1);
+on(document, "touchstart", onPointerdown$3, { passive: false });
+attributable(RESIZABLE_ATTRIBUTE, addResizable, removeResizable);
+//#endregion
+//#region src/js/dialog.ts
+var OuiDialog = class {
+	#state;
+	/**
+	* Is the dialog open?
+	*/
+	get open() {
+		return this.#state.element.open;
+	}
+	/**
+	* Open or close the dialog
+	*/
+	set open(value) {
+		if (value === true) this.show();
+		else if (value === false) this.hide();
+	}
+	constructor(state) {
+		this.#state = state;
+	}
+	hide(first, second) {
+		if (!this.#state.element.open) return;
+		if (first === true) this.#state.element.requestClose(typeof second === "string" ? second : void 0);
+		else this.#state.element.close(typeof first === "string" ? first : void 0);
+	}
+	/**
+	* Opens the dialog
+	*/
+	show(modal) {
+		const { element } = this.#state;
+		if (element == null || element.open) return;
+		const isModal = modal !== false;
+		setAria(element, "modal", isModal);
+		if (isModal) element.showModal();
+		else element.show();
+	}
+};
+function addDialog(element) {
+	if (!(element instanceof HTMLDialogElement)) throw new TypeError(MESSAGE$3);
+	if (!states$3.has(element)) states$3.set(element, getState$3(element));
+}
+function destroyDialog(state) {
+	state.element.close();
+	setAria(state.element, "modal", state.modal);
+	state.element.removeAttribute(ATTRIBUTE_OPEN$1);
+	for (const listener of state.listeners) listener();
+	state.movable?.destroy();
+	state.resizable?.destroy();
+	state.dialog = void 0;
+	state.element = void 0;
+	state.listeners = void 0;
+	state.movable = void 0;
+	state.resizable = void 0;
+}
+/**
+* Get the _OuiDialog_ for an element
+*
+* @param element Element to get _OuiDialog_ for
+* @returns _OuiDialog_ instance
+*/
+function getDialog(element) {
+	return states$3.get(element)?.dialog;
+}
+function getMovable(element) {
+	const handles = element.querySelectorAll(SELECTOR_MOVER);
+	if (handles.length === 0) return;
+	for (const handle of handles) setAttribute(handle, ATTRIBUTE_MOVABLE_HANDLE, "");
+	return createMovable(element, { container: getAttribute(element, ATTRIBUTE_CONTAINER$1) });
+}
+function getResizable(element) {
+	const handle = element.querySelector(SELECTOR_RESIZER);
+	if (handle == null) return;
+	setAttribute(handle, RESIZABLE_ATTRIBUTE_HANDLE, "");
+	return createResizable(element);
+}
+function getState$3(element) {
+	const state = {
+		element,
+		dialog: void 0,
+		listeners: [getOnBeforeToggleListener(element), on(element, "toggle", (event) => {
+			const { source } = event;
+			if (element.open) {
+				setAria(element, "modal", source instanceof HTMLButtonElement && source.command === "show-modal" || element.matches(":modal"));
+				setAttribute(element, ATTRIBUTE_OPEN$1, "");
+				element.focus();
+				setTimeout(() => {
+					state.resizable?.set();
+				}, 500);
+			} else {
+				setAttribute(element, ATTRIBUTE_OPEN$1);
+				setAria(element, "modal", state.modal);
+				setStyles(element, {
+					inset: "",
+					position: "",
+					transform: ""
+				});
+				state.resizable?.reset();
+			}
+		})],
+		modal: getAria(element, "modal") === "true" || element.matches(":modal")
+	};
+	state.dialog = new OuiDialog(state);
+	state.movable = getMovable(element);
+	state.resizable = getResizable(element);
+	return state;
+}
+function removeDialog(element) {
+	const state = states$3.get(element);
+	if (state == null) return;
+	destroyDialog(state);
+	states$3.delete(element);
+}
+const ATTRIBUTE$3 = "oui-dialog";
+const ATTRIBUTE_CONTAINER$1 = `${ATTRIBUTE$3}-container`;
+const ATTRIBUTE_OPEN$1 = `${ATTRIBUTE$3}-open`;
+const MESSAGE$3 = "The element must be an instance of HTMLDialogElement";
+const SELECTOR_MOVER = `[${ATTRIBUTE$3}-mover]`;
+const SELECTOR_RESIZER = `[${ATTRIBUTE$3}-resizer]`;
+const states$3 = /* @__PURE__ */ new WeakMap();
+attributable(ATTRIBUTE$3, addDialog, removeDialog);
+//#endregion
+//#region node_modules/@oscarpalmer/toretto/dist/focusable.mjs
+/**
+* Get a list of focusable elements within a parent element
+*
+* @param parent Parent element
+* @returns Focusable elements
+*/
+function getFocusable(parent) {
+	return getValidElements(parent, FILTERS_FOCUSABLE, false);
+}
+function getItem(element, tabbable) {
+	return {
+		element,
+		tabIndex: tabbable ? getTabIndex(element) : TABINDEX_DEFAULT
+	};
+}
+function getTabIndex(element) {
+	const tabIndex = element?.tabIndex ?? TABINDEX_DEFAULT;
+	if (tabIndex < TABINDEX_BASE && (EXPRESSION_SPECIAL_TABINDEX.test(element.tagName) || isEditable(element)) && !hasTabIndex(element)) return TABINDEX_BASE;
+	return tabIndex;
+}
+function getValidElements(parent, filters, tabbable) {
+	if (!(parent instanceof Element)) return [];
+	const elements = [...parent.querySelectorAll(SELECTOR_FULL)];
+	const items = [];
+	let { length } = elements;
+	for (let index = 0; index < length; index += 1) {
+		const item = getItem(elements[index], tabbable);
+		if (!filters.some((filter) => filter(item))) items.push(item);
+	}
+	if (!tabbable) return items.map((item) => item.element);
+	const indiced = [];
+	const zeroed = [];
+	length = items.length;
+	for (let index = 0; index < length; index += 1) {
+		const item = items[index];
+		if (item.tabIndex === TABINDEX_BASE) zeroed.push(item.element);
+		else indiced[item.tabIndex] = [...indiced[item.tabIndex] ?? [], item.element];
+	}
+	return [...indiced.flat(), ...zeroed];
+}
+function hasTabIndex(element) {
+	return !Number.isNaN(Number.parseInt(element.getAttribute(ATTRIBUTE_TABINDEX), 10));
+}
+function isDisabled(item) {
+	if (EXPRESSION_DISABLEABLE.test(item.element.tagName) && isDisabledFromFieldset(item.element)) return true;
+	return item.element.disabled ?? false;
+}
+function isDisabledFromFieldset(element) {
+	let parent = element.parentElement;
+	while (parent != null) {
+		if (parent instanceof HTMLFieldSetElement && parent.disabled) {
+			const children = Array.from(parent.children);
+			const { length } = children;
+			for (let index = 0; index < length; index += 1) {
+				const child = children[index];
+				if (child instanceof HTMLLegendElement) return parent.matches(SELECTOR_FIELDSET_DISABLED) || !child.contains(element);
+			}
+			return true;
+		}
+		parent = parent.parentElement;
+	}
+	return false;
+}
+function isEditable(element) {
+	return EXPRESSION_TRUEISH.test(element.getAttribute(ATTRIBUTE_CONTENTEDITABLE));
+}
+function isHidden(item) {
+	if ((item.element.hidden ?? false) || item.element instanceof HTMLInputElement && item.element.type === STYLE_HIDDEN) return true;
+	if ((item.element.matches(SELECTOR_SUMMARY_FIRST) ? item.element.parentElement : item.element)?.matches(SELECTOR_DETAILS_CLOSED_CHILDREN) ?? false) return true;
+	const style = getComputedStyle(item.element);
+	if (style.display === STYLE_NONE || style.visibility === STYLE_HIDDEN) return true;
+	const { height, width } = item.element.getBoundingClientRect();
+	return height === 0 && width === 0;
+}
+function isInert(item) {
+	return (item.element.inert ?? false) || EXPRESSION_TRUEISH.test(item.element.getAttribute(ATTRIBUTE_INERT)) || item.element.parentElement != null && isInert({
+		element: item.element.parentElement,
+		tabIndex: TABINDEX_DEFAULT
+	});
+}
+function isSummarised(item) {
+	return item.element instanceof HTMLDetailsElement && [...item.element.children].some((child) => EXPRESSION_SUMMARY.test(child.tagName));
+}
+const ATTRIBUTE_CONTENTEDITABLE = "contenteditable";
+const ATTRIBUTE_INERT = "inert";
+const ATTRIBUTE_TABINDEX = "tabindex";
+const EXPRESSION_DISABLEABLE = /^(button|input|select|textarea)$/i;
+const EXPRESSION_SPECIAL_TABINDEX = /^(audio|details|video)$/i;
+const EXPRESSION_SUMMARY = /^summary$/i;
+const EXPRESSION_TRUEISH = /^(|true)$/i;
+const FILTERS_FOCUSABLE = [
+	isDisabled,
+	isInert,
+	isHidden,
+	isSummarised
+];
+[...FILTERS_FOCUSABLE];
+const SELECTOR_DETAILS_CLOSED_CHILDREN = "details:not([open]) *";
+const SELECTOR_FIELDSET_DISABLED = "fieldset[disabled] *";
+const SELECTOR_SUMMARY_FIRST = "details > summary:first-of-type";
+const SELECTOR_FULL = [
+	"[contenteditable]:not([contenteditable=\"false\"])",
+	"[tabindex]:not(slot)",
+	"a[href]",
+	"audio[controls]",
+	"button",
+	"details",
+	SELECTOR_SUMMARY_FIRST,
+	"input",
+	"select",
+	"textarea",
+	"video[controls]"
+].map((selector) => `${selector}:not([inert])`).join(",");
+const STYLE_HIDDEN = "hidden";
+const STYLE_NONE = "none";
+const TABINDEX_BASE = 0;
+const TABINDEX_DEFAULT = -1;
+//#endregion
+//#region src/js/focus-trap/focus-trap.embedded.ts
+var OuiFocusTrap = class {
+	#destroyed = false;
+	#tabIndex;
+	#state;
+	/**
+	* Is focused maintained within the _focus trap_ when clicking outside of it?
+	*/
+	get contain() {
+		return this.#state.element.hasAttribute(ATTRIBUTE_FOCUSTRAP_CONTAIN);
+	}
+	/**
+	* Should focus be maintained within the _focus trap_ when clicking outside of it?
+	*/
+	set contain(value) {
+		if (value === true) setAttribute(this.#state.element, ATTRIBUTE_FOCUSTRAP_CONTAIN, "");
+		else if (value === false) setAttribute(this.#state.element, ATTRIBUTE_FOCUSTRAP_CONTAIN, void 0);
+	}
+	/**
+	* Is the _focus trap_ disabled?
+	*/
+	get disabled() {
+		return this.#state.disabled;
+	}
+	/**
+	* Should the _focus trap_ be disabled?
+	*/
+	set disabled(value) {
+		if (value === true) this.disable();
+		else if (value === false) this.enable();
+	}
+	/**
+	* Is focus allowed to escape when pressing _Escape_ within the _focus trap_?
+	*/
+	get noescape() {
+		return this.#state.element.hasAttribute(ATTRIBUTE_FOCUSTRAP_NOESCAPE);
+	}
+	/**
+	* Should the _focus trap_ allow focus to escape when pressing _Escape_?
+	*/
+	set noescape(value) {
+		if (value === true) setAttribute(this.#state.element, ATTRIBUTE_FOCUSTRAP_NOESCAPE, "");
+		else if (value === false) setAttribute(this.#state.element, ATTRIBUTE_FOCUSTRAP_NOESCAPE, void 0);
+	}
+	constructor(state) {
+		this.#state = state;
+		this.#tabIndex = state.element.tabIndex;
+		state.element.tabIndex = -1;
+		setAttribute(state.element, ATTRIBUTE_FOCUSTRAP, "");
+		this.contain = state.options.contain;
+		this.noescape = state.options.noescape;
+		states$2.set(this, state);
+	}
+	/**
+	* Destroys the _focus trap_
+	*/
+	destroy() {
+		if (this.#destroyed) return;
+		this.#destroyed = true;
+		disabled.delete(this);
+		instances.delete(this.#state.element);
+		states$2.delete(this);
+		this.#state.element.tabIndex = this.#tabIndex;
+		this.#state.element.removeAttribute(ATTRIBUTE_FOCUSTRAP);
+		this.#state.element.removeAttribute(ATTRIBUTE_FOCUSTRAP_CONTAIN);
+		this.#state.element.removeAttribute(ATTRIBUTE_FOCUSTRAP_NOESCAPE);
+		this.#state.element = void 0;
+	}
+	/**
+	* Disables the _focus trap_
+	*/
+	disable() {
+		if (!this.#destroyed && !(this.disabled || this.#state.options.noescape)) setDisabled(this, this.#state, true);
+	}
+	/**
+	* Enables the _focus trap_
+	*/
+	enable() {
+		if (!this.#destroyed && this.disabled) setDisabled(this, this.#state, false);
+	}
+	/**
+	* Focuses the _focus trap_
+	*
+	* @param last When `true`, focuses the last focusable element within the _focus trap_ instead of the first
+	*/
+	focus(last) {
+		if (!this.#destroyed && !this.disabled) tabToTrap(this, getFocusable(this.#state.element), this.#state.element, last ? -1 : 0);
+	}
+};
+/**
+* Creates _(or retrieves)_ a _focus trap_ for an element
+*
+* @param element Element to trap focus within
+* @param options _Focus trap_ options
+* @returns _Focus trap_ instance
+*/
+function createFocusTrap(element, options) {
+	if (!isHTMLOrSVGElement(element)) throw new TypeError(MESSAGE$2);
+	let instance = instances.get(element);
+	if (instance == null) {
+		instance = new OuiFocusTrap(getState$2(element, options));
+		instances.set(element, instance);
+	}
+	return instance;
+}
+function getOptions(element, input) {
+	const options = isPlainObject(input) ? input : {};
+	return {
+		contain: typeof options.contain === "boolean" ? options.contain : element.hasAttribute(ATTRIBUTE_FOCUSTRAP_CONTAIN),
+		noescape: typeof options.noescape === "boolean" ? options.noescape : element.hasAttribute(ATTRIBUTE_FOCUSTRAP_NOESCAPE)
+	};
+}
+function getState$2(element, options) {
+	return {
+		element,
+		disabled: false,
+		options: getOptions(element, options)
+	};
+}
+function onEscape(event) {
+	let element = findAncestor(event, SELECTOR$2);
+	let instance = instances.get(element);
+	let state = states$2.get(instance);
+	if (element == null || instance == null || state == null) return;
+	while (state.disabled) {
+		element = findAncestor(state.element.parentElement, SELECTOR$2);
+		instance = instances.get(element);
+		state = states$2.get(instance);
+		if (element == null || instance == null || state == null) return;
+		if (!state.disabled) break;
+	}
+	instance?.disable();
+}
+function onFocusIn(event) {
+	lastTarget = instances.get(findAncestor(event, SELECTOR$2)) == null ? void 0 : event.target;
+}
+function onKeydown$1(event) {
+	switch (event.key) {
+		case "Escape":
+			onEscape(event);
+			break;
+		case "Tab":
+			onTab(event);
+			break;
+		default: return;
+	}
+}
+function onPointerdown$2(event) {
+	const last = findAncestor(lastTarget, SELECTOR$2);
+	const next = findAncestor(event, SELECTOR$2);
+	if (last != null && next !== last) {
+		if (states$2.get(instances.get(last))?.options.contain ?? false) {
+			event.preventDefault();
+			lastTarget?.focus();
+		}
+	}
+	if (disabled.size === 0) return;
+	for (const focusTrap of disabled) {
+		const state = states$2.get(focusTrap);
+		if (state != null && state.element !== next) focusTrap.enable();
+	}
+}
+function onTab(event) {
+	const element = findAncestor(event, SELECTOR$2);
+	const instance = instances.get(element);
+	if (instance == null) return;
+	const dispatched = dispatch(element, "focus-trap");
+	setTimeout(() => {
+		if (dispatched.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();
+	instances.delete(element);
+}
+function setDisabled(focusTrap, state, value) {
+	state.disabled = value;
+	if (value) disabled.add(focusTrap);
+	else disabled.delete(focusTrap);
+}
+function tabToElement(instance, elements, index, modifier) {
+	const { length } = elements;
+	const next = clamp(index + modifier, 0, length - 1, true);
+	if (instance.disabled) {
+		if (index === length - 1 && next === 0 || index === 0 && next === length - 1) {
+			lastTarget = void 0;
+			instance.enable();
+		}
+		return;
+	}
+	const element = elements[next];
+	const elementFocusTrap = instances.get(element);
+	if (elementFocusTrap != null) elementFocusTrap.focus(modifier === -1);
+	else {
+		elements[next].focus();
+		lastTarget = elements[next];
+	}
+}
+function tabToTrap(instance, elements, element, index) {
+	if (instance.disabled) {
+		lastTarget = void 0;
+		instance.enable();
+	} else {
+		const next = elements.length === 0 ? element : elements.at(index ?? 0);
+		next.focus();
+		lastTarget = next;
+	}
+}
+const ATTRIBUTE_FOCUSTRAP = "oui-focus-trap";
+const ATTRIBUTE_FOCUSTRAP_CONTAIN = `${ATTRIBUTE_FOCUSTRAP}-contain`;
+const ATTRIBUTE_FOCUSTRAP_NOESCAPE = `${ATTRIBUTE_FOCUSTRAP}-noescape`;
+const EVENT_OPTIONS = {
+	capture: true,
+	passive: false
+};
+const MESSAGE$2 = "Element must be an HTMLElement or SVGElement";
+const SELECTOR$2 = `[${ATTRIBUTE_FOCUSTRAP}]`;
+const disabled = /* @__PURE__ */ new Set();
+const instances = /* @__PURE__ */ new WeakMap();
+const states$2 = /* @__PURE__ */ new WeakMap();
+let lastTarget;
+attributable(ATTRIBUTE_FOCUSTRAP, createFocusTrap, removeFocusTrap);
+on(document, "focusin", onFocusIn, EVENT_OPTIONS);
+on(document, "keydown", onKeydown$1, EVENT_OPTIONS);
+on(document, "mousedown", onPointerdown$2, EVENT_OPTIONS);
+on(document, "touchstart", onPointerdown$2, EVENT_OPTIONS);
+//#endregion
+//#region src/js/popover.ts
+var OuiPopover = class {
+	#state;
+	/**
+	* Is the popover open?
+	*/
+	get open() {
+		return this.#state.content.checkVisibility();
+	}
+	set open(value) {
+		if (value === true) this.show();
+		else if (value === false) this.hide();
+	}
+	constructor(state) {
+		this.#state = state;
+		initialize(state);
+		this.#state.floatable.update();
+	}
+	/**
+	* Closes the popover
+	*/
+	hide() {
+		this.#state.floatable.hide();
+	}
+	/**
+	* Opens the popover
+	*/
+	show() {
+		this.#state.floatable.show();
+	}
+};
+function addPopover(element) {
+	if (states$1.has(element) || element.hasAttribute("oui-floatable")) return;
+	const anchor = element.ownerDocument.querySelector(`[popovertarget="${element.id}"]`);
+	if (isHTMLOrSVGElement(anchor)) states$1.set(element, getState$1(anchor, element));
+}
+function destroyPopover(state) {
+	state.floatable.destroy();
+	state.focusTrap?.destroy();
+	for (const listener of state.listeners) listener();
+	state.anchor = void 0;
+	state.content = void 0;
+	state.floatable = void 0;
+	state.focusTrap = void 0;
+	state.listeners = void 0;
+	state.popover = void 0;
+}
+function getId(element, value) {
+	let { id } = element;
+	if (id == null || id.trim().length === 0) {
+		id = value == null ? `oui_popover_${++index$1}` : `${value}_toggle`;
+		element.id = id;
+	}
+	return id;
+}
+/**
+* Get the _OuiPopover_ for an element
+*
+* @param element Element to get _OuiPopover_ for
+* @returns _OuiPopover_ instance
+*/
+function getPopover(element) {
+	return states$1.get(element)?.popover;
+}
+function getState$1(anchor, content) {
+	const state = {
+		anchor,
+		content,
+		floatable: createEmbeddedFloatable(anchor, content, options$1),
+		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) {
+				ignoreFocus = false;
+				state.floatable?.update();
+				content.focus();
+			} else if (!ignoreFocus) anchor?.focus();
+			setAria(anchor, "expanded", expanded);
+			setAttribute(content, ATTRIBUTE_OPEN, expanded ? "" : void 0);
+		})],
+		popover: void 0
+	};
+	state.popover = new OuiPopover(state);
+	return state;
+}
+function initialize(state) {
+	const id = getId(state.content);
+	setAria(state.anchor, {
+		controls: id,
+		expanded: "false"
+	});
+	if ((getAria(state.content, "label") ?? getAria(state.content, "labelledby")) == null) setAria(state.content, "labelledby", getId(state.anchor, id));
+}
+function onPointerdown$1() {
+	ignoreFocus = true;
+}
+function removePopover(element) {
+	const state = states$1.get(element);
+	if (state == null) return;
+	destroyPopover(state);
+	states$1.delete(element);
+}
+const ATTRIBUTE$2 = "oui-popover";
+const ATTRIBUTE_OPEN = `${ATTRIBUTE$2}-open`;
+const options$1 = {
+	attribute: `${ATTRIBUTE$2}-position`,
+	position: "below-start",
+	reusable: false
+};
+const states$1 = /* @__PURE__ */ new WeakMap();
+let ignoreFocus = false;
+let index$1 = 0;
+on(document, "pointerdown", onPointerdown$1, { capture: true });
+attributable(ATTRIBUTE$2, addPopover, removePopover);
+//#endregion
+//#region src/js/sortable/sortable.embedded.ts
+var OuiSortable = class extends OuiDraggable {
+	constructor(element, options) {
+		super("sortable", "sort", ATTRIBUTE$1, element, {
+			container: {
+				attribute: ATTRIBUTE_CONTAINER,
+				map: CONTAINERS
+			},
+			direction: { attribute: ATTRIBUTE_DIRECTION },
+			drag: {
+				onBegin,
+				onCancel,
+				onEnd: onEnd$1,
+				onMove
+			},
+			input: options,
+			position: {
+				getOffset: getOffsetPosition,
+				getOriginal: getOriginalPosition
+			},
+			getDragged: getDragPlaceholder,
+			getOrigin: () => (getDraggableStates(element)?.sortable)?.origin
+		}, { connections: getAttribute(element, ATTRIBUTE_CONNECTIONS) });
+	}
+};
+function afterEnd(insert, from, events, elements, position, valid) {
+	elements.origin?.removeAttribute(ATTRIBUTE_ORIGIN);
+	from.state.origin = void 0;
+	resetPlaceholders();
+	if (!valid || events.some((event) => event?.defaultPrevented)) return;
+	if (insert !== "insert") {
+		elements.target.append(elements.origin);
+		return;
+	}
+	if (position == null) return;
+	const { height, top } = elements.target.getBoundingClientRect();
+	let insertion;
+	if (position.y < top + height / 2) insertion = "beforebegin";
+	else insertion = "afterend";
+	elements.target?.insertAdjacentElement(insertion, elements.origin);
+	document.body.removeAttribute(ATTRIBUTE_ACTIVE$1);
+}
+/**
+* Creates _(or retrieves)_ a _OuiSortable_ instance for an element
+*
+* @param element Element to make sortable
+* @returns _OuiSortable_ instance
+*/
+function createSortable(element, options) {
+	if (!isHTMLOrSVGElement(element)) throw new TypeError(MESSAGE$1);
+	return addSortable(element, options);
+}
+function getDragPlaceholder() {
+	placeholder.drag.default ??= createElement("div");
+	return placeholder.drag.custom ?? placeholder.drag.default;
+}
+function getOffsetPosition(_, item, element, position) {
+	const rectangle = element.getBoundingClientRect();
+	return {
+		x: item.state.horizontal ? 0 : position.x - rectangle.left,
+		y: item.state.vertical ? 0 : position.y - rectangle.top
+	};
+}
+function getOriginalPosition(_, __, position) {
+	return position;
+}
+function getPositionPlaceholder(item) {
+	placeholder.position ??= createElement("div");
+	setAttribute(placeholder.position, ATTRIBUTE_PLACEHOLDER_POSITION, "");
+	if (item.state.origin != null) setStyle(placeholder.position, "--placeholder-height", `${item.state.origin.getBoundingClientRect().height}px`);
+	return placeholder.position;
+}
+function onBegin(_, globals, item, element) {
+	item.state.origin = element;
+	setPlaceholder(globals, item, element);
+	setAttribute(element, ATTRIBUTE_ORIGIN, "");
+	setAttribute(document.body, ATTRIBUTE_ACTIVE$1, "");
+}
+function onCancel(_, item) {
+	item.state.origin?.removeAttribute(ATTRIBUTE_ORIGIN);
+	document.body.removeAttribute(ATTRIBUTE_ACTIVE$1);
+	resetPlaceholders();
+	item.state.origin = void 0;
+}
+function onEnd$1(event, globals, item, reset) {
+	const { origin } = item.state;
+	const position = getPosition$1(event) ?? {
+		x: 0,
+		y: 0
+	};
+	const target = getElementFromPosition(position)[0];
+	let element = findAncestor(target, SELECTOR_ITEM);
+	if (element?.hasAttribute(ATTRIBUTE_PLACEHOLDER_POSITION)) if (getAttribute(element, ATTRIBUTE_PLACEHOLDER_POSITION) === "after") element = element.previousElementSibling;
+	else element = element.nextElementSibling;
+	let insert = "insert";
+	let toInstance;
+	let toState;
+	if (element == null) {
+		element = findAncestor(target, SELECTOR$1);
+		toInstance = globals.instances.get(element)?.sortable;
+		toState = globals.states.get(element)?.sortable;
+		insert = element == null ? void 0 : element.children.length === 0 ? "append" : "prepend";
+	} else {
+		toInstance = globals.instances.get(element.parentElement)?.sortable;
+		toState = globals.states.get(element.parentElement)?.sortable;
+	}
+	const valid = insert != null && validatePosition(globals, item, {
+		instance: toInstance,
+		state: toState
+	}, position);
+	const options = {
+		detail: valid ? {
+			from: {
+				element: origin,
+				position: { ...globals.original }
+			},
+			to: {
+				element,
+				position: { ...position }
+			}
+		} : void 0,
+		bubbles: false,
+		cancelable: true
+	};
+	const dispatchedFrom = dispatch(item.instance.element, "sortable:end", options);
+	let dispatchedTo;
+	if (item.instance !== toInstance && toInstance != null) dispatchedTo = dispatch(toInstance.element, "sortable:end", options);
+	setTimeout(() => {
+		afterEnd(insert, item, [dispatchedFrom, dispatchedTo], {
+			origin,
+			target: element
+		}, position, valid);
+		reset();
+	});
+}
+function onMove(event, globals, item, position) {
+	const fromElement = item.state.origin;
+	const toElement = findAncestor(event, SELECTOR_ITEM);
+	let toInstance;
+	let toState;
+	if (toElement == null) {
+		const element = findAncestor(event, SELECTOR$1);
+		toInstance = globals.instances.get(element)?.sortable;
+		toState = globals.states.get(element)?.sortable;
+	} else {
+		toInstance = globals.instances.get(toElement.parentElement)?.sortable;
+		toState = globals.states.get(toElement.parentElement)?.sortable;
+	}
+	if (toInstance == null || !validatePosition(globals, item, {
+		instance: toInstance,
+		state: toState
+	}, position.original)) return;
+	const placeholder = getPositionPlaceholder(item);
+	if (toElement != null && toElement !== fromElement) {
+		const { height, top } = toElement.getBoundingClientRect();
+		let place;
+		if (position.calculated.y < top + height / 2) {
+			place = "before";
+			toElement.insertAdjacentElement("beforebegin", placeholder);
+		} else {
+			place = "after";
+			toElement.insertAdjacentElement("afterend", placeholder);
+		}
+		setAttribute(placeholder, ATTRIBUTE_PLACEHOLDER_POSITION, place);
+	} else placeholder.remove();
+	return {
+		from: {
+			element: fromElement,
+			position: { ...globals.original }
+		},
+		to: {
+			element: toElement,
+			position: { ...position.calculated }
+		}
+	};
+}
+function resetPlaceholders() {
+	placeholder.drag.custom?.remove();
+	placeholder.drag.default?.remove();
+	placeholder.position?.remove();
+	placeholder.drag.custom = void 0;
+}
+function setPlaceholder(state, item, origin) {
+	const element = getDragPlaceholder();
+	placeholder.drag.default.innerHTML = "";
+	updatePlaceholder(item, element);
+	const dispatched = dispatch(item.instance.element, "sortable:placeholder", { detail: {
+		origin,
+		parent: item.state.element,
+		placeholder: element,
+		create: (value) => {
+			if (!isHTMLOrSVGElement(value)) return;
+			const element = value;
+			placeholder.drag.custom = element;
+			updatePlaceholder(item, element);
+			state.element = {
+				rectangle: element.getBoundingClientRect(),
+				node: element
+			};
+		}
+	} });
+	setTimeout(() => {
+		if (!dispatched.defaultPrevented && placeholder.drag.custom == null) placeholder.drag.default?.append(element.cloneNode(true));
+		document.body.append(placeholder.drag.custom ?? placeholder.drag.default ?? "");
+	});
+}
+function updatePlaceholder(item, element) {
+	setAttribute(element, ATTRIBUTE_PLACEHOLDER_DRAG, "");
+	setStyle(element, "position", "fixed");
+	const state = getDraggableStates(item.state.element)?.sortable;
+	if (state == null) return;
+	setAttributes(element, {
+		[ATTRIBUTE_HORIZONTAL$1]: state.horizontal ? "" : void 0,
+		[ATTRIBUTE_VERTICAL]: state.vertical ? "" : void 0
+	});
+}
+function validatePosition(_, from, to, position) {
+	let valid = true;
+	const rectangle = from.state.origin?.getBoundingClientRect();
+	const fromState = getDraggableStates(from.state.element)?.sortable;
+	if (rectangle != null && !(fromState?.horizontal ?? true)) valid = position.x >= rectangle.left && position.x <= rectangle.right;
+	if (valid && rectangle != null && !(fromState?.vertical ?? true)) valid = position.y >= rectangle.top && position.y <= rectangle.bottom;
+	if (valid && from.state.connections != null) valid = to?.state.element.matches(from.state.connections) ?? true;
+	if (valid && to?.state.connections != null) valid = from.state.element.matches(to.state.connections);
+	return valid;
+}
+const ATTRIBUTE$1 = "oui-sortable";
+const ATTRIBUTE_ACTIVE$1 = `${ATTRIBUTE$1}-active`;
+const ATTRIBUTE_CONNECTIONS = `${ATTRIBUTE$1}-connections`;
+const ATTRIBUTE_CONTAINER = `${ATTRIBUTE$1}-container`;
+const ATTRIBUTE_DIRECTION = `${ATTRIBUTE$1}-direction`;
+const ATTRIBUTE_HORIZONTAL$1 = `${ATTRIBUTE$1}-horizontal`;
+const ATTRIBUTE_ORIGIN = `${ATTRIBUTE$1}-origin`;
+const ATTRIBUTE_PLACEHOLDER_DRAG = `${ATTRIBUTE$1}-placeholder-drag`;
+const ATTRIBUTE_PLACEHOLDER_POSITION = `${ATTRIBUTE$1}-placeholder-position`;
+const ATTRIBUTE_VERTICAL = `${ATTRIBUTE$1}-vertical`;
+const CONTAINERS = /* @__PURE__ */ new Map();
+const MESSAGE$1 = "The element must be an instance of HTMLElement or SVGElement";
+const SELECTOR$1 = `[${ATTRIBUTE$1}]`;
+const SELECTOR_ITEM = `[${ATTRIBUTE$1}] > *`;
+const bound = {
+	constructor: OuiSortable,
+	property: "sortable"
+};
+const placeholder = {
+	drag: {
+		custom: void 0,
+		default: void 0
+	},
+	position: void 0
+};
+const addSortable = addDraggable.bind(bound);
+attributable(ATTRIBUTE$1, addSortable, removeDraggable.bind(bound));
+//#endregion
+//#region node_modules/@oscarpalmer/atoms/dist/math.mjs
+/**
+* Round a number
+*
+* @param value Number to round
+* @param decimals Number of decimal places to round to _(defaults to `0`)_
+* @returns Rounded number, or `Number.NaN` if the value if unable to be rounded
+*/
+function round(value, decimals) {
+	return roundNumber(Math.round, value, decimals);
+}
+function roundNumber(callback, value, decimals) {
+	if (typeof value !== "number") return NaN;
+	if (typeof decimals !== "number" || decimals < 1) return callback(value);
+	const mod = 10 ** decimals;
+	return callback((value + Number.EPSILON) * mod) / mod;
+}
+//#endregion
+//#region src/js/splitter.ts
+const ATTRIBUTE_MAX = "max";
+const ATTRIBUTE_MIN = "min";
+const ATTRIBUTE_SIZE = "size";
+const ATTRIBUTE_TYPE = "type";
+var OuiSplitter = class {
+	element;
+	handle;
+	panels;
+	rectangle;
+	separator;
+	types;
+	values;
+	constructor(element, panels) {
+		this.element = element;
+		this.panels = panels;
+		if (isNullableOrWhitespace(element.id)) element.id = `oui_splitter_${++index}`;
+		this.values = getValues(element);
+		this.handle = createHandle();
+		this.rectangle = element.getBoundingClientRect();
+		this.separator = createSeparator(this);
+		this.separator.append(this.handle);
+		panels[0].insertAdjacentElement("afterend", this.separator);
+		this.updateOrientation();
+		this.updateValues();
+	}
+	updateConnections(add) {
+		const method = METHODS_CONNECT[add];
+		MAPPED_ELEMENTS[method](this.element, this);
+		MAPPED_ELEMENTS[method](this.handle, this);
+		MAPPED_ELEMENTS[method](this.separator, this);
+		if (this.types.auto) RESIZE_OBSERVER[METHODS_OBSERVE[add]](this.element);
+	}
+	updateOrientation() {
+		this.types = getTypes(this);
+		if (this.types.auto) RESIZE_OBSERVER.observe(this.element);
+		else RESIZE_OBSERVER.unobserve(this.element);
+		setAttribute(this.element, ATTRIBUTE_HORIZONTAL, this.types.horizontal ? "" : void 0);
+		setAriaOrientation(this);
+	}
+	updateValues() {
+		this.values = getValues(this.element);
+		requestAnimationFrame(() => {
+			setSize(this, this.values.now.current);
+			setAriaValue(this);
+		});
+	}
+};
+var OuiSplitterElement = class extends HTMLElement {
+	static observedAttributes = [
+		ATTRIBUTE_MAX,
+		ATTRIBUTE_MIN,
+		ATTRIBUTE_SIZE,
+		ATTRIBUTE_TYPE
+	];
+	#splitter;
+	/**
+	* Maximum size for the first panel
+	*/
+	get max() {
+		return this.#splitter.values.max;
+	}
+	/**
+	* Maximum size for the first panel
+	*/
+	set max(value) {
+		if (typeof value === "number") setAttribute(this, ATTRIBUTE_MAX, value.toString());
+	}
+	/**
+	* Minimum size for the first panel
+	*/
+	get min() {
+		return this.#splitter.values.min;
+	}
+	/**
+	* Minimum size for the first panel
+	*/
+	set min(value) {
+		if (typeof value === "number") setAttribute(this, ATTRIBUTE_MIN, value.toString());
+	}
+	/**
+	* Current size for the first panel
+	*/
+	get size() {
+		return this.#splitter.values.now.current;
+	}
+	/**
+	* Current size for the first panel
+	*/
+	set size(value) {
+		if (typeof value === "number") setAttribute(this, ATTRIBUTE_SIZE, value.toString());
+	}
+	/**
+	* Orientation of the splitter
+	*/
+	get type() {
+		return getAttribute(this, ATTRIBUTE_TYPE) ?? "vertical";
+	}
+	/**
+	* Orientation of the splitter
+	*/
+	set type(value) {
+		setAttribute(this, ATTRIBUTE_TYPE, value);
+	}
+	constructor() {
+		super();
+		const panels = [...this.children].filter((child) => child instanceof Element);
+		if (panels.length !== 2) throw new Error(MESSAGE);
+		this.#splitter = new OuiSplitter(this, panels);
+	}
+	connectedCallback() {
+		this.#splitter.updateConnections(1);
+	}
+	disconnectedCallback() {
+		this.#splitter.updateConnections(0);
+	}
+	attributeChangedCallback(name) {
+		switch (name) {
+			case ATTRIBUTE_MAX:
+			case ATTRIBUTE_MIN:
+			case ATTRIBUTE_SIZE:
+				this.#splitter.updateValues();
+				break;
+			case ATTRIBUTE_TYPE:
+				this.#splitter.updateOrientation();
+				break;
+			default: break;
+		}
+	}
+};
+function createHandle() {
+	const handle = document.createElement("span");
+	setAria(handle, "hidden", "true");
+	setAttribute(handle, ATTRIBUTE_HANDLE, "");
+	return handle;
+}
+function createSeparator(splitter) {
+	const separator = document.createElement("div");
+	separator.role = "separator";
+	separator.tabIndex = 0;
+	setAria(separator, {
+		controls: splitter.element.id,
+		label: "Resize panels"
+	});
+	setAttribute(separator, ATTRIBUTE_SEPARATOR, "");
+	return separator;
+}
+function getContained(min, value, max) {
+	return round(clamp(value, min, max), VALUE_DECIMALS);
+}
+function getSize(splitter, value) {
+	const { height, left, top, width } = splitter.rectangle;
+	const fraction = (value - (splitter.types.horizontal ? top : left)) / (splitter.types.horizontal ? height : width);
+	return getContained(splitter.values.min, fraction, splitter.values.max);
+}
+function getTypes(splitter, width, height) {
+	const type = getAttribute(splitter.element, "type");
+	if (type === "horizontal") return {
+		auto: false,
+		horizontal: true
+	};
+	if (type === "auto") return {
+		auto: true,
+		horizontal: (height ?? splitter.rectangle.height) > (width ?? splitter.rectangle.width)
+	};
+	return {
+		auto: false,
+		horizontal: false
+	};
+}
+function getValue(element, name, defaultValue) {
+	const value = getAttribute(element, name);
+	if (isNullableOrWhitespace(value)) return defaultValue;
+	const parsed = Number.parseFloat(value);
+	if (Number.isNaN(parsed)) return defaultValue;
+	if (parsed < 0) return defaultValue;
+	return parsed > 1 ? parsed / NAVIGATION_MAXIMUM_TOTAL : parsed;
+}
+function getValues(element) {
+	const values = {
+		max: getValue(element, ATTRIBUTE_MAX, NAVIGATION_MAXIMUM_PERCENTAGE),
+		min: getValue(element, ATTRIBUTE_MIN, NAVIGATION_MINIMUM_PERCENTAGE),
+		now: {
+			current: .5,
+			previous: .5
+		}
+	};
+	const value = getContained(values.min, getValue(element, ATTRIBUTE_SIZE, values.now.current), values.max);
+	values.now.current = value;
+	values.now.previous = value;
+	return values;
+}
+function onEnd(reset) {
+	if (splitter == null) return;
+	splitter.handle.removeAttribute(ATTRIBUTE_ACTIVE);
+	splitter.separator.removeAttribute(ATTRIBUTE_ACTIVE);
+	if (reset) setSize(splitter, splitter.values.now.previous);
+	else splitter.values.now.previous = splitter.values.now.current;
+	splitter = void 0;
+	STYLING_TOGGLER.remove();
+}
+function onKeydown(event) {
+	switch (true) {
+		case KEYS_ALL.has(event.key):
+			onNavigate(event);
+			break;
+		case event.key === "Escape":
+			onEnd(true);
+			break;
+		default: break;
+	}
+}
+function onNavigate(event) {
+	const splitter = MAPPED_ELEMENTS.get(findAncestor(event, "[oui-splitter-separator]"));
+	if (splitter == null) return;
+	const { types, values } = splitter;
+	if (KEYS_ABSOLUTE.has(event.key)) {
+		setSize(splitter, event.key === "End" ? values.max : values.min, true);
+		return;
+	}
+	if (types.horizontal && !KEYS_HORIZONTAL.has(event.key) || !(types.horizontal || KEYS_VERTICAL.has(event.key))) return;
+	const offset = KEYS_NEGATIVE.has(event.key) ? -1 : 1;
+	setSize(splitter, getContained(values.min, values.now.current + offset * NAVIGATION_MODIFIER, values.max), true);
+}
+function onObservation(entries) {
+	if (frame != null) cancelAnimationFrame(frame);
+	frame = requestAnimationFrame(() => {
+		for (const entry of entries) {
+			const splitter = MAPPED_ELEMENTS.get(entry.target);
+			if (splitter == null) return;
+			splitter.types = getTypes(splitter, entry.contentRect.width, entry.contentRect.height);
+			setAttribute(splitter.element, ATTRIBUTE_HORIZONTAL, splitter.types.horizontal ? "" : void 0);
+			setAriaOrientation(splitter);
+		}
+		frame = void 0;
+	});
+}
+function onPointerdown(event) {
+	if (supportsTouch.value ? event.type === "mousedown" : event.type === "touchstart") return;
+	splitter = MAPPED_ELEMENTS.get(findAncestor(event, SELECTOR_HANDLE));
+	if (splitter == null) return;
+	if (supportsTouch.value) event.preventDefault();
+	setAttribute(splitter.handle, ATTRIBUTE_ACTIVE, "");
+	setAttribute(splitter.separator, ATTRIBUTE_ACTIVE, "");
+	splitter.rectangle = splitter.element.getBoundingClientRect();
+	STYLING_TOGGLER.set();
+}
+function onPointermove$1(event) {
+	if (splitter == null) return;
+	const position = getPosition$1(event);
+	if (position != null) {
+		splitter.values.now.current = getSize(splitter, splitter.types.horizontal ? position.y : position.x);
+		setSize(splitter, splitter.values.now.current);
+	}
+}
+function onPointerup() {
+	if (splitter != null) onEnd(false);
+}
+function setAriaOrientation(splitter) {
+	setAria(splitter.separator, "orientation", splitter.types.horizontal ? "horizontal" : "vertical");
+}
+function setAriaValue(splitter) {
+	setAria(splitter.separator, {
+		valuemax: splitter.values.max,
+		valuemin: splitter.values.min,
+		valuenow: splitter.values.now.current
+	});
+}
+function setSize(splitter, size, previous) {
+	splitter.values.now.current = size;
+	if (previous) splitter.values.now.previous = size;
+	setStyle(splitter.element, "--oui-splitter-size", `${size}`);
+	setAriaValue(splitter);
+}
+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"]);
+const KEYS_VERTICAL = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowRight"]);
+const KEYS_ALL = /* @__PURE__ */ new Set([
+	...KEYS_ABSOLUTE,
+	...KEYS_HORIZONTAL,
+	...KEYS_VERTICAL
+]);
+const MAPPED_ELEMENTS = /* @__PURE__ */ new WeakMap();
+const MESSAGE = `<${TAGNAME}> must have exactly two panels.`;
+const METHODS_CONNECT = ["delete", "set"];
+const METHODS_OBSERVE = ["unobserve", "observe"];
+const NAVIGATION_MAXIMUM_PERCENTAGE = .9;
+const NAVIGATION_MAXIMUM_TOTAL = 100;
+const NAVIGATION_MINIMUM_PERCENTAGE = .1;
+const NAVIGATION_MODIFIER = .05;
+const RESIZE_OBSERVER = new ResizeObserver(onObservation);
+const SELECTOR_HANDLE = `[${ATTRIBUTE_HANDLE}]`;
+const STYLING_TOGGLER = toggleStyles(document.body, {
+	touchAction: "none",
+	userSelect: "none",
+	webkitUserSelect: "none"
+});
+const VALUE_DECIMALS = 6;
+let index = 0;
+let frame;
+let splitter;
+on(document, "keydown", onKeydown);
+on(document, "mousedown", onPointerdown);
+on(document, "pointermove", onPointermove$1);
+on(document, "pointerup", onPointerup);
+on(document, "touchcancel", onPointerup);
+on(document, "touchstart", onPointerdown, { passive: false });
+customElements.define(TAGNAME, OuiSplitterElement);
+//#endregion
+//#region src/js/tooltip.ts
+var OuiTooltip = class {
+	#state;
+	/**
+	* Is the tooltip open?
+	*/
+	get open() {
+		return this === activeTooltip && content.checkVisibility();
+	}
+	/**
+	* Open or close the tooltip
+	*/
+	set open(value) {
+		if (value === true) this.show();
+		else if (value === false) this.hide();
+	}
+	constructor(state) {
+		this.#state = state;
+		state.floatable.update();
+	}
+	/**
+	* Closes the tooltip
+	*/
+	hide() {
+		this.#state.floatable.hide();
+	}
+	/**
+	* Opens the tooltip
+	*/
+	show() {
+		this.#state.floatable.show();
+	}
+};
+function activate(event, focus) {
+	const targetAnchor = findAncestor(event, SELECTOR);
+	const targetContent = findAncestor(event, SELECTOR_CONTENT);
+	if (targetAnchor == null && targetContent == null) {
+		if (!focused) {
+			closeTooltip(true, activeState);
+			activeState = void 0;
+			activeTooltip = void 0;
+		}
+		return;
+	}
+	const state = states.get(targetAnchor ?? targetContent);
+	if (state == null || state.tooltip === activeTooltip) return;
+	const shouldDelay = activeTooltip == null;
+	closeTooltip(false, activeState);
+	activeState = state;
+	activeTooltip = state.tooltip;
+	focused = focus;
+	state.timer = setTimeout(() => {
+		content.innerHTML = "";
+		content.append(...state.elements);
+		state.floatable.show();
+		setTimeout(() => {
+			state.floatable.update();
+		});
+	}, shouldDelay ? delay : 0);
+}
+function addTooltip(element) {
+	if (!states.has(element)) createTooltip(element);
+}
+function closeTooltip(clear, state) {
+	if (state == null) return;
+	if (state.timer != null) clearTimeout(state.timer);
+	if (clear) content?.hidePopover();
+}
+function createTooltip(anchor) {
+	const elements = getElements(anchor);
+	if (elements == null) return;
+	states.set(anchor, getState(anchor, elements));
+}
+function destroyTooltip(state) {
+	clearTimeout(state.timer);
+	state.floatable.destroy();
+	state.anchor = void 0;
+	state.elements = void 0;
+	state.floatable = void 0;
+	state.tooltip = void 0;
+}
+function findElements(attribute) {
+	if (attribute == null) return;
+	const ids = attribute?.split(EXPRESSION_WHITESPACE) ?? [];
+	const elements = [];
+	for (const id of ids) {
+		if (isNullableOrWhitespace(id)) continue;
+		const element = document.querySelector(`#${id}`);
+		if (element != null) {
+			const cloned = element.cloneNode(true);
+			cloned.hidden = false;
+			elements.push(cloned);
+		}
+	}
+	return elements;
+}
+function getContent() {
+	const content = createElement("div", {
+		popover: "hint",
+		role: "tooltip",
+		tabIndex: -1
+	});
+	setAttribute(content, ATTRIBUTE_CONTENT, "");
+	return content;
+}
+function getElements(anchor) {
+	let elements = findElements(getAria(anchor, "labelledby"));
+	if (elements == null || elements.length === 0) elements = findElements(getAria(anchor, "describedby"));
+	if (elements != null && elements.length > 0) return elements;
+	let text = getAria(anchor, "label");
+	if (isNullableOrWhitespace(text)) text = getAria(anchor, "description");
+	if (isNullableOrWhitespace(text)) return;
+	const paragraph = document.createElement("p");
+	paragraph.textContent = text;
+	return [paragraph];
+}
+function getState(anchor, elements) {
+	const state = {
+		anchor,
+		elements,
+		floatable: createEmbeddedFloatable(anchor, content, options),
+		tooltip: null
+	};
+	state.tooltip = new OuiTooltip(state);
+	return state;
+}
+/**
+* Get the _OuiTooltip_ for an element
+*
+* @param element Element to get _OuiTooltip_ for
+* @returns _OuiTooltip_ instance
+*/
+function getTooltip(element) {
+	return states.get(element)?.tooltip;
+}
+function onFocusin(event) {
+	activate(event, true);
+}
+function onFocusout() {
+	if (activeTooltip == null) return;
+	if (focusTimer != null) clearTimeout(focusTimer);
+	focusTimer = setTimeout(() => {
+		if (activeTooltip == null || document.activeElement == null || findAncestor(document.activeElement, SELECTOR) != null) return;
+		closeTooltip(true, activeState);
+		activeState = void 0;
+		activeTooltip = void 0;
+	});
+}
+function onPointermove(event) {
+	activate(event, false);
+}
+function onToggle(event) {
+	setAttribute(content, ATTRIBUTE_CONTENT_OPEN, event.newState === "open" ? "" : void 0);
+}
+function removeTooltip(element) {
+	const state = states.get(element);
+	if (state == null) return;
+	destroyTooltip(state);
+	states.delete(element);
+}
+/**
+* Set the delay before showing the tooltip, in milliseconds
+*
+* _(Default delay is half a second, or 500 milliseconds)_
+* @param value Delay in milliseconds
+*/
+function setTooltipDelay(value) {
+	if (typeof value === "number" && !Number.isNaN(value) && value >= 0) delay = value;
+}
+const EXPRESSION_WHITESPACE = /\s+/;
+const ATTRIBUTE = "oui-tooltip";
+const ATTRIBUTE_CONTENT = `${ATTRIBUTE}-content`;
+const ATTRIBUTE_CONTENT_OPEN = `${ATTRIBUTE_CONTENT}-open`;
+const SELECTOR = `[${ATTRIBUTE}]`;
+const SELECTOR_CONTENT = `[${ATTRIBUTE_CONTENT}]`;
+const content = getContent();
+const states = /* @__PURE__ */ new WeakMap();
+const options = {
+	attribute: `${ATTRIBUTE}-position`,
+	position: "above",
+	reusable: true
+};
+let delay = 500;
+let focused = false;
+let activeState;
+let activeTooltip;
+let focusTimer;
+document.body.append(content);
+on(content, "toggle", onToggle);
+on(document, "focusin", onFocusin);
+on(document, "focusout", onFocusout);
+on(document, "pointermove", onPointermove);
+attributable(ATTRIBUTE, addTooltip, removeTooltip);
+//#endregion
+export { OuiComboboxElement, OuiSplitterElement, createFloatable, createFocusTrap, createMovable, createResizable as createOuiResizable, createSortable, getDialog, getPopover, getTooltip, setLocalizations, setTooltipDelay };