niuma-ui 2.0.4 → 2.1.0

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

@@ -0,0 +1,55 @@
+//#region src/components/popover/src/popover-utils.ts
+/** hover 延迟上限，避免一个超大定时器一直挂着。 */
+var RS_POPOVER_DELAY_MAX = 6e4;
+var POPOVER_TRIGGERS = /* @__PURE__ */ new Set([
+	"click",
+	"hover",
+	"focus"
+]);
+var FOCUSABLE_SELECTOR = [
+	"a[href]",
+	"button:not([disabled])",
+	"input:not([disabled]):not([type=\"hidden\"])",
+	"select:not([disabled])",
+	"textarea:not([disabled])",
+	"[tabindex]:not([tabindex=\"-1\"])"
+].join(",");
+function normalizePopoverTriggers(trigger) {
+	const next = (Array.isArray(trigger) ? trigger : [trigger ?? "click"]).filter((item) => POPOVER_TRIGGERS.has(item));
+	return next.length ? next : ["click"];
+}
+function clampPopoverDelay(value, fallback) {
+	if (value == null || !Number.isFinite(value)) return fallback;
+	return Math.min(RS_POPOVER_DELAY_MAX, Math.max(0, value));
+}
+/** Tab 在浮层内循环。current < 0 时落到第一项或最后一项。 */
+function nextPopoverFocusIndex(count, current, shift) {
+	if (count <= 0) return -1;
+	if (current < 0) return shift ? count - 1 : 0;
+	return (current + (shift ? -1 : 1) + count) % count;
+}
+function resolvePopoverPortalTarget(getPopupContainer, trigger) {
+	if (typeof document === "undefined") return "body";
+	if (!getPopupContainer) return "body";
+	return getPopupContainer(trigger ?? void 0) ?? "body";
+}
+/** 组件 ref 可能是元素，也可能是带 $el 的实例。无 DOM 时返回空。 */
+function resolvePopoverElement(value) {
+	if (typeof HTMLElement !== "undefined" && value instanceof HTMLElement) return value;
+	if (value && typeof value === "object" && "$el" in value) {
+		const root = value.$el;
+		if (typeof HTMLElement !== "undefined" && root instanceof HTMLElement) return root;
+	}
+	return null;
+}
+function listPopoverFocusable(root) {
+	if (!root || typeof root.querySelectorAll !== "function") return [];
+	return Array.from(root.querySelectorAll(FOCUSABLE_SELECTOR)).filter((el) => {
+		if (el.hasAttribute("disabled")) return false;
+		if (el.getAttribute("aria-hidden") === "true") return false;
+		if (typeof el.closest === "function" && el.closest("[hidden]")) return false;
+		return true;
+	});
+}
+//#endregion
+export { RS_POPOVER_DELAY_MAX, clampPopoverDelay, listPopoverFocusable, nextPopoverFocusIndex, normalizePopoverTriggers, resolvePopoverElement, resolvePopoverPortalTarget };

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

@@ -1,3 +1,4 @@
 export { default as RsSidebar } from './src/RsSidebar.js';
 export { default as RsSidebarGroup } from './src/RsSidebarGroup.js';
 export { default as RsSidebarItem } from './src/RsSidebarItem.js';
+export type { RsSidebarExpose, RsSidebarInstance, RsSidebarOrientation, RsSidebarPlacement, RsSidebarWidth, } from './src/sidebar-utils';

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

@@ -1,61 +1,119 @@
 
