@rio-m3e/core 0.2.0 → 0.3.0

package/dist/index.js

@@ -32,7 +32,7 @@ const buttonGroupSkeleton = {
 	tag: "div",
 	content: true
 };
-const valuesOf = (selected) => selected === void 0 ? [] : Array.isArray(selected) ? selected : [selected];
+const valuesOf$1 = (selected) => selected === void 0 ? [] : Array.isArray(selected) ? selected : [selected];
 function createButtonGroup(options) {
 	const props = () => ({
 		...buttonGroupDefaults,
@@ -40,7 +40,7 @@ function createButtonGroup(options) {
 	});
 	const isSelected = (value) => {
 		const p = props();
-		return p.selection !== "none" && valuesOf(p.selected).includes(value);
+		return p.selection !== "none" && valuesOf$1(p.selected).includes(value);
 	};
 	return {
 		parts: { root() {
@@ -60,7 +60,7 @@ function createButtonGroup(options) {
 		select(value, selected) {
 			const p = props();
 			if (p.selection === "none" || isSelected(value) === selected) return;
-			const current = valuesOf(p.selected);
+			const current = valuesOf$1(p.selected);
 			if (!selected && p.required && current.length === 1) return;
 			if (p.selection === "single") options.onChange(selected ? value : void 0);
 			else options.onChange(selected ? [...current, value] : current.filter((other) => other !== value));
@@ -199,7 +199,7 @@ function readSpringParams(element, token) {
 const PRESSED_WIDTH_RATIO = .15;
 function attachButtonGroup(root, options = {}) {
 	const ratio = options.pressedWidthRatio ?? PRESSED_WIDTH_RATIO;
-	const items = () => [...root.children].filter((el) => el instanceof HTMLElement);
+	const items = () => [...root.children].map((el) => el.classList.contains("rio-tooltip-trigger") ? el.firstElementChild : el).filter((el) => el instanceof HTMLElement);
 	const onKeydown = (event) => {
 		if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
 		if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;
@@ -269,7 +269,8 @@ function attachButtonGroup(root, options = {}) {
 		}
 	};
 	const observer = new MutationObserver((mutations) => {
-		const own = mutations.filter((m) => m.target.parentElement === root);
+		const current = items();
+		const own = mutations.filter((m) => current.includes(m.target));
 		if (own.length > 0) layout(own.some((m) => m.attributeName !== "data-pressed"));
 	});
 	observer.observe(root, {
@@ -384,6 +385,448 @@ function createButton(options) {
 		}
 	};
 }
+// src/dialog/dialog.ts
+/**
+* The dialog's ARIA role: `alertdialog` for a prompt that asks for a response, such as a
+* confirmation, and `dialog` for one that holds a list or a form.
+*/
+const DIALOG_ROLES = ["alertdialog", "dialog"];
+const dialogDefaults = {
+	open: false,
+	role: "alertdialog"
+};
+/**
+* The markup of an open dialog. The parts inside render from opening until `attachDialog`'s
+* `onClosed`; a closed dialog is the empty `<dialog>`.
+*/
+const dialogSkeleton = {
+	part: "root",
+	tag: "dialog",
+	children: [
+		{
+			part: "icon",
+			tag: "div",
+			when: "showsIcon",
+			content: true
+		},
+		{
+			part: "headline",
+			tag: "h2",
+			when: "showsHeadline",
+			content: true
+		},
+		{
+			part: "content",
+			tag: "div",
+			content: true
+		},
+		{
+			part: "actions",
+			tag: "div",
+			when: "showsActions",
+			content: true
+		}
+	]
+};
+const NO_CONTENT$2 = {
+	icon: false,
+	headline: false,
+	actions: false
+};
+function createDialog(options) {
+	const props = () => ({
+		...dialogDefaults,
+		...omitUndefined(options.props())
+	});
+	const content = () => options.content?.() ?? NO_CONTENT$2;
+	const showsIcon = () => content().icon;
+	const showsHeadline = () => content().headline;
+	const showsActions = () => content().actions;
+	const { ids } = options;
+	return {
+		parts: {
+			root() {
+				const alert = props().role === "alertdialog";
+				return {
+					class: "rio-dialog",
+					role: alert ? "alertdialog" : void 0,
+					"aria-labelledby": showsHeadline() ? ids.headline : void 0,
+					"aria-describedby": alert ? ids.content : void 0,
+					"data-icon": showsIcon() ? "" : void 0
+				};
+			},
+			icon: () => ({
+				class: "rio-dialog__icon",
+				"aria-hidden": "true"
+			}),
+			headline: () => ({
+				class: "rio-dialog__headline",
+				id: ids.headline
+			}),
+			content: () => ({
+				class: "rio-dialog__content rio-focus-ring",
+				id: ids.content,
+				"data-focus-ring": "inner"
+			}),
+			actions: () => ({ class: "rio-dialog__actions" })
+		},
+		showsIcon,
+		showsHeadline,
+		showsActions
+	};
+}
+// src/primitives/overlay/overlay.ts
+const registries = /* @__PURE__ */ new WeakMap();
+/** What a `contain`ed overlay keeps in */
+const PRESSES = [
+	"click",
+	"auxclick",
+	"dblclick",
+	"pointerdown",
+	"pointerup",
+	"mousedown",
+	"mouseup",
+	"contextmenu"
+];
+const stopPropagation = (event) => event.stopPropagation();
+const isOpen = ({ element, options }) => options.mode === "modal" ? element.open : element.matches(":popover-open");
+/** Open on the record, but no longer in the top layer, after leaving the document */
+const left = (entry) => entry.options.mode === "modal" ? !entry.element.matches(":modal") : !isOpen(entry);
+const close = (entry) => {
+	if (!isOpen(entry)) return;
+	if (entry.options.mode === "modal") entry.element.close();
+	else entry.element.hidePopover();
+};
+const track = (registry) => {
+	if (registry.stack.length) registry.moves.observe(registry.document, {
+		childList: true,
+		subtree: true
+	});
+	else registry.moves.disconnect();
+};
+const opened = (entry) => {
+	const { stack } = entry.registry;
+	if (stack.includes(entry)) return;
+	stack.push(entry);
+	track(entry.registry);
+	for (const other of stack.filter((open) => open !== entry && open.options.transient)) {
+		other.reason = "replaced";
+		close(other);
+	}
+};
+const closed = (entry, asked) => {
+	const { stack } = entry.registry;
+	const index = stack.indexOf(entry);
+	if (index < 0) return;
+	stack.splice(index, 1);
+	track(entry.registry);
+	const reason = entry.reason ?? "dismiss";
+	entry.reason = void 0;
+	if (!asked) entry.options.onClose(reason);
+	const inside = (node) => !!node && entry.element.contains(node);
+	for (const other of stack.filter((open) => inside(open.element) || inside(open.source))) {
+		other.reason = "parent";
+		close(other);
+	}
+};
+const registryOf = (document) => {
+	let registry = registries.get(document);
+	if (!registry) {
+		const stack = [];
+		const onKeydown = (event) => {
+			if (event.key !== "Escape" || event.defaultPrevented || event.isComposing) return;
+			const top = stack.at(-1);
+			if (!top) return;
+			const target = event.target;
+			const host = typeof target?.closest === "function" ? target.closest("dialog:modal, :popover-open:not([popover=\"manual\"])") : null;
+			if (host && !stack.some((open) => open.element === host)) return;
+			event.preventDefault();
+			top.options.onClose("escape");
+		};
+		registry = {
+			stack,
+			attached: 0,
+			onKeydown,
+			moves: new MutationObserver(() => {
+				for (const entry of stack.filter(left)) {
+					if (entry.options.mode === "modal") entry.element.close();
+					closed(entry, false);
+				}
+			}),
+			document
+		};
+		registries.set(document, registry);
+	}
+	return registry;
+};
+function attachOverlay(element, options) {
+	const modal = options.mode === "modal";
+	if (modal && element.localName !== "dialog") throw new TypeError("A modal overlay must be a <dialog> element.");
+	const document = element.ownerDocument;
+	const registry = registryOf(document);
+	const entry = {
+		element,
+		options,
+		registry
+	};
+	const onToggle = () => isOpen(entry) ? opened(entry) : closed(entry, false);
+	const onDialogClose = () => {
+		if (!isOpen(entry)) closed(entry, false);
+	};
+	const onCancel = (event) => {
+		event.preventDefault();
+		options.onClose("escape");
+	};
+	if (modal) {
+		element.addEventListener("close", onDialogClose);
+		element.addEventListener("cancel", onCancel);
+	} else {
+		element.popover = options.mode;
+		element.addEventListener("toggle", onToggle);
+	}
+	if (options.contain) for (const type of PRESSES) element.addEventListener(type, stopPropagation);
+	if (registry.attached++ === 0) document.addEventListener("keydown", registry.onKeydown);
+	let detached = false;
+	return {
+		show(source) {
+			if (detached || isOpen(entry)) return;
+			const index = registry.stack.indexOf(entry);
+			if (index >= 0) registry.stack.splice(index, 1);
+			track(registry);
+			entry.reason = void 0;
+			entry.source = source;
+			if (modal) element.showModal();
+			else element.showPopover({ source });
+			opened(entry);
+		},
+		hide() {
+			if (!isOpen(entry)) return;
+			close(entry);
+			closed(entry, true);
+		},
+		covered() {
+			const index = registry.stack.indexOf(entry);
+			return index >= 0 && registry.stack.slice(index + 1).some((open) => !open.options.transient);
+		},
+		detach() {
+			if (detached) return;
+			detached = true;
+			element.removeEventListener("close", onDialogClose);
+			element.removeEventListener("cancel", onCancel);
+			element.removeEventListener("toggle", onToggle);
+			for (const type of PRESSES) element.removeEventListener(type, stopPropagation);
+			const index = registry.stack.indexOf(entry);
+			if (index >= 0) registry.stack.splice(index, 1);
+			track(registry);
+			close(entry);
+			if (!modal) element.removeAttribute("popover");
+			if (--registry.attached === 0) document.removeEventListener("keydown", registry.onKeydown);
+		}
+	};
+}
+// src/dialog/interaction.ts
+const TABBABLE = [
+	"a[href]",
+	"area[href]",
+	"button",
+	"input:not([type=\"hidden\"])",
+	"select",
+	"textarea",
+	"iframe",
+	"audio[controls]",
+	"video[controls]",
+	"summary",
+	"[contenteditable]:not([contenteditable=\"false\"])",
+	"[tabindex]"
+].join(",");
+const isRadio = (element) => element.localName === "input" && element.type === "radio";
+const visible = (element) => typeof element.checkVisibility === "function" ? element.checkVisibility({ visibilityProperty: true }) : element.getClientRects().length > 0;
+/** The elements Tab stops at in `root`, in order. Elements inside shadow roots aren't found. */
+const tabbablesIn = (root) => {
+	const all = [...root.querySelectorAll(TABBABLE)].filter((element) => element.tabIndex >= 0 && !element.matches(":disabled") && !element.closest("[inert]") && visible(element));
+	return all.filter((element) => {
+		if (!isRadio(element) || !element.name) return true;
+		const group = all.filter((other) => isRadio(other) && other.name === element.name && other.form === element.form);
+		return element === (group.find((radio) => radio.checked) ?? group[0]);
+	});
+};
+/** How far, in px, the content may scroll and still count as at its end */
+const SCROLL_SLOP = 1;
+const scrollLocks = /* @__PURE__ */ new WeakMap();
+const lockScroll = (document) => {
+	const lock = scrollLocks.get(document);
+	if (lock) {
+		lock.count++;
+		return;
+	}
+	const html = document.documentElement;
+	const view = document.defaultView;
+	const { overflow, scrollbarGutter } = html.style;
+	const scrollbar = view.innerWidth - html.clientWidth;
+	html.style.overflow = "hidden";
+	if (scrollbar > 0 && view.getComputedStyle(html).scrollbarGutter === "auto") html.style.scrollbarGutter = "stable";
+	scrollLocks.set(document, {
+		count: 1,
+		restore() {
+			html.style.overflow = overflow;
+			html.style.scrollbarGutter = scrollbarGutter;
+		}
+	});
+};
+const unlockScroll = (document) => {
+	const lock = scrollLocks.get(document);
+	if (!lock || --lock.count > 0) return;
+	lock.restore();
+	scrollLocks.delete(document);
+};
+function attachDialog(root, options) {
+	const document = root.ownerDocument;
+	const cancel = (reason) => {
+		let prevented = false;
+		options.onCancel?.({
+			reason,
+			get defaultPrevented() {
+				return prevented;
+			},
+			preventDefault() {
+				prevented = true;
+			}
+		});
+		if (!prevented) options.onOpenChange(false);
+	};
+	const overlay = attachOverlay(root, {
+		mode: "modal",
+		contain: true,
+		onClose: (reason) => reason === "escape" ? cancel("escape") : options.onOpenChange(false)
+	});
+	const onKeydown = (event) => {
+		if (event.key !== "Tab" || event.defaultPrevented) return;
+		if (event.altKey || event.ctrlKey || event.metaKey) return;
+		const tabbables = tabbablesIn(root);
+		const first = tabbables[0];
+		const last = tabbables.at(-1);
+		if (!first || !last) {
+			event.preventDefault();
+			return;
+		}
+		const focused = document.activeElement;
+		if (!(event.shiftKey ? focused === first || focused === root : focused === last)) return;
+		event.preventDefault();
+		(event.shiftKey ? last : first).focus();
+	};
+	const onScrim = (event) => {
+		if (event.target !== root) return false;
+		const box = root.getBoundingClientRect();
+		return event.clientX < box.left || event.clientX > box.right || event.clientY < box.top || event.clientY > box.bottom;
+	};
+	let pressedScrim = false;
+	const onPointerDown = (event) => {
+		pressedScrim = onScrim(event) && !overlay.covered();
+	};
+	const onClick = (event) => {
+		const pressed = pressedScrim;
+		pressedScrim = false;
+		if (pressed && onScrim(event)) cancel("scrim");
+	};
+	const content = () => root.querySelector(":scope > .rio-dialog__content");
+	const updateDividers = () => {
+		const element = content();
+		if (!element) return;
+		const hidden = element.scrollHeight - element.clientHeight;
+		element.toggleAttribute("data-overflow-top", element.scrollTop >= SCROLL_SLOP);
+		element.toggleAttribute("data-overflow-bottom", hidden - element.scrollTop >= SCROLL_SLOP);
+	};
+	/** The content, while it takes the focus so the keyboard can scroll it */
+	let reachable = null;
+	const setReachable = (element) => {
+		if (element === reachable) return;
+		reachable?.removeAttribute("tabindex");
+		reachable = element;
+		reachable?.setAttribute("tabindex", "0");
+	};
+	const updateOverflow = () => {
+		updateDividers();
+		const element = content();
+		const scrolls = !!element && element.scrollHeight - element.clientHeight >= SCROLL_SLOP;
+		setReachable(scrolls && tabbablesIn(element).length === 0 ? element : null);
+	};
+	const resizes = new ResizeObserver(updateOverflow);
+	let watched = null;
+	const watch = () => {
+		resizes.disconnect();
+		watched?.removeEventListener("scroll", updateDividers);
+		watched = content();
+		if (!watched) return;
+		watched.addEventListener("scroll", updateDividers, { passive: true });
+		resizes.observe(watched);
+		for (const child of watched.children) resizes.observe(child);
+	};
+	const unwatch = () => {
+		resizes.disconnect();
+		watched?.removeEventListener("scroll", updateDividers);
+		watched = null;
+		setReachable(null);
+	};
+	const focusFirst = () => {
+		if (root.querySelector("[autofocus]")) return;
+		const tabbables = tabbablesIn(root);
+		(tabbables.find((element) => element !== reachable) ?? tabbables[0])?.focus();
+	};
+	/** Whether this dialog holds a lock on the page's scroll: from opening until it closes */
+	let locked = false;
+	/** Counts closings, so only the last one reports its end, and only if the dialog stayed closed */
+	let closings = 0;
+	const closed = () => {
+		if (!locked) return;
+		locked = false;
+		unlockScroll(document);
+		const closing = ++closings;
+		const motion = root.getAnimations({ subtree: true }).map((animation) => animation.finished.catch(() => void 0));
+		Promise.all(motion).then(() => {
+			if (closing === closings && !root.open) options.onClosed?.();
+		});
+	};
+	root.addEventListener("keydown", onKeydown);
+	root.addEventListener("pointerdown", onPointerDown);
+	root.addEventListener("click", onClick);
+	return {
+		sync(open) {
+			if (open && !root.open) {
+				overlay.show();
+				if (!locked) {
+					locked = true;
+					lockScroll(document);
+				}
+				const element = content();
+				if (element) element.scrollTop = 0;
+				watch();
+				updateOverflow();
+				focusFirst();
+			} else if (!open) {
+				if (root.open) overlay.hide();
+				unwatch();
+				closed();
+			}
+		},
+		update() {
+			if (!root.open) return;
+			watch();
+			updateOverflow();
+		},
+		detach() {
+			root.removeEventListener("keydown", onKeydown);
+			root.removeEventListener("pointerdown", onPointerDown);
+			root.removeEventListener("click", onClick);
+			unwatch();
+			overlay.detach();
+			closings++;
+			if (locked) {
+				locked = false;
+				unlockScroll(document);
+			}
+		}
+	};
+}
 // src/icon-button/icon-button.ts
 const ICON_BUTTON_VARIANTS = [
 	"filled",
@@ -456,6 +899,943 @@ function createIconButton(options) {
 		handleClick: button.handleClick
 	};
 }
+// src/primitives/anchored-position/anchored-position.ts
+const OPPOSITE = {
+	top: "bottom",
+	bottom: "top",
+	start: "end",
+	end: "start"
+};
+const VARS = [
+	"--rio-anchored-available-width",
+	"--rio-anchored-available-height",
+	"--rio-anchored-anchor-width"
+];
+const clamp = (value, min, max) => Math.max(min, Math.min(value, max));
+/** An anchor point, rather than an element. Checked by shape, so elements from iframes count. */
+const isPoint = (target) => typeof target.getBoundingClientRect !== "function";
+function attachAnchoredPosition(floating, options) {
+	const document = floating.ownerDocument;
+	const view = document.defaultView;
+	floating.dataset.anchored = "";
+	const offset = options.offset ?? 0;
+	const alignOffset = options.alignOffset ?? 0;
+	const padding = options.padding ?? 8;
+	const preferred = options.side ?? "bottom";
+	const align = options.align ?? "start";
+	const candidates = [.../* @__PURE__ */ new Set([preferred, ...options.fallbacks ?? [OPPOSITE[preferred]]])];
+	/** Rounds to the device's pixel grid, so text in the element stays sharp. */
+	const snap = (value) => Math.round(value * view.devicePixelRatio) / view.devicePixelRatio;
+	let frame;
+	const schedule = () => {
+		frame ??= view.requestAnimationFrame(() => {
+			frame = void 0;
+			place();
+		});
+	};
+	const onScroll = (event) => {
+		if (event.target !== document && floating.contains(event.target)) return;
+		schedule();
+	};
+	const resize = new view.ResizeObserver(schedule);
+	resize.observe(floating);
+	let observed;
+	const observeAnchor = (element) => {
+		if (element === observed) return;
+		if (observed) resize.unobserve(observed);
+		observed = element;
+		if (element) resize.observe(element);
+	};
+	const place = () => {
+		const target = options.anchor();
+		if (!target || floating.getClientRects().length === 0) return;
+		if (!isPoint(target) && !target.isConnected) return;
+		observeAnchor(isPoint(target) ? void 0 : target);
+		const anchor = isPoint(target) ? {
+			left: target.x,
+			right: target.x,
+			top: target.y,
+			bottom: target.y,
+			width: 0
+		} : target.getBoundingClientRect();
+		const rtl = view.getComputedStyle(isPoint(target) ? floating : target).direction === "rtl";
+		const viewport = {
+			width: document.documentElement.clientWidth,
+			height: document.documentElement.clientHeight
+		};
+		const physical = (side) => side === "start" ? rtl ? "right" : "left" : side === "end" ? rtl ? "left" : "right" : side;
+		const room = {
+			top: anchor.top - offset - padding,
+			bottom: viewport.height - anchor.bottom - offset - padding,
+			left: anchor.left - offset - padding,
+			right: viewport.width - anchor.right - offset - padding
+		};
+		floating.style.left = "0px";
+		floating.style.top = "0px";
+		const borders = {
+			width: floating.offsetWidth - floating.clientWidth,
+			height: floating.offsetHeight - floating.clientHeight
+		};
+		const natural = {
+			width: floating.scrollWidth + borders.width,
+			height: floating.scrollHeight + borders.height
+		};
+		const fits = (candidate) => {
+			const at = physical(candidate);
+			return at === "top" || at === "bottom" ? room[at] >= natural.height && natural.width <= viewport.width - 2 * padding : room[at] >= natural.width && natural.height <= viewport.height - 2 * padding;
+		};
+		const roomier = (a, b) => room[physical(b)] > room[physical(a)] ? b : a;
+		const side = candidates.find(fits) ?? roomier(preferred, OPPOSITE[preferred]);
+		const at = physical(side);
+		const vertical = at === "top" || at === "bottom";
+		const available = {
+			width: vertical ? viewport.width - 2 * padding : room[at],
+			height: vertical ? room[at] : viewport.height - 2 * padding
+		};
+		floating.style.setProperty(VARS[0], `${Math.max(0, available.width)}px`);
+		floating.style.setProperty(VARS[1], `${Math.max(0, available.height)}px`);
+		floating.style.setProperty(VARS[2], `${anchor.width}px`);
+		const size = {
+			width: floating.offsetWidth,
+			height: floating.offsetHeight
+		};
+		let x;
+		let y;
+		if (vertical) {
+			y = at === "bottom" ? anchor.bottom + offset : anchor.top - offset - size.height;
+			const startEdge = rtl ? anchor.right - size.width : anchor.left;
+			const endEdge = rtl ? anchor.left : anchor.right - size.width;
+			x = (align === "center" ? anchor.left + (anchor.width - size.width) / 2 : align === "start" ? startEdge : endEdge) + (rtl ? -alignOffset : alignOffset);
+		} else {
+			x = at === "right" ? anchor.right + offset : anchor.left - offset - size.width;
+			const height = anchor.bottom - anchor.top;
+			y = (align === "center" ? anchor.top + (height - size.height) / 2 : align === "start" ? anchor.top : anchor.bottom - size.height) + alignOffset;
+		}
+		const fit = (value, length, extent, startAtEnd) => length > extent - 2 * padding ? startAtEnd ? extent - padding - length : padding : clamp(value, padding, extent - padding - length);
+		x = fit(x, size.width, viewport.width, rtl);
+		y = fit(y, size.height, viewport.height, false);
+		floating.style.left = `${snap(x)}px`;
+		floating.style.top = `${snap(y)}px`;
+		floating.dataset.side = side;
+		floating.dataset.align = align;
+		if (anchor.bottom < 0 || anchor.top > viewport.height || anchor.right < 0 || anchor.left > viewport.width) floating.dataset.anchorHidden = "";
+		else delete floating.dataset.anchorHidden;
+	};
+	document.addEventListener("scroll", onScroll, {
+		capture: true,
+		passive: true
+	});
+	view.addEventListener("resize", schedule, { passive: true });
+	return {
+		update: place,
+		detach() {
+			document.removeEventListener("scroll", onScroll, { capture: true });
+			view.removeEventListener("resize", schedule);
+			resize.disconnect();
+			if (frame !== void 0) view.cancelAnimationFrame(frame);
+			for (const name of [
+				"left",
+				"top",
+				...VARS
+			]) floating.style.removeProperty(name);
+			for (const name of [
+				"side",
+				"align",
+				"anchorHidden",
+				"anchored"
+			]) delete floating.dataset[name];
+		}
+	};
+}
+// src/menu/menu.ts
+/** M3E vertical menu color styles: surface-based, or tertiary-based for more emphasis. */
+const MENU_VARIANTS = ["standard", "vibrant"];
+/** Whether the menu's items can be selected: none, one at a time, or any number. */
+const MENU_SELECTIONS = [
+	"none",
+	"single",
+	"multiple"
+];
+const menuDefaults = {
+	open: false,
+	variant: "standard",
+	selection: "none",
+	side: "bottom",
+	align: "start",
+	offset: 0,
+	instant: false
+};
+const menuSkeleton = {
+	part: "root",
+	tag: "div",
+	content: true
+};
+const valuesOf = (selected) => selected === void 0 ? [] : Array.isArray(selected) ? selected : [selected];
+function createMenu(options) {
+	const props = () => ({
+		...menuDefaults,
+		...omitUndefined(options.props())
+	});
+	const isSelected = (value) => {
+		const p = props();
+		return p.selection !== "none" && valuesOf(p.selected).includes(value);
+	};
+	return {
+		parts: { root() {
+			const p = props();
+			return {
+				class: "rio-menu",
+				role: "menu",
+				"aria-label": p.label,
+				"data-variant": p.variant,
+				"data-instant": p.instant ? "" : void 0
+			};
+		} },
+		selection: () => props().selection,
+		isSelected,
+		choose(value) {
+			const p = props();
+			if (p.selection !== "none" && value !== void 0) {
+				if (p.selection === "single") {
+					if (!isSelected(value)) options.onChange(value);
+				} else {
+					const current = valuesOf(p.selected);
+					options.onChange(isSelected(value) ? current.filter((other) => other !== value) : [...current, value]);
+					return;
+				}
+			}
+			options.onOpenChange(false);
+		},
+		close: () => options.onOpenChange(false),
+		variant: () => props().variant,
+		instant: () => props().instant
+	};
+}
+const menuItemDefaults = { disabled: false };
+const menuItemSkeleton = {
+	part: "root",
+	tag: "button",
+	children: [
+		{
+			part: "touch",
+			tag: "span"
+		},
+		{
+			part: "icon",
+			tag: "span",
+			when: "showsIcon",
+			content: true
+		},
+		{
+			part: "text",
+			tag: "span",
+			children: [{
+				part: "label",
+				tag: "span",
+				content: true
+			}, {
+				part: "supportingText",
+				tag: "span",
+				when: "showsSupportingText",
+				content: true
+			}]
+		},
+		{
+			part: "trailingText",
+			tag: "span",
+			when: "showsTrailingText",
+			content: true
+		},
+		{
+			part: "trailingIcon",
+			tag: "span",
+			when: "showsTrailingIcon",
+			content: true
+		}
+	]
+};
+const NO_CONTENT$1 = {
+	icon: false,
+	supportingText: false,
+	trailingText: false,
+	trailingIcon: false
+};
+function createMenuItem(options) {
+	const props = () => ({
+		...menuItemDefaults,
+		...omitUndefined(options.props())
+	});
+	const content = () => options.content?.() ?? NO_CONTENT$1;
+	const kind = () => {
+		if (options.submenu) return void 0;
+		const selection = options.menu?.()?.selection() ?? "none";
+		if (selection === "none" || props().value === void 0) return void 0;
+		return selection === "single" ? "radio" : "checkbox";
+	};
+	const selected = () => {
+		const value = props().value;
+		return kind() !== void 0 && !!options.menu?.()?.isSelected(value);
+	};
+	return {
+		parts: {
+			root() {
+				const p = props();
+				const k = kind();
+				return {
+					class: "rio-menu-item rio-state-layer rio-focus-ring",
+					type: "button",
+					role: k ? `menuitem${k}` : "menuitem",
+					tabindex: "-1",
+					"aria-checked": k ? String(selected()) : void 0,
+					"aria-haspopup": options.submenu ? "menu" : void 0,
+					"aria-expanded": options.submenu ? String(options.submenu.open()) : void 0,
+					"aria-disabled": p.disabled ? "true" : void 0,
+					"data-selected": k ? String(selected()) : void 0,
+					"data-focus-ring": "inner"
+				};
+			},
+			touch: () => ({
+				class: "rio-menu-item__touch",
+				"aria-hidden": "true"
+			}),
+			icon: () => ({
+				class: "rio-menu-item__icon",
+				"aria-hidden": "true"
+			}),
+			text: () => ({ class: "rio-menu-item__text" }),
+			label: () => ({ class: "rio-menu-item__label" }),
+			supportingText: () => ({ class: "rio-menu-item__supporting-text" }),
+			trailingText: () => ({ class: "rio-menu-item__trailing-text" }),
+			trailingIcon: () => ({
+				class: "rio-menu-item__trailing-icon",
+				"aria-hidden": "true"
+			})
+		},
+		showsIcon: () => content().icon,
+		showsSupportingText: () => content().supportingText,
+		showsTrailingText: () => content().trailingText,
+		showsTrailingIcon: () => content().trailingIcon,
+		selected,
+		handleClick(event) {
+			if (props().disabled) {
+				event.preventDefault();
+				return;
+			}
+			options.onClick(event);
+			if (options.submenu) options.submenu.onOpen();
+			else options.menu?.()?.choose(props().value);
+		}
+	};
+}
+/**
+* A submenu and the item that opens it. The two render side by side in the menu, the item where it
+* sits and the submenu after it; the submenu shows in the top layer next to the item.
+*/
+function createSubMenu(options) {
+	const menu = createMenu({
+		props: () => {
+			const p = options.props();
+			const parent = options.menu?.();
+			return {
+				open: options.open(),
+				variant: parent?.variant(),
+				instant: parent?.instant(),
+				selection: p.selection,
+				selected: p.selected,
+				label: p.label
+			};
+		},
+		onChange: options.onChange,
+		onOpenChange: (open) => {
+			const parent = options.menu?.();
+			if (open) options.onOpenChange(true);
+			else if (parent) parent.close();
+			else options.onOpenChange(false);
+		}
+	});
+	return {
+		item: createMenuItem({
+			props: () => ({ disabled: options.props().disabled }),
+			content: options.content,
+			onClick: () => {},
+			submenu: {
+				open: options.open,
+				onOpen: () => options.onOpenChange(true)
+			}
+		}),
+		menu
+	};
+}
+const menuGroupSkeleton = {
+	part: "root",
+	tag: "div",
+	children: [{
+		part: "label",
+		tag: "div",
+		when: "showsLabel",
+		content: true
+	}, {
+		part: "items",
+		tag: "div",
+		content: true
+	}]
+};
+function createMenuGroup(options) {
+	return {
+		parts: {
+			root: () => ({
+				class: "rio-menu-group",
+				role: "group",
+				"aria-label": options.props().label
+			}),
+			label: () => ({
+				class: "rio-menu-group__label",
+				"aria-hidden": "true"
+			}),
+			items: () => ({ class: "rio-menu-group__items" })
+		},
+		showsLabel: () => !!options.props().label
+	};
+}
+const menuDividerSkeleton = {
+	part: "root",
+	tag: "div"
+};
+function createMenuDivider() {
+	return { parts: { root: () => ({
+		class: "rio-menu-divider",
+		role: "separator"
+	}) } };
+}
+// src/menu/interaction.ts
+/** Where to try next when the preferred side has no room: across, then to the sides. */
+const FALLBACKS = {
+	bottom: [
+		"top",
+		"end",
+		"start"
+	],
+	top: [
+		"bottom",
+		"end",
+		"start"
+	],
+	end: [
+		"start",
+		"bottom",
+		"top"
+	],
+	start: [
+		"end",
+		"bottom",
+		"top"
+	]
+};
+/** How long typed letters add up to one search. */
+const TYPEAHEAD_MS = 500;
+/** How long the pointer rests on an item before its submenu opens */
+const HOVER_OPEN_MS = 100;
+/** How long the pointer may take to reach an open submenu across other items */
+const GRACE_MS = 300;
+/**
+* A submenu goes beside its item, 4px off the menu around it (the item is inset 4px), with its
+* first item lined up with the item (its own are inset 4px from its top).
+*/
+const SUBMENU_PLACEMENT = {
+	side: "end",
+	align: "start",
+	offset: 8,
+	alignOffset: -4
+};
+const isElement = (anchor) => !!anchor && typeof anchor.focus === "function";
+/** Points are compared by value: an inline `{ x, y }` is a new object on every render. */
+const samePoint = (a, b) => a.x === b.x && a.y === b.y && a.element === b.element;
+/** Whether a point is inside a polygon, by casting a ray to the right and counting crossings */
+const isInside = ({ x, y }, polygon) => {
+	let inside = false;
+	for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+		const a = polygon[i];
+		const b = polygon[j];
+		if (a.y > y !== b.y > y && x < (b.x - a.x) * (y - a.y) / (b.y - a.y) + a.x) inside = !inside;
+	}
+	return inside;
+};
+const menuStates = /* @__PURE__ */ new WeakMap();
+const stateOf = (menu) => {
+	let state = menuStates.get(menu);
+	if (!state) {
+		state = {
+			openers: /* @__PURE__ */ new Map(),
+			typing: () => false
+		};
+		menuStates.set(menu, state);
+	}
+	return state;
+};
+const endGrace = (state) => {
+	if (state.grace) clearTimeout(state.grace.timer);
+	state.grace = void 0;
+};
+const menuAround = (element) => element.parentElement?.closest(".rio-menu");
+const topOf = (menu) => {
+	let top = menu;
+	for (let up = menuAround(menu); up; up = menuAround(up)) top = up;
+	return top;
+};
+const activeMenus = /* @__PURE__ */ new WeakMap();
+const shapeTree = (menu, active) => {
+	const top = topOf(menu);
+	if (active) activeMenus.set(top, active);
+	let current = activeMenus.get(top) ?? top;
+	while (current && !current.matches(":popover-open")) current = menuAround(current);
+	const open = [top, ...top.querySelectorAll(".rio-menu")].filter((each) => each.matches(":popover-open"));
+	for (const each of open) each.toggleAttribute("data-inactive", open.length > 1 && each !== current);
+};
+function attachMenu(root, options) {
+	return setup(root, options);
+}
+function setup(root, options, nested) {
+	const document = root.ownerDocument;
+	const view = document.defaultView;
+	let reanchoring = false;
+	const overlay = attachOverlay(root, {
+		mode: "auto",
+		onClose: (reason) => {
+			if (!(reanchoring && reason === "dismiss")) options.onClose();
+		}
+	});
+	const items = () => [...root.querySelectorAll("[role^=\"menuitem\"]")].filter((item) => item.closest("[role=\"menu\"]") === root);
+	const focused = () => items().indexOf(document.activeElement);
+	const focusAt = (index) => {
+		const all = items();
+		if (all.length) all[(index + all.length) % all.length].focus();
+	};
+	let anchored;
+	let placement = "";
+	/** What had the focus when the menu opened */
+	let opener = null;
+	let pinned;
+	const pin = (fresh) => {
+		const anchor = options.anchor();
+		if (!anchor || isElement(anchor) || !anchor.element) {
+			pinned = void 0;
+			return;
+		}
+		if (!fresh && pinned && samePoint(pinned.point, anchor)) return;
+		const rect = anchor.element.getBoundingClientRect();
+		pinned = {
+			point: { ...anchor },
+			x: anchor.x - rect.left,
+			y: anchor.y - rect.top
+		};
+	};
+	/** The anchor for placing: for a point on an element, where that spot is now */
+	const anchorNow = () => {
+		const anchor = options.anchor();
+		if (!anchor || isElement(anchor) || !anchor.element) return anchor;
+		if (!anchor.element.isConnected) return void 0;
+		if (!pinned || !samePoint(pinned.point, anchor)) pin(false);
+		const rect = anchor.element.getBoundingClientRect();
+		return {
+			x: rect.left + pinned.x,
+			y: rect.top + pinned.y
+		};
+	};
+	const place = () => {
+		const p = {
+			...menuDefaults,
+			alignOffset: 0,
+			...omitUndefined(options.props())
+		};
+		const key = `${p.side} ${p.align} ${p.offset} ${p.alignOffset}`;
+		if (anchored && key === placement) return anchored;
+		anchored?.detach();
+		placement = key;
+		anchored = attachAnchoredPosition(root, {
+			anchor: anchorNow,
+			side: p.side,
+			align: p.align,
+			offset: p.offset,
+			alignOffset: p.alignOffset,
+			fallbacks: FALLBACKS[p.side]
+		});
+		return anchored;
+	};
+	const returnTarget = () => {
+		const anchor = options.anchor();
+		if (isElement(anchor) && anchor.isConnected) return anchor;
+		return opener?.isConnected && !root.contains(opener) ? opener : null;
+	};
+	let typed = "";
+	let typedAt = 0;
+	const typeahead = (key) => {
+		const now = performance.now();
+		typed = now - typedAt > TYPEAHEAD_MS ? key : typed + key;
+		typedAt = now;
+		const all = items();
+		const labelOf = (item) => (item.querySelector(".rio-menu-item__label")?.textContent ?? item.textContent ?? "").trim().toLowerCase();
+		const search = [...typed].every((letter) => letter === typed[0]) ? typed[0] : typed;
+		const start = focused() + (search.length === 1 ? 1 : 0);
+		for (let step = 0; step < all.length; step++) {
+			const item = all[(Math.max(start, 0) + step) % all.length];
+			if (labelOf(item).startsWith(search)) {
+				item.focus();
+				return;
+			}
+		}
+	};
+	const state = stateOf(root);
+	state.typing = () => typed !== "" && performance.now() - typedAt <= TYPEAHEAD_MS;
+	const onKeydown = (event) => {
+		if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) return;
+		if (event.key === "Tab") {
+			if (nested) return;
+			options.onClose();
+			returnTarget()?.focus();
+			return;
+		}
+		if (event.target.closest("[role=\"menu\"]") !== root) return;
+		if (activeMenus.get(topOf(root)) !== root) shapeTree(root, root);
+		const handled = () => event.preventDefault();
+		if (nested && event.key === (isRtl() ? "ArrowRight" : "ArrowLeft")) {
+			handled();
+			options.onClose();
+			return;
+		}
+		switch (event.key) {
+			case "ArrowDown":
+				handled();
+				focusAt(focused() + 1);
+				return;
+			case "ArrowUp":
+				handled();
+				focusAt(focused() < 0 ? -1 : focused() - 1);
+				return;
+			case "Home":
+				handled();
+				focusAt(0);
+				return;
+			case "End":
+				handled();
+				focusAt(-1);
+				return;
+		}
+		if (event.key.length === 1 && !(event.key === " " && !typed)) {
+			handled();
+			typeahead(event.key.toLowerCase());
+		}
+	};
+	root.addEventListener("keydown", onKeydown);
+	const isRtl = () => view.getComputedStyle(root).direction === "rtl";
+	let last;
+	/** Which way the pointer last moved, across and down */
+	const heading = {};
+	const onPointerMove = (event) => {
+		if (event.pointerType !== "mouse") return;
+		const target = event.target;
+		if (target.closest("[role=\"menu\"]") !== root) return;
+		const point = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		if (last && point.x !== last.x) heading.x = point.x > last.x ? "right" : "left";
+		if (last && point.y !== last.y) heading.y = point.y > last.y ? "down" : "up";
+		last = point;
+		if (activeMenus.get(topOf(root)) !== root) shapeTree(root, root);
+		const { grace } = state;
+		if (grace) {
+			if ((grace.toward === "left" || grace.toward === "right" ? heading.x : heading.y) === grace.toward && isInside(point, grace.area)) return;
+		}
+		endGrace(state);
+		const item = target.closest("[role^=\"menuitem\"]");
+		if (!item) return;
+		const focusedMenu = document.activeElement?.closest("[role=\"menu\"]");
+		if (focusedMenu && focusedMenu !== root && topOf(focusedMenu) === topOf(root)) item.focus({ preventScroll: true });
+		for (const [opener, control] of state.openers) if (opener !== item) control.cancel();
+		state.openers.get(item)?.hover();
+	};
+	root.addEventListener("pointermove", onPointerMove);
+	const onFocusIn = (event) => {
+		if (event.target.closest("[role=\"menu\"]") === root) shapeTree(root, root);
+	};
+	root.addEventListener("focusin", onFocusIn);
+	const focusFirst = () => {
+		const all = items();
+		(all.find((item) => item.getAttribute("aria-checked") === "true") ?? all[0])?.focus();
+	};
+	/** What the menu last opened at: its anchor element or point, or null for none */
+	let shownAt = null;
+	const isNewAnchor = () => {
+		const anchor = options.anchor();
+		if (!anchor || !shownAt) return false;
+		if (isElement(anchor) || isElement(shownAt)) return anchor !== shownAt;
+		return !samePoint(anchor, shownAt);
+	};
+	const remember = () => {
+		const anchor = options.anchor();
+		shownAt = !anchor ? null : isElement(anchor) ? anchor : { ...anchor };
+	};
+	/**
+	* Opens the menu. `afresh` opens it as if it had been closed: a menu still open, or still fading
+	* out after a click outside, would only turn its closing back where it is, so that is cut short
+	* and the opening motion plays from the start. By default, at a new anchor.
+	*/
+	const show = (afresh = isNewAnchor()) => {
+		const active = document.activeElement;
+		if (!root.contains(active)) opener = active instanceof document.defaultView.HTMLElement ? active : null;
+		if (afresh) {
+			root.style.setProperty("transition", "none");
+			if (root.matches(":popover-open")) overlay.hide();
+			root.offsetWidth;
+			root.style.removeProperty("transition");
+		}
+		const anchored = place();
+		const anchor = options.anchor();
+		remember();
+		const on = anchor && !isElement(anchor) ? anchor.element : void 0;
+		overlay.show(isElement(anchor) ? anchor : on instanceof document.defaultView.HTMLElement ? on : void 0);
+		anchored.update();
+		const focusing = !nested || nested.focusOnShow();
+		shapeTree(root, focusing ? root : void 0);
+		if (focusing) focusFirst();
+	};
+	let pressing = false;
+	let afterPress;
+	let pressTimer;
+	const release = () => {
+		if (!pressing) return;
+		pressing = false;
+		clearTimeout(pressTimer);
+		const run = afterPress;
+		afterPress = void 0;
+		if (run) setTimeout(run);
+	};
+	const onContextMenu = (event) => {
+		if (event.buttons === 0) return;
+		pressing = true;
+		clearTimeout(pressTimer);
+		pressTimer = setTimeout(release, 1e3);
+	};
+	const onContextMenuDone = (event) => {
+		setTimeout(() => {
+			if (!event.defaultPrevented) release();
+		});
+	};
+	if (!nested) {
+		document.addEventListener("contextmenu", onContextMenu, { capture: true });
+		view.addEventListener("contextmenu", onContextMenuDone);
+		for (const type of ["pointerup", "pointercancel"]) document.addEventListener(type, release, { capture: true });
+		view.addEventListener("blur", release);
+	}
+	let wanted = false;
+	return {
+		sync(open) {
+			wanted = open;
+			const shown = root.matches(":popover-open");
+			if (open && !shown) {
+				pin(true);
+				if (pressing) afterPress = () => wanted && !root.matches(":popover-open") && show();
+				else show();
+			} else if (!open) {
+				const hadFocus = root.contains(document.activeElement);
+				afterPress = void 0;
+				reanchoring = false;
+				overlay.hide();
+				typed = "";
+				shapeTree(root);
+				if (hadFocus) returnTarget()?.focus();
+			}
+		},
+		update() {
+			pin(false);
+			if (!root.matches(":popover-open")) {
+				if (wanted && !pressing && isNewAnchor()) show(true);
+				return;
+			}
+			if (pressing) {
+				reanchoring = true;
+				afterPress = () => {
+					reanchoring = false;
+					if (wanted) show(true);
+				};
+				return;
+			}
+			if (isNewAnchor()) show(true);
+			else {
+				remember();
+				place().update();
+			}
+		},
+		focusFirst,
+		detach() {
+			root.removeEventListener("keydown", onKeydown);
+			root.removeEventListener("pointermove", onPointerMove);
+			root.removeEventListener("focusin", onFocusIn);
+			endGrace(state);
+			document.removeEventListener("contextmenu", onContextMenu, { capture: true });
+			view.removeEventListener("contextmenu", onContextMenuDone);
+			for (const type of ["pointerup", "pointercancel"]) document.removeEventListener(type, release, { capture: true });
+			view.removeEventListener("blur", release);
+			clearTimeout(pressTimer);
+			pressing = false;
+			afterPress = void 0;
+			overlay.detach();
+			anchored?.detach();
+		}
+	};
+}
+let submenuIds = 0;
+/**
+* A submenu's behavior in the DOM: a menu (see `attachMenu`) that `item` opens, shown beside it.
+* `item` sits in a menu that `attachMenu` or this function runs, and `root` follows it.
+*/
+function attachSubMenu(item, root, options) {
+	const view = item.ownerDocument.defaultView;
+	const parent = item.closest("[role=\"menu\"]");
+	let open = false;
+	/** Whether the opening asked for moves the focus in: from the keyboard, not the pointer */
+	let focusIn = false;
+	const request = (next, focus = false) => {
+		focusIn = focus;
+		options.onOpenChange(next);
+	};
+	const dom = setup(root, {
+		anchor: () => item,
+		props: () => SUBMENU_PLACEMENT,
+		onClose: () => request(false)
+	}, { focusOnShow: () => focusIn });
+	const disabled = () => item.getAttribute("aria-disabled") === "true";
+	root.id ||= `rio-submenu-${++submenuIds}`;
+	item.setAttribute("popovertarget", root.id);
+	item.setAttribute("popovertargetaction", "show");
+	const onClickFirst = (event) => {
+		focusIn = event.detail === 0;
+	};
+	const onClick = (event) => event.preventDefault();
+	item.addEventListener("click", onClickFirst, { capture: true });
+	item.addEventListener("click", onClick);
+	let timer;
+	const stopTimer = () => {
+		clearTimeout(timer);
+		timer = void 0;
+	};
+	const opener = {
+		hover() {
+			if (open || disabled() || timer !== void 0) return;
+			timer = setTimeout(() => {
+				timer = void 0;
+				if (!parent || parent.matches(":popover-open")) request(true);
+			}, HOVER_OPEN_MS);
+		},
+		cancel() {
+			stopTimer();
+			if (open) request(false);
+		}
+	};
+	if (parent) stateOf(parent).openers.set(item, opener);
+	const onPointerLeave = (event) => {
+		if (event.pointerType !== "mouse") return;
+		stopTimer();
+		if (!open || !parent) return;
+		const state = stateOf(parent);
+		const box = root.getBoundingClientRect();
+		const from = item.getBoundingClientRect();
+		const toward = box.top >= from.bottom - 1 ? "down" : box.bottom <= from.top + 1 ? "up" : box.left >= from.left ? "right" : "left";
+		const across = toward === "left" || toward === "right";
+		const bleed = toward === "right" || toward === "down" ? -5 : 5;
+		const exit = across ? {
+			x: event.clientX + bleed,
+			y: event.clientY
+		} : {
+			x: event.clientX,
+			y: event.clientY + bleed
+		};
+		const near = {
+			right: box.left,
+			left: box.right,
+			down: box.top,
+			up: box.bottom
+		}[toward];
+		const far = {
+			right: box.right,
+			left: box.left,
+			down: box.bottom,
+			up: box.top
+		}[toward];
+		endGrace(state);
+		state.grace = {
+			area: across ? [
+				exit,
+				{
+					x: near,
+					y: box.top
+				},
+				{
+					x: far,
+					y: box.top
+				},
+				{
+					x: far,
+					y: box.bottom
+				},
+				{
+					x: near,
+					y: box.bottom
+				}
+			] : [
+				exit,
+				{
+					x: box.left,
+					y: near
+				},
+				{
+					x: box.left,
+					y: far
+				},
+				{
+					x: box.right,
+					y: far
+				},
+				{
+					x: box.right,
+					y: near
+				}
+			],
+			toward,
+			timer: setTimeout(() => endGrace(state), GRACE_MS)
+		};
+	};
+	item.addEventListener("pointerleave", onPointerLeave);
+	const onKeydown = (event) => {
+		if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) return;
+		const forward = view.getComputedStyle(item).direction === "rtl" ? "ArrowLeft" : "ArrowRight";
+		const space = event.key === " " && !(parent && stateOf(parent).typing());
+		if (event.key !== forward && event.key !== "Enter" && !space) return;
+		event.preventDefault();
+		if (disabled()) return;
+		if (open) dom.focusFirst();
+		else request(true, true);
+	};
+	item.addEventListener("keydown", onKeydown);
+	return {
+		sync(next) {
+			open = next;
+			if (!next) stopTimer();
+			dom.sync(next);
+		},
+		detach() {
+			stopTimer();
+			item.removeEventListener("click", onClickFirst, { capture: true });
+			item.removeEventListener("click", onClick);
+			item.removeEventListener("pointerleave", onPointerLeave);
+			item.removeEventListener("keydown", onKeydown);
+			item.removeAttribute("popovertarget");
+			item.removeAttribute("popovertargetaction");
+			if (parent && stateOf(parent).openers.get(item) === opener) stateOf(parent).openers.delete(item);
+			dom.detach();
+		}
+	};
+}
 // src/primitives/drag/drag.ts
 /** Velocity is measured over this window, so a pause before release reads as slow. */
 const VELOCITY_WINDOW_MS = 100;
@@ -1044,4 +2424,375 @@ function createSwitch(options) {
 		}
 	};
 }
-export { BUTTON_GROUP_SELECTIONS, BUTTON_GROUP_VARIANTS, BUTTON_SIZES, BUTTON_VARIANTS, ICON_BUTTON_VARIANTS, ICON_BUTTON_WIDTHS, SPLIT_BUTTON_VARIANTS, attachButtonGroup, attachDrag, attachRipple, attachShapeMorph, attachSplitButtonMenuIcon, attachSpringProperty, attachSwitchHandle, buttonDefaults, buttonGroupDefaults, buttonGroupSkeleton, buttonSkeleton, createButton, createButtonGroup, createIconButton, createSplitButton, createSpring, createSwitch, iconButtonDefaults, iconButtonSkeleton, prefersReducedMotion, readSpringParams, solveSpring, splitButtonDefaults, splitButtonSkeleton, switchDefaults, switchSkeleton };
+// src/tooltip/interaction.ts
+/** How long the pointer rests on the element before its tooltip shows */
+const SHOW_DELAY_MS = 500;
+/** How long a tooltip stays after the pointer and the focus leave */
+const HIDE_DELAY_MS = 1500;
+/** How soon after a tooltip closes the next one still shows at once */
+const WARM_MS = 300;
+/** How long a touch is held to show the tooltip */
+const LONG_PRESS_MS = 500;
+/** How long after a touch that showed the tooltip ends its click is swallowed */
+const SWALLOW_CLICK_MS = 600;
+/** How far a held touch may move, in px, and still count as held */
+const MOVE_SLOP = 10;
+const shown = /* @__PURE__ */ new Set();
+let lastClosedAt = -Infinity;
+const warm = () => shown.size > 0 || performance.now() - lastClosedAt < WARM_MS;
+const textOf = (element) => (element?.textContent ?? "").replace(/\s+/g, " ").trim();
+/** The element's accessible name, near enough to tell whether a tooltip repeats it */
+const nameOf = (element) => {
+	const labelledBy = element.getAttribute("aria-labelledby");
+	if (labelledBy) {
+		const document = element.ownerDocument;
+		return labelledBy.split(/\s+/).map((id) => textOf(document.getElementById(id))).join(" ").trim();
+	}
+	return element.getAttribute("aria-label")?.trim() || textOf(element);
+};
+/** Adds or removes one id in a space-separated attribute, keeping the others. */
+const setToken = (element, name, id, on) => {
+	const ids = (element.getAttribute(name) ?? "").split(/\s+/).filter((each) => each && each !== id);
+	if (on) ids.push(id);
+	if (ids.length) element.setAttribute(name, ids.join(" "));
+	else element.removeAttribute(name);
+};
+function attachTooltip(trigger, root, options) {
+	const document = trigger.ownerDocument;
+	const view = document.defaultView;
+	/** The element the tooltip is for: the trigger's first child, ahead of the tooltip */
+	const element = () => {
+		const first = trigger.firstElementChild;
+		return first instanceof view.HTMLElement && first !== root ? first : null;
+	};
+	const isOpen = () => root.matches(":popover-open");
+	const request = (open) => options.onOpenChange(open);
+	let overlay;
+	let overlayPersistent;
+	/** When the pointer last went down on the element, whether the tooltip was open */
+	let openAtPress = false;
+	const overlayNow = () => {
+		const persistent = options.persistent();
+		if (overlay && persistent === overlayPersistent) return overlay;
+		overlay?.detach();
+		overlayPersistent = persistent;
+		const onClose = () => request(false);
+		overlay = attachOverlay(root, persistent ? {
+			mode: "auto",
+			contain: true,
+			onClose
+		} : {
+			mode: "manual",
+			transient: true,
+			contain: true,
+			onClose
+		});
+		return overlay;
+	};
+	let anchored;
+	let placement = "";
+	const place = () => {
+		const p = options.placement();
+		const key = `${p.side} ${p.align} ${p.offset}`;
+		if (anchored && key === placement) return anchored;
+		anchored?.detach();
+		placement = key;
+		anchored = attachAnchoredPosition(root, {
+			anchor: element,
+			side: p.side,
+			align: p.align,
+			offset: p.offset
+		});
+		return anchored;
+	};
+	let described;
+	let expanded;
+	const updateAria = () => {
+		const target = element();
+		const text = options.interactive() ? root.querySelector(".rio-tooltip__supporting-text") : root;
+		const describe = !!target && !!text?.id && nameOf(target) !== textOf(text);
+		if (described && (!describe || described.element !== target || described.id !== text.id)) {
+			setToken(described.element, "aria-describedby", described.id, false);
+			described = void 0;
+		}
+		if (describe && !described) {
+			setToken(target, "aria-describedby", text.id, true);
+			described = {
+				element: target,
+				id: text.id
+			};
+		}
+		const persistent = options.persistent();
+		if (expanded && (!persistent || expanded !== target)) {
+			expanded.removeAttribute("aria-expanded");
+			expanded = void 0;
+		}
+		if (persistent && target) {
+			target.setAttribute("aria-expanded", String(isOpen()));
+			expanded = target;
+		}
+	};
+	let showTimer;
+	let hideTimer;
+	const stopShow = () => {
+		clearTimeout(showTimer);
+		showTimer = void 0;
+	};
+	const stopHide = () => {
+		clearTimeout(hideTimer);
+		hideTimer = void 0;
+	};
+	const hideLater = () => {
+		stopHide();
+		hideTimer = setTimeout(() => {
+			hideTimer = void 0;
+			const focused = document.activeElement;
+			const keyboard = !!focused && trigger.contains(focused) && focused.matches(":focus-visible");
+			if (!trigger.matches(":hover") && !keyboard) request(false);
+		}, HIDE_DELAY_MS);
+	};
+	const onPointerEnter = (event) => {
+		if (event.pointerType !== "mouse" || options.persistent()) return;
+		stopHide();
+		if (isOpen() || showTimer !== void 0) return;
+		if (warm()) {
+			request(true);
+			return;
+		}
+		showTimer = setTimeout(() => {
+			showTimer = void 0;
+			request(true);
+		}, SHOW_DELAY_MS);
+	};
+	const onPointerLeave = (event) => {
+		if (event.pointerType !== "mouse" || options.persistent()) return;
+		stopShow();
+		if (isOpen()) hideLater();
+	};
+	const onFocusIn = (event) => {
+		if (options.persistent()) return;
+		const focused = event.target;
+		if (!root.contains(focused) && !focused.matches(":focus-visible")) return;
+		stopShow();
+		stopHide();
+		if (!isOpen()) request(true);
+	};
+	const onFocusOut = (event) => {
+		const next = event.relatedTarget;
+		if (next && trigger.contains(next)) return;
+		if (options.persistent()) {
+			if (next && isOpen()) request(false);
+			return;
+		}
+		if (isOpen()) hideLater();
+	};
+	let pressTimer;
+	let pressedAt;
+	let swallowUntil = -Infinity;
+	const stopPress = () => {
+		clearTimeout(pressTimer);
+		pressTimer = void 0;
+		pressedAt = void 0;
+	};
+	const onPointerDown = (event) => {
+		if (!element()?.contains(event.target)) return;
+		openAtPress = isOpen();
+		if (options.persistent()) return;
+		stopShow();
+		if (event.pointerType === "touch") {
+			stopPress();
+			pressedAt = {
+				x: event.clientX,
+				y: event.clientY
+			};
+			pressTimer = setTimeout(() => {
+				stopPress();
+				swallowUntil = Infinity;
+				stopHide();
+				request(true);
+			}, LONG_PRESS_MS);
+			return;
+		}
+		stopHide();
+		if (isOpen()) request(false);
+	};
+	const onPointerMove = (event) => {
+		if (!pressedAt) return;
+		if (Math.hypot(event.clientX - pressedAt.x, event.clientY - pressedAt.y) > MOVE_SLOP) stopPress();
+	};
+	const onPointerUp = (event) => {
+		if (event.pointerType !== "touch" || options.persistent()) return;
+		stopPress();
+		if (swallowUntil === Infinity) {
+			swallowUntil = performance.now() + SWALLOW_CLICK_MS;
+			if (isOpen()) hideLater();
+		}
+	};
+	const onPointerCancel = () => {
+		stopPress();
+		swallowUntil = -Infinity;
+	};
+	const onContextMenu = (event) => {
+		if (pressTimer !== void 0 || performance.now() < swallowUntil) event.preventDefault();
+	};
+	const onClickFirst = (event) => {
+		if (performance.now() >= swallowUntil || !element()?.contains(event.target)) return;
+		swallowUntil = -Infinity;
+		event.preventDefault();
+		event.stopImmediatePropagation();
+	};
+	const onClick = (event) => {
+		if (!options.persistent()) return;
+		if (!element()?.contains(event.target)) return;
+		request(!(event.detail === 0 ? isOpen() : openAtPress));
+	};
+	trigger.addEventListener("pointerenter", onPointerEnter);
+	trigger.addEventListener("pointerleave", onPointerLeave);
+	trigger.addEventListener("focusin", onFocusIn);
+	trigger.addEventListener("focusout", onFocusOut);
+	trigger.addEventListener("pointerdown", onPointerDown);
+	trigger.addEventListener("pointermove", onPointerMove);
+	trigger.addEventListener("pointerup", onPointerUp);
+	trigger.addEventListener("pointercancel", onPointerCancel);
+	trigger.addEventListener("contextmenu", onContextMenu);
+	trigger.addEventListener("click", onClickFirst, { capture: true });
+	trigger.addEventListener("click", onClick);
+	overlayNow();
+	updateAria();
+	return {
+		sync(open) {
+			const showing = isOpen();
+			if (open && !showing) {
+				const target = element();
+				if (!target) {
+					request(false);
+					return;
+				}
+				overlayNow().show(target);
+				place().update();
+				shown.add(root);
+			} else if (!open) {
+				stopShow();
+				stopHide();
+				if (showing) overlay?.hide();
+				if (shown.delete(root)) lastClosedAt = performance.now();
+			}
+			updateAria();
+		},
+		update: updateAria,
+		detach() {
+			trigger.removeEventListener("pointerenter", onPointerEnter);
+			trigger.removeEventListener("pointerleave", onPointerLeave);
+			trigger.removeEventListener("focusin", onFocusIn);
+			trigger.removeEventListener("focusout", onFocusOut);
+			trigger.removeEventListener("pointerdown", onPointerDown);
+			trigger.removeEventListener("pointermove", onPointerMove);
+			trigger.removeEventListener("pointerup", onPointerUp);
+			trigger.removeEventListener("pointercancel", onPointerCancel);
+			trigger.removeEventListener("contextmenu", onContextMenu);
+			trigger.removeEventListener("click", onClickFirst, { capture: true });
+			trigger.removeEventListener("click", onClick);
+			stopShow();
+			stopHide();
+			stopPress();
+			if (described) setToken(described.element, "aria-describedby", described.id, false);
+			expanded?.removeAttribute("aria-expanded");
+			if (shown.delete(root)) lastClosedAt = performance.now();
+			overlay?.detach();
+			anchored?.detach();
+		}
+	};
+}
+// src/tooltip/tooltip.ts
+/** M3 tooltip variants: a brief label, or a card with a subhead, text, and actions. */
+const TOOLTIP_VARIANTS = ["plain", "rich"];
+const tooltipDefaults = {
+	variant: "plain",
+	persistent: false,
+	open: false,
+	offset: 4
+};
+/** The trigger holds the app's element first, then the tooltip (`tooltipSkeleton`). */
+const tooltipTriggerSkeleton = {
+	part: "trigger",
+	tag: "span",
+	content: true
+};
+/** Spans throughout, so a tooltip may sit inside a paragraph. */
+const tooltipSkeleton = {
+	part: "root",
+	tag: "span",
+	children: [
+		{
+			part: "subhead",
+			tag: "span",
+			when: "showsSubhead",
+			content: true
+		},
+		{
+			part: "supportingText",
+			tag: "span",
+			content: true
+		},
+		{
+			part: "actions",
+			tag: "span",
+			when: "showsActions",
+			content: true
+		}
+	]
+};
+const NO_CONTENT = {
+	subhead: false,
+	actions: false
+};
+function createTooltip(options) {
+	const props = () => ({
+		...tooltipDefaults,
+		...omitUndefined(options.props())
+	});
+	const rich = () => props().variant === "rich";
+	const content = () => options.content?.() ?? NO_CONTENT;
+	const showsSubhead = () => rich() && content().subhead;
+	const showsActions = () => rich() && content().actions;
+	const interactive = showsActions;
+	const { ids } = options;
+	return {
+		parts: {
+			trigger: () => ({ class: "rio-tooltip-trigger" }),
+			root() {
+				const p = props();
+				const dialog = interactive();
+				return {
+					class: "rio-tooltip",
+					id: ids.root,
+					role: dialog ? "dialog" : "tooltip",
+					"aria-labelledby": dialog ? showsSubhead() ? ids.subhead : ids.supportingText : void 0,
+					"data-variant": p.variant
+				};
+			},
+			subhead: () => ({
+				class: "rio-tooltip__subhead",
+				id: ids.subhead
+			}),
+			supportingText: () => ({
+				class: "rio-tooltip__supporting-text",
+				id: ids.supportingText
+			}),
+			actions: () => ({ class: "rio-tooltip__actions" })
+		},
+		showsSubhead,
+		showsActions,
+		interactive,
+		persistent: () => rich() && props().persistent,
+		placement() {
+			const p = props();
+			return {
+				side: p.side ?? (rich() ? "bottom" : "top"),
+				align: p.align ?? (rich() ? "start" : "center"),
+				offset: p.offset
+			};
+		}
+	};
+}
+export { BUTTON_GROUP_SELECTIONS, BUTTON_GROUP_VARIANTS, BUTTON_SIZES, BUTTON_VARIANTS, DIALOG_ROLES, ICON_BUTTON_VARIANTS, ICON_BUTTON_WIDTHS, MENU_SELECTIONS, MENU_VARIANTS, SPLIT_BUTTON_VARIANTS, TOOLTIP_VARIANTS, attachAnchoredPosition, attachButtonGroup, attachDialog, attachDrag, attachMenu, attachOverlay, attachRipple, attachShapeMorph, attachSplitButtonMenuIcon, attachSpringProperty, attachSubMenu, attachSwitchHandle, attachTooltip, buttonDefaults, buttonGroupDefaults, buttonGroupSkeleton, buttonSkeleton, createButton, createButtonGroup, createDialog, createIconButton, createMenu, createMenuDivider, createMenuGroup, createMenuItem, createSplitButton, createSpring, createSubMenu, createSwitch, createTooltip, dialogDefaults, dialogSkeleton, iconButtonDefaults, iconButtonSkeleton, menuDefaults, menuDividerSkeleton, menuGroupSkeleton, menuItemDefaults, menuItemSkeleton, menuSkeleton, prefersReducedMotion, readSpringParams, solveSpring, splitButtonDefaults, splitButtonSkeleton, switchDefaults, switchSkeleton, tooltipDefaults, tooltipSkeleton, tooltipTriggerSkeleton };