niuma-ui 2.0.4 → 2.0.9

package/dist/components/dialog/src/RsDialog.js

@@ -1,7 +1,8 @@
 import './RsDialog.css'
+import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_export-helper.js";
 import RsDialog_vue_vue_type_script_setup_true_lang_default from "./RsDialog.impl.js";
 
 //#region src/components/dialog/src/RsDialog.vue
-var RsDialog_default = RsDialog_vue_vue_type_script_setup_true_lang_default;
+var RsDialog_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsDialog_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-36d0d285"]]);
 //#endregion
 export { RsDialog_default as default };

package/dist/components/dialog/src/dialog-utils.d.ts

@@ -1,4 +1,4 @@
-import type { Component } from 'vue';
+import { type Component } from 'vue';
 import type { RsLocale } from '../../../locale/types';
 import type { RsThemeMode } from '../../../theme/types';
 import type { RsFeedbackTone } from '../../_shared/src/overlay-utils';
@@ -35,6 +35,12 @@ export type RsConfirmCloseReason = 'confirm' | 'cancel' | 'escape' | 'programmat
  * 未提供或返回 void/true 时允许关闭。
  */
 export type RsConfirmBeforeClose = (reason: RsConfirmCloseReason) => boolean | void | Promise<boolean | void>;
+/** 模板 ref。close 走 beforeClose；focus 把焦点送进确认框。 */
+export interface RsConfirmDialogExpose {
+    close: (reason?: RsConfirmCloseReason) => Promise<boolean>;
+    focus: () => void;
+}
+export type RsConfirmDialogInstance = RsConfirmDialogExpose;
 export interface RsConfirmOptions {
     title?: string;
     /** 次要说明（标题与正文之间，对应业务侧常见 subtitle） */
@@ -93,3 +99,36 @@ export declare function resolveDialogOverlayStyle(options?: {
     overlayOpacity?: number;
     overlayBlur?: number | string;
 }): Record<string, string> | undefined;
+/** 模板 ref 类型。close 走 beforeClose；focus 把焦点送进对话框。 */
+export interface RsDialogExpose {
+    close: (reason?: RsDialogCloseReason) => Promise<boolean>;
+    openDialog: () => void;
+    focus: () => void;
+}
+export type RsDialogInstance = RsDialogExpose;
+/** 对话框内可 Tab 到的控件。不按 client rect 过滤：jsdom 没有布局。 */
+export declare function listDialogTabbables(root: ParentNode | null | undefined): HTMLElement[];
+export declare function dialogTargetOwnsTab(target: EventTarget | null): boolean;
+/** Tab 在对话框边界上的下一焦点。stay 表示交给浏览器。 */
+export declare function resolveDialogTabTarget(root: HTMLElement, active: Element | null, shift: boolean): HTMLElement | 'stay';
+/** 层栈变化时递增，让每个实例重新判断自己是不是最上层。 */
+export declare const dialogLayerTick: import("vue").Ref<number, number>;
+export declare function pushDialogLayer(id: string): void;
+export declare function removeDialogLayer(id: string): void;
+export declare function isTopDialogLayer(id: string): boolean;
+/**
+ * 模态层锁 body 滚动，并补上滚动条宽度，避免页面横跳。
+ * 引用计数：嵌套对话框只在最后一层关闭时恢复。重复释放无操作。
+ */
+export declare function acquireDialogScrollLock(): () => void;
+/**
+ * 把对话框外壳的兄弟（以及祖先的兄弟）标成 inert，背后内容不可点、不可 Tab。
+ * 不 inert body 本身，否则 Teleport 进去的对话框也会被冻住。
+ * 已经 inert 的节点不动，释放时也不会被我们解开。
+ */
+export declare function inertDialogSiblings(layer: HTMLElement): () => void;
+/** 只有最上层模态对话框持有 inert。别人释放不会清掉当前层。 */
+export declare function claimDialogInert(ownerId: string, layer: HTMLElement): void;
+export declare function releaseDialogInert(ownerId: string): void;
+/** 测试收尾：清层栈、滚动锁和 inert，避免上一例失败把 body 留在 hidden。 */
+export declare function resetDialogGuardsForTests(): void;

package/dist/components/dialog/src/dialog-utils.js

@@ -1,4 +1,5 @@
 import { dialogViewportSize } from "./dialog-viewport.js";
+import { ref } from "vue";
 //#region src/components/dialog/src/dialog-utils.ts
 function isRsDialogWidthPreset(width) {
 	return width === "sm" || width === "md" || width === "lg";
@@ -54,5 +55,155 @@ function resolveDialogOverlayStyle(options) {
 	if (options.overlayBlur != null && options.overlayBlur !== "") style["--rs-dialog-overlay-blur"] = typeof options.overlayBlur === "number" ? `${options.overlayBlur}px` : String(options.overlayBlur);
 	return Object.keys(style).length ? style : void 0;
 }
+var DIALOG_TAB_SELECTOR = [
+	"a[href]",
+	"button:not([disabled])",
+	"input:not([disabled]):not([type=\"hidden\"])",
+	"select:not([disabled])",
+	"textarea:not([disabled])",
+	"[tabindex]:not([tabindex=\"-1\"])"
+].join(", ");
+/** 编辑器自己消费 Tab。对话框陷阱在这些节点上放手。 */
+var DIALOG_TAB_OWNER = ".monaco-editor, .cm-editor, .cm-content, .xterm, [data-rs-dialog-tab-owner]";
+var INERT_SKIP = "script, style, link, meta, title";
+/** 对话框内可 Tab 到的控件。不按 client rect 过滤：jsdom 没有布局。 */
+function listDialogTabbables(root) {
+	if (!root || typeof root.querySelectorAll !== "function") return [];
+	const nodes = root.querySelectorAll(DIALOG_TAB_SELECTOR);
+	const seen = /* @__PURE__ */ new Set();
+	const out = [];
+	for (const el of nodes) {
+		if (seen.has(el)) continue;
+		if (el.tabIndex < 0) continue;
+		if (el.closest("[hidden], [inert]")) continue;
+		if (el.getAttribute("aria-disabled") === "true") continue;
+		seen.add(el);
+		out.push(el);
+	}
+	return out;
+}
+function dialogTargetOwnsTab(target) {
+	return target instanceof Element && target.closest(DIALOG_TAB_OWNER) != null;
+}
+/** Tab 在对话框边界上的下一焦点。stay 表示交给浏览器。 */
+function resolveDialogTabTarget(root, active, shift) {
+	const items = listDialogTabbables(root);
+	const inside = active != null && root.contains(active);
+	if (!items.length) return inside ? "stay" : root;
+	const first = items[0];
+	const last = items[items.length - 1];
+	if (!inside) return shift ? last : first;
+	if (shift && (active === first || active === root)) return last;
+	if (!shift && active === last) return first;
+	return "stay";
+}
+var dialogLayerIds = [];
+/** 层栈变化时递增，让每个实例重新判断自己是不是最上层。 */
+var dialogLayerTick = ref(0);
+function pushDialogLayer(id) {
+	const index = dialogLayerIds.indexOf(id);
+	if (index >= 0) dialogLayerIds.splice(index, 1);
+	dialogLayerIds.push(id);
+	dialogLayerTick.value += 1;
+}
+function removeDialogLayer(id) {
+	const index = dialogLayerIds.indexOf(id);
+	if (index < 0) return;
+	dialogLayerIds.splice(index, 1);
+	dialogLayerTick.value += 1;
+}
+function isTopDialogLayer(id) {
+	return dialogLayerIds.at(-1) === id;
+}
+var scrollLockCount = 0;
+var scrollLockSnapshot = null;
+/**
+* 模态层锁 body 滚动，并补上滚动条宽度，避免页面横跳。
+* 引用计数：嵌套对话框只在最后一层关闭时恢复。重复释放无操作。
+*/
+function acquireDialogScrollLock() {
+	if (typeof document === "undefined") return () => {};
+	if (scrollLockCount === 0) {
+		const body = document.body;
+		scrollLockSnapshot = {
+			overflow: body.style.overflow,
+			paddingInlineEnd: body.style.paddingInlineEnd
+		};
+		const gap = window.innerWidth - document.documentElement.clientWidth;
+		body.style.overflow = "hidden";
+		if (gap > 0) {
+			const current = Number.parseFloat(getComputedStyle(body).paddingInlineEnd) || 0;
+			body.style.paddingInlineEnd = `${current + gap}px`;
+		}
+	}
+	scrollLockCount += 1;
+	let released = false;
+	return () => {
+		if (released) return;
+		released = true;
+		scrollLockCount = Math.max(0, scrollLockCount - 1);
+		if (scrollLockCount !== 0 || !scrollLockSnapshot) return;
+		document.body.style.overflow = scrollLockSnapshot.overflow;
+		document.body.style.paddingInlineEnd = scrollLockSnapshot.paddingInlineEnd;
+		scrollLockSnapshot = null;
+	};
+}
+function markInert(el, value) {
+	if (value) {
+		el.setAttribute("inert", "");
+		if ("inert" in el) el.inert = true;
+		return;
+	}
+	if ("inert" in el) el.inert = false;
+	el.removeAttribute("inert");
+}
+function isInert(el) {
+	if ("inert" in el && el.inert) return true;
+	return el.hasAttribute("inert");
+}
+function markInertSiblings(parent, current, touched) {
+	for (const node of Array.from(parent.children)) {
+		if (node === current || !(node instanceof HTMLElement)) continue;
+		if (node.matches(INERT_SKIP) || isInert(node)) continue;
+		markInert(node, true);
+		touched.push(node);
+	}
+}
+/**
+* 把对话框外壳的兄弟（以及祖先的兄弟）标成 inert，背后内容不可点、不可 Tab。
+* 不 inert body 本身，否则 Teleport 进去的对话框也会被冻住。
+* 已经 inert 的节点不动，释放时也不会被我们解开。
+*/
+function inertDialogSiblings(layer) {
+	if (typeof document === "undefined" || !layer.parentElement) return () => {};
+	const touched = [];
+	let current = layer;
+	while (current && current !== document.body) {
+		const parent = current.parentElement;
+		if (!parent) break;
+		markInertSiblings(parent, current, touched);
+		current = parent;
+	}
+	let released = false;
+	return () => {
+		if (released) return;
+		released = true;
+		for (const el of touched) markInert(el, false);
+	};
+}
+var inertRelease = null;
+var inertOwner = null;
+/** 只有最上层模态对话框持有 inert。别人释放不会清掉当前层。 */
+function claimDialogInert(ownerId, layer) {
+	inertRelease?.();
+	inertRelease = inertDialogSiblings(layer);
+	inertOwner = ownerId;
+}
+function releaseDialogInert(ownerId) {
+	if (inertOwner !== ownerId) return;
+	inertRelease?.();
+	inertRelease = null;
+	inertOwner = null;
+}
 //#endregion
-export { isRsDialogWidthPreset, resolveDialogOverlayStyle, resolveRsDialogCssWidth, resolveRsDialogWidthPx, runRsConfirmBeforeClose, runRsDialogBeforeClose };
+export { acquireDialogScrollLock, claimDialogInert, dialogLayerTick, dialogTargetOwnsTab, inertDialogSiblings, isRsDialogWidthPreset, isTopDialogLayer, listDialogTabbables, pushDialogLayer, releaseDialogInert, removeDialogLayer, resolveDialogOverlayStyle, resolveDialogTabTarget, resolveRsDialogCssWidth, resolveRsDialogWidthPx, runRsConfirmBeforeClose, runRsDialogBeforeClose };

package/dist/components/dialog/src/dialog-window.js

@@ -35,6 +35,9 @@ function useRsDialogWindow(options) {
 	/** 交互中的目标面板；有值时 pointermove 只改 DOM，pointerup 再写回 bounds */
 	let panelEl = null;
 	let liveBounds = null;
+	let pointerBound = false;
+	let savedUserSelect = "";
+	let savedCursor = "";
 	let dragState = null;
 	let resizeState = null;
 	function writePanelBox(next) {
@@ -49,7 +52,7 @@ function useRsDialogWindow(options) {
 	function setPanelEl(el) {
 		panelEl = el;
 	}
-	/** 优先用已绑定节点；否则从事件目标向上找面板（Reka DialogContent ref 不一定有 $el） */
+	/** 优先用已绑定节点；否则从事件目标向上找面板 */
 	function ensurePanelEl(from) {
 		if (panelEl?.isConnected) return panelEl;
 		const found = (from instanceof Element ? from : null)?.closest(".rs-dialog__content");
@@ -208,20 +211,38 @@ function useRsDialogWindow(options) {
 		}
 		dragState = null;
 		resizeState = null;
+		if (!pointerBound) return;
+		pointerBound = false;
 		window.removeEventListener("pointermove", onPointerMove);
 		window.removeEventListener("pointerup", stopInteractions);
-		document.body.style.userSelect = "";
-		document.body.style.cursor = "";
+		window.removeEventListener("pointercancel", stopInteractions);
+		document.body.style.userSelect = savedUserSelect;
+		document.body.style.cursor = savedCursor;
 	}
-	function startInteraction(cursor) {
+	function capturePointer(event) {
+		const el = panelEl;
+		if (!el || typeof el.setPointerCapture !== "function") return;
+		try {
+			if (typeof el.hasPointerCapture === "function" && el.hasPointerCapture(event.pointerId)) return;
+			el.setPointerCapture(event.pointerId);
+		} catch {}
+	}
+	function startInteraction(cursor, event) {
 		boundsTransitionEnabled.value = false;
 		clearBoundsTransitionTimer();
 		refreshCachedInsets();
 		liveBounds = { ...bounds.value };
-		window.addEventListener("pointermove", onPointerMove);
-		window.addEventListener("pointerup", stopInteractions);
+		if (!pointerBound) {
+			savedUserSelect = document.body.style.userSelect;
+			savedCursor = document.body.style.cursor;
+			window.addEventListener("pointermove", onPointerMove);
+			window.addEventListener("pointerup", stopInteractions);
+			window.addEventListener("pointercancel", stopInteractions);
+			pointerBound = true;
+		}
 		document.body.style.userSelect = "none";
 		document.body.style.cursor = cursor;
+		capturePointer(event);
 	}
 	function onHeaderPointerDown(event) {
 		if (!options.draggable.value || isFullscreen.value) return;
@@ -233,7 +254,7 @@ function useRsDialogWindow(options) {
 			startY: event.clientY,
 			origin: { ...bounds.value }
 		};
-		startInteraction("move");
+		startInteraction("move", event);
 	}
 	const resizeCursor = {
 		n: "ns-resize",
@@ -255,7 +276,7 @@ function useRsDialogWindow(options) {
 			startY: event.clientY,
 			origin: { ...bounds.value }
 		};
-		startInteraction(resizeCursor[handle]);
+		startInteraction(resizeCursor[handle], event);
 	}
 	onBeforeUnmount(() => {
 		stopInteractions();

package/dist/components/drawer/index.d.ts

@@ -1,3 +1,3 @@
 export { default as RsDrawer } from './src/RsDrawer.js';
-export type { RsDrawerBeforeClose, RsDrawerCloseReason, RsDrawerDimension, RsDrawerSide, RsDrawerSize, } from './src/drawer-utils';
+export type { RsDrawerBeforeClose, RsDrawerCloseReason, RsDrawerDimension, RsDrawerExpose, RsDrawerInstance, RsDrawerSide, RsDrawerSize, } from './src/drawer-utils';
 export { clampRsDrawerSize, resolveDrawerOverlayStyle, resolveRsDrawerDimensionCss, resolveRsDrawerSizeCss, resolveRsDrawerSizePx, RS_DRAWER_MAX_VIEWPORT_RATIO, RS_DRAWER_MIN_SIZE_PX, runRsDrawerBeforeClose, } from './src/drawer-utils';

package/dist/components/drawer/src/RsDrawer.css

@@ -2,7 +2,7 @@
 .rs-drawer__overlay {
   position: fixed;
   inset: 0;
-  z-index: var(--rs-z-modal);
+  z-index: var(--rs-drawer-z, var(--rs-z-modal));
   background: var(--rs-drawer-overlay-bg, var(--rs-dialog-overlay-bg, rgb(0 0 0 / 0.24)));
   backdrop-filter: blur(var(--rs-drawer-overlay-blur, var(--rs-dialog-overlay-blur, 0px))) saturate(120%);
   -webkit-backdrop-filter: blur(var(--rs-drawer-overlay-blur, var(--rs-dialog-overlay-blur, 0px)))
@@ -12,14 +12,19 @@
   animation: rs-drawer-overlay-in var(--rs-drawer-motion-duration-in, 240ms) ease;
 }
 .rs-drawer__overlay[data-state='closed'] {
-  animation: rs-drawer-overlay-out var(--rs-drawer-motion-duration-out, 180ms) ease;
+  /* forwards：结束后停在透明，避免卸掉前 Opacity 弹回 1 */
+  animation: rs-drawer-overlay-out var(--rs-drawer-motion-duration-out, 180ms) ease forwards;
 }
 .rs-drawer__overlay--contained {
   position: absolute;
 }
+.rs-drawer__overlay--dormant {
+  visibility: hidden;
+  pointer-events: none;
+}
 .rs-drawer__content {
   position: fixed;
-  z-index: calc(var(--rs-z-modal) + 1);
+  z-index: calc(var(--rs-drawer-z, var(--rs-z-modal)) + 1);
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -30,25 +35,38 @@
   color: var(--rs-text);
   box-shadow: var(--rs-shadow-lg);
   outline: none;
+}
+.rs-drawer__content--animate {
   will-change: transform;
 }
+.rs-drawer__content:focus {
+  outline: none;
+}
+.rs-drawer__content:focus-visible {
+  outline: var(--rs-focus-ring-width) solid var(--rs-focus-ring);
+  outline-offset: -2px;
+}
+.rs-drawer__content--dormant {
+  visibility: hidden;
+  pointer-events: none;
+}
 .rs-drawer__resize {
   position: absolute;
   z-index: 3;
   padding: 0;
   border: 0;
   background: transparent;
-  appearance: none;
+  touch-action: none;
 }
 .rs-drawer__resize:focus-visible {
-  outline: 2px solid var(--rs-primary);
+  outline: var(--rs-focus-ring-width) solid var(--rs-focus-ring);
   outline-offset: -2px;
 }
 .rs-drawer__content--right > .rs-drawer__resize,
 .rs-drawer__content--left > .rs-drawer__resize {
   top: 0;
   bottom: 0;
-  width: 6px;
+  width: 10px;
   cursor: ew-resize;
 }
 .rs-drawer__content--right > .rs-drawer__resize {
@@ -60,7 +78,7 @@
 .rs-drawer__content--top > .rs-drawer__resize,
 .rs-drawer__content--bottom > .rs-drawer__resize {
   inset-inline: 0;
-  height: 6px;
+  height: 10px;
   cursor: ns-resize;
 }
 .rs-drawer__content--top > .rs-drawer__resize {
@@ -112,12 +130,14 @@
   right: 0;
   border-right: 0;
   border-radius: var(--rs-radius) 0 0 var(--rs-radius);
+  padding-right: env(safe-area-inset-right, 0px);
 }
 .rs-drawer__content--left {
   left: 0;
   right: auto;
   border-left: 0;
   border-radius: 0 var(--rs-radius) var(--rs-radius) 0;
+  padding-left: env(safe-area-inset-left, 0px);
 }
 .rs-drawer__content--top,
 .rs-drawer__content--bottom {
@@ -131,11 +151,13 @@
   top: 0;
   border-top: 0;
   border-radius: 0 0 var(--rs-radius) var(--rs-radius);
+  padding-top: env(safe-area-inset-top, 0px);
 }
 .rs-drawer__content--bottom {
   bottom: 0;
   border-bottom: 0;
   border-radius: var(--rs-radius) var(--rs-radius) 0 0;
+  padding-bottom: env(safe-area-inset-bottom, 0px);
 }
 .rs-drawer__content--sm:is(.rs-drawer__content--left, .rs-drawer__content--right) {
   --rs-drawer-panel-size: 20rem;
@@ -170,35 +192,33 @@
 ) {
   height: 100%;
 }
-
-/* 滑入 / 滑出（与 Reka data-state 对齐；缓动接近主流 sheet） */
 .rs-drawer__content--right[data-state='open'] {
   animation: rs-drawer-slide-right-in var(--rs-drawer-motion-duration-in, 240ms)
     cubic-bezier(0.32, 0.72, 0, 1);
 }
 .rs-drawer__content--right[data-state='closed'] {
-  animation: rs-drawer-slide-right-out var(--rs-drawer-motion-duration-out, 180ms) ease;
+  animation: rs-drawer-slide-right-out var(--rs-drawer-motion-duration-out, 180ms) ease forwards;
 }
 .rs-drawer__content--left[data-state='open'] {
   animation: rs-drawer-slide-left-in var(--rs-drawer-motion-duration-in, 240ms)
     cubic-bezier(0.32, 0.72, 0, 1);
 }
 .rs-drawer__content--left[data-state='closed'] {
-  animation: rs-drawer-slide-left-out var(--rs-drawer-motion-duration-out, 180ms) ease;
+  animation: rs-drawer-slide-left-out var(--rs-drawer-motion-duration-out, 180ms) ease forwards;
 }
 .rs-drawer__content--top[data-state='open'] {
   animation: rs-drawer-slide-top-in var(--rs-drawer-motion-duration-in, 240ms)
     cubic-bezier(0.32, 0.72, 0, 1);
 }
 .rs-drawer__content--top[data-state='closed'] {
-  animation: rs-drawer-slide-top-out var(--rs-drawer-motion-duration-out, 180ms) ease;
+  animation: rs-drawer-slide-top-out var(--rs-drawer-motion-duration-out, 180ms) ease forwards;
 }
 .rs-drawer__content--bottom[data-state='open'] {
   animation: rs-drawer-slide-bottom-in var(--rs-drawer-motion-duration-in, 240ms)
     cubic-bezier(0.32, 0.72, 0, 1);
 }
 .rs-drawer__content--bottom[data-state='closed'] {
-  animation: rs-drawer-slide-bottom-out var(--rs-drawer-motion-duration-out, 180ms) ease;
+  animation: rs-drawer-slide-bottom-out var(--rs-drawer-motion-duration-out, 180ms) ease forwards;
 }
 @keyframes rs-drawer-overlay-in {
 from {
@@ -289,10 +309,15 @@ to {
   box-sizing: border-box;
   height: var(--rs-drawer-header-height);
   min-height: var(--rs-drawer-header-min-height);
-  padding: var(--rs-drawer-header-padding-y) var(--rs-drawer-header-padding-x);
+  padding-block: var(--rs-drawer-header-padding-y);
+  padding-inline: var(--rs-drawer-header-padding-x);
   background: var(--rs-drawer-header-bg);
   border-bottom: 1px solid var(--rs-drawer-separator, var(--rs-border-subtle));
 }
+.rs-drawer__header > :first-child {
+  min-width: 0;
+  flex: 1;
+}
 .rs-drawer__heading {
   min-width: 0;
   flex: 1;
@@ -301,6 +326,19 @@ to {
   flex-direction: column;
   justify-content: center;
 }
+.rs-drawer__tools {
+  display: flex;
+  align-items: center;
+  gap: var(--rs-space-xs);
+  flex-shrink: 0;
+  margin-inline-start: auto;
+}
+.rs-drawer__extra {
+  display: flex;
+  align-items: center;
+  gap: var(--rs-space-xs);
+  flex-shrink: 0;
+}
 .rs-drawer__footer {
   display: flex;
   align-items: center;
@@ -310,7 +348,8 @@ to {
   box-sizing: border-box;
   height: var(--rs-drawer-footer-height);
   min-height: var(--rs-drawer-footer-min-height);
-  padding: var(--rs-drawer-footer-padding-y) var(--rs-drawer-footer-padding-x);
+  padding-block: var(--rs-drawer-footer-padding-y);
+  padding-inline: var(--rs-drawer-footer-padding-x);
   background: var(--rs-drawer-footer-bg);
   border-top: 1px solid
     var(--rs-drawer-footer-border, var(--rs-drawer-separator, var(--rs-border-subtle)));
@@ -318,11 +357,13 @@ to {
 .rs-drawer__body {
   flex: 1;
   min-height: 0;
-  overflow: hidden;
+  overflow: auto;
+  overscroll-behavior: contain;
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
-  padding: var(--rs-drawer-body-padding-y) var(--rs-drawer-body-padding-x);
+  padding-block: var(--rs-drawer-body-padding-y);
+  padding-inline: var(--rs-drawer-body-padding-x);
   background: var(--rs-drawer-body-bg);
 }
 .rs-drawer__title {
@@ -339,21 +380,12 @@ to {
   white-space: nowrap;
 }
 .rs-drawer__description {
-  margin: var(--rs-space-xs) 0 0;
+  margin-block: var(--rs-space-xs) 0;
+  margin-inline: 0;
   color: var(--rs-drawer-description-fg, var(--rs-muted));
   font-size: var(--rs-font-size-sm);
 }
-.rs-drawer__description--sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
+.rs-drawer__description--sr-only,
 .rs-drawer__title--sr-only {
   position: absolute;
   width: 1px;

package/dist/components/drawer/src/RsDrawer.d.ts

@@ -1,4 +1,4 @@
-import { type RsDrawerBeforeClose, type RsDrawerCloseReason, type RsDrawerDimension, type RsDrawerSide, type RsDrawerSize } from './drawer-utils';
+import { type RsDrawerBeforeClose, type RsDrawerDimension, type RsDrawerExpose, type RsDrawerSide, type RsDrawerSize } from './drawer-utils';
 type __VLS_Props = {
     /** 标题文案；也可用 `#header` 插槽 */
     title?: string;
@@ -35,64 +35,80 @@ type __VLS_Props = {
     overlayBlur?: number | string;
     showClose?: boolean;
     /**
-     * 点击抽屉外是否关闭（含无遮罩时的 interact-outside）。
+     * 点击抽屉外是否关闭（含无遮罩时的外部指针）。
      * 与 modal 独立：非模态也可保持打开。
      */
     closeOnOverlayClick?: boolean;
-    /** 按 Esc 是否关闭；默认 true */
+    /** 按 Esc 是否关闭；默认 true。上层浮层已 preventDefault 时不抢。 */
     closeOnEsc?: boolean;
     /**
-     * DialogPortal 挂载目标
+     * 挂载目标
      * - string / HTMLElement：Teleport 到指定节点（容器需 position:relative）
      * - false：禁用 Teleport，就地渲染
-     * - undefined：走 Reka 默认（通常为 body）
+     * - undefined：挂到 body
      */
     teleportTo?: string | HTMLElement | false;
     /** 关闭前钩子；返回 false 可阻止关闭（支持 async） */
     beforeClose?: RsDrawerBeforeClose;
+    /**
+     * 关闭动画结束后卸掉面板。默认 true，与原先关闭即卸载一致。
+     * false 时保留子树，便于表单状态留在抽屉里。
+     */
+    destroyOnClose?: boolean;
+    /** 首次打开前就挂载子树。关闭后是否留下仍看 destroyOnClose。 */
+    forceRender?: boolean;
+    /**
+     * 是否锁 body 滚动。未传时：模态且挂到 body 才锁。
+     * 挂进局部容器默认不锁整页。
+     */
+    lockScroll?: boolean;
+    /** 覆盖层叠。未传时与其它抽屉同用 --rs-z-modal，后打开的盖在上面。 */
+    zIndex?: number;
+    /** 没有可见标题时的可访问名称 */
+    ariaLabel?: string;
+    id?: string;
 };
 type __VLS_ModelProps = {
     'open'?: boolean;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_34: {}, __VLS_67: {}, __VLS_69: {};
+declare var __VLS_7: {}, __VLS_9: {}, __VLS_18: {}, __VLS_20: {};
 type __VLS_Slots = {} & {
-    header?: (props: typeof __VLS_34) => any;
+    header?: (props: typeof __VLS_7) => any;
 } & {
-    default?: (props: typeof __VLS_67) => any;
+    extra?: (props: typeof __VLS_9) => any;
 } & {
-    footer?: (props: typeof __VLS_69) => any;
+    default?: (props: typeof __VLS_18) => any;
+} & {
+    footer?: (props: typeof __VLS_20) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
-    /** 请求关闭（走 beforeClose） */
-    close: (reason?: RsDrawerCloseReason) => Promise<boolean>;
-    /** 打开抽屉 */
-    openDrawer: () => void;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, RsDrawerExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     resize: (size: number) => any;
-    "update:open": (value: boolean) => any;
     openChange: (open: boolean) => any;
+    "update:open": (value: boolean) => any;
     afterOpen: () => any;
-    afterClose: (reason: import("../../dialog").RsDialogCloseReason) => any;
+    afterClose: (reason: import("../../dialog/index.js").RsDialogCloseReason) => any;
     "update:width": (value: number) => any;
     "update:height": (value: number) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onResize?: ((size: number) => any) | undefined;
-    "onUpdate:open"?: ((value: boolean) => any) | undefined;
     onOpenChange?: ((open: boolean) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
     onAfterOpen?: (() => any) | undefined;
-    onAfterClose?: ((reason: import("../../dialog").RsDialogCloseReason) => any) | undefined;
+    onAfterClose?: ((reason: import("../../dialog/index.js").RsDialogCloseReason) => any) | undefined;
     "onUpdate:width"?: ((value: number) => any) | undefined;
     "onUpdate:height"?: ((value: number) => any) | undefined;
 }>, {
     title: string;
     size: RsDrawerSize;
     side: RsDrawerSide;
+    showClose: boolean;
+    closeOnEsc: boolean;
     resizable: boolean;
     showOverlay: boolean;
-    showClose: boolean;
     closeOnOverlayClick: boolean;
-    closeOnEsc: boolean;
+    destroyOnClose: boolean;
+    forceRender: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;