rei-kit 2.18.1 → 2.20.0

package/dist/web.js

@@ -1,23 +1,23 @@
 import { n as inertOutside, o as ensureSheetRoot, r as useBoundValue, t as BaseSheet_default } from "./BaseSheet-B7401rS7.js";
-import { n as BaseSkeleton_default, r as useMediaQuery, t as BaseListbox_default } from "./BaseListbox-BnaHlmMN.js";
+import { i as useMediaQuery, n as BaseSkeleton_default, r as useMenuKeys, t as BaseListbox_default } from "./BaseListbox-Btibgnaf.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.js";
 import { t as BaseButton_default } from "./BaseButton-RN2an975.js";
 import { Fragment, Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, mergeModels, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, unref, useId, useModel, useTemplateRef, vModelText, vShow, watch, withCtx, withDirectives, withKeys, withModifiers } from "vue";
-import { ArrowDown, ArrowUp, ChevronDown, ChevronLeft, ChevronRight, ChevronsUpDown, Search } from "lucide-vue-next";
+import { ArrowDown, ArrowUp, ChevronDown, ChevronLeft, ChevronRight, ChevronsUpDown, Search, X } from "lucide-vue-next";
 import { RouterLink } from "vue-router";
 //#region src/web/BaseAccordion.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$15 = { class: "rk-accordion" };
-var _hoisted_2$12 = [
+var _hoisted_1$18 = { class: "rk-accordion" };
+var _hoisted_2$13 = [
 	"aria-expanded",
 	"aria-controls",
 	"onClick"
 ];
-var _hoisted_3$11 = { class: "rk-accordion-title" };
-var _hoisted_4$9 = {
+var _hoisted_3$12 = { class: "rk-accordion-title" };
+var _hoisted_4$10 = {
 	class: "rk-accordion-mark",
 	"aria-hidden": "true"
 };
-var _hoisted_5$7 = ["id"];
+var _hoisted_5$8 = ["id"];
 var _hoisted_6$6 = { class: "rk-accordion-clip" };
 //#endregion
 //#region src/web/BaseAccordion.vue
@@ -40,7 +40,7 @@ var BaseAccordion_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 			else open.value = __props.multiple ? [...open.value, key] : [key];
 		}
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("ul", _hoisted_1$15, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
+			return openBlock(), createElementBlock("ul", _hoisted_1$18, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
 				return openBlock(), createElementBlock("li", {
 					key: item.key,
 					class: "rk-accordion-item"
@@ -51,10 +51,10 @@ var BaseAccordion_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 						"aria-expanded": isOpen(item.key),
 						"aria-controls": `${unref(uid)}-${item.key}`,
 						onClick: ($event) => toggle(item.key)
-					}, [createElementVNode("span", _hoisted_3$11, [renderSlot(_ctx.$slots, "title", {
+					}, [createElementVNode("span", _hoisted_3$12, [renderSlot(_ctx.$slots, "title", {
 						item,
 						open: isOpen(item.key)
-					}, () => [createTextVNode(toDisplayString(item.title), 1)], true)]), createElementVNode("span", _hoisted_4$9, [_cache[0] || (_cache[0] = createElementVNode("span", { class: "rk-accordion-bar" }, null, -1)), createElementVNode("span", { class: normalizeClass(["rk-accordion-bar rk-accordion-bar-turn", { "is-open": isOpen(item.key) }]) }, null, 2)])], 8, _hoisted_2$12)]),
+					}, () => [createTextVNode(toDisplayString(item.title), 1)], true)]), createElementVNode("span", _hoisted_4$10, [_cache[0] || (_cache[0] = createElementVNode("span", { class: "rk-accordion-bar" }, null, -1)), createElementVNode("span", { class: normalizeClass(["rk-accordion-bar rk-accordion-bar-turn", { "is-open": isOpen(item.key) }]) }, null, 2)])], 8, _hoisted_2$13)]),
 					_: 2
 				}, 1024)), createElementVNode("div", {
 					id: `${unref(uid)}-${item.key}`,
@@ -62,21 +62,21 @@ var BaseAccordion_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 				}, [createElementVNode("div", _hoisted_6$6, [createElementVNode("div", { class: normalizeClass(["rk-accordion-body", { "is-open": isOpen(item.key) }]) }, [renderSlot(_ctx.$slots, "default", {
 					item,
 					open: isOpen(item.key)
-				}, void 0, true)], 2)])], 10, _hoisted_5$7)]);
+				}, void 0, true)], 2)])], 10, _hoisted_5$8)]);
 			}), 128))]);
 		};
 	}
 }), [["__scopeId", "data-v-03e2e1d0"]]);
 //#endregion
 //#region src/web/BaseBreadcrumb.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$14 = ["aria-label"];
