niuma-ui 2.0.3 → 2.0.9

package/dist/components/sidebar/src/RsSidebarItem.css

@@ -1,45 +1,75 @@
 
-.rs-sidebar-item[data-v-0c539439] {
+.rs-sidebar-item[data-v-b40cbb52] {
   display: flex;
   align-items: center;
-  gap: var(--rs-space-sm);
-  width: 100%;
-  min-height: var(--rs-control-height-md);
+  gap: var(--rs-sidebar-gap);
+  inline-size: 100%;
+  min-block-size: var(--rs-control-height-md);
   box-sizing: border-box;
-  padding: 0 var(--rs-space-sm);
+  padding-block: 0;
+  padding-inline: var(--rs-space-sm);
   border: 1px solid transparent;
   border-radius: var(--rs-radius-sm);
   background: transparent;
-  color: var(--rs-muted);
+  color: var(--rs-sidebar-item);
   font: inherit;
+  text-decoration: none;
   cursor: pointer;
   transition:
-    background var(--rs-transition-fast),
+    background-color var(--rs-transition-fast),
     border-color var(--rs-transition-fast),
     color var(--rs-transition-fast);
 }
-.rs-sidebar-item[data-v-0c539439]:hover:not(:disabled) {
-  background: var(--rs-item-hover);
-  color: var(--rs-text);
+.rs-sidebar-item--horizontal[data-v-b40cbb52] {
+  inline-size: auto;
 }
-.rs-sidebar-item--active[data-v-0c539439] {
-  background: color-mix(in srgb, var(--rs-primary) 12%, transparent);
-  color: var(--rs-primary);
+.rs-sidebar-item[data-v-b40cbb52]:hover:not(:disabled):not([aria-disabled='true']) {
+  background: var(--rs-sidebar-item-hover-bg);
+  color: var(--rs-sidebar-item-hover);
 }
-.rs-sidebar-item--collapsed[data-v-0c539439] {
+.rs-sidebar-item--active[data-v-b40cbb52] {
+  background: var(--rs-sidebar-item-active-bg);
+  color: var(--rs-sidebar-item-active);
+}
+.rs-sidebar-item--collapsed[data-v-b40cbb52] {
   justify-content: center;
-  padding: 0;
+  padding-inline: 0;
 }
-.rs-sidebar-item[data-v-0c539439]:disabled {
-  opacity: 0.38;
+.rs-sidebar-item[data-v-b40cbb52]:disabled,
+.rs-sidebar-item[aria-disabled='true'][data-v-b40cbb52] {
+  opacity: var(--rs-sidebar-disabled-opacity);
   cursor: not-allowed;
 }
-.rs-sidebar-item__icon[data-v-0c539439] {
+.rs-sidebar-item[data-v-b40cbb52]:focus {
+  outline: none;
+}
+.rs-sidebar-item[data-v-b40cbb52]:focus-visible {
+  box-shadow: 0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
+}
+.rs-sidebar-item__icon[data-v-b40cbb52] {
   flex: 0 0 auto;
 }
-.rs-sidebar-item__label[data-v-0c539439] {
-  min-width: 0;
+.rs-sidebar-item__label[data-v-b40cbb52] {
+  min-inline-size: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.rs-sidebar-item__badge[data-v-b40cbb52] {
+  margin-inline-start: auto;
+  min-inline-size: 1.1em;
+  padding-block: 0;
+  padding-inline: var(--rs-space-xs);
+  border-radius: var(--rs-radius-full);
+  background: var(--rs-sidebar-badge-bg);
+  color: var(--rs-sidebar-badge);
+  font-size: var(--rs-font-size-xs);
+  line-height: var(--rs-line-height-normal);
+  text-align: center;
+}
+.rs-sidebar-item__badge--dot[data-v-b40cbb52] {
+  min-inline-size: 0.45rem;
+  block-size: 0.45rem;
+  padding: 0;
+  margin-inline-start: 0;
+}

package/dist/components/sidebar/src/RsSidebarItem.d.ts

@@ -4,12 +4,30 @@ type __VLS_Props = {
     active?: boolean;
     disabled?: boolean;
     collapsed?: boolean;
+    href?: string;
+    to?: string;
+    target?: '_self' | '_blank' | '_parent' | '_top' | (string & {});
+    rel?: string;
+    badge?: string | number;
+};
+declare var __VLS_15: {
+    collapsed: boolean;
+    badge: string | number | undefined;
+}, __VLS_17: {
+    collapsed: boolean;
 };
-declare var __VLS_6: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_6) => any;
+    badge?: (props: typeof __VLS_15) => any;
+} & {
+    default?: (props: typeof __VLS_17) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (event: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: ((event: MouseEvent) => any) | undefined;
+}>, {
+    collapsed: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/sidebar/src/RsSidebarItem.impl.js

@@ -1,39 +1,90 @@
 import RsIcon_default from "../../icon/src/RsIcon.js";
-import { createBlock, createCommentVNode, createElementBlock, defineComponent, normalizeClass, openBlock, renderSlot, toDisplayString } from "vue";
+import { RS_SIDEBAR_KEY, hasRsSidebarBadge, mergeRsSidebarLinkRel, resolveRsSidebarCollapsed, resolveRsSidebarItemHref, resolveRsSidebarItemTag } from "./sidebar-utils.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createTextVNode, defineComponent, inject, normalizeClass, openBlock, renderSlot, resolveDynamicComponent, toDisplayString, withCtx } from "vue";
 //#region src/components/sidebar/src/RsSidebarItem.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["disabled", "title"];
-var _hoisted_2 = {
+var _hoisted_1 = {
 	key: 1,
 	class: "rs-sidebar-item__label"
 };
 var RsSidebarItem_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "RsSidebarItem",
 	__name: "RsSidebarItem",
 	props: {
 		label: {},
 		icon: {},
 		active: { type: Boolean },
 		disabled: { type: Boolean },
-		collapsed: { type: Boolean }
+		collapsed: {
+			type: Boolean,
+			default: void 0
+		},
+		href: {},
+		to: {},
+		target: {},
+		rel: {},
+		badge: {}
 	},
-	setup(__props) {
+	emits: ["click"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const ctx = inject(RS_SIDEBAR_KEY, null);
+		const isCollapsed = computed(() => resolveRsSidebarCollapsed(props.collapsed, ctx?.collapsed.value));
+		const orientation = computed(() => ctx?.orientation.value ?? "vertical");
+		const itemHref = computed(() => resolveRsSidebarItemHref(props.href, props.to));
+		const itemTag = computed(() => resolveRsSidebarItemTag(itemHref.value));
+		const itemRel = computed(() => mergeRsSidebarLinkRel(props.rel, props.target));
+		const showBadge = computed(() => hasRsSidebarBadge(props.badge));
+		const tooltip = computed(() => isCollapsed.value ? props.label : void 0);
+		function onClick(event) {
+			emit("click", event);
+			if (props.disabled) event.preventDefault();
+		}
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("button", {
-				type: "button",
-				class: normalizeClass(["rs-sidebar-item", {
+			return openBlock(), createBlock(resolveDynamicComponent(itemTag.value), {
+				class: normalizeClass(["rs-sidebar-item rs-motion-reduce", {
 					"rs-sidebar-item--active": __props.active,
-					"rs-sidebar-item--collapsed": __props.collapsed
+					"rs-sidebar-item--collapsed": isCollapsed.value,
+					[`rs-sidebar-item--${orientation.value}`]: true
 				}]),
-				disabled: __props.disabled,
-				title: __props.collapsed ? __props.label : void 0
-			}, [
-				__props.icon ? (openBlock(), createBlock(RsIcon_default, {
-					key: 0,
-					name: __props.icon,
-					class: "rs-sidebar-item__icon"
-				}, null, 8, ["name"])) : createCommentVNode("", true),
-				!__props.collapsed ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(__props.label), 1)) : createCommentVNode("", true),
-				renderSlot(_ctx.$slots, "default", {}, void 0, true)
-			], 10, _hoisted_1);
+				href: itemTag.value === "a" ? itemHref.value : void 0,
+				target: itemTag.value === "a" ? __props.target : void 0,
+				rel: itemTag.value === "a" ? itemRel.value : void 0,
+				type: itemTag.value === "button" ? "button" : void 0,
+				disabled: itemTag.value === "button" ? __props.disabled : void 0,
+				"aria-disabled": itemTag.value === "a" && __props.disabled ? "true" : void 0,
+				"aria-current": __props.active ? "page" : void 0,
+				title: tooltip.value,
+				onClick
+			}, {
+				default: withCtx(() => [
+					__props.icon ? (openBlock(), createBlock(RsIcon_default, {
+						key: 0,
+						name: __props.icon,
+						class: "rs-sidebar-item__icon"
+					}, null, 8, ["name"])) : createCommentVNode("", true),
+					!isCollapsed.value ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(__props.label), 1)) : createCommentVNode("", true),
+					showBadge.value ? (openBlock(), createElementBlock("span", {
+						key: 2,
+						class: normalizeClass(["rs-sidebar-item__badge", { "rs-sidebar-item__badge--dot": isCollapsed.value }])
+					}, [renderSlot(_ctx.$slots, "badge", {
+						collapsed: isCollapsed.value,
+						badge: __props.badge
+					}, () => [!isCollapsed.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createTextVNode(toDisplayString(__props.badge), 1)], 64)) : createCommentVNode("", true)], true)], 2)) : createCommentVNode("", true),
+					renderSlot(_ctx.$slots, "default", { collapsed: isCollapsed.value }, void 0, true)
+				]),
+				_: 3
+			}, 8, [
+				"class",
+				"href",
+				"target",
+				"rel",
+				"type",
+				"disabled",
+				"aria-disabled",
+				"aria-current",
+				"title"
+			]);
 		};
 	}
 });

package/dist/components/sidebar/src/RsSidebarItem.js

@@ -3,6 +3,6 @@ import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_exp
 import RsSidebarItem_vue_vue_type_script_setup_true_lang_default from "./RsSidebarItem.impl.js";
 
 //#region src/components/sidebar/src/RsSidebarItem.vue
-var RsSidebarItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsSidebarItem_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-0c539439"]]);
+var RsSidebarItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsSidebarItem_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-b40cbb52"]]);
 //#endregion
 export { RsSidebarItem_default as default };

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

@@ -0,0 +1,47 @@
+import type { ComputedRef, InjectionKey } from 'vue';
+export declare const RS_SIDEBAR_ORIENTATIONS: readonly ["vertical", "horizontal"];
+export declare const RS_SIDEBAR_PLACEMENTS: readonly ["left", "right"];
+export declare const RS_SIDEBAR_WIDTHS: readonly ["sm", "md", "lg"];
+export type RsSidebarOrientation = (typeof RS_SIDEBAR_ORIENTATIONS)[number];
+export type RsSidebarPlacement = (typeof RS_SIDEBAR_PLACEMENTS)[number];
+export type RsSidebarWidth = (typeof RS_SIDEBAR_WIDTHS)[number];
+export interface RsSidebarExpose {
+    expand: () => void;
+    collapse: () => void;
+    toggle: () => void;
+    focus: () => void;
+}
+export type RsSidebarInstance = RsSidebarExpose & {
+    $el: HTMLElement;
+};
+export interface RsSidebarContext {
+    collapsed: ComputedRef<boolean>;
+    orientation: ComputedRef<RsSidebarOrientation>;
+    placement: ComputedRef<RsSidebarPlacement>;
+}
+export declare const RS_SIDEBAR_KEY: InjectionKey<RsSidebarContext>;
+export interface RsSidebarHotkeyLike {
+    key: string;
+    altKey: boolean;
+    shiftKey: boolean;
+    ctrlKey: boolean;
+    metaKey: boolean;
+}
+export declare function isRsSidebarOrientation(value: unknown): value is RsSidebarOrientation;
+export declare function isRsSidebarPlacement(value: unknown): value is RsSidebarPlacement;
+export declare function isRsSidebarWidth(value: unknown): value is RsSidebarWidth;
+export declare function resolveRsSidebarOrientation(orientation?: RsSidebarOrientation | null): RsSidebarOrientation;
+export declare function resolveRsSidebarPlacement(placement?: RsSidebarPlacement | null): RsSidebarPlacement;
+export declare function resolveRsSidebarWidth(width?: RsSidebarWidth | null): RsSidebarWidth;
+/** 显式 collapsed 优先；未传（undefined）才跟 Sidebar 注入。 */
+export declare function resolveRsSidebarCollapsed(explicit?: boolean | null, inherited?: boolean | null): boolean;
+/** href 优先；没有 href 时用 to，保证只传 to 的项仍是带地址的 a。 */
+export declare function resolveRsSidebarItemHref(href?: string, to?: string): string | undefined;
+export declare function resolveRsSidebarItemTag(href?: string): 'a' | 'button';
+/** `_blank` 时补 noopener / noreferrer，并保留调用方已有 rel。 */
+export declare function mergeRsSidebarLinkRel(rel: string | undefined, target: string | undefined): string | undefined;
+export declare function resolveRsSidebarCollapseIcon(orientation: RsSidebarOrientation, placement: RsSidebarPlacement, collapsed: boolean): string;
+/** hotkey 取最后一段字母；修饰键固定为 Ctrl 或 Meta，忽略输入框。 */
+export declare function matchesRsSidebarHotkey(event: RsSidebarHotkeyLike, hotkey: string): boolean;
+export declare function isRsSidebarTypingTarget(target: EventTarget | null): boolean;
+export declare function hasRsSidebarBadge(badge: string | number | undefined | null): boolean;

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

@@ -0,0 +1,72 @@
+//#region src/components/sidebar/src/sidebar-utils.ts
+var RS_SIDEBAR_ORIENTATIONS = ["vertical", "horizontal"];
+var RS_SIDEBAR_PLACEMENTS = ["left", "right"];
+var RS_SIDEBAR_WIDTHS = [
+	"sm",
+	"md",
+	"lg"
+];
+var RS_SIDEBAR_KEY = Symbol("rs-sidebar");
+function isRsSidebarOrientation(value) {
+	return typeof value === "string" && RS_SIDEBAR_ORIENTATIONS.includes(value);
+}
+function isRsSidebarPlacement(value) {
+	return typeof value === "string" && RS_SIDEBAR_PLACEMENTS.includes(value);
+}
+function isRsSidebarWidth(value) {
+	return typeof value === "string" && RS_SIDEBAR_WIDTHS.includes(value);
+}
+function resolveRsSidebarOrientation(orientation) {
+	return isRsSidebarOrientation(orientation) ? orientation : "vertical";
+}
+function resolveRsSidebarPlacement(placement) {
+	return isRsSidebarPlacement(placement) ? placement : "left";
+}
+function resolveRsSidebarWidth(width) {
+	return isRsSidebarWidth(width) ? width : "md";
+}
+/** 显式 collapsed 优先；未传（undefined）才跟 Sidebar 注入。 */
+function resolveRsSidebarCollapsed(explicit, inherited) {
+	return explicit ?? Boolean(inherited);
+}
+/** href 优先；没有 href 时用 to，保证只传 to 的项仍是带地址的 a。 */
+function resolveRsSidebarItemHref(href, to) {
+	if (href) return href;
+	if (to) return to;
+}
+function resolveRsSidebarItemTag(href) {
+	return href ? "a" : "button";
+}
+/** `_blank` 时补 noopener / noreferrer，并保留调用方已有 rel。 */
+function mergeRsSidebarLinkRel(rel, target) {
+	const parts = (rel ?? "").split(/\s+/).map((item) => item.trim()).filter(Boolean);
+	if (target === "_blank") {
+		if (!parts.includes("noopener")) parts.push("noopener");
+		if (!parts.includes("noreferrer")) parts.push("noreferrer");
+	}
+	return parts.length > 0 ? parts.join(" ") : void 0;
+}
+function resolveRsSidebarCollapseIcon(orientation, placement, collapsed) {
+	if (orientation === "horizontal") return collapsed ? "chevron-down" : "chevron-up";
+	if (placement === "right") return collapsed ? "chevron-left" : "chevron-right";
+	return collapsed ? "chevron-right" : "chevron-left";
+}
+/** hotkey 取最后一段字母；修饰键固定为 Ctrl 或 Meta，忽略输入框。 */
+function matchesRsSidebarHotkey(event, hotkey) {
+	const key = hotkey.trim().split("+").pop()?.toLowerCase();
+	if (!key) return false;
+	if (event.key.toLowerCase() !== key) return false;
+	if (event.altKey || event.shiftKey) return false;
+	return event.ctrlKey || event.metaKey;
+}
+function isRsSidebarTypingTarget(target) {
+	if (typeof HTMLElement === "undefined" || !(target instanceof HTMLElement)) return false;
+	const tag = target.tagName;
+	return tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT" || target.isContentEditable === true;
+}
+function hasRsSidebarBadge(badge) {
+	if (badge == null || badge === "") return false;
+	return badge !== 0;
+}
+//#endregion
+export { RS_SIDEBAR_KEY, RS_SIDEBAR_ORIENTATIONS, RS_SIDEBAR_PLACEMENTS, RS_SIDEBAR_WIDTHS, hasRsSidebarBadge, isRsSidebarOrientation, isRsSidebarPlacement, isRsSidebarTypingTarget, isRsSidebarWidth, matchesRsSidebarHotkey, mergeRsSidebarLinkRel, resolveRsSidebarCollapseIcon, resolveRsSidebarCollapsed, resolveRsSidebarItemHref, resolveRsSidebarItemTag, resolveRsSidebarOrientation, resolveRsSidebarPlacement, resolveRsSidebarWidth };

package/dist/components/split-pane/index.d.ts

@@ -1,3 +1,3 @@
 export { default as RsSplitPane } from './src/RsSplitPane.js';
-export type { RsSplitConstraint, RsSplitOrientation, RsSplitPaneExpose, RsSplitPaneInstance, RsSplitPaneItem, RsSplitPaneSize, } from './src/split-pane-utils';
-export { applySplitResize, collapseSplitPane, expandSplitPane, isRsSplitPaneAutoSize, isSplitPaneCollapsed, normalizeSplitSizes, resolveSplitAutoFlags, resolveSplitConstraints, splitSizesEqual, } from './src/split-pane-utils';
+export type { RsSplitConstraint, RsSplitOrientation, RsSplitPaneExpose, RsSplitPaneInstance, RsSplitPaneItem, RsSplitPaneSize, RsSplitPaneSlot, } from './src/split-pane-utils';
+export { applySplitResize, collapseSplitPane, expandSplitPane, invertSplitAxisDelta, isRsSplitPaneAutoSize, isSplitPaneCollapsed, isSplitResizerInteractive, normalizeSplitSizes, resolveSplitAutoFlags, resolveSplitConstraints, splitPaneDomId, splitSizesEqual, } from './src/split-pane-utils';

package/dist/components/split-pane/src/RsSplitPane.css

@@ -7,8 +7,10 @@
   min-height: 0;
   isolation: isolate;
   /* macOS 风格 resize 光标：两侧纤细箭头 + 中央分隔竖条，白芯 + 半透明描边，热点居中 */
-  --rs-split-cursor-h: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7,8.5L3,12L7,15.5M3,12H8.5M17,8.5L21,12L17,15.5M21,12H15.5' stroke='%23000' stroke-opacity='.38' stroke-width='2.6'/%3E%3Cpath d='M12,6V18' stroke='%23000' stroke-opacity='.3' stroke-width='2.6'/%3E%3Cpath d='M7,8.5L3,12L7,15.5M3,12H8.5M17,8.5L21,12L17,15.5M21,12H15.5' stroke='%23fff' stroke-width='1.1'/%3E%3Cpath d='M12,6V18' stroke='%23fff' stroke-width='1.1'/%3E%3C/g%3E%3C/svg%3E") 12 12, ew-resize;
-  --rs-split-cursor-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5,7L12,3L15.5,7M12,3V8.5M8.5,17L12,21L15.5,17M12,21V15.5' stroke='%23000' stroke-opacity='.38' stroke-width='2.6'/%3E%3Cpath d='M6,12H18' stroke='%23000' stroke-opacity='.3' stroke-width='2.6'/%3E%3Cpath d='M8.5,7L12,3L15.5,7M12,3V8.5M8.5,17L12,21L15.5,17M12,21V15.5' stroke='%23fff' stroke-width='1.1'/%3E%3Cpath d='M6,12H18' stroke='%23fff' stroke-width='1.1'/%3E%3C/g%3E%3C/svg%3E") 12 12, ns-resize;
+  --rs-split-cursor-h: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7,8.5L3,12L7,15.5M3,12H8.5M17,8.5L21,12L17,15.5M21,12H15.5' stroke='%23000' stroke-opacity='.38' stroke-width='2.6'/%3E%3Cpath d='M12,6V18' stroke='%23000' stroke-opacity='.3' stroke-width='2.6'/%3E%3Cpath d='M7,8.5L3,12L7,15.5M3,12H8.5M17,8.5L21,12L17,15.5M21,12H15.5' stroke='%23fff' stroke-width='1.1'/%3E%3Cpath d='M12,6V18' stroke='%23fff' stroke-width='1.1'/%3E%3C/g%3E%3C/svg%3E")
+    12 12, ew-resize;
+  --rs-split-cursor-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cg fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5,7L12,3L15.5,7M12,3V8.5M8.5,17L12,21L15.5,17M12,21V15.5' stroke='%23000' stroke-opacity='.38' stroke-width='2.6'/%3E%3Cpath d='M6,12H18' stroke='%23000' stroke-opacity='.3' stroke-width='2.6'/%3E%3Cpath d='M8.5,7L12,3L15.5,7M12,3V8.5M8.5,17L12,21L15.5,17M12,21V15.5' stroke='%23fff' stroke-width='1.1'/%3E%3Cpath d='M6,12H18' stroke='%23fff' stroke-width='1.1'/%3E%3C/g%3E%3C/svg%3E")
+    12 12, ns-resize;
 }
 .rs-split--horizontal {
   flex-direction: row;
@@ -56,8 +58,8 @@
 }
 .rs-split__resizer-host {
   position: relative;
-  z-index: 10;
-  flex: 0 0 1px;
+  z-index: var(--rs-z-tooltip);
+  flex: 0 0 var(--rs-split-resizer-size);
   align-self: stretch;
   min-width: 0;
   min-height: 0;
@@ -71,7 +73,7 @@
   border: none;
   margin: 0;
   padding: 0;
-  background: var(--rs-border-subtle);
+  background: var(--rs-split-resizer);
   opacity: 0.5;
   transition:
     background var(--rs-transition-normal),
@@ -81,9 +83,7 @@
 .rs-split__resizer-host[data-active] .rs-split__resizer {
   opacity: 1;
 }
-.rs-split--dragging .rs-split__resizer {
-  transition: none;
-}
+.rs-split--dragging .rs-split__resizer,
 .rs-split--dragging .rs-split__grip {
   transition: none;
 }
@@ -98,13 +98,15 @@
   cursor: var(--rs-split-cursor-h);
 }
 .rs-split--horizontal > .rs-split__resizer-host::before {
-  inset: 0 -4px;
+  inset-block: 0;
+  inset-inline: calc(-1 * var(--rs-split-hit-slop));
 }
 .rs-split--vertical > .rs-split__resizer-host {
   cursor: var(--rs-split-cursor-v);
 }
 .rs-split--vertical > .rs-split__resizer-host::before {
-  inset: -4px 0;
+  inset-inline: 0;
+  inset-block: calc(-1 * var(--rs-split-hit-slop));
 }
 
 /* 拖拽中：整个容器沿用同一光标，指针移出细缝也不闪回默认 */
@@ -117,39 +119,41 @@
 .rs-split__resizer-host:hover .rs-split__resizer,
 .rs-split__resizer:hover,
 .rs-split__resizer-host[data-active] .rs-split__resizer {
-  background: var(--rs-border);
+  background: var(--rs-split-resizer-hover);
   opacity: 1;
 }
 .rs-split__resizer:focus-visible {
   outline: none;
-  background: var(--rs-primary);
+  background: var(--rs-split-resizer-active);
   opacity: 1;
   box-shadow: 0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
 }
-.rs-split--disabled > .rs-split__resizer-host {
+.rs-split--disabled > .rs-split__resizer-host,
+.rs-split__resizer-host--disabled {
   cursor: default;
 }
-.rs-split--disabled > .rs-split__resizer-host:hover .rs-split__resizer {
-  background: var(--rs-border);
+.rs-split--disabled > .rs-split__resizer-host:hover .rs-split__resizer,
+.rs-split__resizer-host--disabled:hover .rs-split__resizer {
+  background: var(--rs-split-resizer);
 }
 
 /* 抓手指示（仅 withHandle 时常驻显示，悬浮不额外浮现胶囊） */
 .rs-split__resizer--handle {
-  background: var(--rs-border-subtle);
+  background: var(--rs-split-resizer);
 }
 .rs-split__grip {
   position: absolute;
-  top: 50%;
-  left: 50%;
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
   z-index: 2;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   transform: translate(-50%, -50%);
   border-radius: var(--rs-radius-full);
-  border: 1px solid var(--rs-border);
-  background: var(--rs-surface-elevated);
-  color: var(--rs-placeholder);
+  border: 1px solid var(--rs-split-grip-border);
+  background: var(--rs-split-grip-bg);
+  color: var(--rs-split-grip-fg);
   box-shadow: var(--rs-shadow-sm);
   pointer-events: none;
   opacity: 0;
@@ -161,12 +165,12 @@
     box-shadow var(--rs-transition-fast);
 }
 .rs-split--horizontal > .rs-split__resizer-host--handle .rs-split__grip {
-  width: 0.875rem;
-  height: 1.5rem;
+  width: var(--rs-split-grip-inline);
+  height: var(--rs-split-grip-block);
 }
 .rs-split--vertical > .rs-split__resizer-host--handle .rs-split__grip {
-  width: 1.5rem;
-  height: 0.875rem;
+  width: var(--rs-split-grip-block);
+  height: var(--rs-split-grip-inline);
 }
 
 /* 悬浮 / 聚焦 / 拖拽：常驻抓手高亮为主色 */
@@ -176,15 +180,16 @@
   .rs-split__grip,
 .rs-split:not(.rs-split--disabled) > .rs-split__resizer-host--handle[data-active] .rs-split__grip {
   opacity: 1;
-  color: var(--rs-primary-foreground);
-  border-color: var(--rs-primary);
-  background: var(--rs-primary);
+  color: var(--rs-split-grip-active-fg);
+  border-color: var(--rs-split-grip-active-border);
+  background: var(--rs-split-grip-active-bg);
   box-shadow: var(--rs-shadow);
 }
 
 /* 禁用态：抓手淡化 */
-.rs-split--disabled .rs-split__grip {
-  opacity: 0.5;
+.rs-split--disabled .rs-split__grip,
+.rs-split__resizer-host--disabled .rs-split__grip {
+  opacity: var(--rs-split-disabled-opacity);
   box-shadow: none;
 }
 
@@ -193,3 +198,9 @@
   pointer-events: none;
   user-select: none;
 }
+@media (prefers-reduced-motion: reduce) {
+.rs-split__resizer,
+  .rs-split__grip {
+    transition: none;
+}
+}

package/dist/components/split-pane/src/RsSplitPane.d.ts

@@ -15,6 +15,8 @@ type __VLS_Props = {
      * 默认关，不改变原有内容尺寸；工作台 / 设置页显式打开，避免 :deep。
      */
     fill?: boolean;
+    id?: string;
+    ariaLabel?: string;
 };
 type __VLS_ModelProps = {
     /** 各面板尺寸（百分比，总和 100） */
@@ -31,14 +33,16 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, RsSplitPaneExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     resize: (sizes: number[]) => any;
     expand: (key: string) => any;
-    "resize-end": (sizes: number[]) => any;
     collapse: (key: string) => any;
+    "resize-end": (sizes: number[]) => any;
+    "resize-start": (sizes: number[]) => any;
     "update:sizes": (value: number[]) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onResize?: ((sizes: number[]) => any) | undefined;
     onExpand?: ((key: string) => any) | undefined;
-    "onResize-end"?: ((sizes: number[]) => any) | undefined;
     onCollapse?: ((key: string) => any) | undefined;
+    "onResize-end"?: ((sizes: number[]) => any) | undefined;
+    "onResize-start"?: ((sizes: number[]) => any) | undefined;
     "onUpdate:sizes"?: ((value: number[]) => any) | undefined;
 }>, {
     fill: boolean;