@rio-m3e/core 0.1.0 → 0.3.0

package/dist/index.js

@@ -1,3 +1,296 @@
+// src/utils/object.ts
+/**
+* A copy without the properties that are explicitly `undefined`, so spreading it over defaults
+* keeps the defaults: `{ ...defaults, ...omitUndefined(props) }`.
+*/
+function omitUndefined(object) {
+	return Object.fromEntries(Object.entries(object).filter(([, value]) => value !== void 0));
+}
+// src/button-group/button-group.ts
+/**
+* M3E button group variants. A standard group spaces its buttons and lets a pressed button push
+* its neighbors; a connected group joins them with 2px gaps and shared corners, and fills the
+* width it is given.
+*/
+const BUTTON_GROUP_VARIANTS = ["standard", "connected"];
+/** Whether the group's buttons can be selected: none, one at a time, or any number. */
+const BUTTON_GROUP_SELECTIONS = [
+	"none",
+	"single",
+	"multiple"
+];
+const buttonGroupDefaults = {
+	variant: "standard",
+	size: "small",
+	shape: "round",
+	selection: "none",
+	required: false
+};
+/** How the adapter renders the button group: one root, with the buttons as its direct children. */
+const buttonGroupSkeleton = {
+	part: "root",
+	tag: "div",
+	content: true
+};
+const valuesOf$1 = (selected) => selected === void 0 ? [] : Array.isArray(selected) ? selected : [selected];
+function createButtonGroup(options) {
+	const props = () => ({
+		...buttonGroupDefaults,
+		...omitUndefined(options.props())
+	});
+	const isSelected = (value) => {
+		const p = props();
+		return p.selection !== "none" && valuesOf$1(p.selected).includes(value);
+	};
+	return {
+		parts: { root() {
+			const p = props();
+			return {
+				class: "rio-button-group",
+				role: "group",
+				"data-variant": p.variant,
+				"data-size": p.size,
+				"data-shape": p.shape
+			};
+		} },
+		size: () => props().size,
+		shape: () => props().shape,
+		selection: () => props().selection,
+		isSelected,
+		select(value, selected) {
+			const p = props();
+			if (p.selection === "none" || isSelected(value) === selected) return;
+			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));
+		}
+	};
+}
+// src/primitives/spring/spring.ts
+/**
+* Where a spring is `t` seconds after it starts at `from` with `velocity`, heading to `to`.
+*/
+function solveSpring({ dampingRatio: zeta, stiffness }, from, to, velocity, t) {
+	const w0 = Math.sqrt(stiffness);
+	const x0 = from - to;
+	const v0 = velocity;
+	if (Math.abs(zeta - 1) < 1e-6) {
+		const b = v0 + w0 * x0;
+		const decay = Math.exp(-w0 * t);
+		return {
+			value: to + (x0 + b * t) * decay,
+			velocity: (b - w0 * (x0 + b * t)) * decay
+		};
+	}
+	if (zeta < 1) {
+		const a = zeta * w0;
+		const wd = w0 * Math.sqrt(1 - zeta * zeta);
+		const b = (v0 + a * x0) / wd;
+		const decay = Math.exp(-a * t);
+		const cos = Math.cos(wd * t);
+		const sin = Math.sin(wd * t);
+		return {
+			value: to + decay * (x0 * cos + b * sin),
+			velocity: decay * ((wd * b - a * x0) * cos - (a * b + wd * x0) * sin)
+		};
+	}
+	const root = w0 * Math.sqrt(zeta * zeta - 1);
+	const r1 = -zeta * w0 + root;
+	const r2 = -zeta * w0 - root;
+	const c2 = (v0 - r1 * x0) / (r2 - r1);
+	const c1 = x0 - c2;
+	const e1 = Math.exp(r1 * t);
+	const e2 = Math.exp(r2 * t);
+	return {
+		value: to + c1 * e1 + c2 * e2,
+		velocity: r1 * c1 * e1 + r2 * c2 * e2
+	};
+}
+const now = () => performance.now() / 1e3;
+/** A spring that animates a single number with `requestAnimationFrame`. */
+function createSpring(options) {
+	const precision = options.precision ?? .01;
+	let from = options.value;
+	let target = options.value;
+	let startVelocity = 0;
+	let params;
+	let startedAt = 0;
+	let frame;
+	const state = () => params && frame !== void 0 ? solveSpring(params, from, target, startVelocity, now() - startedAt) : {
+		value: target,
+		velocity: 0
+	};
+	const settle = () => {
+		if (frame !== void 0) cancelAnimationFrame(frame);
+		frame = void 0;
+		from = target;
+		startVelocity = 0;
+		options.onUpdate(target);
+		options.onRest?.();
+	};
+	const tick = () => {
+		const { value, velocity } = state();
+		if (Math.abs(value - target) < precision && Math.abs(velocity) < precision * 10) {
+			settle();
+			return;
+		}
+		options.onUpdate(value);
+		frame = requestAnimationFrame(tick);
+	};
+	return {
+		get value() {
+			return state().value;
+		},
+		get velocity() {
+			return state().velocity;
+		},
+		get target() {
+			return target;
+		},
+		get moving() {
+			return frame !== void 0;
+		},
+		to(next, nextParams, velocity) {
+			const current = state();
+			from = current.value;
+			startVelocity = velocity ?? current.velocity;
+			target = next;
+			params = nextParams;
+			startedAt = now();
+			if (frame === void 0) frame = requestAnimationFrame(tick);
+		},
+		jump(value) {
+			target = value;
+			settle();
+		},
+		stop() {
+			const { value } = state();
+			if (frame !== void 0) cancelAnimationFrame(frame);
+			frame = void 0;
+			from = target = value;
+			startVelocity = 0;
+		}
+	};
+}
+/**
+* Whether the user asked for reduced motion. Spatial springs should jump straight to their target
+* (or be skipped) when it is on; see `docs/foundations.md`, section 3.
+*/
+function prefersReducedMotion() {
+	return typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+/**
+* Reads a motion token's spring from CSS variables on an element, for example
+* `--rio-motion-fast-spatial-damping` and `-stiffness`. Reading them from the element, rather than
+* from the tokens package, lets a subtree that swaps motion schemes change its springs too.
+* Returns `undefined` when the theme doesn't define them.
+*/
+function readSpringParams(element, token) {
+	const style = getComputedStyle(element);
+	const dampingRatio = parseFloat(style.getPropertyValue(`--rio-motion-${token}-damping`));
+	const stiffness = parseFloat(style.getPropertyValue(`--rio-motion-${token}-stiffness`));
+	return Number.isFinite(dampingRatio) && Number.isFinite(stiffness) ? {
+		dampingRatio,
+		stiffness
+	} : void 0;
+}
+// src/button-group/interaction.ts
+const PRESSED_WIDTH_RATIO = .15;
+function attachButtonGroup(root, options = {}) {
+	const ratio = options.pressedWidthRatio ?? PRESSED_WIDTH_RATIO;
+	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;
+		const focusable = items().filter((el) => !el.matches(":disabled") && el.tabIndex >= 0);
+		const index = focusable.findIndex((el) => el.contains(document.activeElement));
+		if (index === -1) return;
+		const next = focusable[index + (event.key === "ArrowRight" !== (getComputedStyle(root).direction === "rtl") ? 1 : -1)];
+		if (!next) return;
+		event.preventDefault();
+		next.focus();
+	};
+	root.addEventListener("keydown", onKeydown);
+	const springs = /* @__PURE__ */ new Map();
+	const natural = /* @__PURE__ */ new Map();
+	const setWidth = (el, value) => value === void 0 ? el.style.removeProperty("inline-size") : el.style.setProperty("inline-size", `${value}px`);
+	const springOf = (el) => {
+		let spring = springs.get(el);
+		if (!spring) {
+			spring = createSpring({
+				value: natural.get(el),
+				onUpdate: (value) => setWidth(el, value),
+				onRest: () => {
+					if (springs.get(el)?.target === natural.get(el)) setWidth(el, void 0);
+				}
+			});
+			springs.set(el, spring);
+		}
+		return spring;
+	};
+	/**
+	* A button's own width, without the width a spring wrote on it. The inline width comes off and
+	* goes back within the same task, so it never shows.
+	*/
+	const measure = (el) => {
+		const inline = el.style.inlineSize;
+		el.style.removeProperty("inline-size");
+		const width = el.getBoundingClientRect().width;
+		el.style.setProperty("inline-size", inline);
+		return width;
+	};
+	/** Sets every button's target width. `instant` skips the springs, for changes of size. */
+	const layout = (instant = false) => {
+		const all = items();
+		for (const el of all) natural.set(el, measure(el));
+		const targets = new Map(all.map((el) => [el, natural.get(el)]));
+		const pressed = all.findIndex((el) => el.hasAttribute("data-pressed"));
+		const standard = root.getAttribute("data-variant") !== "connected";
+		if (pressed !== -1 && standard && !prefersReducedMotion()) {
+			const growth = natural.get(all[pressed]) * ratio;
+			const neighbors = [all[pressed - 1], all[pressed + 1]].filter((el) => el !== void 0);
+			let gained = 0;
+			for (const el of neighbors) {
+				const width = natural.get(el);
+				const given = Math.min(growth / neighbors.length, width * ratio);
+				targets.set(el, width - given);
+				gained += given;
+			}
+			targets.set(all[pressed], natural.get(all[pressed]) + gained);
+		}
+		const params = readSpringParams(root, "fast-spatial");
+		for (const [el, target] of targets) {
+			const spring = springOf(el);
+			if (!el.style.inlineSize && spring.value !== natural.get(el)) spring.jump(natural.get(el));
+			if (spring.target === target) continue;
+			if (params && !instant && !prefersReducedMotion()) spring.to(target, params);
+			else spring.jump(target);
+		}
+	};
+	const observer = new MutationObserver((mutations) => {
+		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, {
+		subtree: true,
+		attributes: true,
+		attributeFilter: [
+			"data-pressed",
+			"data-size",
+			"data-width"
+		]
+	});
+	return { detach() {
+		root.removeEventListener("keydown", onKeydown);
+		observer.disconnect();
+		for (const [el, spring] of springs) {
+			spring.stop();
+			setWidth(el, void 0);
+		}
+	} };
+}
 // src/button/button.ts
 const BUTTON_VARIANTS = [
 	"filled",
@@ -24,28 +317,63 @@ const buttonDefaults = {
 	softDisabled: false,
 	type: "button"
 };
+/** How the adapter renders the button's parts. The icon holds the leading icon. */
+const buttonSkeleton = {
+	part: "root",
+	tag: "button",
+	children: [
+		{
+			part: "touch",
+			tag: "span"
+		},
+		{
+			part: "icon",
+			tag: "span",
+			when: "showsIcon",
+			content: true
+		},
+		{
+			part: "label",
+			tag: "span",
+			content: true
+		}
+	]
+};
 const isToggle = (p) => !!p.toggle && p.variant !== "text";
 /** Defaults under the given props, skipping props that are explicitly `undefined`. */
 const resolve = (props) => ({
 	...buttonDefaults,
-	...Object.fromEntries(Object.entries(props).filter(([, v]) => v !== void 0))
+	...omitUndefined(props)
 });
 function createButton(options) {
 	return {
-		rootAttrs() {
-			const p = resolve(options.props());
-			const toggle = isToggle(p);
-			return {
-				type: p.type,
-				disabled: p.disabled ? "" : void 0,
-				"aria-disabled": p.softDisabled && !p.disabled ? "true" : void 0,
-				"aria-pressed": toggle ? String(p.selected) : void 0,
-				"data-variant": p.variant,
-				"data-size": p.size,
-				"data-shape": p.shape,
-				"data-selected": toggle ? String(p.selected) : void 0
-			};
+		parts: {
+			root() {
+				const p = resolve(options.props());
+				const toggle = isToggle(p);
+				return {
+					class: "rio-button rio-state-layer rio-focus-ring",
+					type: p.type,
+					disabled: p.disabled ? "" : void 0,
+					"aria-disabled": p.softDisabled && !p.disabled ? "true" : void 0,
+					"aria-pressed": toggle ? String(p.selected) : void 0,
+					"data-variant": p.variant,
+					"data-size": p.size,
+					"data-shape": p.shape,
+					"data-selected": toggle ? String(p.selected) : void 0
+				};
+			},
+			touch: () => ({
+				class: "rio-button__touch",
+				"aria-hidden": "true"
+			}),
+			icon: () => ({
+				class: "rio-button__icon",
+				"aria-hidden": "true"
+			}),
+			label: () => ({ class: "rio-button__label" })
 		},
+		showsIcon: () => !!options.content?.().icon,
 		handleClick(event) {
 			const p = options.props();
 			if (p.disabled || p.softDisabled) {
@@ -53,7 +381,449 @@ function createButton(options) {
 				return;
 			}
 			options.onClick(event);
-			if (isToggle(p)) options.onSelectedChange(!p.selected);
+			if (isToggle(p)) options.onChange(!p.selected);
+		}
+	};
+}
+// 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);
+			}
 		}
 	};
 }
