@oscarpalmer/oui 0.19.0 → 0.21.0

package/dist/css/a11y.css

@@ -7,7 +7,6 @@
   width: 1px !important;
   height: 1px !important;
   padding: 0 !important;
-  clip: rect(1px, 1px 1px, 1px) !important;
   clip-path: inset(50%) !important;
   overflow: hidden !important;
   border: 0 !important;

package/dist/css/form.css

@@ -711,7 +711,6 @@
   width: 1px !important;
   height: 1px !important;
   padding: 0 !important;
-  clip: rect(1px, 1px 1px, 1px) !important;
   clip-path: inset(50%) !important;
   overflow: hidden !important;
   border: 0 !important;

package/dist/css/popover.css

@@ -1,12 +1,34 @@
 
 :where([oui-popover-content]) {
   box-shadow: inset 0 1px 0 0 transparent, 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 2px -0.5px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.05), 0 4px 8px -2px rgba(0, 0, 0, 0.05), 0 8px 16px -4px rgba(0, 0, 0, 0.05), 0 16px 32px -8px rgba(0, 0, 0, 0.05), 0 32px 64px -16px rgba(0, 0, 0, 0.05), 0 64px 128px -32px rgba(0, 0, 0, 0.05);
+  --margin-left: 0;
+  --margin-top: 0;
+  margin: var(--margin-top, 0) 0 0 var(--margin-left, 0);
+  pointer-events: all !important;
+}
+:where([oui-popover-content])[position^=above], :where([oui-popover-content])[position^=top] {
+  --margin-top: -0.5rem;
+}
+:where([oui-popover-content])[position^=below], :where([oui-popover-content])[position^=bottom] {
+  --margin-top: 0.5rem;
+}
+:where([oui-popover-content])[position^=end], :where([oui-popover-content])[position^=right] {
+  --margin-left: 0.5rem;
+}
+:where([oui-popover-content])[position^=left], :where([oui-popover-content])[position^=start] {
+  --margin-left: -0.5rem;
+}
+:where([oui-popover-content]) {
   padding: 1rem;
+  overscroll-behavior: contain;
   background-color: var(--oui-absolute);
   border-radius: 0.5rem;
 }
 :where([oui-popover-content]):focus {
   outline: none;
 }
+:where([oui-popover-content]) * {
+  overscroll-behavior: contain;
+}
 
 

package/dist/css/reset.css

@@ -56,7 +56,7 @@
   -moz-tab-size: 4;
   -o-tab-size: 4;
   tab-size: 4;
-  word-break: break-word;
+  overflow-wrap: break-word;
 }
 
 :where(body) {
@@ -105,9 +105,9 @@ input[type=reset i],
 input[type=submit i],
 summary) {
   /** Correct the inability to style clickable types in iOS [HR][RS][SE] */
-  -webkit-appearance: button;
-  -moz-appearance: button;
-  appearance: button;
+  -webkit-appearance: auto;
+  -moz-appearance: auto;
+  appearance: auto;
   /** Ditto */
   cursor: pointer;
 }