-var _hoisted_2$11 = { class: "rk-crumbs" };
-var _hoisted_3$10 = {
+var _hoisted_1$17 = ["aria-label"];
+var _hoisted_2$12 = { class: "rk-crumbs" };
+var _hoisted_3$11 = {
 	key: 1,
 	class: "rk-crumb-current",
 	"aria-current": "page"
 };
-var _hoisted_4$8 = {
+var _hoisted_4$9 = {
 	key: 2,
 	class: "rk-crumb-sep",
 	"aria-hidden": "true"
@@ -91,7 +91,7 @@ var BaseBreadcrumb_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 	},
 	setup(__props) {
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("nav", { "aria-label": __props.label || void 0 }, [createElementVNode("ol", _hoisted_2$11, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item, index) => {
+			return openBlock(), createElementBlock("nav", { "aria-label": __props.label || void 0 }, [createElementVNode("ol", _hoisted_2$12, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item, index) => {
 				return openBlock(), createElementBlock("li", {
 					key: item.label,
 					class: "rk-crumb"
@@ -102,21 +102,162 @@ var BaseBreadcrumb_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 				}, {
 					default: withCtx(() => [createTextVNode(toDisplayString(item.label), 1)]),
 					_: 2
-				}, 1032, ["to"])) : (openBlock(), createElementBlock("span", _hoisted_3$10, toDisplayString(item.label), 1)), index < __props.items.length - 1 ? (openBlock(), createElementBlock("span", _hoisted_4$8, "/")) : createCommentVNode("", true)]);
-			}), 128))])], 8, _hoisted_1$14);
+				}, 1032, ["to"])) : (openBlock(), createElementBlock("span", _hoisted_3$11, toDisplayString(item.label), 1)), index < __props.items.length - 1 ? (openBlock(), createElementBlock("span", _hoisted_4$9, "/")) : createCommentVNode("", true)]);
+			}), 128))])], 8, _hoisted_1$17);
 		};
 	}
 }), [["__scopeId", "data-v-dcc01b03"]]);
 //#endregion
