niuma-ui 2.0.3 → 2.0.9

package/dist/components/drawer/src/RsDrawer.impl.js

@@ -1,25 +1,58 @@
-import { DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogRoot, DialogTitle } from "../../_shared/src/reka.js";
 import { useRsI18n } from "../../../composables/useRsI18n.js";
 import RsButton_default from "../../button/src/RsButton.js";
-import { RS_DRAWER_MAX_VIEWPORT_RATIO, clampRsDrawerSize, resolveDrawerOverlayStyle, resolveRsDrawerDimensionCss, resolveRsDrawerSizeCss, resolveRsDrawerSizePx, runRsDrawerBeforeClose } from "./drawer-utils.js";
-import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, openBlock, ref, renderSlot, toDisplayString, unref, useModel, watch, withCtx } from "vue";
+import { RS_DRAWER_MAX_VIEWPORT_RATIO, acquireRsDrawerPointerTracking, acquireRsDrawerScrollLock, clampRsDrawerSize, isRsDrawerDismissExempt, isTopRsDrawer, listRsDrawerFocusables, pushRsDrawerLayer, resolveDrawerOverlayStyle, resolveRsDrawerDimensionCss, resolveRsDrawerSizeCss, resolveRsDrawerSizePx, rsDrawerMotionOutMs, rsDrawerPointersDown, runRsDrawerBeforeClose } from "./drawer-utils.js";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, getCurrentInstance, mergeModels, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, toDisplayString, unref, useId, useModel, watch } from "vue";
 //#region src/components/drawer/src/RsDrawer.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
-	"aria-label",
-	"aria-orientation",
-	"aria-valuenow"
+	"data-state",
+	"data-rs-theme",
+	"dir",
+	"lang"
 ];