@@ -174,7 +174,7 @@ summary) {
 }
 
 :where(small, sub, sup) {
-  font-size: 0.875rem;
+  font-size: 0.875em;
 }
 
 :where(sub, sup) {
@@ -277,9 +277,9 @@ summary) {
 
 ::file-selector-button {
   /** Correct the inability to style upload buttons in iOS and Safari [RS][SE] */
-  -webkit-appearance: button;
-  -moz-appearance: button;
-  appearance: button;
+  -webkit-appearance: auto;
+  -moz-appearance: auto;
+  appearance: auto;
   color: inherit;
   font: inherit;
   line-height: 1.25;

package/dist/css/table.css

@@ -6,10 +6,10 @@
 :where(.oui-table_wrapper) {
   max-height: 32em;
   overflow: auto;
+  overscroll-behavior: contain;
   border: 1px solid var(--oui-gray-3);
   border-radius: 0.25em;
   position: relative;
-  overscroll-behavior-y: none;
 }
 :where(.oui-table caption) {
   height: 2rem;

package/dist/css/tooltip.css

@@ -27,6 +27,24 @@ var)) {
 
 :where([oui-tooltip-content]) {
   box-shadow: inset 0 1px 0 0 transparent, 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 2px -0.5px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.05), 0 4px 8px -2px rgba(0, 0, 0, 0.05), 0 8px 16px -4px rgba(0, 0, 0, 0.05), 0 16px 32px -8px rgba(0, 0, 0, 0.05), 0 32px 64px -16px rgba(0, 0, 0, 0.05), 0 64px 128px -32px rgba(0, 0, 0, 0.05);
+  --margin-left: 0;
+  --margin-top: 0;
+  margin: var(--margin-top, 0) 0 0 var(--margin-left, 0);
+  pointer-events: all !important;
+}
+:where([oui-tooltip-content])[position^=above], :where([oui-tooltip-content])[position^=top] {
+  --margin-top: -0.5rem;
+}
+:where([oui-tooltip-content])[position^=below], :where([oui-tooltip-content])[position^=bottom] {
+  --margin-top: 0.5rem;
+}
+:where([oui-tooltip-content])[position^=end], :where([oui-tooltip-content])[position^=right] {
+  --margin-left: 0.5rem;
+}
+:where([oui-tooltip-content])[position^=left], :where([oui-tooltip-content])[position^=start] {
+  --margin-left: -0.5rem;
+}
+:where([oui-tooltip-content]) {
   max-width: 48ch;
   padding: 0.75em 1em;
   opacity: 0;
@@ -36,6 +54,31 @@ var)) {
   transition: opacity 0.125s ease-in-out;
   transition-delay: 0s;
 }