+//#region src/web/BaseContextMenu.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$16 = ["id", "aria-label"];
+//#endregion
+//#region src/web/BaseContextMenu.vue
+var BaseContextMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "BaseContextMenu",
+	props: {
+		label: {},
+		disabled: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		const id = useId();
+		const open = ref(false);
+		const at = ref({
+			x: 0,
+			y: 0
+		});
+		const area = ref(null);
+		const panel = ref(null);
+		let restoreTo = null;
+		function close() {
+			open.value = false;
+		}
+		const triggerProps = computed(() => __props.disabled ? {} : {
+			"aria-haspopup": "menu",
+			"aria-expanded": open.value,
+			...open.value ? { "aria-controls": id } : {}
+		});
+		const { items, onKeydown: onMenuKeydown } = useMenuKeys({
+			panel,
+			onClose: close
+		});
+		/**
+		* Keeps the panel on screen.
+		*
+		* A menu opened near the right or bottom edge would otherwise run off it,
+		* and the items past the edge cannot be reached with a pointer at all. It
+		* flips rather than clamps, because a menu that slides back over the point
+		* you clicked hides what you were acting on.
+		*/
+		function place(x, y) {
+			const width = panel.value?.offsetWidth ?? 0;
+			const height = panel.value?.offsetHeight ?? 0;
+			const room = {
+				w: window.innerWidth,
+				h: window.innerHeight
+			};
+			at.value = {
+				x: x + width > room.w ? Math.max(0, x - width) : x,
+				y: y + height > room.h ? Math.max(0, y - height) : y
+			};
+		}
+		async function openAt(x, y) {
+			if (__props.disabled) return;
+			restoreTo = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+			open.value = true;
+			await nextTick();
+			place(x, y);
+			items()[0]?.focus();
+		}
+		function onContextMenu(event) {
+			if (__props.disabled) return;
+			event.preventDefault();
+			openAt(event.clientX, event.clientY);
+		}
+		/**
+		* Shift+F10 and the Menu key, which is how this is opened without a mouse.
+		*
+		* Anchored to the focused element rather than to coordinates, because there
+		* is no pointer to take them from.
+		*/
+		function onAreaKeydown(event) {
+			if (!(event.key === "ContextMenu" || event.key === "F10" && event.shiftKey) || __props.disabled) return;
+			event.preventDefault();
+			const box = (event.target instanceof HTMLElement ? event.target : area.value)?.getBoundingClientRect();
+			openAt(box?.left ?? 0, box ? box.bottom : 0);
+		}
+		function onPanelKeydown(event) {
+			onMenuKeydown(event);
+		}
+		function onDocumentPointer(event) {
+			if (panel.value && !panel.value.contains(event.target)) close();
+		}
+		function onDocumentContextMenu(event) {
+			const target = event.target;
+			if (panel.value?.contains(target) || area.value?.contains(target)) return;
+			close();
+		}
+		watch(open, async (isOpen) => {
+			if (typeof document === "undefined") return;
+			if (isOpen) {
+				document.addEventListener("pointerdown", onDocumentPointer);
+				document.addEventListener("contextmenu", onDocumentContextMenu);
+				window.addEventListener("resize", close);
+				window.addEventListener("scroll", close, true);
+				await nextTick();
+			} else {
+				document.removeEventListener("pointerdown", onDocumentPointer);
+				document.removeEventListener("contextmenu", onDocumentContextMenu);
+				window.removeEventListener("resize", close);
+				window.removeEventListener("scroll", close, true);
+				if (panel.value?.contains(document.activeElement)) restoreTo?.focus();
+				restoreTo = null;
+			}
+		});
+		onBeforeUnmount(() => {
+			if (typeof document === "undefined") return;
+			document.removeEventListener("pointerdown", onDocumentPointer);
+			document.removeEventListener("contextmenu", onDocumentContextMenu);
+			window.removeEventListener("resize", close);
+			window.removeEventListener("scroll", close, true);
+		});
+		__expose({ close });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "area",
+				ref: area,
+				class: "rk-ctx-area",
+				onContextmenu: onContextMenu,
+				onKeydown: onAreaKeydown
+			}, [renderSlot(_ctx.$slots, "default", { props: triggerProps.value }, void 0, true), (openBlock(), createBlock(Teleport, { to: "body" }, [open.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				id: unref(id),
+				ref_key: "panel",
+				ref: panel,
+				class: "rk-ctx-panel surface-overlay",
+				role: "menu",
+				"aria-label": __props.label,
+				style: normalizeStyle({
+					left: `${at.value.x}px`,
+					top: `${at.value.y}px`
+				}),
+				onKeydown: onPanelKeydown
+			}, [renderSlot(_ctx.$slots, "items", { close }, void 0, true)], 44, _hoisted_1$16)) : createCommentVNode("", true)]))], 544);
+		};
+	}
+}), [["__scopeId", "data-v-4888e5a2"]]);
+//#endregion
 //#region src/web/BaseDisclosure.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$13 = { class: "rk-disclosure" };