@@ -81,25 +851,989 @@ const iconButtonDefaults = {
 	softDisabled: false,
 	type: "button"
 };
+/**
+* How the adapter renders the icon button's parts. The icon holds the selected icon when
+* `showsSelectedIcon()`, otherwise the default one.
+*/
+const iconButtonSkeleton = {
+	part: "root",
+	tag: "button",
+	children: [{
+		part: "touch",
+		tag: "span"
+	}, {
+		part: "icon",
+		tag: "span",
+		content: true
+	}]
+};
 function createIconButton(options) {
 	const button = createButton({
-		...options,
 		props: () => ({
 			...options.props(),
 			variant: options.props().variant
-		})
+		}),
+		onClick: options.onClick,
+		onChange: options.onChange
 	});
 	return {
-		rootAttrs() {
-			const p = options.props();
-			return {
-				...button.rootAttrs(),
-				"aria-label": p.label,
-				"data-width": p.width ?? iconButtonDefaults.width,
-				"data-variant": p.variant ?? iconButtonDefaults.variant
-			};
+		parts: {
+			root() {
+				const p = options.props();
+				const root = button.parts.root();
+				return {
+					...root,
+					class: `${root.class} rio-icon-button`,
+					"aria-label": p.label,
+					"data-width": p.width ?? iconButtonDefaults.width,
+					"data-variant": p.variant ?? iconButtonDefaults.variant
+				};
+			},
+			touch: button.parts.touch,
+			icon: button.parts.icon
+		},
+		showsSelectedIcon() {
+			const p = options.props();
+			return !!(p.toggle && p.selected && options.content?.().selectedIcon);
+		},
+		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);
 		},