-var _hoisted_2 = {
-	key: 1,
+var _hoisted_2 = [
+	"id",
+	"aria-modal",
+	"aria-labelledby",
+	"aria-describedby",
+	"aria-hidden",
+	"inert",
+	"data-state",
+	"data-rs-theme",
+	"dir",
+	"lang"
+];
+var _hoisted_3 = {
+	key: 0,
 	class: "rs-drawer__header"
 };
-var _hoisted_3 = { class: "rs-drawer__heading" };
-var _hoisted_4 = { class: "rs-drawer__body" };
-var _hoisted_5 = {
-	key: 4,
+var _hoisted_4 = { class: "rs-drawer__heading" };
+var _hoisted_5 = ["id"];
+var _hoisted_6 = ["id"];
+var _hoisted_7 = {
+	key: 0,
+	class: "rs-drawer__tools"
+};
+var _hoisted_8 = {
+	key: 0,
+	class: "rs-drawer__extra"
+};
+var _hoisted_9 = ["id"];
+var _hoisted_10 = ["id"];
+var _hoisted_11 = { class: "rs-drawer__body" };
+var _hoisted_12 = {
+	key: 3,
 	class: "rs-drawer__footer"
 };
+var _hoisted_13 = [
+	"aria-label",
+	"aria-orientation",
+	"aria-valuemin",
+	"aria-valuemax",
+	"aria-valuenow",
+	"aria-controls"
+];
 var RsDrawer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "RsDrawer",
 	inheritAttrs: false,
 	__name: "RsDrawer",
 	props: /*@__PURE__*/ mergeModels({
@@ -55,7 +88,19 @@ var RsDrawer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 			default: true
 		},
 		teleportTo: { type: [String, Boolean] },
-		beforeClose: {}
+		beforeClose: {},
+		destroyOnClose: {
+			type: Boolean,
+			default: true
+		},
+		forceRender: {
+			type: Boolean,
+			default: false
+		},
+		lockScroll: { type: Boolean },
+		zIndex: {},
+		ariaLabel: {},
+		id: {}
 	}, {
 		"open": {
 			type: Boolean,
@@ -76,24 +121,64 @@ var RsDrawer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 		const props = __props;
 		const emit = __emit;
 		const { t } = useRsI18n();
+		const instance = getCurrentInstance();
+		const autoId = useId();
+		const layerId = autoId;
+		const titleId = computed(() => `${props.id || autoId}-title`);
+		const descId = computed(() => `${props.id || autoId}-desc`);
+		/** 可选布尔未传时会被收成 false。看这次 vnode 上有没有该字段，才能区分「没传」。 */
+		function propWasPassed(name) {
+			const raw = instance?.vnode.props;
+			if (!raw) return false;
+			const kebab = name.replace(/[A-Z]/g, (char) => `-${char.toLowerCase()}`);
+			return Object.hasOwn(raw, name) || Object.hasOwn(raw, kebab);
+		}
 		/** 挂到自定义容器或就地渲染时按 contained 模式定位，避免盖住布局顶栏 */
-		const contained = computed(() => props.teleportTo !== void 0);
+		const contained = computed(() => propWasPassed("teleportTo"));
 		/** 未显式传 modal 时：有遮罩=模态，无遮罩=可点背后 */
-		const isModal = computed(() => props.modal ?? props.showOverlay);
+		const isModal = computed(() => propWasPassed("modal") ? Boolean(props.modal) : props.showOverlay);
+		const teleportDisabled = computed(() => propWasPassed("teleportTo") && props.teleportTo === false);
+		const teleportTarget = computed(() => {
+			if (typeof props.teleportTo === "string") return props.teleportTo;
+			if (typeof HTMLElement !== "undefined" && props.teleportTo instanceof HTMLElement) return props.teleportTo;
+			return "body";
+		});
+		const shouldLockScroll = computed(() => {
+			if (propWasPassed("lockScroll")) return Boolean(props.lockScroll);
+			return isModal.value && !contained.value;
+		});
 		const overlayStyle = computed(() => resolveDrawerOverlayStyle({
 			overlayOpacity: props.overlayOpacity,
 			overlayBlur: props.overlayBlur
 		}));
+		const zStyle = computed(() => {
+			if (props.zIndex == null || !Number.isFinite(props.zIndex)) return void 0;
+			return { "--rs-drawer-z": String(Math.round(props.zIndex)) };
+		});
 		const isHorizontal = computed(() => props.side === "left" || props.side === "right");
 		const enableResizable = computed(() => props.resizable && props.size !== "full");
 		/** 本次打开后拖拽得到的像素尺寸；关闭时清空，回到 size/width/height */
 		const liveSizePx = ref(void 0);
 		const resizing = ref(false);
+		const anchorRef = ref(null);
 		const contentRef = ref(null);
-		const panelSizeCss = computed(() => {
+		const panelTheme = ref();
+		const panelDir = ref();
+		const panelLang = ref();
+		const present = ref(open.value || props.forceRender);
+		const motion = ref(open.value ? "open" : "closed");
+		const dormant = ref(!open.value);
+		const animating = ref(false);
+		const boundMin = ref(256);
+		const boundMax = ref(Math.round(960 * RS_DRAWER_MAX_VIEWPORT_RATIO));
+		/** 仅 width / height 或拖拽结果算自定义尺寸；sm / md / lg 预设不算。 */
+		const customDimensionCss = computed(() => {
 			if (liveSizePx.value != null) return `${liveSizePx.value}px`;
-			if (isHorizontal.value) return resolveRsDrawerDimensionCss(props.width) ?? resolveRsDrawerSizeCss(props.size) ?? void 0;
-			return resolveRsDrawerDimensionCss(props.height) ?? resolveRsDrawerSizeCss(props.size) ?? void 0;
+			return isHorizontal.value ? resolveRsDrawerDimensionCss(props.width) : resolveRsDrawerDimensionCss(props.height);
+		});
+		const panelSizeCss = computed(() => {
+			if (props.size === "full") return void 0;
+			return customDimensionCss.value ?? resolveRsDrawerSizeCss(props.size);
 		});
 		const contentStyle = computed(() => {
 			const style = {};
@@ -101,39 +186,6 @@ var RsDrawer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 			if (size && props.size !== "full") style["--rs-drawer-panel-size"] = size;
 			if (liveSizePx.value != null && props.size !== "full") if (isHorizontal.value) style.width = `${liveSizePx.value}px`;
 			else style.height = `${liveSizePx.value}px`;
-			if (props.side === "right") {
-				style.left = "auto";
-				style.right = "0";
-				style.top = "0";
-				style.bottom = "0";
-				style.height = "100%";
-				style.maxHeight = "none";
-				style.transform = "none";
-			} else if (props.side === "left") {
-				style.left = "0";
-				style.right = "auto";
-				style.top = "0";
-				style.bottom = "0";
-				style.height = "100%";
-				style.maxHeight = "none";
-				style.transform = "none";
-			} else if (props.side === "top") {
-				style.left = "0";
-				style.right = "0";
-				style.top = "0";
-				style.bottom = "auto";
-				style.width = "100%";
-				style.maxWidth = "none";
-				style.transform = "none";
-			} else if (props.side === "bottom") {
-				style.left = "0";
-				style.right = "0";
-				style.top = "auto";
-				style.bottom = "0";
-				style.width = "100%";
-				style.maxWidth = "none";
-				style.transform = "none";
-			}
 			return Object.keys(style).length ? style : void 0;
 		});
 		const contentClass = computed(() => [
@@ -141,109 +193,281 @@ var RsDrawer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 			`rs-drawer__content--${props.size}`,
 			{
 				"rs-drawer__content--contained": contained.value,
-				"rs-drawer__content--custom-size": Boolean(panelSizeCss.value) && props.size !== "full",
+				"rs-drawer__content--custom-size": props.size !== "full" && customDimensionCss.value != null,
 				"rs-drawer__content--resizable": enableResizable.value,
-				"rs-drawer__content--resizing": resizing.value
+				"rs-drawer__content--resizing": resizing.value,
+				"rs-drawer__content--animate": animating.value,
+				"rs-drawer__content--dormant": dormant.value
 			}
 		]);
+		const labelledBy = computed(() => titleId.value);
+		const describedBy = computed(() => props.description ? descId.value : void 0);
 		const closing = ref(false);
-		let pendingCloseReason = "programmatic";
 		let afterOpenTimer = 0;
-		/** 跟踪当前按下指针数，用于判断打开是否发生在手势中途 */
-		let pointersDown = 0;
-		let pointerTrackingBound = false;
-		function ensurePointerTracking() {
-			if (pointerTrackingBound || typeof window === "undefined") return;
-			pointerTrackingBound = true;
-			window.addEventListener("pointerdown", () => {
-				pointersDown += 1;
-			}, true);
-			window.addEventListener("pointerup", () => {
-				pointersDown = Math.max(0, pointersDown - 1);
-			}, true);
-			window.addEventListener("pointercancel", () => {
-				pointersDown = Math.max(0, pointersDown - 1);
-			}, true);
-		}
-		/**
-		* 打开若发生在 pointer 按下期间（或同轮事件冒泡中），抑制 outside dismiss，
-		* 直到指针抬起，并再刷一次 macrotask（吞掉打开点击残留的 outside）。
-		* 不使用固定毫秒锁，避免拖慢正常点遮罩关闭。
-		*/
+		let exitTimer = 0;
+		let animTimer = 0;
+		let releasePointer = null;
+		let releaseLayer = null;
+		let releaseLock = null;
+		let layerBound = false;
+		let restoreEl = null;
+		/** 打开若发生在 pointer 按下期间，抑制外部关闭，直到指针抬起再过一个宏任务。 */
 		const suppressOutsideUntilGestureEnd = ref(false);
 		let gestureReleaseBound = false;
-		let gestureMacrotaskTimer = 0;
 		function releaseOutsideSuppress() {
 			suppressOutsideUntilGestureEnd.value = false;
-			if (gestureMacrotaskTimer) {
-				window.clearTimeout(gestureMacrotaskTimer);
-				gestureMacrotaskTimer = 0;
+			if (!gestureReleaseBound || typeof window === "undefined") {
+				gestureReleaseBound = false;
+				return;
 			}
-			if (!gestureReleaseBound) return;
 			gestureReleaseBound = false;
 			window.removeEventListener("pointerup", onGesturePointerRelease, true);
 			window.removeEventListener("pointercancel", onGesturePointerRelease, true);
 		}
 		function onGesturePointerRelease() {
-			if (pointersDown > 0) return;
-			if (gestureMacrotaskTimer) window.clearTimeout(gestureMacrotaskTimer);
-			gestureMacrotaskTimer = window.setTimeout(() => {
-				gestureMacrotaskTimer = 0;
-				releaseOutsideSuppress();
-			}, 0);
+			if (rsDrawerPointersDown() > 0) return;
+			if (gestureReleaseBound && typeof window !== "undefined") {
+				gestureReleaseBound = false;
+				window.removeEventListener("pointerup", onGesturePointerRelease, true);
+				window.removeEventListener("pointercancel", onGesturePointerRelease, true);
+			}
+			queueMicrotask(() => {
+				suppressOutsideUntilGestureEnd.value = false;
+			});
 		}
 		function armOutsideSuppressForOpenGesture() {
-			ensurePointerTracking();
+			if (typeof window === "undefined") return;
 			releaseOutsideSuppress();
 			suppressOutsideUntilGestureEnd.value = true;
-			if (pointersDown > 0) {
+			if (rsDrawerPointersDown() > 0) {
 				gestureReleaseBound = true;
 				window.addEventListener("pointerup", onGesturePointerRelease, true);
 				window.addEventListener("pointercancel", onGesturePointerRelease, true);
 				return;
 			}
-			gestureMacrotaskTimer = window.setTimeout(() => {
-				gestureMacrotaskTimer = 0;
-				releaseOutsideSuppress();
-			}, 0);
+			queueMicrotask(() => {
+				suppressOutsideUntilGestureEnd.value = false;
+			});
 		}
 		function clearAfterOpenTimer() {
-			if (!afterOpenTimer) return;
+			if (!afterOpenTimer || typeof window === "undefined") {
+				afterOpenTimer = 0;
+				return;
+			}
 			window.clearTimeout(afterOpenTimer);
 			afterOpenTimer = 0;
 		}
+		function clearExitTimer() {
+			if (!exitTimer || typeof window === "undefined") {
+				exitTimer = 0;
+				return;
+			}
+			window.clearTimeout(exitTimer);
+			exitTimer = 0;
+		}
+		function clearAnimTimer() {
+			if (!animTimer || typeof window === "undefined") {
+				animTimer = 0;
+				return;
+			}
+			window.clearTimeout(animTimer);
+			animTimer = 0;
+		}
 		function queueAfterOpen() {
 			clearAfterOpenTimer();
+			if (typeof window === "undefined") return;
 			afterOpenTimer = window.setTimeout(() => {
 				afterOpenTimer = 0;
 				if (open.value) emit("afterOpen");
 			}, 280);
 		}
+		function markAnimating() {
+			clearAnimTimer();
+			if (rsDrawerMotionOutMs() === 0) {
+				animating.value = false;
+				return;
+			}
+			animating.value = true;
+			if (typeof window === "undefined") return;
+			const ms = motion.value === "closed" ? rsDrawerMotionOutMs() : 240;
+			animTimer = window.setTimeout(() => {
+				animTimer = 0;
+				animating.value = false;
+			}, ms + 40);
+		}
+		function finishExit() {
+			clearExitTimer();
+			animating.value = false;
+			if (open.value) return;
+			liveSizePx.value = void 0;
+			if (props.destroyOnClose && !props.forceRender) {
+				present.value = false;
+				return;
+			}
+			dormant.value = true;
+		}
+		function scheduleExit() {
+			clearExitTimer();
+			if (typeof window === "undefined") return;
+			const ms = rsDrawerMotionOutMs();
+			if (ms === 0) {
+				finishExit();
+				return;
+			}
+			exitTimer = window.setTimeout(() => {
+				exitTimer = 0;
+				finishExit();
+			}, ms);
+		}
+		function syncChrome() {
+			const el = anchorRef.value;
+			if (!el) {
+				panelTheme.value = void 0;
+				panelDir.value = void 0;
+				panelLang.value = void 0;
+				return;
+			}
+			const themed = el.closest("[data-rs-theme]");
+			const directed = el.closest("[dir]");
+			const langed = el.closest("[lang]");
+			panelTheme.value = themed instanceof HTMLElement ? themed.dataset.rsTheme : void 0;
+			panelDir.value = directed?.getAttribute("dir") || void 0;
+			panelLang.value = langed?.getAttribute("lang") || void 0;
+		}
+		function resolveContentEl() {
+			const el = contentRef.value;
+			return el instanceof HTMLElement ? el : null;
+		}
+		function focusPanel(force) {
+			const content = resolveContentEl();
+			if (!content || typeof document === "undefined") return;
+			if (!force && !isModal.value) return;
+			const active = document.activeElement;
+			if (active instanceof HTMLElement && active !== document.body && active !== document.documentElement && !content.contains(active)) restoreEl = active;
+			if (!force && active instanceof HTMLElement && content.contains(active)) return;
+			content.focus({ preventScroll: true });
+		}
+		function restoreFocus() {
+			const el = restoreEl;
+			restoreEl = null;
+			if (!el?.isConnected) return;
+			const content = resolveContentEl();
+			if (content && (el === content || content.contains(el))) return;
+			el.focus({ preventScroll: true });
+		}
+		function bindLayer() {
+			if (layerBound || typeof window === "undefined") return;
+			layerBound = true;
+			releaseLayer = pushRsDrawerLayer(layerId);
+			if (shouldLockScroll.value) releaseLock = acquireRsDrawerScrollLock();
+			window.addEventListener("pointerdown", onWindowPointerDown);
+			window.addEventListener("keydown", onWindowKeydown);
+			refreshBounds();
+		}
+		function unbindLayer() {
+			if (!layerBound) return;
+			layerBound = false;
+			if (typeof window !== "undefined") {
+				window.removeEventListener("pointerdown", onWindowPointerDown);
+				window.removeEventListener("keydown", onWindowKeydown);
+			}
+			releaseLayer?.();
+			releaseLayer = null;
+			releaseLock?.();
+			releaseLock = null;
+		}
+		function shouldBlockOutsideDismiss() {
+			return !props.closeOnOverlayClick || suppressOutsideUntilGestureEnd.value || resizing.value;
+		}
+		function onWindowPointerDown(event) {
+			if (!open.value || !isTopRsDrawer(layerId)) return;
+			if (shouldBlockOutsideDismiss()) return;
+			if (isRsDrawerDismissExempt(event.target, resolveContentEl())) return;
+			requestClose("overlay");
+		}
+		function onWindowKeydown(event) {
+			if (event.key !== "Escape" || event.defaultPrevented) return;
+			if (!open.value || !isTopRsDrawer(layerId)) return;
+			if (!props.closeOnEsc) {
+				event.preventDefault();
+				return;
+			}
+			event.preventDefault();
+			requestClose("escape");
+		}
+		function onContentKeydown(event) {
+			if (event.key !== "Tab" || !isModal.value || !open.value || !isTopRsDrawer(layerId)) return;
+			const content = resolveContentEl();
+			if (!content) return;
+			const items = listRsDrawerFocusables(content);
+			if (!items.length) {
+				event.preventDefault();
+				content.focus({ preventScroll: true });
+				return;
+			}
+			const first = items[0];
+			const last = items[items.length - 1];
+			const active = document.activeElement;
+			if (event.shiftKey && (active === first || active === content)) {
+				event.preventDefault();
+				last?.focus();
+				return;
+			}
+			if (!event.shiftKey && active === last) {
+				event.preventDefault();
+				first?.focus();
+			}
+		}
 		watch(open, (isOpen, wasOpen) => {
 			if (isOpen && !wasOpen) {
+				clearExitTimer();
+				syncChrome();
+				present.value = true;
+				dormant.value = false;
+				motion.value = "open";
+				markAnimating();
 				armOutsideSuppressForOpenGesture();
+				bindLayer();
 				emit("openChange", true);
 				queueAfterOpen();
+				nextTick(() => focusPanel(false));
 				return;
 			}
 			if (!isOpen && wasOpen) {
-				liveSizePx.value = void 0;
+				motion.value = "closed";
+				markAnimating();
 				stopResize();
 				releaseOutsideSuppress();
 				clearAfterOpenTimer();
+				unbindLayer();
+				restoreFocus();
+				scheduleExit();
 				emit("openChange", false);
 				if (!closing.value) emit("afterClose", "programmatic");
 			}
 		});
+		onMounted(() => {
+			releasePointer = acquireRsDrawerPointerTracking();
+			syncChrome();
+			if (!open.value) return;
+			armOutsideSuppressForOpenGesture();
+			bindLayer();
+			nextTick(() => focusPanel(false));
+		});
 		onBeforeUnmount(() => {
 			stopResize();
 			releaseOutsideSuppress();
 			clearAfterOpenTimer();
+			clearExitTimer();
+			clearAnimTimer();
+			if (open.value) restoreFocus();
+			unbindLayer();
+			releasePointer?.();
+			releasePointer = null;
 		});
 		async function requestClose(reason) {
 			if (!open.value || closing.value) return false;
 			closing.value = true;
-			pendingCloseReason = reason;
 			try {
 				if (!await runRsDrawerBeforeClose(props.beforeClose, reason)) return false;
 				open.value = false;
@@ -254,58 +478,17 @@ var RsDrawer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 				closing.value = false;
 			}
 		}
-		/** DialogRoot 受控更新：打开直通；关闭统一走 beforeClose */
-		async function onUpdateOpen(next) {
-			if (next) {
-				open.value = true;
-				return;
-			}
-			await requestClose(pendingCloseReason);
-			pendingCloseReason = "programmatic";
-		}
-		function onEscapeKeyDown(event) {
-			if (!props.closeOnEsc) {
-				event.preventDefault();
-				return;
-			}
-			pendingCloseReason = "escape";
-		}
-		function shouldBlockOutsideDismiss() {
-			return !props.closeOnOverlayClick || suppressOutsideUntilGestureEnd.value || resizing.value;
-		}
-		function onPointerDownOutside(event) {
-			if (shouldBlockOutsideDismiss()) {
-				event.preventDefault();
-				return;
-			}
-			pendingCloseReason = "overlay";
-		}
-		function onInteractOutside(event) {
-			if (shouldBlockOutsideDismiss()) {
-				event.preventDefault();
-				return;
-			}
-			pendingCloseReason = "overlay";
-		}
-		function onFocusOutside(event) {
-			event.preventDefault();
-		}
 		async function onHeaderCloseClick() {
 			await requestClose("close");
 		}
-		function resolveContentEl() {
-			const inst = contentRef.value;
-			if (!inst) return null;
-			if (inst instanceof HTMLElement) return inst;
-			const el = inst.$el;
-			return el instanceof HTMLElement ? el : null;
-		}
 		function rootFontPx() {
+			if (typeof document === "undefined") return 16;
 			const raw = getComputedStyle(document.documentElement).fontSize;
 			const n = Number.parseFloat(raw);
 			return Number.isFinite(n) && n > 0 ? n : 16;
 		}
 		function viewportPx() {
+			if (typeof window === "undefined") return 0;
 			return isHorizontal.value ? window.innerWidth : window.innerHeight;
 		}
 		function sizeBounds() {
@@ -316,6 +499,11 @@ var RsDrawer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 				max: resolveRsDrawerSizePx(props.maxSize, Math.round(vp * RS_DRAWER_MAX_VIEWPORT_RATIO), root, vp)
 			};
 		}
+		function refreshBounds() {
+			const next = sizeBounds();
+			boundMin.value = next.min;
+			boundMax.value = next.max;
+		}
 		function applyLiveSize(px) {
 			const { min, max } = sizeBounds();
 			const next = clampRsDrawerSize(px, min, max);
@@ -331,15 +519,17 @@ var RsDrawer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 		let resizeStartClient = 0;
 		let resizeStartSize = 0;
 		function stopResize() {
-			if (resizePointerId != null) {
+			if (resizePointerId != null && typeof window !== "undefined") {
 				window.removeEventListener("pointermove", onResizePointerMove);
 				window.removeEventListener("pointerup", onResizePointerUp);
 				window.removeEventListener("pointercancel", onResizePointerUp);
 				resizePointerId = null;
 			}
 			resizing.value = false;
-			document.body.style.removeProperty("cursor");
-			document.body.style.removeProperty("user-select");
+			if (typeof document !== "undefined" && document.body) {
+				document.body.style.removeProperty("cursor");
+				document.body.style.removeProperty("user-select");
+			}
 		}
 		function currentPanelPx() {
 			const el = resolveContentEl();
@@ -355,8 +545,11 @@ var RsDrawer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 			resizeStartSize = currentPanelPx();
 			resizePointerId = event.pointerId;
 			resizing.value = true;
-			document.body.style.cursor = isHorizontal.value ? "ew-resize" : "ns-resize";
-			document.body.style.userSelect = "none";
+			refreshBounds();
+			if (typeof document !== "undefined") {
+				document.body.style.cursor = isHorizontal.value ? "ew-resize" : "ns-resize";
+				document.body.style.userSelect = "none";
+			}
 			window.addEventListener("pointermove", onResizePointerMove);
 			window.addEventListener("pointerup", onResizePointerUp);
 			window.addEventListener("pointercancel", onResizePointerUp);
@@ -385,6 +578,17 @@ var RsDrawer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 		}
 		function onResizeKeydown(event) {
 			if (!enableResizable.value) return;
+			refreshBounds();
+			if (event.key === "Home") {
+				event.preventDefault();
+				commitResize(applyLiveSize(sizeBounds().min));
+				return;
+			}
+			if (event.key === "End") {
+				event.preventDefault();
+				commitResize(applyLiveSize(sizeBounds().max));
+				return;
+			}
 			const step = event.shiftKey ? 48 : 16;
 			let delta = 0;
 			if (props.side === "right") {
@@ -404,92 +608,106 @@ var RsDrawer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 			event.preventDefault();
 			commitResize(applyLiveSize(currentPanelPx() + delta));
 		}
+		function onContentAnimationEnd(event) {
+			if (event.target !== resolveContentEl()) return;
+			animating.value = false;
+			if (!open.value && motion.value === "closed") finishExit();
+		}
 		__expose({
-			/** 请求关闭（走 beforeClose） */
 			close: (reason = "programmatic") => requestClose(reason),
-			/** 打开抽屉 */
 			openDrawer: () => {
 				open.value = true;
-			}
+			},
+			focus: () => focusPanel(true)
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(DialogRoot), {
-				open: open.value,
-				modal: isModal.value,
-				"onUpdate:open": onUpdateOpen
-			}, {
-				default: withCtx(() => [createVNode(unref(DialogPortal), {
-					disabled: __props.teleportTo === false,
-					to: __props.teleportTo === false ? void 0 : __props.teleportTo
-				}, {
-					default: withCtx(() => [__props.showOverlay ? (openBlock(), createBlock(unref(DialogOverlay), {
-						key: 0,
-						class: normalizeClass(["rs-drawer__overlay rs-motion-reduce", { "rs-drawer__overlay--contained": contained.value }]),
-						style: normalizeStyle(overlayStyle.value)
-					}, null, 8, ["class", "style"])) : createCommentVNode("", true), createVNode(unref(DialogContent), {
-						ref_key: "contentRef",
-						ref: contentRef,
-						class: normalizeClass(["rs-drawer__content rs-motion-reduce", contentClass.value]),
-						style: normalizeStyle(contentStyle.value),
-						onPointerDownOutside,
-						onInteractOutside,
-						onFocusOutside,
-						onEscapeKeyDown
-					}, {
-						default: withCtx(() => [
-							enableResizable.value ? (openBlock(), createElementBlock("button", {
-								key: 0,
-								type: "button",
-								class: "rs-drawer__resize",
-								"aria-label": unref(t)("drawer.resize"),
-								"aria-orientation": isHorizontal.value ? "vertical" : "horizontal",
-								"aria-valuenow": liveSizePx.value != null ? Math.round(liveSizePx.value) : void 0,
-								onPointerdown: onResizePointerDown,
-								onKeydown: onResizeKeydown
-							}, null, 40, _hoisted_1)) : createCommentVNode("", true),
-							__props.title || __props.description || __props.showClose || _ctx.$slots.header ? (openBlock(), createElementBlock("header", _hoisted_2, [renderSlot(_ctx.$slots, "header", {}, () => [createElementVNode("div", _hoisted_3, [__props.title ? (openBlock(), createBlock(unref(DialogTitle), {
-								key: 0,
-								class: "rs-drawer__title"
-							}, {
-								default: withCtx(() => [createTextVNode(toDisplayString(__props.title), 1)]),
-								_: 1
-							})) : createCommentVNode("", true), __props.description ? (openBlock(), createBlock(unref(DialogDescription), {
-								key: 1,
-								class: "rs-drawer__description"
-							}, {
-								default: withCtx(() => [createTextVNode(toDisplayString(__props.description), 1)]),
-								_: 1
-							})) : createCommentVNode("", true)])]), __props.showClose ? (openBlock(), createBlock(RsButton_default, {
-								key: 0,
-								variant: "ghost",
-								size: "sm",
-								icon: "x",
-								tooltip: unref(t)("dialog.close"),
-								onClick: onHeaderCloseClick
-							}, null, 8, ["tooltip"])) : createCommentVNode("", true)])) : createCommentVNode("", true),
-							_ctx.$slots.header || !__props.title ? (openBlock(), createBlock(unref(DialogTitle), {
-								key: 2,
-								class: "rs-drawer__title rs-drawer__title--sr-only"
-							}, {
-								default: withCtx(() => [createTextVNode(toDisplayString(__props.title || " "), 1)]),
-								_: 1
-							})) : createCommentVNode("", true),
-							!__props.description || _ctx.$slots.header ? (openBlock(), createBlock(unref(DialogDescription), {
-								key: 3,
-								class: "rs-drawer__description rs-drawer__description--sr-only"
-							}, {
-								default: withCtx(() => [createTextVNode(toDisplayString(__props.description || __props.title || " "), 1)]),
-								_: 1
-							})) : createCommentVNode("", true),
-							createElementVNode("div", _hoisted_4, [renderSlot(_ctx.$slots, "default")]),
-							_ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_5, [renderSlot(_ctx.$slots, "footer")])) : createCommentVNode("", true)
-						]),
-						_: 3
-					}, 8, ["class", "style"])]),
-					_: 3
-				}, 8, ["disabled", "to"])]),
-				_: 3
-			}, 8, ["open", "modal"]);
+			return openBlock(), createElementBlock(Fragment, null, [createElementVNode("span", {
+				ref_key: "anchorRef",
+				ref: anchorRef,
+				class: "rs-drawer__anchor",
+				hidden: "",
+				"aria-hidden": "true"
+			}, null, 512), (openBlock(), createBlock(Teleport, {
+				disabled: teleportDisabled.value,
+				to: teleportTarget.value
+			}, [__props.showOverlay && present.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: normalizeClass(["rs-drawer__overlay rs-motion-reduce", {
+					"rs-drawer__overlay--contained": contained.value,
+					"rs-drawer__overlay--dormant": dormant.value
+				}]),
+				style: normalizeStyle([overlayStyle.value, zStyle.value]),
+				"data-state": motion.value,
+				"data-rs-theme": panelTheme.value,
+				dir: panelDir.value,
+				lang: panelLang.value,
+				"aria-hidden": "true"
+			}, null, 14, _hoisted_1)) : createCommentVNode("", true), present.value ? (openBlock(), createElementBlock("div", mergeProps({
+				key: 1,
+				id: __props.id,
+				ref_key: "contentRef",
+				ref: contentRef
+			}, _ctx.$attrs, {
+				class: ["rs-drawer rs-drawer__content rs-motion-reduce", contentClass.value],
+				style: [contentStyle.value, zStyle.value],
+				role: "dialog",
+				"aria-modal": isModal.value && motion.value === "open" ? "true" : "false",
+				"aria-labelledby": labelledBy.value,
+				"aria-describedby": describedBy.value,
+				"aria-hidden": motion.value === "open" ? void 0 : "true",
+				inert: motion.value === "open" ? void 0 : true,
+				"data-state": motion.value,
+				"data-rs-theme": panelTheme.value,
+				dir: panelDir.value,
+				lang: panelLang.value,
+				tabindex: "-1",
+				onKeydown: onContentKeydown,
+				onAnimationend: onContentAnimationEnd
+			}), [
+				__props.title || __props.description || __props.showClose || _ctx.$slots.header || _ctx.$slots.extra ? (openBlock(), createElementBlock("header", _hoisted_3, [renderSlot(_ctx.$slots, "header", {}, () => [createElementVNode("div", _hoisted_4, [__props.title ? (openBlock(), createElementBlock("h2", {
+					key: 0,
+					id: titleId.value,
+					class: "rs-drawer__title"
+				}, toDisplayString(__props.title), 9, _hoisted_5)) : createCommentVNode("", true), __props.description ? (openBlock(), createElementBlock("p", {
+					key: 1,
+					id: descId.value,
+					class: "rs-drawer__description"
+				}, toDisplayString(__props.description), 9, _hoisted_6)) : createCommentVNode("", true)])]), _ctx.$slots.extra || __props.showClose ? (openBlock(), createElementBlock("div", _hoisted_7, [_ctx.$slots.extra ? (openBlock(), createElementBlock("div", _hoisted_8, [renderSlot(_ctx.$slots, "extra")])) : createCommentVNode("", true), __props.showClose ? (openBlock(), createBlock(RsButton_default, {
+					key: 1,
+					class: "rs-drawer__close",
+					variant: "ghost",
+					size: "sm",
+					icon: "x",
+					tooltip: unref(t)("drawer.close"),
+					onClick: onHeaderCloseClick
+				}, null, 8, ["tooltip"])) : createCommentVNode("", true)])) : createCommentVNode("", true)])) : createCommentVNode("", true),
+				_ctx.$slots.header || !__props.title ? (openBlock(), createElementBlock("h2", {
+					key: 1,
+					id: titleId.value,
+					class: "rs-drawer__title rs-drawer__title--sr-only"
+				}, toDisplayString(__props.title || __props.ariaLabel || unref(t)("drawer.label")), 9, _hoisted_9)) : createCommentVNode("", true),
+				__props.description && _ctx.$slots.header ? (openBlock(), createElementBlock("p", {
+					key: 2,
+					id: descId.value,
+					class: "rs-drawer__description rs-drawer__description--sr-only"
+				}, toDisplayString(__props.description), 9, _hoisted_10)) : createCommentVNode("", true),
+				createElementVNode("div", _hoisted_11, [renderSlot(_ctx.$slots, "default")]),
+				_ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_12, [renderSlot(_ctx.$slots, "footer")])) : createCommentVNode("", true),
+				enableResizable.value ? (openBlock(), createElementBlock("div", {
+					key: 4,
+					class: "rs-drawer__resize",
+					role: "separator",
+					tabindex: "0",
+					"aria-label": unref(t)("drawer.resize"),
+					"aria-orientation": isHorizontal.value ? "vertical" : "horizontal",
+					"aria-valuemin": boundMin.value,
+					"aria-valuemax": boundMax.value,
+					"aria-valuenow": liveSizePx.value != null ? Math.round(liveSizePx.value) : void 0,
+					"aria-controls": __props.id || void 0,
+					onPointerdown: onResizePointerDown,
+					onKeydown: onResizeKeydown
+				}, null, 40, _hoisted_13)) : createCommentVNode("", true)
+			], 16, _hoisted_2)) : createCommentVNode("", true)], 8, ["disabled", "to"]))], 64);
 		};
 	}
 });