@oscarpalmer/oui 0.19.0 → 0.20.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/attributable.d.mts

@@ -0,0 +1,4 @@
+//#region src/js/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 → attributable.mjs}

@@ -1,3 +1,4 @@
+//#region src/js/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/floatable.d.mts

@@ -0,0 +1,26 @@
+//#region src/js/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 };

package/dist/js/{floatable.js → floatable.mjs}

@@ -1,5 +1,6 @@
 import { on } from "@oscarpalmer/toretto/event";
 import { findAncestor } from "@oscarpalmer/toretto/find";
+//#region src/js/floatable.ts
 var Floatable = class {
 	active = false;
 	disabled = false;
@@ -74,44 +75,68 @@ function deactivate(floatable) {
 	floatable.options.anchor.insertAdjacentElement(INSERT_AFTEREND, floatable.options.content);
 	floatable.options.onAfter?.(false);
 }
+function getAttribute(position, anchor, top, left) {
+	switch (position) {
+		case "horizontal":
+		case "horizontal-bottom":
+		case "horizontal-top": return position.replace("horizontal", left >= anchor.right ? "right" : "left");
+		case "vertical":
+		case "vertical-end":
+		case "vertical-start": return position.replace("vertical", top >= anchor.bottom ? "bottom" : "top");
+		default: break;
+	}
+}
+function getMargin() {
+	try {
+		const fontsize = parseFloat(getComputedStyle(document.documentElement).fontSize);
+		if (Number.isNaN(fontsize)) return 5;
+		const margin = fontsize / 2;
+		return margin < 5 ? 5 : margin;
+	} catch {
+		return 5;
+	}
+}
 function getState() {
 	return window._oscarpalmer_oui_floatable;
 }
-function getX(anchor, content, position) {
-	if (position.endsWith(POSITION_SUFFIX_END)) {
-		const end = anchor.right - content.width;
-		return end < 0 ? 0 : end;
+function getX(anchor, content, position, margin) {
+	if (position === "above" || position === "below" || position === "vertical") {
+		const center = anchor.left + anchor.width / 2;
+		const width = content.width / 2;
+		if (center + width + margin >= document.body.clientWidth) return document.body.clientWidth - content.width - margin / 2;
+		if (center - width - margin <= 0) return margin / 2;
+		return center - width;
 	}
-	if (position.endsWith(POSITION_SUFFIX_START)) {
-		const start = anchor.left;
-		return start + content.width > window.innerWidth ? window.innerWidth - content.width : start;
+	if (position.startsWith("end")) return anchor.right;
+	if (position.startsWith("start")) return anchor.left - content.width;
+	if (position.endsWith("end")) return anchor.right - content.width - margin <= 0 ? margin / 2 : anchor.right - content.width;
+	if (position.endsWith("start")) {
+		if (anchor.left + content.width + margin >= document.body.clientWidth) return document.body.clientWidth - content.width - margin / 2;
+		return anchor.left - margin <= 0 ? margin / 2 : anchor.left;
 	}
-	if (position.startsWith(POSITION_END)) return anchor.right;
-	if (position.startsWith(POSITION_START)) return anchor.left - content.width;
-	if (position.startsWith(POSITION_HORIZONTAL)) {
-		if (anchor.right + content.width <= window.innerWidth) return anchor.right;
-		return anchor.left - content.width;
-	}
-	const left = anchor.left + (anchor.width - content.width) / 2;
-	return left < 0 ? 0 : left;
+	if (!position.startsWith("horizontal")) return 0;
+	if (anchor.right + content.width + margin >= document.body.clientWidth) return anchor.left - content.width;
+	return anchor.right;
 }
-function getY(anchor, content, position, preferAbove) {
-	if (position.startsWith(POSITION_ABOVE)) return anchor.top - content.height;
-	if (position.startsWith(POSITION_BELOW)) return anchor.bottom;
-	if (position.endsWith(POSITION_BOTTOM)) {
-		const bottom = anchor.bottom - content.height;
-		return bottom < 0 ? 0 : bottom;
-	}
-	if (position.endsWith(POSITION_TOP)) {
-		const top = anchor.top;
-		return top + content.height > window.innerHeight ? window.innerHeight - content.height : top;
+function getY(anchor, content, position, margin, preferAbove) {
+	if (position === "end" || position === "start" || position === "horizontal") {
+		const center = anchor.top + anchor.height / 2;
+		const height = content.height / 2;
+		if (center + height + margin >= document.body.clientHeight) return document.body.clientHeight - content.height - margin / 2;
+		if (center - height - margin <= 0) return margin / 2;
+		return center - height;
 	}
-	if (position.startsWith(POSITION_VERTICAL)) {
-		if (preferAbove && anchor.top - content.height >= 0) return anchor.top - content.height;
-		if (anchor.bottom + content.height <= document.body.clientHeight) return anchor.bottom;
+	if (position.startsWith("above")) return anchor.top - content.height;
+	if (position.startsWith("below")) return anchor.bottom;
+	if (position.endsWith("bottom")) return anchor.bottom - content.height - margin <= 0 ? margin / 2 : anchor.bottom - content.height;
+	if (position.endsWith("top")) return anchor.top + content.height + margin >= document.body.clientHeight ? document.body.clientHeight - content.height - margin : anchor.top;
+	if (!position.startsWith("vertical")) return 0;
+	if (preferAbove) {
+		if (anchor.top - content.height - margin <= 0 && anchor.bottom + content.height + margin <= document.body.clientHeight) return anchor.bottom;
 		return anchor.top - content.height;
 	}
-	return anchor.top + (anchor.height - content.height) / 2;
+	if (anchor.bottom + content.height + margin >= document.body.clientHeight) return anchor.top - content.height;
+	return anchor.bottom;
 }
 function initialize(floatable) {
 	const { anchor, content, interactive } = floatable.options;
@@ -130,7 +155,7 @@ function isDisabled(element) {
 	return element.disabled || element.readOnly || element.getAttribute("aria-disabled") === "true";
 }
 function onClick(event) {
-	const related = findAncestor(event.target, SELECTOR_ALL);
+	const related = findAncestor(event, SELECTOR_ALL);
 	if (!(related instanceof HTMLElement)) closeAll();
 	else if (related.hasAttribute(ATTRIBUTE_CONTENT)) closeAbove(related);
 	else if (!isDisabled(related)) toggle(related);
@@ -140,12 +165,17 @@ function onKeyDown(event) {
 	const state = getState();
 	if (state == null || state.active.size === 0) return;
 	closeNonInteractive(state);
-	const related = findAncestor(event.target, SELECTOR_CONTENT);
+	const related = findAncestor(event, SELECTOR_CONTENT);
 	if (!(related instanceof HTMLElement)) return;
 	closeAbove(related);
 	const floatable = state.mapped.get(related);
 	if (floatable != null) floatable.toggle(false);
 }
+function setAttribute(position, anchor, floater, top, left) {
+	let actual;
+	if (/^(horizontal|vertical)/.test(position)) actual = getAttribute(position, anchor, top, left);
+	floater.setAttribute("position", actual ?? position);
+}
 function stop(floatable) {
 	if (floatable.frame != null) cancelAnimationFrame(floatable.frame);
 	floatable.frame = void 0;
@@ -165,6 +195,7 @@ function toggle(anchor) {
 function updatePosition(floatable) {
 	let position = floatable.options.anchor.getAttribute(floatable.options.positionAttribute)?.trim() ?? floatable.options.defaultPosition;
 	if (!POSITIONS.has(position)) position = floatable.options.defaultPosition;
+	const margin = getMargin();
 	let previousAnchor;
 	let previousContent;
 	let calculated = false;
@@ -185,8 +216,9 @@ function updatePosition(floatable) {
 	function update(anchor, content) {
 		previousAnchor = anchor;
 		previousContent = content;
-		const left = getX(anchor, content, position);
-		const top = getY(anchor, content, position, floatable.options.preferAbove);
+		const left = getX(anchor, content, position, margin);
+		const top = getY(anchor, content, position, margin, floatable.options.preferAbove);
+		setAttribute(position, anchor, floatable.options.content, top, left);
 		if (top + content.height > window.innerHeight) floatable.options.content.style.height = `${window.innerHeight - top}px`;
 		else floatable.options.content.style.height = "";
 		if (left + content.width > window.innerWidth) floatable.options.content.style.width = `${window.innerWidth - left}px`;
@@ -200,20 +232,10 @@ function updatePosition(floatable) {
 	}
 	floatable.frame = requestAnimationFrame(run);
 }
-var ATTRIBUTE_ANCHOR = "oui-floatable-anchor";
-var ATTRIBUTE_CONTENT = "oui-floatable-content";
-var INSERT_AFTEREND = "afterend";
-var POSITION_ABOVE = "above";
-var POSITION_BELOW = "below";
-var POSITION_BOTTOM = "bottom";
-var POSITION_END = "end";
-var POSITION_HORIZONTAL = "horizontal";
-var POSITION_START = "start";
-var POSITION_SUFFIX_END = "-end";
-var POSITION_SUFFIX_START = "-start";
-var POSITION_TOP = "top";
-var POSITION_VERTICAL = "vertical";
-var POSITIONS = new Set([
+const ATTRIBUTE_ANCHOR = "oui-floatable-anchor";
+const ATTRIBUTE_CONTENT = "oui-floatable-content";
+const INSERT_AFTEREND = "afterend";
+const POSITIONS = new Set([
 	"above",
 	"above-end",
 	"above-start",
@@ -233,14 +255,14 @@ var POSITIONS = new Set([
 	"vertical-end",
 	"vertical-start"
 ]);
-var PROPERTIES = [
+const PROPERTIES = [
 	"bottom",
 	"left",
 	"right",
 	"top"
 ];
-var SELECTOR_ALL = `[${ATTRIBUTE_ANCHOR}], [${ATTRIBUTE_CONTENT}]`;
-var SELECTOR_CONTENT = `[${ATTRIBUTE_CONTENT}]`;
+const SELECTOR_ALL = `[${ATTRIBUTE_ANCHOR}], [${ATTRIBUTE_CONTENT}]`;
+const SELECTOR_CONTENT = `[${ATTRIBUTE_CONTENT}]`;
 if (window._oscarpalmer_oui_floatable == null) {
 	Object.defineProperty(window, "_oscarpalmer_oui_floatable", {
 		enumerable: false,
@@ -258,4 +280,5 @@ if (window._oscarpalmer_oui_floatable == null) {
 		onClick(event);
 	});
 }
+//#endregion
 export { Floatable, deactivate };

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}

@@ -2,6 +2,7 @@ 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 "../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 { setDelay } from "./tooltip.mjs";
+export { OuiPopoverElement, OuiSplitterElement, setDelay };

package/dist/js/index.mjs

@@ -0,0 +1,5 @@
+import "./focus-trap/standalone.mjs";
+import { OuiPopoverElement } from "./popover.mjs";
+import { OuiSplitterElement } from "./splitter.mjs";
+import { setDelay } from "./tooltip.mjs";
+export { OuiPopoverElement, OuiSplitterElement, setDelay };

package/dist/js/popover.d.mts

@@ -0,0 +1,20 @@
+//#region src/js/popover.d.ts
+declare global {
+  interface HTMLElementTagNameMap {
+    'oui-popover': OuiPopoverElement;
+  }
+}
+declare class OuiPopoverElement extends HTMLElement {
+  #private;
+  constructor();
+  close(): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  hidePopover(): void;
+  open(): void;
+  showPopover(): void;
+  toggle(): void;
+  togglePopover(options?: boolean): boolean;
+}
+//#endregion
+export { OuiPopoverElement };

package/dist/js/{popover.js → popover.mjs}

@@ -1,8 +1,9 @@
-import { Floatable } from "./floatable.js";
-import { createFocusTrap } from "./focus-trap/embedded.js";
+import { Floatable } from "./floatable.mjs";
+import { createFocusTrap } from "./focus-trap/embedded.mjs";
 import { getFocusable } from "@oscarpalmer/toretto/focusable";
 import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
-var index = 0;
+//#region src/js/popover.ts
+let index = 0;
 var OuiPopoverElement = class extends HTMLElement {
 	#floatable;
 	#focusTrap;
@@ -78,10 +79,11 @@ function focus(content) {
 		target.focus();
 	});
 }
-var ATTRIBUTE_ID_PREFIX = "oui_popover_content_";
-var POPOVERS = /* @__PURE__ */ new Map();
-var SELECTOR = "oui-popover";
-var SELECTOR_CONTENT = `:scope > [${SELECTOR}-content]`;
-var SELECTOR_TOGGLE = `:scope > [${SELECTOR}-toggle]`;
+const ATTRIBUTE_ID_PREFIX = "oui_popover_content_";
+const POPOVERS = /* @__PURE__ */ new Map();
+const SELECTOR = "oui-popover";
+const SELECTOR_CONTENT = `:scope > [${SELECTOR}-content]`;
+const SELECTOR_TOGGLE = `:scope > [${SELECTOR}-toggle]`;
 customElements.define(SELECTOR, OuiPopoverElement);
+//#endregion
 export { OuiPopoverElement };

package/dist/js/splitter.d.mts

@@ -0,0 +1,25 @@
+//#region src/js/splitter.d.ts
+declare global {
+  interface HTMLElementTagNameMap {
+    [SELECTOR]: OuiSplitterElement;
+  }
+}
+declare class OuiSplitterElement extends HTMLElement {
+  #private;
+  static readonly observedAttributes: string[];
+  get max(): number;
+  set max(value: number);
+  get min(): number;
+  set min(value: number);
+  get size(): number;
+  set size(value: number);
+  get type(): string;
+  set type(value: string);
+  constructor();
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  attributeChangedCallback(name: string): void;
+}
+declare const SELECTOR = "oui-splitter";
+//#endregion
+export { OuiSplitterElement };