-		handleClick: button.handleClick
+		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
@@ -219,7 +1953,7 @@ const PADDING = 10;
 const SOFT_EDGE_RATIO = .35;
 const SOFT_EDGE_MINIMUM = 75;
 const isDisabled = (el) => el.matches(":disabled, [aria-disabled=\"true\"]");
-const reducedMotion$1 = () => typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+const reducedMotion = () => typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
 const setPressed = (els, pressed) => {
 	for (const el of els) if (pressed) el.dataset.pressed = "";
 	else delete el.dataset.pressed;
@@ -264,7 +1998,7 @@ function attachRipple(element, options = {}) {
 		animation?.cancel();
 		animation = surface.animate([frame(from, radius.from), frame(to, radius.to)], {
 			pseudoElement: "::after",
-			duration: reducedMotion$1() ? 0 : GROW_MS,
+			duration: reducedMotion() ? 0 : GROW_MS,
 			easing: GROW_EASING,
 			fill: "forwards"
 		});
@@ -337,138 +2071,13 @@ function attachRipple(element, options = {}) {
 		element.removeEventListener("click", onClick);
 	} };
 }
-// src/primitives/spring/spring.ts
-/**
-* Where a spring is `t` seconds after it starts at `from` with `velocity`, heading to `to`.
-*/
-function solveSpring({ dampingRatio: zeta, stiffness }, from, to, velocity, t) {
-	const w0 = Math.sqrt(stiffness);
-	const x0 = from - to;
-	const v0 = velocity;
-	if (Math.abs(zeta - 1) < 1e-6) {
-		const b = v0 + w0 * x0;
-		const decay = Math.exp(-w0 * t);
-		return {
-			value: to + (x0 + b * t) * decay,
-			velocity: (b - w0 * (x0 + b * t)) * decay
-		};
-	}
-	if (zeta < 1) {
-		const a = zeta * w0;
-		const wd = w0 * Math.sqrt(1 - zeta * zeta);
-		const b = (v0 + a * x0) / wd;
-		const decay = Math.exp(-a * t);
-		const cos = Math.cos(wd * t);
-		const sin = Math.sin(wd * t);
-		return {
-			value: to + decay * (x0 * cos + b * sin),
-			velocity: decay * ((wd * b - a * x0) * cos - (a * b + wd * x0) * sin)
-		};
-	}
-	const root = w0 * Math.sqrt(zeta * zeta - 1);
-	const r1 = -zeta * w0 + root;
-	const r2 = -zeta * w0 - root;
-	const c2 = (v0 - r1 * x0) / (r2 - r1);
-	const c1 = x0 - c2;
-	const e1 = Math.exp(r1 * t);
-	const e2 = Math.exp(r2 * t);
-	return {
-		value: to + c1 * e1 + c2 * e2,
-		velocity: r1 * c1 * e1 + r2 * c2 * e2
-	};
-}
-const now = () => performance.now() / 1e3;
-/** A spring that animates a single number with `requestAnimationFrame`. */
-function createSpring(options) {
-	const precision = options.precision ?? .01;
-	let from = options.value;
-	let target = options.value;
-	let startVelocity = 0;
-	let params;
-	let startedAt = 0;
-	let frame;
-	const state = () => params && frame !== void 0 ? solveSpring(params, from, target, startVelocity, now() - startedAt) : {
-		value: target,
-		velocity: 0
-	};
-	const settle = () => {
-		if (frame !== void 0) cancelAnimationFrame(frame);
-		frame = void 0;
-		from = target;
-		startVelocity = 0;
-		options.onUpdate(target);
-		options.onRest?.();
-	};
-	const tick = () => {
-		const { value, velocity } = state();
-		if (Math.abs(value - target) < precision && Math.abs(velocity) < precision * 10) {
-			settle();
-			return;
-		}
-		options.onUpdate(value);
-		frame = requestAnimationFrame(tick);
-	};
-	return {
-		get value() {
-			return state().value;
-		},
-		get velocity() {
-			return state().velocity;
-		},
-		get target() {
-			return target;
-		},
-		get moving() {
-			return frame !== void 0;
-		},
-		to(next, nextParams, velocity) {
-			const current = state();
-			from = current.value;
-			startVelocity = velocity ?? current.velocity;
-			target = next;
-			params = nextParams;
-			startedAt = now();
-			if (frame === void 0) frame = requestAnimationFrame(tick);
-		},
-		jump(value) {
-			target = value;
-			settle();
-		},
-		stop() {
-			const { value } = state();
-			if (frame !== void 0) cancelAnimationFrame(frame);
-			frame = void 0;
-			from = target = value;
-			startVelocity = 0;
-		}
-	};
-}
-/**
-* Reads a motion token's spring from CSS variables on an element, for example
-* `--rio-motion-fast-spatial-damping` and `-stiffness`. Reading them from the element, rather than
-* from the tokens package, lets a subtree that swaps motion schemes change its springs too.
-* Returns `undefined` when the theme doesn't define them.
-*/
-function readSpringParams(element, token) {
-	const style = getComputedStyle(element);
-	const dampingRatio = parseFloat(style.getPropertyValue(`--rio-motion-${token}-damping`));
-	const stiffness = parseFloat(style.getPropertyValue(`--rio-motion-${token}-stiffness`));
-	return Number.isFinite(dampingRatio) && Number.isFinite(stiffness) ? {
-		dampingRatio,
-		stiffness
-	} : void 0;
-}
 // src/primitives/spring-property/spring-property.ts
