@oscarpalmer/oui 0.21.0 → 0.22.0

package/dist/js/index.mjs

@@ -1,7 +1,2537 @@
-import "./focus-trap/standalone.mjs";
-import "./movable.mjs";
-import { OuiPopoverElement } from "./popover.mjs";
-import "./sortable.mjs";
-import { OuiSplitterElement } from "./splitter.mjs";
-import { setTooltipDelay } from "./tooltip.mjs";
+//#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 HTMLElement) 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 HTMLElement);
+	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 HTMLElement);
+	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 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/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;
+}
+//#endregion
+//#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/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/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/get-value.mjs
+function getBoolean(value, defaultValue) {
+	return typeof value === "boolean" ? value : defaultValue ?? false;
+}
+function getStyleValue(element, property, computed) {
+	if (property.startsWith(CSS_VARIABLE_PREFIX$1)) return element.style.getPropertyValue(property);
+	const name = camelCase(property);
+	return computed ? getComputedStyle(element)[name] : element.style[name];
+}
+const CSS_VARIABLE_PREFIX$1 = "--";
+//#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_PREFIX}${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 `${EVENT_PREFIX}${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_PREFIX = "@";
+const EVENT_SUFFIX_ACTIVE = ":active";
+const EVENT_SUFFIX_PASSIVE = ":passive";
+const EVENT_TYPES = 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/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/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 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
+	};
+}
+/**
+* Get the X- and Y-coordinates from a pointer event
+*
+* @param event Pointer event
+* @returns X- and Y-coordinates
+*/
+function getPosition(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";
+//#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$1(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$1,
+	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/embedded.ts
+var FocusTrap = class {
+	disabled = false;
+	connected = true;
+	element;
+	embedded;
+	get contain() {
+		return this.element.hasAttribute(FOCUS_TRAP_CONTAIN);
+	}
+	get noescape() {
+		return this.element.hasAttribute(FOCUS_TRAP_NOESCAPE);
+	}
+	constructor(element, options) {
+		this.element = element;
+		this.embedded = options != null;
+		element.setAttribute("tabindex", "-1");
+		if (options != null) element.setAttribute(FOCUS_TRAP_SELECTOR, "");
+		if (options?.noescape) element.setAttribute(FOCUS_TRAP_NOESCAPE, "");
+	}
+	connect() {
+		setConnected(this, true);
+	}
+	destroy() {
+		this.element = void 0;
+	}
+	disable() {
+		if (!(this.disabled || this.noescape)) setDisabled(this, true);
+	}
+	disconnect() {
+		setConnected(this, false);
+	}
+	enable() {
+		if (this.disabled) setDisabled(this, false);
+	}
+	focus(last) {
+		tabToTrap(this, getFocusable(this.element), this.element, last ? -1 : 0);
+	}
+};
+function createFocusTrap(element, options) {
+	let focusTrap = FOCUSTRAPS_ALL.get(element);
+	if (focusTrap == null) {
+		focusTrap = new FocusTrap(element, options);
+		FOCUSTRAPS_ALL.set(element, focusTrap);
+	}
+	return focusTrap;
+}
+function onEscape(event) {
+	let element = findAncestor(event, ATTRIBUTE_SELECTOR);
+	let focusTrap = FOCUSTRAPS_ALL.get(element);
+	if (element == null || focusTrap == null) return;
+	while (focusTrap.disabled) {
+		element = findAncestor(focusTrap.element.parentElement, ATTRIBUTE_SELECTOR);
+		focusTrap = FOCUSTRAPS_ALL.get(element);
+		if (element == null || focusTrap == null) return;
+		if (!focusTrap.disabled) break;
+	}
+	focusTrap?.disable();
+}
+function onFocusIn(event) {
+	lastTarget = FOCUSTRAPS_ALL.get(findAncestor(event, ATTRIBUTE_SELECTOR)) == null ? void 0 : event.target;
+}
+function onKeydown$2(event) {
+	switch (event.key) {
+		case "Escape":
+			onEscape(event);
+			break;
+		case "Tab":
+			onTab(event);
+			break;
+		default: return;
+	}
+}
+function onPointerdown$2(event) {
+	const lastFocusTrap = findAncestor(lastTarget, ATTRIBUTE_SELECTOR);
+	const nextFocusTrap = findAncestor(event, ATTRIBUTE_SELECTOR);
+	if (lastFocusTrap != null && nextFocusTrap !== lastFocusTrap) {
+		if (FOCUSTRAPS_ALL.get(lastFocusTrap)?.contain ?? false) {
+			event.preventDefault();
+			lastTarget?.focus();
+		}
+	}
+	if (FOCUSTRAPS_DISABLED.size === 0) return;
+	for (const focusTrap of FOCUSTRAPS_DISABLED) if (focusTrap.element !== nextFocusTrap) focusTrap.enable();
+}
+function onTab(event) {
+	const element = findAncestor(event, ATTRIBUTE_SELECTOR);
+	const focusTrap = FOCUSTRAPS_ALL.get(element);
+	if (focusTrap == null) return;
+	if (!focusTrap.disabled) event.preventDefault();
+	const elements = getFocusable(element);
+	const index = elements.indexOf(event.target);
+	if (index === -1 || elements.length === 0) tabToTrap(focusTrap, elements, element);
+	else tabToElement(focusTrap, elements, index, event.shiftKey ? -1 : 1);
+}
+function setConnected(focusTrap, value) {
+	if (!focusTrap.embedded || focusTrap.connected === value) return;
+	focusTrap.connected = value;
+}
+function setDisabled(focusTrap, value) {
+	focusTrap.disabled = value;
+	if (value) FOCUSTRAPS_DISABLED.add(focusTrap);
+	else FOCUSTRAPS_DISABLED.delete(focusTrap);
+}
+function tabToElement(focusTrap, elements, index, modifier) {
+	const { length } = elements;
+	const next = clamp(index + modifier, 0, length - 1, true);
+	if (focusTrap.disabled) {
+		if (index === length - 1 && next === 0 || index === 0 && next === length - 1) {
+			lastTarget = void 0;
+			focusTrap.enable();
+		}
+		return;
+	}
+	const element = elements[next];
+	const elementFocusTrap = FOCUSTRAPS_ALL.get(element);
+	if (elementFocusTrap != null) elementFocusTrap.focus(modifier === -1);
+	else {
+		elements[next].focus();
+		lastTarget = elements[next];
+	}
+}
+function tabToTrap(focusTrap, elements, element, index) {
+	if (focusTrap.disabled) {
+		lastTarget = void 0;
+		focusTrap.enable();
+	} else {
+		const next = elements.length === 0 ? element : elements.at(index ?? 0);
+		next.focus();
+		lastTarget = next;
+	}
+}
+const FOCUS_TRAP_SELECTOR = "oui-focus-trap";
+const ATTRIBUTE_SELECTOR = `[${FOCUS_TRAP_SELECTOR}]`;
+const EVENT_OPTIONS = {
+	capture: true,
+	passive: false
+};
+const FOCUS_TRAP_CONTAIN = `${FOCUS_TRAP_SELECTOR}-contain`;
+const FOCUS_TRAP_NOESCAPE = `${FOCUS_TRAP_SELECTOR}-noescape`;
+const FOCUSTRAPS_ALL = /* @__PURE__ */ new WeakMap();
+const FOCUSTRAPS_DISABLED = /* @__PURE__ */ new Set();
+let lastTarget;
+on(document, "focusin", onFocusIn, EVENT_OPTIONS);
+on(document, "keydown", onKeydown$2, EVENT_OPTIONS);
+on(document, "mousedown", onPointerdown$2, EVENT_OPTIONS);
+on(document, "touchstart", onPointerdown$2, EVENT_OPTIONS);
+//#endregion
+//#region src/js/focus-trap/standalone.ts
+function removeFocusTraps(element) {
+	FOCUSTRAPS_ALL.get(element)?.destroy();
+	FOCUSTRAPS_ALL.delete(element);
+}
+attributable(FOCUS_TRAP_SELECTOR, createFocusTrap, removeFocusTraps);
+new Set([
+	Node.ELEMENT_NODE,
+	Node.TEXT_NODE,
+	Node.PROCESSING_INSTRUCTION_NODE,
+	Node.COMMENT_NODE,
+	Node.DOCUMENT_TYPE_NODE
+]);
+//#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/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, isBoolean, 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 = new Set([
+	"checked",
+	"open",
+	"value"
+]);
+document.createElement("form");
+//#endregion
+//#region node_modules/@oscarpalmer/toretto/dist/internal/element-value.mjs
+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) ? key : kebabCase(key);
+}
+function setElementValue(element, first, second, third, callback, style) {
+	if (!isHTMLOrSVGElement(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 (!isHTMLOrSVGElement(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, isBoolean, json) {
+	if (isBoolean ? value == null : isNullableOrWhitespace(value)) remove.call(element, key);
+	else if (!ignoreSetAttribute(element, key)) set.call(element, key, json ? JSON.stringify(value) : getString(value));
+}
+const CSS_VARIABLE_PREFIX = "--";
+//#endregion
+//#region node_modules/@oscarpalmer/toretto/dist/style.mjs
+/**
+* Get styles from an element
+*
+* @param element Element to get the styles from
+* @param properties Styles to get
+* @param computed Get the computed styles? _(defaults to `false`)_
+* @returns Style values
+*/
+function getStyles(element, properties, computed) {
+	const styles = {};
+	if (!(isHTMLOrSVGElement(element) && Array.isArray(properties))) return styles;
+	const { length } = properties;
+	for (let index = 0; index < length; index += 1) {
+		const property = properties[index];
+		if (typeof property === "string") styles[property] = getStyleValue(element, property, computed === true);
+	}
+	return styles;
+}
+/**
+* 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(property, style) {
+		if (property.startsWith(VARIABLE_PREFIX)) this.style.setProperty(property, getString(style));
+		else this.style[property] = getString(style);
+	}, function(property) {
+		if (property.startsWith(VARIABLE_PREFIX)) this.style.removeProperty(property);
+		else this.style[property] = "";
+		if (this.getAttribute(ATTRIBUTE_STYLE) === "") this.removeAttribute(ATTRIBUTE_STYLE);
+	}, false, false);
+}
+const ATTRIBUTE_STYLE = "style";
+const VARIABLE_PREFIX = "--";
+//#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 Draggable = class {
+	prefix;
+	element;
+	options;
+	container;
+	hasHandles;
+	horizontal = true;
+	vertical = true;
+	constructor(prefix, element, options) {
+		this.prefix = prefix;
+		this.element = element;
+		this.options = options;
+		setContainer(this, options);
+		setDirection(this, options);
+	}
+	destroy() {
+		unsetContainer(this, this.options);
+		this.container = void 0;
+		this.element = void 0;
+		this.options = void 0;
+	}
+};
+function addDraggable(element) {
+	let instances = state.instances.get(element);
+	if (instances == null) {
+		instances = {};
+		state.instances.set(element, instances);
+	}
+	instances[this.property] ??= new this.constructor(element);
+}
+function getHandle(event, isMovable) {
+	return findAncestor(event, isMovable ? SELECTOR_MOVABLE_HANDLE : SELECTOR_SORTABLE_HANDLE);
+}
+function getNextPosition(draggable, position) {
+	let x = state.original?.x ?? 0;
+	let y = state.original?.y ?? 0;
+	if (draggable.horizontal) {
+		x = position.x - (state.offset?.x ?? 0);
+		if (state.container != null && state.element != null) x = clamp(x, state.container.left, state.container.right - state.element.rectangle.width);
+	}
+	if (draggable.vertical) {
+		y = position.y - (state.offset?.y ?? 0);
+		if (state.container != null && state.element != null) y = clamp(y, state.container.top, state.container.bottom - state.element.rectangle.height);
+	}
+	return {
+		x,
+		y
+	};
+}
+function onKeydown$1(event) {
+	if (current == null || event.key !== KEY_ESCAPE) return;
+	const { origin } = current;
+	current.options.drag.onCancel?.(state, current);
+	current.element.dispatchEvent(new CustomEvent(`${current.prefix}:cancel`, { detail: { element: origin } }));
+	reset();
+}
+function onPointerdown$1(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 = state.instances.get(container);
+	if (instances == null) return;
+	const isMovable = container.hasAttribute(ATTRIBUTE_MOVABLE);
+	const instance = isMovable ? instances.movable : instances.sortable;
+	if (instance == 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;
+	instance.hasHandles ??= element.querySelector(SELECTOR_SORTABLE_HANDLE) != null;
+	if (instance.hasHandles) handle = getHandle(event, isMovable);
+	if (handle == null) return;
+	const { dragged } = instance;
+	const rectangle = dragged.getBoundingClientRect();
+	const position = getPosition(event) ?? {
+		x: 0,
+		y: 0
+	};
+	current = instance;
+	state.container = instance.container?.getBoundingClientRect();
+	state.element = {
+		rectangle,
+		node: dragged
+	};
+	state.offset = instance.options.position.getOffset(state, instance, element, position);
+	state.original = instance.options.position.getOriginal(state, instance, position);
+	const begin = new CustomEvent(`${instance.prefix}:begin`, {
+		detail: {
+			element,
+			position: { ...state.original }
+		},
+		cancelable: true
+	});
+	instance.element.dispatchEvent(begin);
+	setTimeout(() => {
+		if (begin.defaultPrevented) {
+			current?.options.drag.onCancel(state, instance);
+			reset();
+			return;
+		}
+		const next = getNextPosition(instance, position);
+		dragged.style.position = "fixed";
+		dragged.style.inset = `${next.y}px auto auto ${next.x}px`;
+		instance.options.drag.onBegin(event, state, instance, element, handle, next);
+		styleToggler.set();
+	});
+}
+function onPointermove$1(event) {
+	if (current == null) return;
+	const position = getPosition(event);
+	if (position == null) return;
+	const next = getNextPosition(current, position);
+	if (state.element != null) state.element.node.style.inset = `${next.y}px auto auto ${next.x}px`;
+	const detail = current.options.drag.onMove(event, state, current, {
+		calculated: next,
+		original: position
+	});
+	current.element.dispatchEvent(new CustomEvent(`${current.prefix}:move`, { detail }));
+}
+function onPointerup$1(event) {
+	current?.options.drag.onEnd?.(event, state, current, reset);
+}
+function removeDraggable(element) {
+	const { property } = this;
+	const instances = state.instances.get(element);
+	if (instances == null || instances[property] == null) return;
+	instances[property]?.destroy();
+	instances[property] = void 0;
+	if (instances[properties[property]] == null) state.instances.delete(element);
+}
+function reset() {
+	current = void 0;
+	state.container = void 0;
+	state.element = void 0;
+	state.offset = void 0;
+	state.original = void 0;
+	styleToggler.remove();
+}
+function setContainer(draggable, options) {
+	const selector = draggable.element.getAttribute(options.container.attribute);
+	if (typeof selector !== "string") return;
+	draggable.container = globals.has(selector) ? draggable.element.ownerDocument.body : document.querySelector(selector) ?? void 0;
+	if (draggable.container == null) return;
+	const set = options.container.map.get(draggable.container);
+	if (set == null) options.container.map.set(draggable.container, new Set([draggable]));
+	else set.add(draggable);
+	options.container.onInitialize?.(draggable);
+}
+function setDirection(draggable, options) {
+	const direction = draggable.element.getAttribute(options.direction.attribute);
+	if (horizontals.has(direction)) draggable.vertical = false;
+	else if (verticals.has(direction)) draggable.horizontal = false;
+	options.direction.onAfter?.(draggable);
+}
+function unsetContainer(draggable, options) {
+	const { container } = draggable;
+	if (container == null) return;
+	const set = options.container.map.get(container);
+	let empty = false;
+	if (set != null) {
+		set.delete(draggable);
+		if (set.size === 0) {
+			empty = true;
+			options.container.map.delete(container);
+		}
+	}
+	options.container.onDestroy?.(draggable, container, empty);
+}
+const ATTRIBUTE_MOVABLE = "oui-movable";
+const ATTRIBUTE_SORTABLE = "oui-sortable";
+const KEY_ESCAPE = "Escape";
+const SELECTOR$4 = `[${ATTRIBUTE_MOVABLE}], [${ATTRIBUTE_SORTABLE}]`;
+const SELECTOR_MOVABLE_HANDLE = `[${ATTRIBUTE_MOVABLE}-handle]`;
+const SELECTOR_SORTABLE_HANDLE = `[${ATTRIBUTE_SORTABLE}-handle]`;
+const SELECTOR_SORTABLE_ITEM = `[${ATTRIBUTE_SORTABLE}] > *`;
+const globals = new Set([
+	"body",
+	"document",
+	"window"
+]);
+const horizontals = new Set(["horizontal", "x"]);
+const properties = {
+	movable: "sortable",
+	sortable: "movable"
+};
+const state = {
+	container: void 0,
+	element: void 0,
+	instances: /* @__PURE__ */ new WeakMap(),
+	offset: void 0,
+	original: void 0
+};
+const styleToggler = toggleStyles(document.body, {
+	touchAction: "none",
+	userSelect: "none",
+	webkitUserSelect: "none"
+});
+const verticals = new Set(["vertical", "y"]);
+let current;
+on(document, "keydown", onKeydown$1);
+on(document, "mousedown", onPointerdown$1);
+on(document, "pointermove", onPointermove$1);
+on(document, "pointerup", onPointerup$1);
+on(document, "touchcancel", onPointerup$1, { passive: false });
+on(document, "touchstart", onPointerdown$1, { passive: false });
+//#endregion
+//#region src/js/movable.ts
+var Movable = class extends Draggable {
+	inset;
+	moved = false;
+	offset;
+	position;
+	get dragged() {
+		return this.element;
+	}
+	get origin() {
+		return this.element;
+	}
+	constructor(element) {
+		super("move", element, {
+			container: {
+				attribute: ATTRIBUTE_CONTAINER$1,
+				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
+			},
+			position: {
+				getOffset: getOffsetPosition$1,
+				getOriginal: getOriginalPosition$1
+			}
+		});
+		this.hasHandles = element.querySelector(SELECTOR_HANDLE$1) != null;
+		this.inset = element.style.inset;
+		this.position = element.style.position;
+	}
+	destroy() {
+		super.destroy();
+		MOVED.delete(this);
+		this.element.style.inset = this.inset;
+		this.element.style.position = this.position;
+	}
+};
+function afterDirection(draggable) {
+	const container = draggable.container?.getBoundingClientRect();
+	if (container != null) setOffset(draggable, container);
+}
+function destroyContainer(_, container, empty) {
+	if (empty) resizer.unobserve(container);
+}
+function getOffsetPosition$1(state, _, __, position) {
+	return {
+		x: position.x - (state.element?.rectangle.left ?? 0),
+		y: position.y - (state.element?.rectangle.top ?? 0)
+	};
+}
+function getOriginalPosition$1(state) {
+	return {
+		x: state.element?.rectangle.left ?? 0,
+		y: state.element?.rectangle.top ?? 0
+	};
+}
+function initializeContainer(draggable) {
+	resizer.observe(draggable.container);
+}
+function onBegin$1() {}
+function onCancel$1(state, draggable) {
+	const { element, inset, moved, position } = draggable;
+	const { x, y } = state.original ?? {
+		x: 0,
+		y: 0
+	};
+	if (moved) element.style.inset = `${y}px auto auto ${x}px`;
+	else {
+		element.style.position = position;
+		element.style.inset = inset;
+	}
+}
+function onEnd$2(event, state, draggable, reset) {
+	const movable = draggable;
+	if (!movable.moved) {
+		movable.moved = true;
+		if (movable.container != null) MOVED.add(movable);
+	}
+	const container = movable.container?.getBoundingClientRect();
+	if (container != null) setOffset(movable, container);
+	const end = new CustomEvent(EVENT_END$1, {
+		detail: {
+			from: { ...state.original },
+			to: getPosition(event)
+		},
+		cancelable: true
+	});
+	movable.element.dispatchEvent(end);
+	setTimeout(() => {
+		if (end.defaultPrevented) onCancel$1(state, draggable);
+		reset();
+	});
+}
+function onMove$1(_, state, __, position) {
+	return {
+		from: { ...state.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) {
+	if (!movable.moved || movable.container == null) return;
+	const container = movable.container.getBoundingClientRect();
+	const x = container.left + (movable.offset?.x ?? 0);
+	const y = container.top + (movable.offset?.y ?? 0);
+	movable.element.style.inset = `${y}px auto auto ${x}px`;
+}
+function setOffset(movable, container) {
+	movable.offset = {};
+	const element = movable.element.getBoundingClientRect();
+	movable.offset.y = element.top - container.top;
+	movable.offset.x = element.left - container.left;
+}
+const ATTRIBUTE$2 = "oui-movable";
+const ATTRIBUTE_CONTAINER$1 = `${ATTRIBUTE$2}-container`;
+const ATTRIBUTE_DIRECTION$1 = `${ATTRIBUTE$2}-direction`;
+const CONTAINERS$1 = /* @__PURE__ */ new Map();
+const EVENT_END$1 = "move:end";
+const MOVED = /* @__PURE__ */ new Set();
+const SELECTOR_HANDLE$1 = `[${ATTRIBUTE$2}-handle]`;
+const bound$1 = {
+	constructor: Movable,
+	property: "movable"
+};
+const resizer = new ResizeObserver(onResize);
+attributable(ATTRIBUTE$2, addDraggable.bind(bound$1), removeDraggable.bind(bound$1));
+on(document, "scroll", onScroll);
+//#endregion
+//#region src/js/internal/floatable.ts
+var Floatable = class {
+	options;
+	active = false;
+	disabled = false;
+	frame;
+	ignoreFocus = false;
+	constructor(options) {
+		this.options = options;
+		initialize(this);
+	}
+	destroy() {
+		stop(this);
+		const state = getState();
+		state?.active.delete(this);
+		state?.mapped.delete(this.options.anchor);
+		state?.mapped.delete(this.options.content);
+		this.options.anchor = void 0;
+		this.options.content = void 0;
+	}
+	disable() {
+		if (this.disabled) return;
+		this.disabled = true;
+		stop(this);
+		getState()?.active.delete(this);
+	}
+	enable() {
+		if (!this.disabled) return;
+		this.disabled = false;
+		initialize(this);
+	}
+	toggle(active, ignoreFocus) {
+		if (this.disabled || this.active === active) return;
+		const state = getState();
+		if (state == null) return;
+		this.ignoreFocus = !active && (ignoreFocus ?? false);
+		stop(this);
+		if (active) state.active.add(this);
+		else state.active.delete(this);
+		if (this.options.interactive) if (active) state.order.push(this);
+		else {
+			const index = state.order.indexOf(this);
+			if (index > -1) state.order.splice(index, 1);
+		}
+		if (active) activate(this);
+		else deactivate(this);
+	}
+};
+function activate(floatable) {
+	floatable.active = true;
+	document.body.append(floatable.options.content);
+	floatable.options.content.hidden = false;
+	setPosition(floatable);
+}
+function closeAbove(element) {
+	const state = getState();
+	if (state == null) return;
+	const index = state.order.findIndex((floatable) => floatable.options.anchor === element || floatable.options.content === element);
+	if (index === -1 || index === state.order.length - 1) return;
+	while (index < state.order.length - 1) state.order.pop()?.toggle(false, true);
+}
+function closeAll() {
+	const state = getState();
+	const floatables = [...state?.active ?? []];
+	state?.active.clear();
+	for (const floatable of floatables) floatable.toggle(false, true);
+}
+function closeNonInteractive(state) {
+	for (const floatable of state.active) if (!floatable.options.interactive) floatable.toggle(false);
+}
+function deactivate(floatable) {
+	floatable.active = false;
+	if (!floatable.options.reusable) {
+		floatable.options.content.hidden = true;
+		floatable.options.anchor.insertAdjacentElement(INSERT_AFTEREND, floatable.options.content);
+	}
+	floatable.options.onAfter?.(false);
+}
+function getAnchorName() {
+	index$2 += 1;
+	return `--oui-floatable-anchor-${index$2}`;
+}
+function getState() {
+	return window._oscarpalmer_oui_floatable;
+}
+function initialize(floatable) {
+	const { anchor, content, interactive } = floatable.options;
+	if (interactive) {
+		anchor.setAttribute(ATTRIBUTE_ANCHOR, "");
+		content.setAttribute(ATTRIBUTE_CONTENT$1, "");
+	}
+	const anchorName = getAnchorName();
+	anchor.style.anchorName = anchorName;
+	content.style.position = "absolute";
+	content.style.positionAnchor = anchorName;
+	content.style.positionTry = "normal flip-start";
+	const state = getState();
+	state?.mapped.set(anchor, floatable);
+	state?.mapped.set(content, floatable);
+}
+function isDisabled(element) {
+	return element.disabled || element.readOnly || element.getAttribute("aria-disabled") === "true";
+}
+function onClick$1(event) {
+	const related = findAncestor(event, SELECTOR_ALL);
+	if (!(related instanceof HTMLElement)) closeAll();
+	else if (related.hasAttribute(ATTRIBUTE_CONTENT$1)) closeAbove(related);
+	else if (!isDisabled(related)) toggle$1(related);
+}
+function onKeyDown(event) {
+	if (event.key !== "Escape") return;
+	const state = getState();
+	if (state == null || state.active.size === 0) return;
+	closeNonInteractive(state);
+	const related = findAncestor(event, SELECTOR_CONTENT$2);
+	if (!(related instanceof HTMLElement)) return;
+	closeAbove(related);
+	const floatable = state.mapped.get(related);
+	if (floatable != null) floatable.toggle(false);
+}
+function setPosition(floatable) {
+	let position = floatable.options.anchor.getAttribute(floatable.options.positionAttribute) ?? floatable.options.defaultPosition;
+	if (AREAS[position] == null) position = floatable.options.defaultPosition;
+	const area = AREAS[position];
+	floatable.options.content.style.positionArea = area;
+	floatable.options.content.setAttribute(ATTRIBUTE_POSITION$1, POSITIONS[area]);
+	floatable.options.onAfter?.(true);
+}
+function stop(floatable) {
+	if (floatable.frame != null) cancelAnimationFrame(floatable.frame);
+	floatable.frame = void 0;
+}
+function toggle$1(anchor) {
+	const floatable = getState()?.mapped.get(anchor);
+	if (floatable == null) {
+		closeAll();
+		return;
+	}
+	const active = Boolean(floatable.active);
+	const content = findAncestor(floatable.options.anchor, SELECTOR_CONTENT$2);
+	if (content == null) closeAll();
+	else closeAbove(content);
+	floatable.toggle(!active);
+}
+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_ANCHOR = "oui-floatable-anchor";
+const ATTRIBUTE_CONTENT$1 = "oui-floatable-content";
+const ATTRIBUTE_POSITION$1 = "oui-position";
+const INSERT_AFTEREND = "afterend";
+const POSITIONS = Object.fromEntries(Object.entries(AREAS).map(([position, area]) => [area, position]));
+const SELECTOR_ALL = `[${ATTRIBUTE_ANCHOR}], [${ATTRIBUTE_CONTENT$1}]`;
+const SELECTOR_CONTENT$2 = `[${ATTRIBUTE_CONTENT$1}]`;
+let index$2 = 0;
+if (window._oscarpalmer_oui_floatable == null) {
+	Object.defineProperty(window, "_oscarpalmer_oui_floatable", {
+		enumerable: false,
+		value: {
+			active: /* @__PURE__ */ new Set(),
+			mapped: /* @__PURE__ */ new Map(),
+			order: []
+		},
+		writable: false
+	});
+	on(document, "keydown", (event) => {
+		onKeyDown(event);
+	});
+	on(document, "click", (event) => {
+		onClick$1(event);
+	});
+}
+//#endregion
+//#region src/js/popover.ts
+let index$1 = 0;
+var OuiPopoverElement = class extends HTMLElement {
+	#floatable;
+	#focusTrap;
+	constructor() {
+		super();
+		const content = this.querySelector(SELECTOR_CONTENT$1);
+		const toggle = this.querySelector(SELECTOR_TOGGLE);
+		if (!(content instanceof HTMLElement)) throw new Error("A oui-popover must have a direct child element with the [oui-popover-content]-attribute");
+		if (!(toggle instanceof HTMLButtonElement)) throw new Error("A oui-popover must have a direct child element with the [oui-popover-toggle]-attribute and be a button");
+		content.hidden = true;
+		content.setAttribute("role", "dialog");
+		content.setAttribute("aria-modal", "true");
+		if (isNullableOrWhitespace(content.id)) content.setAttribute("id", `${ATTRIBUTE_ID_PREFIX}_${++index$1}`);
+		toggle.setAttribute("aria-controls", content.id);
+		toggle.setAttribute("aria-haspopup", "dialog");
+		this.#floatable = new Floatable({
+			content,
+			anchor: toggle,
+			defaultPosition: "below-start",
+			interactive: true,
+			positionAttribute: "position",
+			reusable: false,
+			onAfter: (active) => {
+				if (active) focus(content);
+				else if (!this.#floatable.ignoreFocus) toggle.focus();
+			}
+		});
+		this.#focusTrap = createFocusTrap(content, { noescape: true });
+		POPOVERS.set(toggle, this.#floatable);
+		POPOVERS.set(content, this.#floatable);
+	}
+	close() {
+		this.hidePopover();
+	}
+	connectedCallback() {
+		this.#floatable.enable();
+		this.#focusTrap.connect();
+	}
+	disconnectedCallback() {
+		this.#floatable.disable();
+		this.#focusTrap.disconnect();
+	}
+	hidePopover() {
+		if (this.#floatable.active && this.isConnected) this.#floatable.toggle(false);
+	}
+	open() {
+		this.showPopover();
+	}
+	showPopover() {
+		if (!this.#floatable.active && this.isConnected) this.#floatable.toggle(true);
+	}
+	toggle() {
+		this.togglePopover();
+	}
+	togglePopover(options) {
+		if (typeof options === "boolean") {
+			if (options === true) this.showPopover();
+			else this.hidePopover();
+			return options;
+		}
+		if (this.#floatable.active) {
+			this.hidePopover();
+			return false;
+		}
+		this.showPopover();
+		return true;
+	}
+};
+function focus(content) {
+	let target = getFocusable(content)[0];
+	if (!(target instanceof HTMLElement)) target = content;
+	requestAnimationFrame(() => {
+		target.focus();
+	});
+}
+const ATTRIBUTE_ID_PREFIX = "oui_popover_content_";
+const POPOVERS = /* @__PURE__ */ new Map();
+const SELECTOR$3 = "oui-popover";
+const SELECTOR_CONTENT$1 = `:scope > [${SELECTOR$3}-content]`;
+const SELECTOR_TOGGLE = `:scope > [${SELECTOR$3}-toggle]`;
+customElements.define(SELECTOR$3, OuiPopoverElement);
+//#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/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(target, properties, dispatch) {
+	if (!isHTMLOrSVGElement(target) || !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, properties, attributes, styles) {
+	if (typeof tag !== "string") throw new TypeError(MESSAGE);
+	const element = document.createElement(tag);
+	if (properties != null) setProperties(element, properties);
+	if (attributes != null) setAttributes(element, attributes);
+	if (styles != null) setStyles(element, styles);
+	return element;
+}
+const MESSAGE = "Tag name must be a string";
+//#endregion
+//#region src/js/sortable.ts
+var Sortable = class extends Draggable {
+	connections;
+	origin;
+	get dragged() {
+		return getDragPlaceholder();
+	}
+	constructor(element) {
+		super("sort", element, {
+			container: {
+				attribute: ATTRIBUTE_CONTAINER,
+				map: CONTAINERS
+			},
+			direction: { attribute: ATTRIBUTE_DIRECTION },
+			drag: {
+				onBegin,
+				onCancel,
+				onEnd: onEnd$1,
+				onMove
+			},
+			position: {
+				getOffset: getOffsetPosition,
+				getOriginal: getOriginalPosition
+			}
+		});
+		this.connections = this.element.getAttribute(ATTRIBUTE_CONNECTIONS);
+	}
+};
+function afterEnd(insert, from, events, elements, position, valid) {
+	elements.origin?.removeAttribute(ATTRIBUTE_ORIGIN);
+	from.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 = INSERT_BEFORE;
+	else insertion = INSERT_AFTER;
+	elements.target?.insertAdjacentElement(insertion, elements.origin);
+	document.body.removeAttribute(ATTRIBUTE_ACTIVE$1);
+}
+function getDragPlaceholder() {
+	placeholder.drag.default ??= createElement("div");
+	return placeholder.drag.custom ?? placeholder.drag.default;
+}
+function getOffsetPosition(_, draggable, element, position) {
+	const rectangle = element.getBoundingClientRect();
+	return {
+		x: draggable.horizontal ? 0 : position.x - rectangle.left,
+		y: draggable.vertical ? 0 : position.y - rectangle.top
+	};
+}
+function getOriginalPosition(_, __, position) {
+	return position;
+}
+function getPositionPlaceholder(sortable) {
+	placeholder.position ??= createElement("div");
+	placeholder.position.setAttribute(ATTRIBUTE_PLACEHOLDER_POSITION, "");
+	if (sortable.origin != null) placeholder.position.style.setProperty("--placeholder-height", `${sortable.origin.getBoundingClientRect().height}px`);
+	return placeholder.position;
+}
+function onBegin(_, state, draggable, element) {
+	const sortable = draggable;
+	sortable.origin = element;
+	setPlaceholder(state, sortable, element);
+	element.setAttribute(ATTRIBUTE_ORIGIN, "");
+	document.body.setAttribute(ATTRIBUTE_ACTIVE$1, "");
+}
+function onCancel(_, draggable) {
+	const sortable = draggable;
+	const { origin } = sortable;
+	origin?.removeAttribute(ATTRIBUTE_ORIGIN);
+	document.body.removeAttribute(ATTRIBUTE_ACTIVE$1);
+	resetPlaceholders();
+	sortable.origin = void 0;
+}
+function onEnd$1(event, state, draggable, reset) {
+	const from = draggable;
+	const { origin } = from;
+	const position = getPosition(event) ?? {
+		x: 0,
+		y: 0
+	};
+	const target = getElementFromPosition(position)[0];
+	let element = findAncestor(target, SELECTOR_ITEM);
+	if (element?.hasAttribute(ATTRIBUTE_PLACEHOLDER_POSITION)) if (element.getAttribute(ATTRIBUTE_PLACEHOLDER_POSITION) === "after") element = element.previousElementSibling;
+	else element = element.nextElementSibling;
+	let insert = "insert";
+	let to;
+	if (element == null) {
+		element = findAncestor(target, SELECTOR$2);
+		to = state.instances.get(element)?.sortable;
+		insert = element == null ? void 0 : element.children.length === 0 ? "append" : "prepend";
+	} else to = state.instances.get(element.parentElement)?.sortable;
+	const valid = insert != null && validatePosition(state, from, to, position);
+	const options = {
+		detail: valid ? {
+			from: {
+				element: origin,
+				position: { ...state.original }
+			},
+			to: {
+				element,
+				position: { ...position }
+			}
+		} : void 0,
+		bubbles: false,
+		cancelable: true
+	};
+	const fromEvent = new CustomEvent(EVENT_END, options);
+	const toEvent = new CustomEvent(EVENT_END, options);
+	from.element.dispatchEvent(fromEvent);
+	if (from !== to) to?.element.dispatchEvent(toEvent);
+	setTimeout(() => {
+		afterEnd(insert, from, [fromEvent, toEvent], {
+			origin,
+			target: element
+		}, position, valid);
+		reset();
+	});
+}
+function onMove(event, state, draggable, position) {
+	const from = draggable;
+	const fromElement = from.origin;
+	const toElement = findAncestor(event, SELECTOR_ITEM);
+	let to;
+	if (toElement == null) to = state.instances.get(findAncestor(event, SELECTOR$2))?.sortable;
+	else to = state.instances.get(toElement.parentElement)?.sortable;
+	if (!validatePosition(state, from, to, position.original)) return;
+	const placeholder = getPositionPlaceholder(from);
+	if (toElement != null && toElement !== fromElement) {
+		const { height, top } = toElement.getBoundingClientRect();
+		let place;
+		if (position.calculated.y < top + height / 2) {
+			place = "before";
+			toElement.insertAdjacentElement(INSERT_BEFORE, placeholder);
+		} else {
+			place = "after";
+			toElement.insertAdjacentElement(INSERT_AFTER, placeholder);
+		}
+		placeholder.setAttribute(ATTRIBUTE_PLACEHOLDER_POSITION, place);
+	} else placeholder.remove();
+	return {
+		from: {
+			element: fromElement,
+			position: { ...state.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, sortable, origin) {
+	const element = getDragPlaceholder();
+	placeholder.drag.default.innerHTML = "";
+	updatePlaceholder(sortable, element);
+	const event = new CustomEvent(EVENT_PLACEHOLDER, {
+		cancelable: true,
+		detail: {
+			origin,
+			parent: sortable.element,
+			placeholder: element,
+			create: (value) => {
+				if (!(value instanceof HTMLElement)) return;
+				placeholder.drag.custom = value;
+				updatePlaceholder(sortable, value);
+				state.element = {
+					rectangle: value.getBoundingClientRect(),
+					node: value
+				};
+			}
+		}
+	});
+	sortable.element.dispatchEvent(event);
+	setTimeout(() => {
+		if (!event.defaultPrevented && placeholder.drag.custom == null) placeholder.drag.default?.append(element.cloneNode(true));
+		document.body.append(placeholder.drag.custom ?? placeholder.drag.default ?? "");
+	});
+}
+function updatePlaceholder(sortable, element) {
+	element.style.position = "fixed";
+	element.setAttribute(ATTRIBUTE_PLACEHOLDER_DRAG, "");
+	if (sortable.horizontal) element.setAttribute(ATTRIBUTE_HORIZONTAL$1, "");
+	else element.removeAttribute(ATTRIBUTE_HORIZONTAL$1);
+	if (sortable.vertical) element.setAttribute(ATTRIBUTE_VERTICAL, "");
+	else element.removeAttribute(ATTRIBUTE_VERTICAL);
+}
+function validatePosition(_, from, to, position) {
+	let valid = true;
+	const rectangle = from.origin?.getBoundingClientRect();
+	if (rectangle != null && !from.horizontal) valid = position.x >= rectangle.left && position.x <= rectangle.right;
+	if (valid && rectangle != null && !from.vertical) valid = position.y >= rectangle.top && position.y <= rectangle.bottom;
+	if (valid && from.connections != null) valid = to?.element.matches(from.connections) ?? true;
+	if (valid && to?.connections != null) valid = from.element.matches(to.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 EVENT_END = "sort:end";
+const EVENT_PLACEHOLDER = "sort:placeholder";
+const INSERT_AFTER = "afterend";
+const INSERT_BEFORE = "beforebegin";
+const SELECTOR$2 = `[${ATTRIBUTE$1}]`;
+const SELECTOR_ITEM = `[${ATTRIBUTE$1}] > *`;
+const bound = {
+	constructor: Sortable,
+	property: "sortable"
+};
+const placeholder = {
+	drag: {
+		custom: void 0,
+		default: void 0
+	},
+	position: void 0
+};
+attributable(ATTRIBUTE$1, addDraggable.bind(bound), 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
+var OuiSplitterElement = class extends HTMLElement {
+	static observedAttributes = [
+		"max",
+		"min",
+		"size",
+		"type"
+	];
+	#splitter;
+	get max() {
+		return this.#splitter.values.max;
+	}
+	set max(value) {
+		this.setAttribute("max", String(value));
+	}
+	get min() {
+		return this.#splitter.values.min;
+	}
+	set min(value) {
+		this.setAttribute("min", String(value));
+	}
+	get size() {
+		return this.#splitter.values.now.current;
+	}
+	set size(value) {
+		this.setAttribute("size", String(value));
+	}
+	get type() {
+		return this.getAttribute("type") ?? "vertical";
+	}
+	set type(value) {
+		this.setAttribute("type", value);
+	}
+	constructor() {
+		super();
+		const panels = [...this.children].filter((child) => child instanceof HTMLElement);
+		if (panels.length !== 2) throw new Error(`${SELECTOR$1} must have exactly two panels.`);
+		this.#splitter = new Splitter(this, panels);
+	}
+	connectedCallback() {
+		this.#splitter.updateConnections(1);
+	}
+	disconnectedCallback() {
+		this.#splitter.updateConnections(0);
+	}
+	attributeChangedCallback(name) {
+		switch (name) {
+			case "max":
+			case "min":
+			case "size":
+				this.#splitter.updateValues();
+				break;
+			case "type":
+				this.#splitter.updateOrientation();
+				break;
+			default: break;
+		}
+	}
+};
+let index = 0;
+var Splitter = 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);
+		if (this.types.horizontal) this.element.setAttribute(ATTRIBUTE_HORIZONTAL, "");
+		else this.element.removeAttribute(ATTRIBUTE_HORIZONTAL);
+		setAriaOrientation(this);
+	}
+	updateValues() {
+		this.values = getValues(this.element);
+		requestAnimationFrame(() => {
+			setSize(this, this.values.now.current);
+			setAriaValue(this);
+		});
+	}
+};
+function createHandle() {
+	const handle = document.createElement("span");
+	handle.setAttribute("aria-hidden", "true");
+	handle.setAttribute(ATTRIBUTE_HANDLE, "");
+	return handle;
+}
+function createSeparator(splitter) {
+	const separator = document.createElement("div");
+	separator.role = "separator";
+	separator.tabIndex = 0;
+	separator.setAttribute("aria-controls", splitter.element.id);
+	separator.setAttribute("aria-label", "Resize panels");
+	separator.setAttribute(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 = splitter.element.getAttribute("type")?.trim() ?? "";
+	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 = element.getAttribute(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, "max", NAVIGATION_MAXIMUM_PERCENTAGE),
+		min: getValue(element, "min", NAVIGATION_MINIMUM_PERCENTAGE),
+		now: {
+			current: .5,
+			previous: .5
+		}
+	};
+	const value = getContained(values.min, getValue(element, "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);
+			if (splitter.types.horizontal) splitter.element.setAttribute(ATTRIBUTE_HORIZONTAL, "");
+			else splitter.element.removeAttribute(ATTRIBUTE_HORIZONTAL);
+			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();
+	splitter.handle.setAttribute(ATTRIBUTE_ACTIVE, "");
+	splitter.separator.setAttribute(ATTRIBUTE_ACTIVE, "");
+	splitter.rectangle = splitter.element.getBoundingClientRect();
+	STYLING_TOGGLER.set();
+}
+function onPointermove(event) {
+	if (splitter == null) return;
+	const position = getPosition(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) {
+	splitter.separator.setAttribute("aria-orientation", splitter.types.horizontal ? "horizontal" : "vertical");
+}
+function setAriaValue(splitter) {
+	splitter.separator.setAttribute("aria-valuemax", String(splitter.values.max));
+	splitter.separator.setAttribute("aria-valuemin", String(splitter.values.min));
+	splitter.separator.setAttribute("aria-valuenow", String(splitter.values.now.current));
+}
+function setSize(splitter, size, previous) {
+	splitter.values.now.current = size;
+	if (previous) splitter.values.now.previous = size;
+	splitter.element.style.setProperty("--oui-splitter-size", `${size}`);
+	setAriaValue(splitter);
+}
+const SELECTOR$1 = "oui-splitter";
+const ATTRIBUTE_ACTIVE = `${SELECTOR$1}-active`;
+const ATTRIBUTE_HANDLE = `${SELECTOR$1}-handle`;
+const ATTRIBUTE_HORIZONTAL = `${SELECTOR$1}-horizontal`;
+const ATTRIBUTE_SEPARATOR = `${SELECTOR$1}-separator`;
+const KEYS_ABSOLUTE = new Set(["End", "Home"]);
+const KEYS_HORIZONTAL = new Set(["ArrowDown", "ArrowUp"]);
+const KEYS_NEGATIVE = new Set(["ArrowLeft", "ArrowUp"]);
+const KEYS_VERTICAL = new Set(["ArrowLeft", "ArrowRight"]);
+const KEYS_ALL = new Set([
+	...KEYS_ABSOLUTE,
+	...KEYS_HORIZONTAL,
+	...KEYS_VERTICAL
+]);
+const MAPPED_ELEMENTS = /* @__PURE__ */ new WeakMap();
+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 frame;
+let splitter;
+customElements.define(SELECTOR$1, OuiSplitterElement);
+on(document, "keydown", onKeydown);
+on(document, "mousedown", onPointerdown);
+on(document, "pointermove", onPointermove);
+on(document, "pointerup", onPointerup);
+on(document, "touchcancel", onPointerup, { passive: false });
+on(document, "touchstart", onPointerdown, { passive: false });
+//#endregion
+//#region src/js/tooltip.ts
+var Tooltip = class {
+	elements;
+	floatable;
+	constructor(anchor, elements) {
+		const content = getContent();
+		this.elements = elements;
+		this.floatable = new Floatable({
+			anchor,
+			content,
+			defaultPosition: "above",
+			interactive: false,
+			positionAttribute: ATTRIBUTE_POSITION,
+			reusable: true,
+			onAfter: (active) => {
+				if (active) {
+					content.innerHTML = "";
+					content.append(...this.elements);
+				}
+				if (active || TOOLTIPS_ACTIVE.size > 0) return;
+				content.removeAttribute(ATTRIBUTE_CONTENT_ACTIVE);
+				contentTimer = setTimeout(() => {
+					content.innerHTML = "";
+					content.remove();
+				}, delayClose);
+			}
+		});
+	}
+	destroy() {
+		const { floatable } = this;
+		TOOLTIPS_ACTIVE.delete(this);
+		TOOLTIPS_PENDING.delete(this);
+		TOOLTIPS_ALL.delete(floatable.options.anchor);
+		TOOLTIPS_ALL.delete(floatable.options.content);
+		floatable.destroy();
+		this.elements = [];
+		this.floatable = void 0;
+	}
+};
+function addTooltip(anchor) {
+	if (TOOLTIPS_ALL.has(anchor)) return;
+	const elements = getElements(anchor);
+	if (elements != null) TOOLTIPS_ALL.set(anchor, new Tooltip(anchor, elements));
+}
+function closeTooltips(current) {
+	const pending = [...TOOLTIPS_PENDING];
+	for (const item of pending) {
+		if (item === current) continue;
+		TOOLTIPS_PENDING.delete(item);
+	}
+	const active = [...TOOLTIPS_ACTIVE];
+	for (const item of active) {
+		if (item === current) continue;
+		TOOLTIPS_ACTIVE.delete(item);
+		item.floatable.toggle(false);
+	}
+}
+function getElements(anchor) {
+	let elements = findElements(anchor.getAttribute(ARIA_LABELLEDBY));
+	if (elements.length > 0) return elements.map((element) => element.cloneNode(true));
+	elements = findElements(anchor.getAttribute(ARIA_DESCRIBEDBY));
+	if (elements.length > 0) return elements.map((element) => element.cloneNode(true));
+	let content = anchor.getAttribute(ARIA_LABEL);
+	if (isNullableOrWhitespace(content)) content = anchor.getAttribute(ARIA_DESCRIPTION);
+	if (isNullableOrWhitespace(content)) return;
+	const paragraph = document.createElement("p");
+	paragraph.textContent = content;
+	return [paragraph];
+}
+function findElements(attribute) {
+	const ids = attribute?.split(EXPRESSION_WHITESPACE) ?? [];
+	const elements = [];
+	for (const id of ids) {
+		if (isNullableOrWhitespace(id)) continue;
+		const element = document.querySelector(`#${id}`);
+		if (element instanceof HTMLElement) {
+			const cloned = element.cloneNode(true);
+			cloned.hidden = false;
+			elements.push(cloned);
+		}
+	}
+	return elements;
+}
+function getContent() {
+	if (contentElement != null) return contentElement;
+	contentElement = document.createElement("div");
+	contentElement.setAttribute(ATTRIBUTE_CONTENT, "");
+	contentElement.role = "tooltip";
+	contentElement.tabIndex = -1;
+	return contentElement;
+}
+function onActivate(event) {
+	onToggle(event, true);
+}
+function onChange() {
+	if (TOOLTIPS_ACTIVE.size === 0) return;
+}
+function onClick(event) {
+	if (findAncestor(event, SELECTOR_CONTENT) != null) event.stopPropagation();
+}
+function onDeactivate(event) {
+	onToggle(event, false);
+}
+function onToggle(event, activate) {
+	if (toggle != null) cancelAnimationFrame(toggle);
+	if (findAncestor(event, SELECTOR_CONTENT) != null) {
+		if (contentTimer != null) clearTimeout(contentTimer);
+		return;
+	}
+	toggle = requestAnimationFrame(() => {
+		toggle = void 0;
+		const element = findAncestor(event, SELECTOR);
+		const tooltip = TOOLTIPS_ALL.get(element);
+		if (TOOLTIPS_ACTIVE.size > 0 || TOOLTIPS_PENDING.size > 0) closeTooltips(tooltip);
+		if (tooltip == null || tooltip.floatable.active === activate) return;
+		if (activate) {
+			clearTimeout(contentTimer);
+			TOOLTIPS_PENDING.add(tooltip);
+			contentTimer = setTimeout(() => {
+				TOOLTIPS_ACTIVE.add(tooltip);
+				TOOLTIPS_PENDING.delete(tooltip);
+				tooltip.floatable.options.content.style.positionAnchor = tooltip.floatable.options.anchor.style.anchorName;
+				tooltip.floatable.toggle(true);
+				setTimeout(() => {
+					tooltip.floatable.options.content.setAttribute(ATTRIBUTE_CONTENT_ACTIVE, "");
+				});
+			}, delayOpen);
+			return;
+		}
+		TOOLTIPS_ACTIVE.delete(tooltip);
+		tooltip.floatable.toggle(false);
+	});
+}
+function removeTooltip(element) {
+	if (!element.hasAttribute(ATTRIBUTE_CONTENT)) TOOLTIPS_ALL.get(element)?.destroy();
+}
+function setTooltipDelay(open, close) {
+	delayClose = typeof close === "number" && close >= 0 ? close : delayClose;
+	delayOpen = typeof open === "number" && open >= 0 ? open : delayOpen;
+}
+const ARIA_DESCRIBEDBY = "aria-describedby";
+const ARIA_DESCRIPTION = "aria-description";
+const ARIA_LABEL = "aria-label";
+const ARIA_LABELLEDBY = "aria-labelledby";
+const ATTRIBUTE = "oui-tooltip";
+const ATTRIBUTE_CONTENT = `${ATTRIBUTE}-content`;
+const ATTRIBUTE_CONTENT_ACTIVE = `${ATTRIBUTE_CONTENT}-active`;
+const ATTRIBUTE_POSITION = `${ATTRIBUTE}-position`;
+const SELECTOR = `[${ATTRIBUTE}]`;
+const SELECTOR_CONTENT = `[${ATTRIBUTE_CONTENT}]`;
+const EXPRESSION_WHITESPACE = /\s+/;
+const TOOLTIPS_ACTIVE = /* @__PURE__ */ new Set();
+const TOOLTIPS_ALL = /* @__PURE__ */ new WeakMap();
+const TOOLTIPS_PENDING = /* @__PURE__ */ new Set();
+let contentElement;
+let contentTimer;
+let delayClose = 250;
+let delayOpen = 500;
+let toggle;
+attributable(ATTRIBUTE, addTooltip, removeTooltip);
+on(document, "click", onClick, { capture: true });
+on(document, "focusin", onActivate);
+on(document, "focusout", onDeactivate);
+on(document, "mousemove", onActivate);
+on(window, "resize", onChange);
+on(document, "scroll", onChange);
+on(document, "touchstart", onActivate);
+//#endregion
 export { OuiPopoverElement, OuiSplitterElement, setTooltipDelay };