-var _hoisted_2$10 = ["aria-expanded", "aria-controls"];
-var _hoisted_3$9 = { class: "rk-disclosure-title" };
-var _hoisted_4$7 = {
+var _hoisted_1$15 = { class: "rk-disclosure" };
+var _hoisted_2$11 = ["aria-expanded", "aria-controls"];
+var _hoisted_3$10 = { class: "rk-disclosure-title" };
+var _hoisted_4$8 = {
 	class: "rk-disclosure-mark",
 	"aria-hidden": "true"
 };
-var _hoisted_5$6 = ["id"];
+var _hoisted_5$7 = ["id"];
 var _hoisted_6$5 = { class: "rk-disclosure-clip" };
 //#endregion
 //#region src/web/BaseDisclosure.vue
@@ -137,23 +278,245 @@ var BaseDisclosure_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 		const open = useModel(__props, "modelValue");
 		const id = useId();
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$13, [(openBlock(), createBlock(resolveDynamicComponent(`h${__props.headingLevel}`), null, {
+			return openBlock(), createElementBlock("div", _hoisted_1$15, [(openBlock(), createBlock(resolveDynamicComponent(`h${__props.headingLevel}`), null, {
 				default: withCtx(() => [createElementVNode("button", {
 					type: "button",
 					class: "rk-disclosure-control",
 					"aria-expanded": open.value,
 					"aria-controls": unref(id),
 					onClick: _cache[0] || (_cache[0] = ($event) => open.value = !open.value)
-				}, [createElementVNode("span", _hoisted_3$9, [renderSlot(_ctx.$slots, "title", {}, () => [createTextVNode(toDisplayString(__props.title), 1)], true)]), createElementVNode("span", _hoisted_4$7, [_cache[1] || (_cache[1] = createElementVNode("span", { class: "rk-disclosure-bar" }, null, -1)), createElementVNode("span", { class: normalizeClass(["rk-disclosure-bar rk-disclosure-turn", { "is-open": open.value }]) }, null, 2)])], 8, _hoisted_2$10)]),
+				}, [createElementVNode("span", _hoisted_3$10, [renderSlot(_ctx.$slots, "title", {}, () => [createTextVNode(toDisplayString(__props.title), 1)], true)]), createElementVNode("span", _hoisted_4$8, [_cache[1] || (_cache[1] = createElementVNode("span", { class: "rk-disclosure-bar" }, null, -1)), createElementVNode("span", { class: normalizeClass(["rk-disclosure-bar rk-disclosure-turn", { "is-open": open.value }]) }, null, 2)])], 8, _hoisted_2$11)]),
 				_: 3
 			})), createElementVNode("div", {
 				id: unref(id),
 				class: normalizeClass(["rk-disclosure-panel", { "is-open": open.value }])
-			}, [createElementVNode("div", _hoisted_6$5, [createElementVNode("div", { class: normalizeClass(["rk-disclosure-body", { "is-open": open.value }]) }, [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 2)])], 10, _hoisted_5$6)]);
+			}, [createElementVNode("div", _hoisted_6$5, [createElementVNode("div", { class: normalizeClass(["rk-disclosure-body", { "is-open": open.value }]) }, [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 2)])], 10, _hoisted_5$7)]);
 		};
 	}
 }), [["__scopeId", "data-v-ad5c09f5"]]);
 //#endregion