-/** The data attributes Rio's components use for state. */
-const STATE_ATTRIBUTES = [
-	"data-pressed",
-	"data-dragging",
-	"data-selected",
-	"data-shape",
-	"data-size",
-	"data-icon"
+/** The transition events that report a change of the target. */
+const EVENTS = [
+	"transitionrun",
+	"transitionend",
+	"transitioncancel"
 ];
-const reducedMotion = () => typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
 function attachSpringProperty(element, options) {
 	const token = options.token ?? "fast-spatial";
 	const read = () => parseFloat(getComputedStyle(element).getPropertyValue(options.target));
@@ -485,16 +2094,20 @@ function attachSpringProperty(element, options) {
 		const target = read();
 		if (!Number.isFinite(target)) return;
 		const params = readSpringParams(element, token);
-		if (!params || reducedMotion()) spring.jump(target);
+		if (!params || prefersReducedMotion()) spring.jump(target);
 		else spring.to(target, params, velocity);
 	};
-	const observer = new MutationObserver(() => {
+	const onTransition = (event) => {
+		if (event.target !== element || event.propertyName !== options.target) return;
 		if (!held && read() !== spring.target) go();
+	};
+	for (const type of EVENTS) element.addEventListener(type, onTransition);
+	const resync = new ResizeObserver(() => {
+		if (held || spring.moving) return;
+		const now = read();
+		if (Number.isFinite(now) && now !== spring.target) spring.jump(now);
 	});
-	observer.observe(element, {
-		attributes: true,
-		attributeFilter: options.watch ?? STATE_ATTRIBUTES
-	});
+	resync.observe(element);
 	return {
 		get value() {
 			return spring.value;
@@ -508,25 +2121,182 @@ function attachSpringProperty(element, options) {
 			go(velocity);
 		},
 		detach() {
-			observer.disconnect();
+			for (const type of EVENTS) element.removeEventListener(type, onTransition);
+			resync.disconnect();
 			spring.stop();
 			options.apply(void 0);
 		}
 	};
 }
 // src/primitives/shape-morph/shape-morph.ts
+const CORNERS = {
+	start: ["border-start-start-radius", "border-end-start-radius"],
+	end: ["border-start-end-radius", "border-end-end-radius"]
+};
 function attachShapeMorph(element, options = {}) {
-	const radius = attachSpringProperty(element, {
-		...options,
-		target: "--rio-shape-morph-target",
-		apply: (value) => value === void 0 ? element.style.removeProperty("border-radius") : element.style.setProperty("border-radius", `${value}px`)
-	});
 	element.dataset.shapeMorph = "";
+	const springs = ["start", "end"].map((side) => attachSpringProperty(element, {
+		...options,
+		target: `--rio-shape-morph-${side}-target`,
+		apply: (value) => {
+			for (const corner of CORNERS[side]) if (value === void 0) element.style.removeProperty(corner);
+			else element.style.setProperty(corner, `${value}px`);
+		}
+	}));
 	return { detach() {
-		radius.detach();
+		for (const spring of springs) spring.detach();
 		delete element.dataset.shapeMorph;
 	} };
 }
+// src/split-button/menu-icon.ts
+const inlineVar$1 = (el, name, unit) => (value) => value === void 0 ? el.style.removeProperty(name) : el.style.setProperty(name, `${value}${unit}`);
+/** Attach to the trailing button. */
+function attachSplitButtonMenuIcon(trailing) {
+	const token = "standard-fast-spatial";
+	const turn = attachSpringProperty(trailing, {
+		target: "--rio-split-button-menu-turn-target",
+		token,
+		apply: inlineVar$1(trailing, "--_menu-turn", "deg")
+	});
+	const shift = attachSpringProperty(trailing, {
+		target: "--rio-split-button-menu-shift-target",
+		token,
+		apply: inlineVar$1(trailing, "--_menu-shift", "px")
+	});
+	return { detach() {
+		turn.detach();
+		shift.detach();
+	} };
+}
+// src/split-button/split-button.ts
+/** Split button colors: the button's, without text. */
+const SPLIT_BUTTON_VARIANTS = [
+	"filled",
+	"tonal",
+	"outlined",
+	"elevated"
+];
+const splitButtonDefaults = {
+	variant: "filled",
+	size: "small",
+	open: false,
+	popup: "menu",
+	disabled: false,
+	softDisabled: false,
+	type: "button"
+};
+/**
+* How the adapter renders the split button's parts. The icon and the label hold the leading
+* button's content; the menu icon holds the expand icon the app provides.
+*/
+const splitButtonSkeleton = {
+	part: "root",
+	tag: "div",
+	children: [{
+		part: "leading",
+		tag: "button",
+		children: [
+			{
+				part: "touch",
+				tag: "span"
+			},
+			{
+				part: "icon",
+				tag: "span",
+				when: "showsIcon",
+				content: true
+			},
+			{
+				part: "label",
+				tag: "span",
+				when: "showsLabel",
+				content: true
+			}
+		]
+	}, {
+		part: "trailing",
+		tag: "button",
+		children: [{
+			part: "touch",
+			tag: "span"
+		}, {
+			part: "menuIcon",
+			tag: "span",
+			content: true
+		}]
+	}]
+};
+function createSplitButton(options) {
+	const props = () => ({
+		...splitButtonDefaults,
+		...omitUndefined(options.props())
+	});
+	const content = () => options.content?.() ?? {
+		icon: false,
+		label: true
+	};
+	const shared = () => {
+		const p = props();
+		return {
+			variant: p.variant,
+			size: p.size,
+			disabled: p.disabled,
+			softDisabled: p.softDisabled
+		};
+	};
+	const leading = createButton({
+		props: () => ({
+			...shared(),
+			type: props().type
+		}),
+		onClick: options.onClick,
+		onChange: () => {}
+	});
+	const trailing = createButton({
+		props: () => ({
+			...shared(),
+			type: "button"
+		}),
+		onClick: () => options.onChange(!props().open),
+		onChange: () => {}
+	});
+	return {
+		parts: {
+			root: () => ({ class: "rio-split-button" }),
+			leading() {
+				const root = leading.parts.root();
+				return {
+					...root,
+					class: `${root.class} rio-split-button__leading`,
+					"aria-label": content().label ? void 0 : props().label
+				};
+			},
+			trailing() {
+				const p = props();
+				const root = trailing.parts.root();
+				return {
+					...root,
+					class: `${root.class} rio-split-button__trailing`,
+					"aria-label": p.menuLabel,
+					"aria-haspopup": p.popup,
+					"aria-expanded": String(p.open),
+					"data-open": p.open ? "" : void 0
+				};
+			},
+			touch: leading.parts.touch,
+			icon: leading.parts.icon,
+			label: leading.parts.label,
+			menuIcon: () => ({
+				class: "rio-split-button__menu-icon",
+				"aria-hidden": "true"
+			})
+		},
+		showsIcon: () => content().icon,
+		showsLabel: () => content().label,
+		handleLeadingClick: leading.handleClick,
+		handleTrailingClick: trailing.handleClick
+	};
+}
 // src/switch/handle.ts
 /** A release faster than this (px/s) picks the side it's heading to, wherever the handle is. */
 const FLING_VELOCITY = 300;
@@ -559,7 +2329,7 @@ function attachSwitchHandle(root, options) {
 		onEnd({ velocityX }) {
 			const velocity = direction * velocityX;
 			const next = Math.abs(velocity) > FLING_VELOCITY ? velocity > 0 : x.value > (off + on) / 2;
-			if (next !== options.selected()) options.onSelectedChange(next);
+			if (next !== options.selected()) options.onChange(next);
 			x.release(velocity);
 		},
 		onCancel() {
@@ -578,28 +2348,451 @@ const switchDefaults = {
 	disabled: false,
 	softDisabled: false
 };
+/**
+* How the adapter renders the switch's parts. The state part is the circle where the state layer
+* and the ripple draw. The icon holds the selected icon when `showsSelectedIcon()`, otherwise the
+* unselected one.
+*/
+const switchSkeleton = {
+	part: "root",
+	tag: "button",
+	children: [
+		{
+			part: "touch",
+			tag: "span"
+		},
+		{
+			part: "state",
+			tag: "span"
+		},
+		{
+			part: "handle",
+			tag: "span",
+			children: [{
+				part: "icon",
+				tag: "span",
+				when: "showsIcon",
+				content: true
+			}]
+		}
+	]
+};
 function createSwitch(options) {
+	const showsIcon = () => {
+		const content = options.content?.();
+		return !!(options.props().selected ? content?.selectedIcon : content?.unselectedIcon);
+	};
 	return {
-		rootAttrs() {
-			const p = options.props();
-			const selected = String(!!p.selected);
-			return {
-				type: "button",
-				role: "switch",
-				"aria-checked": selected,
-				disabled: p.disabled ? "" : void 0,
-				"aria-disabled": p.softDisabled && !p.disabled ? "true" : void 0,
-				"data-selected": selected
-			};
+		parts: {
+			root() {
+				const p = options.props();
+				const selected = String(!!p.selected);
+				return {
+					class: "rio-switch rio-focus-ring",
+					type: "button",
+					role: "switch",
+					"aria-checked": selected,
+					disabled: p.disabled ? "" : void 0,
+					"aria-disabled": p.softDisabled && !p.disabled ? "true" : void 0,
+					"data-selected": selected,
+					"data-icon": showsIcon() ? "" : void 0
+				};
+			},
+			touch: () => ({
+				class: "rio-switch__touch",
+				"aria-hidden": "true"
+			}),
+			state: () => ({
+				class: "rio-switch__state",
+				"aria-hidden": "true"
+			}),
+			handle: () => ({
+				class: "rio-switch__handle",
+				"aria-hidden": "true"
+			}),
+			icon: () => ({ class: "rio-switch__icon" })
 		},
+		showsIcon,
+		showsSelectedIcon: () => !!(options.props().selected && options.content?.().selectedIcon),
 		handleClick(event) {
 			const p = options.props();
 			if (p.disabled || p.softDisabled) {
 				event.preventDefault();
 				return;
 			}
-			options.onSelectedChange(!p.selected);
+			options.onChange(!p.selected);
+		}
+	};
+}
+// 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_SIZES, BUTTON_VARIANTS, ICON_BUTTON_VARIANTS, ICON_BUTTON_WIDTHS, STATE_ATTRIBUTES, attachDrag, attachRipple, attachShapeMorph, attachSpringProperty, attachSwitchHandle, buttonDefaults, createButton, createIconButton, createSpring, createSwitch, iconButtonDefaults, readSpringParams, solveSpring, switchDefaults };
+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 };