ensis-ui 0.0.0-stage → 3.0.0

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

@@ -0,0 +1,284 @@
+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 isMultiple = computed(() => isSelectMultiple(props.multiple));
+	const normalizedOptions = computed(() => normalizeSelectOptions(props.options, props.fieldNames));
+	const resolvedPlaceholder = computed(() => props.placeholder ?? t("select.placeholder"));
+	const resolvedSearchPlaceholder = computed(() => props.searchPlaceholder ?? t("select.searchPlaceholder"));
+	const resolvedEmptyText = computed(() => props.emptyText ?? t("select.empty"));
+	const resolvedLoadingText = computed(() => props.loadingText ?? t("select.loading"));
+	const isSearchable = computed(() => Boolean(props.searchable || props.creatable));
+	const labelMap = computed(() => buildOptionLabelMap(normalizedOptions.value));
+	const disabledMap = computed(() => buildOptionDisabledMap(normalizedOptions.value));
+	const flatOptions = computed(() => flattenSelectOptions(normalizedOptions.value));
+	const flatCount = computed(() => flatOptions.value.length);
+	const useVirtual = computed(() => Boolean(props.virtual) || flatCount.value > (props.virtualThreshold ?? 50));
+	/** 可搜索 / 远程 / 自定义过滤一律走本函数，不再依赖外部 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, selectContains, props.filterOption, props.optionFilterProp);
+		}
+		return sortSelectOptions(next, props.filterSort);
+	});
+	const createValue = computed(() => searchQuery.value.trim());
+	const canCreate = computed(() => {
+		if (!props.creatable) return false;
+		const q = createValue.value;
+		if (!q) return false;
+		const lower = q.toLowerCase();
+		return !flatOptions.value.some((opt) => String(opt.value).toLowerCase() === lower || String(opt.label).toLowerCase() === lower);
+	});
+	const createOptionLabel = computed(() => t("select.createOption", "使用 “{query}”").replace("{query}", createValue.value));
+	const virtualValues = computed(() => {
+		const values = flattenSelectValues(displayOptions.value);
+		if (!canCreate.value) return values;
+		return [createValue.value, ...values.filter((item) => String(item) !== createValue.value)];
+	});
+	const selectedValues = computed(() => toSelectedTokens(model.value, isMultiple.value));
+	const hasValue = computed(() => selectedValues.value.length > 0);
+	const visibleTagTokens = computed(() => {
+		const all = selectedValues.value;
+		if (!isMultiple.value || props.maxTagCount == null || props.maxTagCount === "responsive") return all;
+		if (all.length <= props.maxTagCount) return all;
+		return all.slice(0, Math.max(0, props.maxTagCount));
+	});
+	const omittedTagCount = computed(() => Math.max(0, selectedValues.value.length - visibleTagTokens.value.length));
+	const omittedTagLabel = computed(() => {
+		const count = omittedTagCount.value;
+		if (typeof props.maxTagPlaceholder === "function") return props.maxTagPlaceholder(count);
+		if (props.maxTagPlaceholder) return props.maxTagPlaceholder;
+		return t("select.maxTagPlaceholder", { count });
+	});
+	function optionFromToken(token) {
+		return findSelectOption(normalizedOptions.value, String(token));
+	}
+	function tokenLabel(token) {
+		if (props.labelInValue) {
+			for (const entry of selectModelEntries(model.value)) if (isSelectLabeledValue(entry) && toComboboxValue(entry.value) === token && entry.label) return entry.label;
+		}
+		const option = optionFromToken(token);
+		if (option) return optionDisplayLabel(option, props.optionLabelProp);
+		return labelMap.value.get(token) ?? fromComboboxValue(token);
+	}
+	const omittedTagTitle = computed(() => {
+		if (!props.maxTagTooltip) return omittedTagLabel.value;
+		const omitted = selectedValues.value.slice(visibleTagTokens.value.length);
+		if (!omitted.length) return omittedTagLabel.value;
+		return omitted.map((token) => tokenLabel(token)).join("、");
+	});
+	function truncateTagLabel(label) {
+		const max = props.maxTagTextLength;
+		if (!max || max < 1 || label.length <= max) return label;
+		return `${label.slice(0, max)}…`;
+	}
+	const atMultipleLimit = computed(() => isMultiple.value && props.multipleLimit != null && props.multipleLimit > 0 && selectedValues.value.length >= props.multipleLimit);
+	function isOptionLimited(option) {
+		if (!atMultipleLimit.value) return false;
+		return !selectedValues.value.includes(toComboboxValue(option.value));
+	}
+	function isTokenDisabled(token) {
+		if (disabledMap.value.get(String(token))) return true;
+		const option = optionFromToken(token);
+		return option ? isOptionLimited(option) : false;
+	}
+	const singleDisplayLabel = computed(() => {
+		if (isMultiple.value || !hasValue.value) return "";
+		return tokenLabel(selectedValues.value[0]);
+	});
+	function writeTokens(tokens) {
+		model.value = packSelectModel(restoreSelectValues(tokens, normalizedOptions.value), normalizedOptions.value, isMultiple.value, Boolean(props.labelInValue));
+	}
+	function emitSelectionDiff(prev, next) {
+		const prevSet = new Set(prev);
+		const nextSet = new Set(next);
+		for (const token of next) {
+			if (prevSet.has(token)) continue;
+			emit("select", restoreSelectValue(token, normalizedOptions.value), findSelectOption(normalizedOptions.value, token));
+		}
+		for (const token of prev) {
+			if (nextSet.has(token)) continue;
+			emit("deselect", restoreSelectValue(token, normalizedOptions.value), findSelectOption(normalizedOptions.value, token));
+		}
+	}
+	const comboboxModel = computed({
+		get() {
+			if (isMultiple.value) return selectedValues.value;
+			return hasValue.value ? selectedValues.value[0] : void 0;
+		},
+		set(value) {
+			const prev = selectedValues.value;
+			const tokens = comboboxBindingToTokens(value, isMultiple.value);
+			emitSelectionDiff(prev, tokens);
+			writeTokens(tokens);
+			if (props.autoClearSearchValue) searchQuery.value = "";
+		}
+	});
+	function currentValues() {
+		return restoreSelectValues(selectedValues.value, normalizedOptions.value);
+	}
+	function commitCreatedValue(value) {
+		const next = value.trim();
+		if (!next) return;
+		const values = currentValues();
+		if (values.some((item) => String(item) === next)) return;
+		if (isMultiple.value) {
+			if (atMultipleLimit.value) return;
+			const prev = selectedValues.value;
+			const packed = packSelectModel([...values, next], normalizedOptions.value, true, Boolean(props.labelInValue));
+			model.value = packed;
+			emitSelectionDiff(prev, toSelectedTokens(packed, true));
+		} else {
+			const prev = selectedValues.value;
+			model.value = packSelectModel([next], normalizedOptions.value, false, Boolean(props.labelInValue));
+			emitSelectionDiff(prev, toSelectedTokens(model.value, false));
+			open.value = false;
+		}
+		if (props.autoClearSearchValue) searchQuery.value = "";
+	}
+	function consumeTokenSeparators(raw) {
+		if (!isMultiple.value && !props.creatable) return;
+		const parts = splitByTokenSeparators(raw, props.tokenSeparators ?? []);
+		if (!parts) return;
+		const rest = parts.pop() ?? "";
+		for (const part of parts) {
+			const token = part.trim();
+			if (!token) continue;
+			const matched = flatOptions.value.find((opt) => String(opt.value) === token || String(opt.label) === token);
+			if (matched) {
+				const prev = selectedValues.value;
+				const key = toComboboxValue(matched.value);
+				if (prev.includes(key)) continue;
+				if (isMultiple.value && atMultipleLimit.value) continue;
+				const nextTokens = isMultiple.value ? [...prev, key] : [key];
+				emitSelectionDiff(prev, nextTokens);
+				writeTokens(nextTokens);
+				if (!isMultiple.value) open.value = false;
+			} else if (props.creatable) commitCreatedValue(token);
+		}
+		if (rest !== raw) searchQuery.value = rest;
+	}
+	let searchTimer;
+	watch(searchQuery, (query) => {
+		if (props.remote) {
+			const wait = props.debounce ?? 0;
+			if (searchTimer) clearTimeout(searchTimer);
+			if (wait <= 0) emit("search", query);
+			else searchTimer = setTimeout(() => emit("search", query), wait);
+		}
+		if (props.tokenSeparators?.length) consumeTokenSeparators(query);
+	});
+	onUnmounted(() => {
+		if (searchTimer) clearTimeout(searchTimer);
+	});
+	watch(open, (isOpen) => {
+		if (isOpen) {
+			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;
+		event.preventDefault();
+		event.stopPropagation();
+		commitCreatedValue(createValue.value);
+	}
+	function onClear(event) {
+		event.preventDefault();
+		event.stopPropagation();
+		emitSelectionDiff(selectedValues.value, []);
+		emit("clear");
+		model.value = isMultiple.value ? [] : "";
+	}
+	function removeTag(value, event) {
+		event.preventDefault();
+		event.stopPropagation();
+		if (!isMultiple.value) return;
+		const prev = selectedValues.value;
+		const tokens = prev.filter((item) => item !== value);
+		emitSelectionDiff(prev, tokens);
+		writeTokens(tokens);
+	}
+	function setValue(value) {
+		if (isMultiple.value) {
+			writeTokens(toSelectedTokens(Array.isArray(value) ? value : value !== "" && value != null ? [value] : [], true));
+			return;
+		}
+		writeTokens(toSelectedTokens(value, false));
+	}
+	function restoreTokenValue(token) {
+		return restoreSelectValue(token, normalizedOptions.value);
+	}
+	function optionOrCreate(token) {
+		return optionFromToken(token) ?? {
+			label: fromComboboxValue(token),
+			value: restoreTokenValue(token)
+		};
+	}
+	return {
+		normalizedOptions,
+		resolvedPlaceholder,
+		resolvedSearchPlaceholder,
+		resolvedEmptyText,
+		resolvedLoadingText,
+		isMultiple,
+		isSearchable,
+		labelMap,
+		useVirtual,
+		useManualFilter,
+		displayOptions,
+		createValue,
+		canCreate,
+		createOptionLabel,
+		virtualValues,
+		selectedValues,
+		hasValue,
+		visibleTagTokens,
+		omittedTagCount,
+		omittedTagLabel,
+		omittedTagTitle,
+		singleDisplayLabel,
+		comboboxModel,
+		pickToken,
+		tokenLabel,
+		truncateTagLabel,
+		optionFromToken,
+		optionOrCreate,
+		isOptionLimited,
+		isTokenDisabled,
+		restoreTokenValue,
+		onSearchKeydown,
+		onClear,
+		removeTag,
+		setValue,
+		resetSearch: () => {
+			searchQuery.value = "";
+		}
+	};
+}
+//#endregion
+export { useRsSelect };

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

@@ -0,0 +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

@@ -0,0 +1,119 @@
+
+.rs-sidebar[data-v-0ca72d2d] {
+  display: flex;
+  flex-direction: column;
+  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[data-v-0ca72d2d]:focus {
+  outline: none;
+}
+.rs-sidebar[data-v-0ca72d2d]:focus-visible {
+  box-shadow: 0 0 0 var(--rs-focus-ring-width, 2px) var(--rs-focus-ring);
+}
+.rs-sidebar--sm[data-v-0ca72d2d] {
+  inline-size: var(--rs-sidebar-width-sm);
+}
+.rs-sidebar--md[data-v-0ca72d2d] {
+  inline-size: var(--rs-sidebar-width-md);
+}
+.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-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--horizontal .rs-sidebar__header[data-v-0ca72d2d] {
+  border-block-end: 0;
+  border-inline-end: 1px solid var(--rs-sidebar-border);
+}
+.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-block-size: 0;
+  min-inline-size: 0;
+  overflow: auto;
+  padding: var(--rs-sidebar-body-pad);
+}
+.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-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__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-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-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

@@ -0,0 +1,52 @@
+import { type RsSidebarExpose, type RsSidebarOrientation, type RsSidebarPlacement, type RsSidebarWidth } from './sidebar-utils';
+type __VLS_Props = {
+    title?: string;
+    subtitle?: string;
+    collapsible?: boolean;
+    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_8: {
+    collapsed: boolean;
+}, __VLS_10: {
+    collapsed: boolean;
+};
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_8) => any;
+} & {
+    footer?: (props: typeof __VLS_10) => any;
+};
+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: RsSidebarWidth;
+    orientation: RsSidebarOrientation;
+    placement: RsSidebarPlacement;
+    collapsible: 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;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,165 @@
+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 = ["id", "aria-label"];
+var _hoisted_2 = {
+	key: 0,
+	class: "rs-sidebar__header"
+};
+var _hoisted_3 = { class: "rs-sidebar__title-wrap" };
+var _hoisted_4 = {
+	key: 0,
+	class: "rs-sidebar__title"
+};
+var _hoisted_5 = {
+	key: 1,
+	class: "rs-sidebar__subtitle"
+};
+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: {},
+		subtitle: {},
+		collapsible: {
+			type: Boolean,
+			default: false
+		},
+		width: { default: "md" },
+		orientation: { default: "vertical" },
+		placement: { default: "left" },
+		hotkey: {},
+		id: {},
+		ariaLabel: {}
+	}, {
+		"collapsed": {
+			type: Boolean,
+			default: false
+		},
+		"collapsedModifiers": {}
+	}),
+	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", {
+				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",
+					"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);
+		};
+	}
+});
+//#endregion
+export { RsSidebar_vue_vue_type_script_setup_true_lang_default as default };

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

@@ -0,0 +1,8 @@
+import './RsSidebar.css'
+import _plugin_vue_export_helper_default from "../../../_virtual/_plugin-vue_export-helper.js";
+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-0ca72d2d"]]);
+//#endregion
+export { RsSidebar_default as default };

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

@@ -0,0 +1,32 @@
+
+.rs-sidebar-group + .rs-sidebar-group[data-v-c2188d24] {
+  margin-block-start: var(--rs-sidebar-group-gap);
+}
+.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-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

@@ -0,0 +1,21 @@
+type __VLS_Props = {
+    title?: string;
+    collapsed?: boolean;
+};
+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<{}>, {
+    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;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};