+//#region src/web/BaseHoverCard.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$14 = ["id", "aria-label"];
+//#endregion
+//#region src/web/BaseHoverCard.vue
+var BaseHoverCard_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "BaseHoverCard",
+	props: {
+		label: {},
+		openDelay: { default: 300 },
+		closeDelay: { default: 200 },
+		placement: { default: "bottom" }
+	},
+	setup(__props) {
+		const id = useId();
+		const open = ref(false);
+		let timer;
+		function clear() {
+			if (timer !== void 0) clearTimeout(timer);
+			timer = void 0;
+		}
+		function schedule(next, delay) {
+			clear();
+			if (open.value === next) return;
+			timer = setTimeout(() => {
+				open.value = next;
+				timer = void 0;
+			}, delay);
+		}
+		const show = () => schedule(true, __props.openDelay);
+		const hide = () => schedule(false, __props.closeDelay);
+		/** Focus is deliberate, so it skips the wait a sweeping pointer needs. */
+		function showNow() {
+			clear();
+			open.value = true;
+		}
+		function onKeydown(event) {
+			if (event.key !== "Escape" || !open.value) return;
+			event.stopPropagation();
+			clear();
+			open.value = false;
+		}
+		function onFocusOut(event) {
+			const next = event.relatedTarget;
+			if (next instanceof Node && event.currentTarget.contains(next)) return;
+			clear();
+			open.value = false;
+		}
+		const triggerProps = computed(() => ({
+			"aria-expanded": open.value,
+			"aria-controls": open.value ? id : void 0
+		}));
+		onBeforeUnmount(clear);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: "rk-hovercard",
+				onPointerenter: show,
+				onPointerleave: hide,
+				onFocusin: showNow,
+				onFocusout: onFocusOut,
+				onKeydown
+			}, [renderSlot(_ctx.$slots, "default", { props: triggerProps.value }, void 0, true), open.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				id: unref(id),
+				class: normalizeClass(["rk-hovercard-panel surface-raised", `is-${__props.placement}`]),
+				role: "group",
+				"aria-label": __props.label
+			}, [renderSlot(_ctx.$slots, "card", {}, void 0, true)], 10, _hoisted_1$14)) : createCommentVNode("", true)], 32);
+		};
+	}
+}), [["__scopeId", "data-v-70c09916"]]);
+//#endregion
+//#region src/composables/use-dialog-shell.ts
+/**
+* What every modal surface has to do, in one place.
+*
+* A dialog, a drawer and anything else that takes the whole page share a
+* list that is easy to get nearly right: trap Tab, stop Escape, make the
+* rest of the page inert, stop it scrolling underneath, and hand focus back
+* to whatever opened it. Each of those has an order that matters, and the
+* orders are not obvious — releasing `inert` *after* restoring focus drops
+* it on the body, because an inert element cannot take focus. That was
+* written once, correctly, in `BaseModal`; a drawer that copied it would be
+* a second copy to keep correct.
+*
+* The Tab wrap has to be done by hand: the browser's own Tab order is the
+* whole document, and a dialog is only part of it. `inert` is what also
+* stops a screen reader's virtual cursor, which walks straight past a
+* keydown handler.
+*/
+var FOCUSABLE$1 = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
+function useDialogShell(open, panel, { dismissible = () => true, onClose }) {
+	let releaseInert = null;
+	let restoreTo = null;
+	const focusable = () => panel.value ? Array.from(panel.value.querySelectorAll(FOCUSABLE$1)) : [];
+	function onKeydown(event) {
+		if (event.key === "Escape" && dismissible()) {
+			event.stopPropagation();
+			onClose();
+			return;
+		}
+		if (event.key !== "Tab") return;
+		const items = focusable();
+		if (items.length === 0) return event.preventDefault();
+		const first = items[0];
+		const last = items[items.length - 1];
+		const active = document.activeElement;
+		if (event.shiftKey && (active === first || !panel.value?.contains(active))) {
+			event.preventDefault();
+			last.focus();
+		} else if (!event.shiftKey && active === last) {
+			event.preventDefault();
+			first.focus();
+		}
+	}
+	watch(open, async (isOpen) => {
+		if (isOpen) {
+			restoreTo = document.activeElement;
+			document.body.style.overflow = "hidden";
+			await nextTick();
+			if (panel.value) releaseInert = inertOutside(panel.value);
+			(focusable()[0] ?? panel.value)?.focus();
+		} else {
+			document.body.style.overflow = "";
+			releaseInert?.();
+			releaseInert = null;
+			restoreTo?.focus();
+			restoreTo = null;
+		}
+	});
+	onBeforeUnmount(() => {
+		if (open.value) document.body.style.overflow = "";
+		releaseInert?.();
+	});
+	return {
+		onKeydown,
+		focusable
+	};
+}
+//#endregion
+//#region src/web/BaseDrawer.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$13 = ["aria-label"];
+var _hoisted_2$10 = { class: "rk-drawer-head" };
+var _hoisted_3$9 = { class: "rk-drawer-title" };
+var _hoisted_4$7 = { class: "rk-drawer-body" };
+var _hoisted_5$6 = {
+	key: 0,
+	class: "rk-drawer-actions"
+};
+//#endregion
+//#region src/web/BaseDrawer.vue
+var BaseDrawer_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "BaseDrawer",
+	props: /*@__PURE__*/ mergeModels({
+		title: {},
+		closeLabel: {},
+		side: { default: "end" },
+		size: { default: "22rem" },
+		dismissible: {
+			type: Boolean,
+			default: true
+		}
+	}, {
+		"modelValue": {
+			type: Boolean,
+			required: true
+		},
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const open = useModel(__props, "modelValue");
+		const panel = ref(null);
+		function close() {
+			open.value = false;
+		}
+		const { onKeydown } = useDialogShell(open, panel, {
+			dismissible: () => __props.dismissible,
+			onClose: close
+		});
+		const extent = (horizontal) => horizontal ? { width: __props.size } : { height: __props.size };
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(Teleport, { to: "body" }, [createVNode(Transition, { name: `rk-drawer-${__props.side}` }, {
+				default: withCtx(() => [open.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: "rk-drawer-scrim",
+					onKeydown: _cache[1] || (_cache[1] = (...args) => unref(onKeydown) && unref(onKeydown)(...args))
+				}, [createElementVNode("div", {
+					class: "rk-drawer-veil",
+					onClick: _cache[0] || (_cache[0] = ($event) => __props.dismissible && close())
+				}), createElementVNode("section", {
+					ref_key: "panel",
+					ref: panel,
+					class: normalizeClass(["rk-drawer-panel surface-overlay", `is-${__props.side}`]),
+					style: normalizeStyle(extent(__props.side === "start" || __props.side === "end")),
+					role: "dialog",
+					"aria-modal": "true",
+					"aria-label": __props.title,
+					tabindex: "-1"
+				}, [
+					createElementVNode("header", _hoisted_2$10, [createElementVNode("h2", _hoisted_3$9, toDisplayString(__props.title), 1), __props.dismissible ? (openBlock(), createBlock(BaseButton_default, {
+						key: 0,
+						variant: "ghost",
+						size: "sm",
+						icon: "",
+						"aria-label": __props.closeLabel,
+						onClick: close
+					}, {
+						default: withCtx(() => [createVNode(unref(X), {
+							class: "size-4",
+							"aria-hidden": "true"
+						})]),
+						_: 1
+					}, 8, ["aria-label"])) : createCommentVNode("", true)]),
+					createElementVNode("div", _hoisted_4$7, [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
+					_ctx.$slots.actions ? (openBlock(), createElementBlock("footer", _hoisted_5$6, [renderSlot(_ctx.$slots, "actions", {}, void 0, true)])) : createCommentVNode("", true)
+				], 14, _hoisted_1$13)], 32)) : createCommentVNode("", true)]),
+				_: 3
+			}, 8, ["name"])]);
+		};
+	}
+}), [["__scopeId", "data-v-de2cccb9"]]);
+//#endregion
 //#region src/web/BaseModal.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$12 = ["role", "aria-label"];
 var _hoisted_2$9 = { class: "rk-modal-head" };