-.rs-sidebar[data-v-784314c9] {
+.rs-sidebar[data-v-0ca72d2d] {
   display: flex;
   flex-direction: column;
-  min-height: 0;
-  border: 1px solid var(--rs-border-subtle);
-  background: color-mix(in srgb, var(--rs-surface) 88%, transparent);
-  color: var(--rs-text);
+  min-block-size: 0;
+  min-inline-size: 0;
+  border: 1px solid var(--rs-sidebar-border);
+  background: var(--rs-sidebar-bg);
+  color: var(--rs-sidebar-title);
 }
-.rs-sidebar--sm[data-v-784314c9] {
-  width: 14rem;
+.rs-sidebar[data-v-0ca72d2d]:focus {
+  outline: none;
 }
-.rs-sidebar--md[data-v-784314c9] {
-  width: 17rem;
+.rs-sidebar[data-v-0ca72d2d]:focus-visible {
+  box-shadow: 0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
 }
-.rs-sidebar--lg[data-v-784314c9] {
-  width: 21rem;
+.rs-sidebar--sm[data-v-0ca72d2d] {
+  inline-size: var(--rs-sidebar-width-sm);
 }
-.rs-sidebar--collapsed[data-v-784314c9] {
-  width: 4rem;
+.rs-sidebar--md[data-v-0ca72d2d] {
+  inline-size: var(--rs-sidebar-width-md);
 }
-.rs-sidebar__header[data-v-784314c9],
-.rs-sidebar__footer[data-v-784314c9] {
+.rs-sidebar--lg[data-v-0ca72d2d] {
+  inline-size: var(--rs-sidebar-width-lg);
+}
+.rs-sidebar--collapsed[data-v-0ca72d2d] {
+  inline-size: var(--rs-sidebar-width-collapsed);
+}
+.rs-sidebar--horizontal[data-v-0ca72d2d],
+.rs-sidebar--horizontal.rs-sidebar--sm[data-v-0ca72d2d],
+.rs-sidebar--horizontal.rs-sidebar--md[data-v-0ca72d2d],
+.rs-sidebar--horizontal.rs-sidebar--lg[data-v-0ca72d2d],
+.rs-sidebar--horizontal.rs-sidebar--collapsed[data-v-0ca72d2d] {
+  flex-direction: row;
+  align-items: stretch;
+  inline-size: 100%;
+  min-block-size: var(--rs-control-height-lg);
+}
+.rs-sidebar__header[data-v-0ca72d2d],
+.rs-sidebar__footer[data-v-0ca72d2d] {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--rs-space-sm);
-  padding: var(--rs-space-md);
-  border-bottom: 1px solid var(--rs-border-subtle);
+  gap: var(--rs-sidebar-gap);
+  padding: var(--rs-sidebar-pad);
+  border-block-end: 1px solid var(--rs-sidebar-border);
+}
+.rs-sidebar__footer[data-v-0ca72d2d] {
+  border-block-start: 1px solid var(--rs-sidebar-border);
+  border-block-end: 0;
 }
-.rs-sidebar__footer[data-v-784314c9] {
-  border-top: 1px solid var(--rs-border-subtle);
-  border-bottom: 0;
+.rs-sidebar--horizontal .rs-sidebar__header[data-v-0ca72d2d] {
+  border-block-end: 0;
+  border-inline-end: 1px solid var(--rs-sidebar-border);
 }
-.rs-sidebar__body[data-v-784314c9] {
+.rs-sidebar--horizontal .rs-sidebar__footer[data-v-0ca72d2d] {
+  border-block-start: 0;
+  border-inline-start: 1px solid var(--rs-sidebar-border);
+}
+.rs-sidebar__body[data-v-0ca72d2d] {
   flex: 1;
-  min-height: 0;
+  min-block-size: 0;
+  min-inline-size: 0;
   overflow: auto;
-  padding: var(--rs-space-sm);
+  padding: var(--rs-sidebar-body-pad);
 }
-.rs-sidebar__title-wrap[data-v-784314c9] {
-  min-width: 0;
+.rs-sidebar--horizontal .rs-sidebar__body[data-v-0ca72d2d] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  overflow-x: auto;
+  overflow-y: hidden;
 }
-.rs-sidebar__title[data-v-784314c9],
-.rs-sidebar__subtitle[data-v-784314c9] {
+.rs-sidebar__title-wrap[data-v-0ca72d2d] {
+  min-inline-size: 0;
+}
+.rs-sidebar__title[data-v-0ca72d2d],
+.rs-sidebar__subtitle[data-v-0ca72d2d] {
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.rs-sidebar__subtitle[data-v-784314c9] {
-  color: var(--rs-muted);
+.rs-sidebar__title[data-v-0ca72d2d] {
+  color: var(--rs-sidebar-title);
+  font-weight: var(--rs-font-weight-semibold);
+}
+.rs-sidebar__subtitle[data-v-0ca72d2d] {
+  color: var(--rs-sidebar-subtitle);
   font-size: var(--rs-font-size-xs);
 }
-.rs-sidebar__collapse[data-v-784314c9] {
-  border: 1px solid var(--rs-border);
+.rs-sidebar__collapse[data-v-0ca72d2d] {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--rs-control-height-sm);
+  block-size: var(--rs-control-height-sm);
+  padding: 0;
+  border: 1px solid var(--rs-sidebar-border);
   border-radius: var(--rs-radius-sm);
   background: var(--rs-surface);
-  color: var(--rs-muted);
+  color: var(--rs-sidebar-subtitle);
   cursor: pointer;
+  transition:
+    background-color var(--rs-transition-fast),
+    color var(--rs-transition-fast),
+    border-color var(--rs-transition-fast);
+}
+.rs-sidebar__collapse[data-v-0ca72d2d]:hover {
+  background: var(--rs-surface-hover);
+  color: var(--rs-sidebar-title);
+}
+.rs-sidebar__collapse[data-v-0ca72d2d]:focus {
+  outline: none;
+}
+.rs-sidebar__collapse[data-v-0ca72d2d]:focus-visible {
+  box-shadow: 0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
 }

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

@@ -1,35 +1,43 @@
-export type RsSidebarOrientation = 'vertical' | 'horizontal';
-export type RsSidebarPlacement = 'left' | 'right';
+import { type RsSidebarExpose, type RsSidebarOrientation, type RsSidebarPlacement, type RsSidebarWidth } from './sidebar-utils';
 type __VLS_Props = {
     title?: string;
     subtitle?: string;
     collapsible?: boolean;
-    width?: 'sm' | 'md' | 'lg';
+    width?: RsSidebarWidth;
     orientation?: RsSidebarOrientation;
     placement?: RsSidebarPlacement;
+    /**
+     * Ctrl/Cmd + 该键切换折叠。未传不监听。
+     * 输入框 / 可编辑节点内不触发。
+     */
+    hotkey?: string;
+    id?: string;
+    ariaLabel?: string;
 };
 type __VLS_ModelProps = {
     'collapsed'?: boolean;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_1: {}, __VLS_3: {
+declare var __VLS_1: {}, __VLS_8: {
     collapsed: boolean;
-}, __VLS_5: {
+}, __VLS_10: {
     collapsed: boolean;
 };
 type __VLS_Slots = {} & {
     header?: (props: typeof __VLS_1) => any;
 } & {
-    default?: (props: typeof __VLS_3) => any;
+    default?: (props: typeof __VLS_8) => any;
 } & {
-    footer?: (props: typeof __VLS_5) => any;
+    footer?: (props: typeof __VLS_10) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, RsSidebarExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (collapsed: boolean) => any;
     "update:collapsed": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onChange?: ((collapsed: boolean) => any) | undefined;
     "onUpdate:collapsed"?: ((value: boolean) => any) | undefined;
 }>, {
-    width: "sm" | "md" | "lg";
+    width: RsSidebarWidth;
     orientation: RsSidebarOrientation;
     placement: RsSidebarPlacement;
     collapsible: boolean;

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

@@ -1,24 +1,34 @@
-import { createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeModels, normalizeClass, openBlock, renderSlot, toDisplayString, useModel } from "vue";
+import { useRsI18n } from "../../../composables/useRsI18n.js";
+import RsIcon_default from "../../icon/src/RsIcon.js";
+import { RS_SIDEBAR_KEY, isRsSidebarTypingTarget, matchesRsSidebarHotkey, resolveRsSidebarCollapseIcon, resolveRsSidebarOrientation, resolveRsSidebarPlacement, resolveRsSidebarWidth } from "./sidebar-utils.js";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeModels, normalizeClass, onMounted, onUnmounted, openBlock, provide, ref, renderSlot, toDisplayString, unref, useId, useModel, watch } from "vue";
 //#region src/components/sidebar/src/RsSidebar.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = {
+var _hoisted_1 = ["id", "aria-label"];
+var _hoisted_2 = {
 	key: 0,
 	class: "rs-sidebar__header"
 };
-var _hoisted_2 = { class: "rs-sidebar__title-wrap" };
-var _hoisted_3 = {
+var _hoisted_3 = { class: "rs-sidebar__title-wrap" };
+var _hoisted_4 = {
 	key: 0,
 	class: "rs-sidebar__title"
 };
-var _hoisted_4 = {
+var _hoisted_5 = {
 	key: 1,
 	class: "rs-sidebar__subtitle"
 };
-var _hoisted_5 = { class: "rs-sidebar__body" };
-var _hoisted_6 = {
+var _hoisted_6 = [
+	"aria-label",
+	"aria-expanded",
+	"aria-controls"
+];
+var _hoisted_7 = ["id", "aria-label"];
+var _hoisted_8 = {
 	key: 1,
 	class: "rs-sidebar__footer"
 };
 var RsSidebar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "RsSidebar",
 	__name: "RsSidebar",
 	props: /*@__PURE__*/ mergeModels({
 		title: {},
@@ -29,7 +39,10 @@ var RsSidebar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 		},
 		width: { default: "md" },
 		orientation: { default: "vertical" },
-		placement: { default: "left" }
+		placement: { default: "left" },
+		hotkey: {},
+		id: {},
+		ariaLabel: {}
 	}, {
 		"collapsed": {
 			type: Boolean,
@@ -37,25 +50,114 @@ var RsSidebar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 		},
 		"collapsedModifiers": {}
 	}),
-	emits: ["update:collapsed"],
-	setup(__props) {
+	emits: /*@__PURE__*/ mergeModels(["change"], ["update:collapsed"]),
+	setup(__props, { expose: __expose, emit: __emit }) {
 		const collapsed = useModel(__props, "collapsed");
+		const props = __props;
+		const emit = __emit;
+		const { t } = useRsI18n();
+		const rootRef = ref(null);
+		const collapseRef = ref(null);
+		const bodyId = useId();
+		const resolvedWidth = computed(() => resolveRsSidebarWidth(props.width));
+		const resolvedOrientation = computed(() => resolveRsSidebarOrientation(props.orientation));
+		const resolvedPlacement = computed(() => resolveRsSidebarPlacement(props.placement));
+		const asideLabel = computed(() => props.ariaLabel || props.title || t("sidebar.label"));
+		const collapseLabel = computed(() => collapsed.value ? t("sidebar.expand") : t("sidebar.collapse"));
+		const collapseIcon = computed(() => resolveRsSidebarCollapseIcon(resolvedOrientation.value, resolvedPlacement.value, collapsed.value));
+		provide(RS_SIDEBAR_KEY, {
+			collapsed: computed(() => collapsed.value),
+			orientation: resolvedOrientation,
+			placement: resolvedPlacement
+		});
+		function setCollapsed(next) {
+			if (collapsed.value === next) return;
+			collapsed.value = next;
+			emit("change", next);
+		}
+		function expand() {
+			setCollapsed(false);
+		}
+		function collapseSidebar() {
+			setCollapsed(true);
+		}
+		function toggle() {
+			setCollapsed(!collapsed.value);
+		}
+		function focus() {
+			if (collapseRef.value) {
+				collapseRef.value.focus();
+				return;
+			}
+			rootRef.value?.focus();
+		}
+		function onHotkey(event) {
+			if (!props.hotkey) return;
+			if (isRsSidebarTypingTarget(event.target)) return;
+			if (!matchesRsSidebarHotkey(event, props.hotkey)) return;
+			event.preventDefault();
+			toggle();
+		}
+		function attachHotkey() {
+			if (typeof document === "undefined" || !props.hotkey) return;
+			document.addEventListener("keydown", onHotkey);
+		}
+		function detachHotkey() {
+			if (typeof document === "undefined") return;
+			document.removeEventListener("keydown", onHotkey);
+		}
+		watch(() => props.hotkey, (next, prev) => {
+			if (prev) detachHotkey();
+			if (next) attachHotkey();
+		});
+		onMounted(() => {
+			if (props.hotkey) attachHotkey();
+		});
+		onUnmounted(() => {
+			detachHotkey();
+		});
+		__expose({
+			expand,
+			collapse: collapseSidebar,
+			toggle,
+			focus
+		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("aside", { class: normalizeClass(["rs-sidebar", [
-				`rs-sidebar--${__props.width}`,
-				`rs-sidebar--${__props.orientation}`,
-				`rs-sidebar--${__props.placement}`,
-				{ "rs-sidebar--collapsed": collapsed.value }
-			]]) }, [
-				__props.title || __props.subtitle || __props.collapsible || _ctx.$slots.header ? (openBlock(), createElementBlock("header", _hoisted_1, [renderSlot(_ctx.$slots, "header", {}, () => [createElementVNode("div", _hoisted_2, [__props.title ? (openBlock(), createElementBlock("strong", _hoisted_3, toDisplayString(__props.title), 1)) : createCommentVNode("", true), __props.subtitle && !collapsed.value ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(__props.subtitle), 1)) : createCommentVNode("", true)]), __props.collapsible ? (openBlock(), createElementBlock("button", {
+			return openBlock(), createElementBlock("aside", {
+				id: __props.id,
+				ref_key: "rootRef",
+				ref: rootRef,
+				class: normalizeClass(["rs-sidebar rs-motion-reduce", [
+					`rs-sidebar--${resolvedWidth.value}`,
+					`rs-sidebar--${resolvedOrientation.value}`,
+					`rs-sidebar--${resolvedPlacement.value}`,
+					{ "rs-sidebar--collapsed": collapsed.value }
+				]]),
+				"aria-label": asideLabel.value,
+				tabindex: "-1"
+			}, [
+				__props.title || __props.subtitle || __props.collapsible || _ctx.$slots.header ? (openBlock(), createElementBlock("header", _hoisted_2, [renderSlot(_ctx.$slots, "header", {}, () => [createElementVNode("div", _hoisted_3, [__props.title ? (openBlock(), createElementBlock("strong", _hoisted_4, toDisplayString(__props.title), 1)) : createCommentVNode("", true), __props.subtitle && !collapsed.value ? (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(__props.subtitle), 1)) : createCommentVNode("", true)]), __props.collapsible ? (openBlock(), createElementBlock("button", {
 					key: 0,
+					ref_key: "collapseRef",
+					ref: collapseRef,
 					type: "button",
 					class: "rs-sidebar__collapse",
-					onClick: _cache[0] || (_cache[0] = ($event) => collapsed.value = !collapsed.value)
-				}, toDisplayString(collapsed.value ? ">" : "<"), 1)) : createCommentVNode("", true)], true)])) : createCommentVNode("", true),
-				createElementVNode("div", _hoisted_5, [renderSlot(_ctx.$slots, "default", { collapsed: collapsed.value }, void 0, true)]),
-				_ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_6, [renderSlot(_ctx.$slots, "footer", { collapsed: collapsed.value }, void 0, true)])) : createCommentVNode("", true)
-			], 2);
+					"aria-label": collapseLabel.value,
+					"aria-expanded": !collapsed.value,
+					"aria-controls": unref(bodyId),
+					onClick: toggle
+				}, [createVNode(RsIcon_default, {
+					name: collapseIcon.value,
+					size: "sm",
+					class: "rs-sidebar__collapse-icon"
+				}, null, 8, ["name"])], 8, _hoisted_6)) : createCommentVNode("", true)], true)])) : createCommentVNode("", true),
+				createElementVNode("nav", {
+					id: unref(bodyId),
+					class: "rs-sidebar__body",
+					"aria-label": unref(t)("sidebar.nav")
+				}, [renderSlot(_ctx.$slots, "default", { collapsed: collapsed.value }, void 0, true)], 8, _hoisted_7),
+				_ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_8, [renderSlot(_ctx.$slots, "footer", { collapsed: collapsed.value }, void 0, true)])) : createCommentVNode("", true)
+			], 10, _hoisted_1);
 		};
 	}
 });

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

@@ -3,6 +3,6 @@ import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_exp
 import RsSidebar_vue_vue_type_script_setup_true_lang_default from "./RsSidebar.impl.js";
 
 //#region src/components/sidebar/src/RsSidebar.vue
-var RsSidebar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsSidebar_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-784314c9"]]);
+var RsSidebar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsSidebar_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-0ca72d2d"]]);
 //#endregion
 export { RsSidebar_default as default };

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

@@ -1,15 +1,32 @@
 
-.rs-sidebar-group + .rs-sidebar-group[data-v-15de96fa] {
-  margin-top: var(--rs-space-md);
+.rs-sidebar-group + .rs-sidebar-group[data-v-c2188d24] {
+  margin-block-start: var(--rs-sidebar-group-gap);
 }
-.rs-sidebar-group__title[data-v-15de96fa] {
-  padding: var(--rs-space-xs) var(--rs-space-sm);
-  color: var(--rs-muted);
+.rs-sidebar-group--horizontal + .rs-sidebar-group--horizontal[data-v-c2188d24] {
+  margin-block-start: 0;
+  margin-inline-start: var(--rs-sidebar-group-gap);
+}
+.rs-sidebar-group__title[data-v-c2188d24] {
+  padding-block: var(--rs-space-xs);
+  padding-inline: var(--rs-space-sm);
+  color: var(--rs-sidebar-subtitle);
   font-size: var(--rs-font-size-xs);
   font-weight: var(--rs-font-weight-semibold);
   letter-spacing: 0.04em;
 }
-.rs-sidebar-group__body[data-v-15de96fa] {
+.rs-sidebar-group__body[data-v-c2188d24] {
   display: grid;
   gap: var(--rs-space-xs);
 }
+.rs-sidebar-group--horizontal[data-v-c2188d24] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  min-inline-size: 0;
+}
+.rs-sidebar-group--horizontal .rs-sidebar-group__body[data-v-c2188d24] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: wrap;
+}

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

@@ -2,11 +2,15 @@ type __VLS_Props = {
     title?: string;
     collapsed?: boolean;
 };
-declare var __VLS_1: {};
+declare var __VLS_1: {
+    collapsed: boolean;
+};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => 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, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    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/RsSidebarGroup.impl.js

@@ -1,20 +1,33 @@
-import { createCommentVNode, createElementBlock, createElementVNode, defineComponent, openBlock, renderSlot, toDisplayString } from "vue";
+import { RS_SIDEBAR_KEY, resolveRsSidebarCollapsed } from "./sidebar-utils.js";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, inject, normalizeClass, openBlock, renderSlot, toDisplayString } from "vue";
 //#region src/components/sidebar/src/RsSidebarGroup.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = { class: "rs-sidebar-group" };
+var _hoisted_1 = ["role", "aria-label"];
 var _hoisted_2 = {
 	key: 0,
 	class: "rs-sidebar-group__title"
 };
 var _hoisted_3 = { class: "rs-sidebar-group__body" };
 var RsSidebarGroup_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "RsSidebarGroup",
 	__name: "RsSidebarGroup",
 	props: {
 		title: {},
-		collapsed: { type: Boolean }
+		collapsed: {
+			type: Boolean,
+			default: void 0
+		}
 	},
 	setup(__props) {
+		const props = __props;
+		const ctx = inject(RS_SIDEBAR_KEY, null);
+		const isCollapsed = computed(() => resolveRsSidebarCollapsed(props.collapsed, ctx?.collapsed.value));
+		const orientation = computed(() => ctx?.orientation.value ?? "vertical");
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("section", _hoisted_1, [__props.title && !__props.collapsed ? (openBlock(), createElementBlock("div", _hoisted_2, toDisplayString(__props.title), 1)) : createCommentVNode("", true), createElementVNode("div", _hoisted_3, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])]);
+			return openBlock(), createElementBlock("section", {
+				class: normalizeClass(["rs-sidebar-group", [`rs-sidebar-group--${orientation.value}`, { "rs-sidebar-group--collapsed": isCollapsed.value }]]),
+				role: __props.title ? "group" : void 0,
+				"aria-label": __props.title || void 0
+			}, [__props.title && !isCollapsed.value ? (openBlock(), createElementBlock("div", _hoisted_2, toDisplayString(__props.title), 1)) : createCommentVNode("", true), createElementVNode("div", _hoisted_3, [renderSlot(_ctx.$slots, "default", { collapsed: isCollapsed.value }, void 0, true)])], 10, _hoisted_1);
 		};
 	}
 });

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

@@ -3,6 +3,6 @@ import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_exp
 import RsSidebarGroup_vue_vue_type_script_setup_true_lang_default from "./RsSidebarGroup.impl.js";
 
 //#region src/components/sidebar/src/RsSidebarGroup.vue
-var RsSidebarGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsSidebarGroup_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-15de96fa"]]);
+var RsSidebarGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsSidebarGroup_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-c2188d24"]]);
 //#endregion
 export { RsSidebarGroup_default as default };

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;
+}