+:where([oui-tooltip-content])::after {
+  content: "";
+  opacity: 0;
+  position: absolute;
+}
+:where([oui-tooltip-content])[position^=above]::after, :where([oui-tooltip-content])[position^=below]::after, :where([oui-tooltip-content])[position^=bottom]::after, :where([oui-tooltip-content])[position^=top]::after {
+  width: 100%;
+  height: 0.5rem;
+}
+:where([oui-tooltip-content])[position^=above]::after, :where([oui-tooltip-content])[position^=top]::after {
+  inset: 100% 0 0;
+}
+:where([oui-tooltip-content])[position^=below]::after, :where([oui-tooltip-content])[position^=bottom]::after {
+  inset: -5rem 0 0;
+}
+:where([oui-tooltip-content])[position^=end]::after, :where([oui-tooltip-content])[position^=left]::after, :where([oui-tooltip-content])[position^=right]::after, :where([oui-tooltip-content])[position^=start]::after {
+  width: 0.5rem;
+  height: 100%;
+}
+:where([oui-tooltip-content])[position^=end]::after, :where([oui-tooltip-content])[position^=right]::after {
+  inset: 0 0 0 -0.5rem;
+}
+:where([oui-tooltip-content])[position^=left]::after, :where([oui-tooltip-content])[position^=start]::after {
+  inset: 0 0 0 100%;
+}
 
 :where([oui-tooltip-content][oui-tooltip-content-active]) {
   opacity: 1;

package/dist/js/focus-trap/embedded.d.mts

@@ -0,0 +1,26 @@
+//#region src/js/focus-trap/embedded.d.ts
+declare class FocusTrap {
+  disabled: boolean;
+  connected: boolean;
+  element: HTMLElement;
+  embedded: boolean;
+  get contain(): boolean;
+  get noescape(): boolean;
+  constructor(element: HTMLElement, options?: Options);
+  connect(): void;
+  destroy(): void;
+  disable(): void;
+  disconnect(): void;
+  enable(): void;
+  focus(last: boolean): void;
+}
+type Options = {
+  noescape: boolean;
+};
+declare function createFocusTrap(element: HTMLElement, options?: Options): FocusTrap;
+declare const FOCUS_TRAP_SELECTOR = "oui-focus-trap";
+declare const FOCUS_TRAP_CONTAIN = "oui-focus-trap-contain";
+declare const FOCUS_TRAP_NOESCAPE = "oui-focus-trap-noescape";
+declare const FOCUSTRAPS_ALL: WeakMap<HTMLElement, FocusTrap>;
+//#endregion
+export { FOCUSTRAPS_ALL, FOCUS_TRAP_CONTAIN, FOCUS_TRAP_NOESCAPE, FOCUS_TRAP_SELECTOR, FocusTrap, createFocusTrap };

package/dist/js/focus-trap/{embedded.js → embedded.mjs}

@@ -1,7 +1,8 @@
+import { clamp } from "@oscarpalmer/atoms/number";
 import { on } from "@oscarpalmer/toretto/event";
 import { findAncestor } from "@oscarpalmer/toretto/find";
-import { clamp } from "@oscarpalmer/atoms/number";
 import { getFocusable } from "@oscarpalmer/toretto/focusable";
+//#region src/js/focus-trap/embedded.ts
 var FocusTrap = class {
 	disabled = false;
 	connected = true;
@@ -48,7 +49,7 @@ function createFocusTrap(element, options) {
 	return focusTrap;
 }
 function onEscape(event) {
-	let element = findAncestor(event.target, ATTRIBUTE_SELECTOR);
+	let element = findAncestor(event, ATTRIBUTE_SELECTOR);
 	let focusTrap = FOCUSTRAPS_ALL.get(element);
 	if (element == null || focusTrap == null) return;
 	while (focusTrap.disabled) {
@@ -60,7 +61,7 @@ function onEscape(event) {
 	focusTrap?.disable();
 }
 function onFocusIn(event) {
-	lastTarget = FOCUSTRAPS_ALL.get(findAncestor(event.target, ATTRIBUTE_SELECTOR)) == null ? void 0 : event.target;
+	lastTarget = FOCUSTRAPS_ALL.get(findAncestor(event, ATTRIBUTE_SELECTOR)) == null ? void 0 : event.target;
 }
 function onKeydown(event) {
 	switch (event.key) {
@@ -75,7 +76,7 @@ function onKeydown(event) {
 }
 function onPointerdown(event) {
 	const lastFocusTrap = findAncestor(lastTarget, ATTRIBUTE_SELECTOR);
-	const nextFocusTrap = findAncestor(event.target, ATTRIBUTE_SELECTOR);
+	const nextFocusTrap = findAncestor(event, ATTRIBUTE_SELECTOR);
 	if (lastFocusTrap != null && nextFocusTrap !== lastFocusTrap) {
 		if (FOCUSTRAPS_ALL.get(lastFocusTrap)?.contain ?? false) {
 			event.preventDefault();
@@ -86,7 +87,7 @@ function onPointerdown(event) {
 	for (const focusTrap of FOCUSTRAPS_DISABLED) if (focusTrap.element !== nextFocusTrap) focusTrap.enable();
 }
 function onTab(event) {
-	const element = findAncestor(event.target, ATTRIBUTE_SELECTOR);
+	const element = findAncestor(event, ATTRIBUTE_SELECTOR);
 	const focusTrap = FOCUSTRAPS_ALL.get(element);
 	if (focusTrap == null) return;
 	if (!focusTrap.disabled) event.preventDefault();
@@ -133,18 +134,19 @@ function tabToTrap(focusTrap, elements, element, index) {
 	}
 }
 const FOCUS_TRAP_SELECTOR = "oui-focus-trap";
-var ATTRIBUTE_SELECTOR = `[${FOCUS_TRAP_SELECTOR}]`;
-var EVENT_OPTIONS = {
+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();
-var FOCUSTRAPS_DISABLED = /* @__PURE__ */ new Set();
-var lastTarget;
+const FOCUSTRAPS_DISABLED = /* @__PURE__ */ new Set();
+let lastTarget;
 on(document, "focusin", onFocusIn, EVENT_OPTIONS);
 on(document, "keydown", onKeydown, EVENT_OPTIONS);
 on(document, "mousedown", onPointerdown, EVENT_OPTIONS);
 on(document, "touchstart", onPointerdown, EVENT_OPTIONS);
+//#endregion
 export { FOCUSTRAPS_ALL, FOCUS_TRAP_CONTAIN, FOCUS_TRAP_NOESCAPE, FOCUS_TRAP_SELECTOR, FocusTrap, createFocusTrap };

package/dist/js/focus-trap/standalone.d.mts

@@ -0,0 +1 @@
+export { };

package/dist/js/focus-trap/{standalone.js → standalone.mjs}

@@ -1,7 +1,10 @@
-import { attributable } from "../attributable.js";
-import { FOCUSTRAPS_ALL, FOCUS_TRAP_SELECTOR, createFocusTrap } from "./embedded.js";
+import { attributable } from "../internal/attributable.mjs";
+import { FOCUSTRAPS_ALL, FOCUS_TRAP_SELECTOR, createFocusTrap } from "./embedded.mjs";
+//#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);
+//#endregion
+export {};

package/dist/js/index.d.mts

@@ -0,0 +1,4 @@
+import { OuiPopoverElement } from "./popover.mjs";
+import { OuiSplitterElement } from "./splitter.mjs";
+import { setTooltipDelay } from "./tooltip.mjs";
+export { OuiPopoverElement, OuiSplitterElement, setTooltipDelay };

package/dist/js/index.mjs

@@ -0,0 +1,7 @@
+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";
+export { OuiPopoverElement, OuiSplitterElement, setTooltipDelay };

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

@@ -0,0 +1,4 @@
+//#region src/js/internal/attributable.d.ts
+declare function attributable(attribute: string, add: (element: HTMLElement) => void, remove: (element: HTMLElement) => void): void;
+//#endregion
+export { attributable };

package/dist/js/{attributable.full.js → internal/attributable.mjs}

@@ -1,3 +1,4 @@
+//#region src/js/internal/attributable.ts
 function attributable(attribute, add, remove) {
 	new MutationObserver((entries) => {
 		const { length } = entries;
@@ -26,11 +27,17 @@ function handleAdded(attribute, nodes, add) {
 	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) remove(elements[index]);
+	for (let index = 0; index < length; index += 1) {
+		const element = elements[index];
+		remove(element);
+		if (element.hasChildNodes()) handleRemoved(element.childNodes, remove);
+	}
 }
+//#endregion
 export { attributable };

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

@@ -0,0 +1,2 @@
+import { a as DraggableState, i as DraggableBound, n as DragMovePosition, o as addDraggable, r as Draggable, s as removeDraggable } from "../movable-BEo2LbUI.mjs";
+export { DragMovePosition, Draggable, DraggableBound, DraggableState, addDraggable, removeDraggable };

package/dist/js/internal/draggable.mjs

@@ -0,0 +1,212 @@
+import { clamp } from "@oscarpalmer/atoms/number";
+import { getPosition, on } from "@oscarpalmer/toretto/event";
+import { findAncestor } from "@oscarpalmer/toretto/find";
+import { toggleStyles } from "@oscarpalmer/toretto/style";
+import supportsTouch from "@oscarpalmer/toretto/touch";
+//#region src/js/internal/draggable.ts
+var Draggable = class {
+	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(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(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);
+	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(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(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 = `[${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);
+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
+export { Draggable, addDraggable, removeDraggable };

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

@@ -0,0 +1,26 @@
+//#region src/js/internal/floatable.d.ts
+declare class Floatable {
+  readonly options: Options;
+  active: boolean;
+  disabled: boolean;
+  frame: DOMHighResTimeStamp | undefined;
+  ignoreFocus: boolean;
+  constructor(options: Options);
+  destroy(): void;
+  disable(): void;
+  enable(): void;
+  toggle(active: boolean, ignoreFocus?: boolean): void;
+}
+type Options = {
+  anchor: HTMLElement;
+  content: HTMLElement;
+  defaultPosition: Position;
+  interactive: boolean;
+  positionAttribute: string;
+  preferAbove: boolean;
+  onAfter?: (active: boolean) => void;
+};
+type Position = 'above' | 'above-end' | 'above-start' | 'below' | 'below-end' | 'below-start' | 'end' | 'end-bottom' | 'end-top' | 'horizontal' | 'horizontal-bottom' | 'horizontal-top' | 'start' | 'start-bottom' | 'start-top' | 'vertical' | 'vertical-end' | 'vertical-start';
+declare function deactivate(floatable: Floatable): void;
+//#endregion
+export { Floatable, deactivate };