@@ -164,35 +527,6 @@ var _hoisted_6$4 = {
 	key: 0,
 	class: "rk-modal-actions"
 };
-/**
-* A dialog that arrives from nowhere.
-*
-* Not `BaseSheet` with different padding. A sheet slides up from the bottom
-* edge, is dismissed by dragging it back down, and belongs to a thumb; a modal
-* appears in the middle of what you were reading and is dismissed by leaving
-* it. They are two answers to two questions and merging them would give a
-* component that is wrong on a phone and wrong on a desktop.
-*
-* ## The parts that are easy to get wrong
-*
-* This is why it exists rather than being written per dialog, which is what the
-* one wide consumer was doing in two places. None of the following is visible
-* on screen when it is missing:
-*
-* - **Focus moves in and comes back.** Opening without moving focus leaves a
-*   keyboard user behind the dialog, operating a page they cannot see. Closing
-*   without restoring it drops them at the top of the document.
-* - **Tab does not leave.** A dialog you can Tab out of is a dialog that is
-*   modal only to somebody using a mouse.
-* - **Escape closes.** Every dialog in every application does this.
-* - **The page underneath does not scroll.** Otherwise dismissing the dialog
-*   returns you somewhere else.
-* - **The backdrop closes it, the panel does not.** A click that starts inside
-*   the panel and ends on the backdrop is not a click on the backdrop, which is
-*   why this listens for a press on the backdrop itself rather than any click
-*   that reaches it.
-*/
-var FOCUSABLE$1 = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
 //#endregion
 //#region src/web/BaseModal.vue
 var BaseModal_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -216,60 +550,17 @@ var BaseModal_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 	setup(__props) {
 		const open = useModel(__props, "modelValue");
 		const panel = ref(null);
-		/** Who had focus before this opened, so it can be given back. */
-		let restoreTo = null;
-		/** Gives the page behind back; set while open. */
-		let releaseInert = null;
-		function focusable() {
-			if (!panel.value) return [];
-			return Array.from(panel.value.querySelectorAll(FOCUSABLE$1));
-		}
-		function onKeydown(event) {
-			if (event.key === "Escape" && __props.dismissible) {
-				event.stopPropagation();
-				open.value = false;
-				return;
-			}
-			if (event.key !== "Tab") return;
-			const items = focusable();
-			if (items.length === 0) return event.preventDefault();
-			const first = items[0];
-			const last = items[items.length - 1];
-			const active = document.activeElement;
-			if (event.shiftKey && (active === first || !panel.value?.contains(active))) {
-				event.preventDefault();
-				last.focus();
-			} else if (!event.shiftKey && active === last) {
-				event.preventDefault();
-				first.focus();
-			}
-		}
-		watch(open, async (isOpen) => {
-			if (isOpen) {
-				restoreTo = document.activeElement;
-				document.body.style.overflow = "hidden";
-				await nextTick();
-				if (panel.value) releaseInert = inertOutside(panel.value);
-				(focusable()[0] ?? panel.value)?.focus();
-			} else {
-				document.body.style.overflow = "";
-				releaseInert?.();
-				releaseInert = null;
-				restoreTo?.focus();
-				restoreTo = null;
-			}
-		});
-		onBeforeUnmount(() => {
-			if (open.value) document.body.style.overflow = "";
-			releaseInert?.();
+		const { onKeydown } = useDialogShell(open, panel, {
+			dismissible: () => __props.dismissible,
+			onClose: () => open.value = false
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(Teleport, { to: "body" }, [createVNode(Transition, { name: "rk-modal" }, {
 				default: withCtx(() => [open.value ? (openBlock(), createElementBlock("div", {
 					key: 0,
 					class: "rk-modal-scrim",
-					onKeydown,
-					onMousedown: _cache[1] || (_cache[1] = withModifiers(($event) => __props.dismissible && (open.value = false), ["self"]))
+					onKeydown: _cache[1] || (_cache[1] = (...args) => unref(onKeydown) && unref(onKeydown)(...args)),
+					onMousedown: _cache[2] || (_cache[2] = withModifiers(($event) => __props.dismissible && (open.value = false), ["self"]))
 				}, [createElementVNode("div", {
 					ref_key: "panel",
 					ref: panel,
@@ -285,7 +576,7 @@ var BaseModal_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 						class: "rk-modal-close",
 						"aria-label": __props.closeLabel,
 						onClick: _cache[0] || (_cache[0] = ($event) => open.value = false)
-					}, [..._cache[2] || (_cache[2] = [createElementVNode("svg", {
+					}, [..._cache[3] || (_cache[3] = [createElementVNode("svg", {
 						viewBox: "0 0 24 24",
 						fill: "none",
 						stroke: "currentColor",
@@ -301,7 +592,7 @@ var BaseModal_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			})]);
 		};
 	}
-}), [["__scopeId", "data-v-61956691"]]);
+}), [["__scopeId", "data-v-92ea084c"]]);
 //#endregion
 //#region src/web/BasePagination.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$11 = ["aria-label"];
@@ -1689,6 +1980,6 @@ var NavLinks_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 	}
 }), [["__scopeId", "data-v-52e5d553"]]);
 //#endregion
-export { BaseAccordion_default as BaseAccordion, BaseBreadcrumb_default as BaseBreadcrumb, BaseDisclosure_default as BaseDisclosure, BaseModal_default as BaseModal, BasePagination_default as BasePagination, BaseSplitter_default as BaseSplitter, BaseTabs_default as BaseTabs, BaseToolbar_default as BaseToolbar, BaseTooltip_default as BaseTooltip, BaseTree_default as BaseTree, CommandMenu_default as CommandMenu, DataTable_default as DataTable, MegaMenu_default as MegaMenu, NavLinks_default as NavLinks, ResponsiveDialog_default as ResponsiveDialog, TransferList_default as TransferList };
+export { BaseAccordion_default as BaseAccordion, BaseBreadcrumb_default as BaseBreadcrumb, BaseContextMenu_default as BaseContextMenu, BaseDisclosure_default as BaseDisclosure, BaseDrawer_default as BaseDrawer, BaseHoverCard_default as BaseHoverCard, BaseModal_default as BaseModal, BasePagination_default as BasePagination, BaseSplitter_default as BaseSplitter, BaseTabs_default as BaseTabs, BaseToolbar_default as BaseToolbar, BaseTooltip_default as BaseTooltip, BaseTree_default as BaseTree, CommandMenu_default as CommandMenu, DataTable_default as DataTable, MegaMenu_default as MegaMenu, NavLinks_default as NavLinks, ResponsiveDialog_default as ResponsiveDialog, TransferList_default as TransferList };
 
 //# sourceMappingURL=web.js.map