niuma-ui 2.0.3 → 2.0.9

package/dist/components/select/src/RsSelect.js

@@ -3,6 +3,6 @@ import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_exp
 import RsSelect_vue_vue_type_script_setup_true_lang_default from "./RsSelect.impl.js";
 
 //#region src/components/select/src/RsSelect.vue
-var RsSelect_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsSelect_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-6b3a7fed"]]);
+var RsSelect_default = /*#__PURE__*/ _plugin_vue_export_helper_default(RsSelect_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-be97668a"]]);
 //#endregion
 export { RsSelect_default as default };

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

@@ -53,10 +53,12 @@ export type RsSelectModelValue = RsSelectValue | RsSelectValue[] | RsSelectLabel
  */
 export type RsSelectResolvedModel<Value extends RsSelectValue = string, Multiple extends boolean = false, LabelInValue extends boolean = false> = LabelInValue extends true ? Multiple extends true ? RsSelectLabeledValue[] : Multiple extends false ? RsSelectLabeledValue | '' : RsSelectLabeledValue | RsSelectLabeledValue[] | '' : Multiple extends true ? Value[] : Multiple extends false ? Value | '' : Value | Value[] | '';
 /**
- * Reka ComboboxItem 禁止 value 为空串（空串表示未选中 / placeholder）。
- * 选项若传入 value: ''，对内映射为此哨兵，避免崩溃；对外读写仍为 ''。
+ * 选项 value 为空串时，对内映射为此哨兵（空串对外仍表示「未选」）。
+ * 读写 v-model 时再还原成 ''。
  */
 export declare const RS_SELECT_EMPTY_VALUE = "__rs_select_empty__";
+/** 本地过滤：大小写不敏感包含。宿主要做 locale 匹配请传 filterOption。 */
+export declare function selectContains(text: string, search: string): boolean;
 /**
  * Vue 对泛型 boolean prop 不会按 Boolean 收口。
  * 模板写 `multiple` 时运行时可能是 ''；个别版本还会落到 attrs 变成 'true' / 'multiple'。

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

@@ -28,10 +28,15 @@ function splitSelectLabelHighlight(label, keyword) {
 	return parts;
 }
 /**
-* Reka ComboboxItem 禁止 value 为空串（空串表示未选中 / placeholder）。
-* 选项若传入 value: ''，对内映射为此哨兵，避免崩溃；对外读写仍为 ''。
+* 选项 value 为空串时，对内映射为此哨兵（空串对外仍表示「未选」）。
+* 读写 v-model 时再还原成 ''。
 */
 var RS_SELECT_EMPTY_VALUE = "__rs_select_empty__";
+/** 本地过滤：大小写不敏感包含。宿主要做 locale 匹配请传 filterOption。 */
+function selectContains(text, search) {
+	if (!search) return true;
+	return text.toLowerCase().includes(search.toLowerCase());
+}
 /**
 * Vue 对泛型 boolean prop 不会按 Boolean 收口。
 * 模板写 `multiple` 时运行时可能是 ''；个别版本还会落到 attrs 变成 'true' / 'multiple'。
@@ -244,4 +249,4 @@ function splitByTokenSeparators(raw, separators) {
 	return raw.split(found);
 }
 //#endregion
-export { RS_SELECT_EMPTY_VALUE, buildOptionDisabledMap, buildOptionLabelMap, comboboxBindingToTokens, filterSelectOptions, findSelectOption, flattenSelectOptions, flattenSelectValues, fromComboboxValue, isSelectLabeledValue, isSelectMultiple, isSelectOptionGroup, normalizeSelectOptions, optionDisplayLabel, packSelectModel, restoreSelectValue, restoreSelectValues, selectModelEntries, sortSelectOptions, splitByTokenSeparators, splitSelectLabelHighlight, toComboboxValue, toLabeledValue, toSelectedTokens, unwrapSelectEntry };
+export { RS_SELECT_EMPTY_VALUE, buildOptionDisabledMap, buildOptionLabelMap, comboboxBindingToTokens, filterSelectOptions, findSelectOption, flattenSelectOptions, flattenSelectValues, fromComboboxValue, isSelectLabeledValue, isSelectMultiple, isSelectOptionGroup, normalizeSelectOptions, optionDisplayLabel, packSelectModel, restoreSelectValue, restoreSelectValues, selectContains, selectModelEntries, sortSelectOptions, splitByTokenSeparators, splitSelectLabelHighlight, toComboboxValue, toLabeledValue, toSelectedTokens, unwrapSelectEntry };

package/dist/components/select/src/use-rs-select.d.ts

@@ -66,6 +66,7 @@ export declare function useRsSelect<T extends RsSelectModelValue = RsSelectModel
     omittedTagTitle: import("vue").ComputedRef<string>;
     singleDisplayLabel: import("vue").ComputedRef<string>;
     comboboxModel: import("vue").WritableComputedRef<string | string[] | undefined, string | string[] | undefined>;
+    pickToken: (token: string) => void;
     tokenLabel: (token: string) => string;
     truncateTagLabel: (label: string) => string;
     optionFromToken: (token: string) => RsSelectOption | undefined;

package/dist/components/select/src/use-rs-select.js

@@ -1,13 +1,11 @@
-import { useFilter } from "../../_shared/src/reka.js";
-import { buildOptionDisabledMap, buildOptionLabelMap, comboboxBindingToTokens, filterSelectOptions, findSelectOption, flattenSelectOptions, flattenSelectValues, fromComboboxValue, isSelectLabeledValue, isSelectMultiple, normalizeSelectOptions, optionDisplayLabel, packSelectModel, restoreSelectValue, restoreSelectValues, selectModelEntries, sortSelectOptions, splitByTokenSeparators, toComboboxValue, toSelectedTokens } from "./select-utils.js";
-import { computed, nextTick, onUnmounted, watch } from "vue";
+import { buildOptionDisabledMap, buildOptionLabelMap, comboboxBindingToTokens, filterSelectOptions, findSelectOption, flattenSelectOptions, flattenSelectValues, fromComboboxValue, isSelectLabeledValue, isSelectMultiple, normalizeSelectOptions, optionDisplayLabel, packSelectModel, restoreSelectValue, restoreSelectValues, selectContains, selectModelEntries, sortSelectOptions, splitByTokenSeparators, toComboboxValue, toSelectedTokens } from "./select-utils.js";
+import { computed, onUnmounted, watch } from "vue";
 //#region src/components/select/src/use-rs-select.ts
 /**
 * Select 过滤、选中、多选 tag、creatable / 分隔符提交。
 * 组件模板只消费返回值；表单校验仍留在 SFC。
 */
 function useRsSelect(props, model, open, searchQuery, emit, t) {
-	const { contains } = useFilter({ sensitivity: "base" });
 	const isMultiple = computed(() => isSelectMultiple(props.multiple));
 	const normalizedOptions = computed(() => normalizeSelectOptions(props.options, props.fieldNames));
 	const resolvedPlaceholder = computed(() => props.placeholder ?? t("select.placeholder"));
@@ -20,16 +18,12 @@ function useRsSelect(props, model, open, searchQuery, emit, t) {
 	const flatOptions = computed(() => flattenSelectOptions(normalizedOptions.value));
 	const flatCount = computed(() => flatOptions.value.length);
 	const useVirtual = computed(() => Boolean(props.virtual) || flatCount.value > (props.virtualThreshold ?? 50));
-	/**
-	* 可搜索时一律走本地过滤，并关掉 Reka 内置 filter。
-	* Reka 的 filterSearch 与搜索框 searchQuery 不同步（打开时会被清空），
-	* 默认依赖内置过滤时会出现：手输「NVA」已出「使用 NVA」，但 NVARCHAR 仍被整表挡住。
-	*/
+	/** 可搜索 / 远程 / 自定义过滤一律走本函数，不再依赖外部 headless filter。 */
 	const useManualFilter = computed(() => Boolean(props.remote) || useVirtual.value || isSearchable.value || typeof props.filterOption === "function" || props.filterOption === false || Boolean(props.optionFilterProp && props.optionFilterProp !== "label") || Boolean(props.filterSort) || Boolean(props.fieldNames));
 	const displayOptions = computed(() => {
 		let next = normalizedOptions.value;
 		if (!props.remote && props.filterOption !== false) {
-			if (useManualFilter.value || props.filterOption) next = filterSelectOptions(normalizedOptions.value, searchQuery.value, contains, props.filterOption, props.optionFilterProp);
+			if (useManualFilter.value || props.filterOption) next = filterSelectOptions(normalizedOptions.value, searchQuery.value, selectContains, props.filterOption, props.optionFilterProp);
 		}
 		return sortSelectOptions(next, props.filterSort);
 	});
@@ -183,18 +177,29 @@ function useRsSelect(props, model, open, searchQuery, emit, t) {
 	onUnmounted(() => {
 		if (searchTimer) clearTimeout(searchTimer);
 	});
-	watch(open, async (isOpen) => {
+	watch(open, (isOpen) => {
 		if (isOpen) {
-			const pending = searchQuery.value;
-			await nextTick();
-			await nextTick();
-			if (pending) searchQuery.value = pending;
-			else if (props.fillSearchWithValue && !isMultiple.value && hasValue.value) searchQuery.value = singleDisplayLabel.value;
-			else searchQuery.value = "";
+			if (searchQuery.value) return;
+			if (props.fillSearchWithValue && !isMultiple.value && hasValue.value) searchQuery.value = singleDisplayLabel.value;
 			return;
 		}
 		if (props.autoClearSearchValue) searchQuery.value = "";
 	});
+	function pickToken(token) {
+		if (isTokenDisabled(token)) return;
+		if (canCreate.value && token === createValue.value) {
+			commitCreatedValue(token);
+			return;
+		}
+		if (isMultiple.value) {
+			const prev = selectedValues.value;
+			const next = prev.includes(token) ? prev.filter((item) => item !== token) : [...prev, token];
+			comboboxModel.value = next;
+			return;
+		}
+		comboboxModel.value = token;
+		open.value = false;
+	}
 	function onSearchKeydown(event) {
 		if (event.key !== "Enter" || event.isComposing) return;
 		if (!canCreate.value) return;
@@ -258,6 +263,7 @@ function useRsSelect(props, model, open, searchQuery, emit, t) {
 		omittedTagTitle,
 		singleDisplayLabel,
 		comboboxModel,
+		pickToken,
 		tokenLabel,
 		truncateTagLabel,
 		optionFromToken,

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