@astryx-vue/core 0.2.6 → 0.4.0

package/dist/{Collapsible-Cov3Pyq5.js → Collapsible-Bdj0WYpb.js}

@@ -1,9 +1,11 @@
-import { t as _sfc_main$2 } from "./Icon-bteSId7T.js";
-import { Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, getCurrentInstance, inject, mergeModels, openBlock, provide, renderSlot, shallowRef, toDisplayString, toValue, unref, useId, useModel, useTemplateRef, vShow, withCtx, withDirectives } from "vue";
+import { t as usePressFeedback } from "./usePressFeedback-BJCpjEpv.js";
+import { n as readLayerScoped, t as defineLayerScopedKey } from "./scopedProvide-C-Df7c15.js";
+import { t as _sfc_main$2 } from "./Icon-KDnUyY7f.js";
+import { Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, getCurrentInstance, mergeModels, mergeProps, openBlock, provide, renderSlot, shallowRef, toDisplayString, toValue, unref, useId, useModel, useTemplateRef, vShow, withCtx, withDirectives } from "vue";
 import "../styles/collapsible.css";
 //#region src/Collapsible/context.ts
-const collapsibleGroupKey = Symbol("collapsibleGroup");
-const collapsibleGroupPresentationKey = Symbol("collapsibleGroupPresentation");
+const collapsibleGroupKey = defineLayerScopedKey("collapsibleGroup", null);
+const collapsibleGroupPresentationKey = defineLayerScopedKey("collapsibleGroupPresentation", null);
 //#endregion
 //#region src/Collapsible/useCollapsible.ts
 function resolveConfig(value) {
@@ -23,7 +25,7 @@ function resolveConfig(value) {
 function useCollapsible(options = {}) {
 	const config = computed(() => resolveConfig(toValue(options.isCollapsible)));
 	const isEnabled = computed(() => config.value != null);
-	const group = options.group !== void 0 ? options.group : getCurrentInstance() ? inject(collapsibleGroupKey, null) : null;
+	const group = options.group !== void 0 ? options.group : getCurrentInstance() ? readLayerScoped(collapsibleGroupKey) : null;
 	const initialIsOpen = toValue(config.value?.defaultIsOpen) ?? true;
 	const localIsOpen = shallowRef(initialIsOpen);
 	function groupKey() {
@@ -104,11 +106,12 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 			}
 		});
 		const isOpen = collapsible.isOpen;
-		const presentation = inject(collapsibleGroupPresentationKey, null);
+		const presentation = readLayerScoped(collapsibleGroupPresentationKey);
 		const density = computed(() => presentation?.density.value ?? null);
 		const hasDividers = computed(() => presentation?.hasDividers.value ?? false);
 		const chevronPosition = computed(() => props.chevronPosition ?? presentation?.chevronPosition.value ?? "end");
 		const isChevronAtStart = computed(() => chevronPosition.value === "start");
+		const { pressableProps } = usePressFeedback({ hasOverlay: false });
 		const contentId = `astryx-collapsible-${useId()}`;
 		const root = useTemplateRef("root");
 		__expose({ element: computed(() => root.value ?? null) });
@@ -123,7 +126,7 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 				class: "astryx-collapsible",
 				"data-density": density.value || void 0,
 				"data-dividers": hasDividers.value || void 0
-			}, [createElementVNode("button", {
+			}, [createElementVNode("button", mergeProps({
 				type: "button",
 				class: "astryx-collapsible-trigger",
 				"data-chevron-position": chevronPosition.value,
@@ -132,9 +135,8 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 				"aria-expanded": unref(isOpen),
 				"aria-controls": contentId,
 				"aria-disabled": __props.isDisabled || void 0,
-				tabindex: __props.isDisabled ? -1 : void 0,
-				onClick: toggle
-			}, [
+				tabindex: __props.isDisabled ? -1 : void 0
+			}, unref(pressableProps), { onClick: toggle }), [
 				isChevronAtStart.value ? (openBlock(), createBlock(_sfc_main$2, {
 					key: 0,
 					class: "astryx-collapsible-chevron",
@@ -150,7 +152,7 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 					icon: "chevronDown",
 					size: "sm"
 				})) : createCommentVNode("v-if", true)
-			], 8, _hoisted_2), createVNode(Transition, {
+			], 16, _hoisted_2), createVNode(Transition, {
 				name: "astryx-collapsible-reveal",
 				persisted: ""
 			}, {

package/dist/CommandPalette/index.d.ts

@@ -1,2 +1,2 @@
-import { _ as CommandPaletteSlots, a as _default$2, c as CommandPaletteEmits, d as CommandPaletteInputProps, f as CommandPaletteItemEmits, g as CommandPaletteProps, h as CommandPaletteListProps, i as _default$3, l as CommandPaletteGroupProps, m as CommandPaletteItemSlotProps, n as _default$5, o as _default$1, p as CommandPaletteItemProps, r as _default$4, s as _default, t as _default$6, u as CommandPaletteInputEmits } from "../index-BhpAUzUr.js";
+import { _ as CommandPaletteSlots, a as _default$2, c as CommandPaletteEmits, d as CommandPaletteInputProps, f as CommandPaletteItemEmits, g as CommandPaletteProps, h as CommandPaletteListProps, i as _default$3, l as CommandPaletteGroupProps, m as CommandPaletteItemSlotProps, n as _default$5, o as _default$1, p as CommandPaletteItemProps, r as _default$4, s as _default, t as _default$6, u as CommandPaletteInputEmits } from "../index-unAZVFGz.js";
 export { _default as CommandPalette, type CommandPaletteEmits, _default$1 as CommandPaletteEmpty, _default$2 as CommandPaletteFooter, _default$3 as CommandPaletteGroup, type CommandPaletteGroupProps, _default$4 as CommandPaletteInput, type CommandPaletteInputEmits, type CommandPaletteInputProps, _default$5 as CommandPaletteItem, type CommandPaletteItemEmits, type CommandPaletteItemProps, type CommandPaletteItemSlotProps, _default$6 as CommandPaletteList, type CommandPaletteListProps, type CommandPaletteProps, type CommandPaletteSlots };

package/dist/CommandPalette/index.js

@@ -1,2 +1,2 @@
-import { a as _sfc_main$3, i as _sfc_main$4, n as _sfc_main$6, o as _sfc_main$2, r as _sfc_main$5, s as _sfc_main$1, t as _sfc_main } from "../CommandPalette-D6wYS30d.js";
+import { a as _sfc_main$3, i as _sfc_main$4, n as _sfc_main$6, o as _sfc_main$2, r as _sfc_main$5, s as _sfc_main$1, t as _sfc_main } from "../CommandPalette-C_MClfAg.js";
 export { _sfc_main as CommandPalette, _sfc_main$1 as CommandPaletteEmpty, _sfc_main$2 as CommandPaletteFooter, _sfc_main$3 as CommandPaletteGroup, _sfc_main$4 as CommandPaletteInput, _sfc_main$5 as CommandPaletteItem, _sfc_main$6 as CommandPaletteList };

package/dist/{CommandPalette-D6wYS30d.js → CommandPalette-C_MClfAg.js}

@@ -1,27 +1,30 @@
-import { t as useAnnounce } from "./announce-Cnio10Wk.js";
+import { t as usePressFeedback } from "./usePressFeedback-BJCpjEpv.js";
+import { t as useAnnounce } from "./announce-B210eJVf.js";
 import { n as useAsyncSource } from "./useAsyncSource-Gk0VtE7_.js";
-import { t as _sfc_main$7 } from "./Kbd-BB-Dw6zE.js";
-import { o as useAstryxMessages } from "./context-iABt_ueM.js";
-import { n as DIALOG_CONTEXT_KEY, t as _sfc_main$8 } from "./Dialog-FGHfDu5M.js";
-import { t as _sfc_main$9 } from "./Spinner-9cYUCnDy.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, getCurrentInstance, inject, mergeModels, onMounted, openBlock, provide, ref, renderList, renderSlot, toDisplayString, unref, useId, useModel, useTemplateRef, watch, withCtx } from "vue";
+import { t as _sfc_main$7 } from "./Kbd-CV3LO2Ge.js";
+import { s as useAstryxMessages } from "./context-DWfi56sq.js";
+import { n as DIALOG_CONTEXT_KEY, t as _sfc_main$8 } from "./Dialog-fhyxB00e.js";
+import { t as useScrollbars } from "./useScrollbars-C2NJ6Qwq.js";
+import { t as _sfc_main$9 } from "./Icon-KDnUyY7f.js";
+import { t as _sfc_main$10 } from "./Spinner-DdVUadii.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, getCurrentInstance, inject, mergeModels, mergeProps, normalizeClass, normalizeStyle, onMounted, openBlock, provide, ref, renderList, renderSlot, toDisplayString, unref, useAttrs, useId, useModel, useTemplateRef, watch, withCtx } from "vue";
 import "../styles/command-palette.css";
 //#region src/CommandPalette/CommandPaletteEmpty.vue
-const _hoisted_1$6 = { class: "astryx-command-palette-empty" };
+const _hoisted_1$5 = { class: "astryx-command-palette-empty" };
 const _sfc_main$6 = /*@__PURE__*/ defineComponent({
 	name: "AstryxCommandPaletteEmpty",
 	__name: "CommandPaletteEmpty",
 	setup(__props) {
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$6, [renderSlot(_ctx.$slots, "default")]);
+			return openBlock(), createElementBlock("div", _hoisted_1$5, [renderSlot(_ctx.$slots, "default")]);
 		};
 	}
 });
 //#endregion
 //#region src/CommandPalette/CommandPaletteFooter.vue
-const _hoisted_1$5 = { class: "astryx-command-palette-footer" };
+const _hoisted_1$4 = { class: "astryx-command-palette-footer" };
 const _hoisted_2$3 = { class: "astryx-command-palette-hint" };
-const _hoisted_3$2 = { class: "astryx-command-palette-hint" };
+const _hoisted_3$1 = { class: "astryx-command-palette-hint" };
 const _hoisted_4 = { class: "astryx-command-palette-hint" };
 const _sfc_main$5 = /*@__PURE__*/ defineComponent({
 	name: "AstryxCommandPaletteFooter",
@@ -29,13 +32,13 @@ const _sfc_main$5 = /*@__PURE__*/ defineComponent({
 	setup(__props) {
 		const messages = useAstryxMessages();
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$5, [renderSlot(_ctx.$slots, "default", {}, () => [
+			return openBlock(), createElementBlock("div", _hoisted_1$4, [renderSlot(_ctx.$slots, "default", {}, () => [
 				createElementVNode("span", _hoisted_2$3, [
 					createVNode(_sfc_main$7, { keys: "up" }),
 					createVNode(_sfc_main$7, { keys: "down" }),
 					createTextVNode(" " + toDisplayString(unref(messages).commandPalette.navigate), 1)
 				]),
-				createElementVNode("span", _hoisted_3$2, [createVNode(_sfc_main$7, { keys: "enter" }), createTextVNode(" " + toDisplayString(unref(messages).commandPalette.select), 1)]),
+				createElementVNode("span", _hoisted_3$1, [createVNode(_sfc_main$7, { keys: "enter" }), createTextVNode(" " + toDisplayString(unref(messages).commandPalette.select), 1)]),
 				createElementVNode("span", _hoisted_4, [createVNode(_sfc_main$7, { keys: "escape" }), createTextVNode(" " + toDisplayString(unref(messages).commandPalette.close), 1)])
 			])]);
 		};
@@ -43,7 +46,7 @@ const _sfc_main$5 = /*@__PURE__*/ defineComponent({
 });
 //#endregion
 //#region src/CommandPalette/CommandPaletteGroup.vue
-const _hoisted_1$4 = ["aria-label"];
+const _hoisted_1$3 = ["aria-label"];
 const _hoisted_2$2 = {
 	class: "astryx-command-palette-group-heading",
 	"aria-hidden": "true"
@@ -58,7 +61,7 @@ const _sfc_main$4 = /*@__PURE__*/ defineComponent({
 				class: "astryx-command-palette-group",
 				role: "group",
 				"aria-label": __props.heading
-			}, [createElementVNode("div", _hoisted_2$2, toDisplayString(__props.heading), 1), renderSlot(_ctx.$slots, "default")], 8, _hoisted_1$4);
+			}, [createElementVNode("div", _hoisted_2$2, toDisplayString(__props.heading), 1), renderSlot(_ctx.$slots, "default")], 8, _hoisted_1$3);
 		};
 	}
 });
@@ -67,18 +70,20 @@ const _sfc_main$4 = /*@__PURE__*/ defineComponent({
 const commandPaletteKey = Symbol("commandPalette");
 //#endregion
 //#region src/CommandPalette/CommandPaletteInput.vue
-const _hoisted_1$3 = { class: "astryx-command-palette-input" };
-const _hoisted_2$1 = [
+const _hoisted_1$2 = [
 	"aria-activedescendant",
+	"aria-autocomplete",
 	"aria-controls",
 	"aria-expanded",
 	"aria-label",
 	"placeholder",
+	"role",
 	"value"
 ];
-const _hoisted_3$1 = { class: "astryx-command-palette-end" };
+const _hoisted_2$1 = { class: "astryx-command-palette-end" };
 const _sfc_main$3 = /*@__PURE__*/ defineComponent({
 	name: "AstryxCommandPaletteInput",
+	inheritAttrs: false,
 	__name: "CommandPaletteInput",
 	props: {
 		placeholder: {},
@@ -95,18 +100,78 @@ const _sfc_main$3 = /*@__PURE__*/ defineComponent({
 		const emit = __emit;
 		const palette = inject(commandPaletteKey, null);
 		const dialog = inject(DIALOG_CONTEXT_KEY, null);
+		const attrs = useAttrs();
 		const messages = useAstryxMessages();
 		const inputRef = useTemplateRef("input");
+		function hasAttr(name) {
+			return Object.hasOwn(attrs, name);
+		}
+		function attrText(name) {
+			const value = attrs[name];
+			if (typeof value === "string") return value;
+			if (typeof value === "number" || typeof value === "boolean") return String(value);
+		}
 		const placeholder = computed(() => props.placeholder ?? messages.value.commandPalette.placeholder);
-		const label = computed(() => props.label ?? messages.value.commandPalette.inputLabel);
+		const label = computed(() => {
+			const given = attrs["aria-label"];
+			return typeof given === "string" && given !== "" ? given : props.label ?? messages.value.commandPalette.inputLabel;
+		});
 		const value = computed(() => props.value ?? palette?.search.value ?? "");
+		const hasListbox = computed(() => (palette?.items.value.length ?? 0) > 0);
+		const callerOwnsPopup = computed(() => {
+			if (palette != null) return false;
+			const popup = attrs["aria-haspopup"];
+			const declaresPopup = hasAttr("aria-haspopup") && popup !== false && popup !== "false";
+			return attrs.role === "combobox" || hasAttr("aria-expanded") || hasAttr("aria-autocomplete") || hasAttr("aria-controls") || hasAttr("aria-owns") || hasAttr("aria-activedescendant") || declaresPopup;
+		});
+		const role = computed(() => {
+			if (palette != null) return "combobox";
+			if (hasAttr("role")) return attrText("role");
+			return callerOwnsPopup.value ? "combobox" : "searchbox";
+		});
+		const expanded = computed(() => {
+			const given = attrText("aria-expanded");
+			const normalized = given === "true" || given === "false" ? given : void 0;
+			if (palette != null) return hasListbox.value ? "true" : void 0;
+			if (hasAttr("aria-expanded")) return normalized;
+			return callerOwnsPopup.value ? "true" : void 0;
+		});
+		const autocomplete = computed(() => {
+			if (palette != null) return "list";
+			const given = attrs["aria-autocomplete"];
+			if (given === "none" || given === "both" || given === "inline" || given === "list") return given;
+			return callerOwnsPopup.value ? "list" : void 0;
+		});
+		const controls = computed(() => {
+			if (palette != null) return hasListbox.value ? palette.listId : void 0;
+			return attrText("aria-controls");
+		});
 		const activeDescendant = computed(() => {
-			const index = palette?.highlightedIndex.value ?? -1;
-			if (palette == null || index < 0) return void 0;
+			if (palette == null) return attrText("aria-activedescendant");
+			const index = palette.highlightedIndex.value;
+			if (!hasListbox.value || index < 0) return void 0;
 			return `${palette.listId}-item-${index}`;
 		});
+		const inputAttrs = computed(() => {
+			const reserved = /* @__PURE__ */ new Set([
+				"class",
+				"style",
+				"role",
+				"aria-label",
+				"aria-expanded",
+				"aria-autocomplete",
+				"aria-controls",
+				"aria-activedescendant",
+				"onKeydown",
+				"onKeyDown",
+				"onInput"
+			]);
+			return Object.fromEntries(Object.entries(attrs).filter(([key]) => !reserved.has(key)));
+		});
 		const shouldFocus = computed(() => props.hasAutoFocus && dialog?.isInline.value !== true);
 		function onInput(event) {
+			const caller = attrs.onInput;
+			if (typeof caller === "function") caller(event);
 			const next = event.target.value;
 			if (props.value == null) {
 				palette?.setSearch(next);
@@ -115,42 +180,52 @@ const _sfc_main$3 = /*@__PURE__*/ defineComponent({
 			emit("valueChange", next);
 			emit("update:value", next);
 		}
+		function onKeyDown(event) {
+			const caller = attrs.onKeydown ?? attrs.onKeyDown;
+			if (typeof caller === "function") caller(event);
+			if (event.defaultPrevented || event.isComposing || event.key === "Process") return;
+			palette?.onKeyDown(event);
+		}
 		onMounted(() => {
 			if (shouldFocus.value) requestAnimationFrame(() => inputRef.value?.focus());
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$3, [
-				_cache[1] || (_cache[1] = createElementVNode("span", {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(["astryx-command-palette-input", unref(attrs).class]),
+				style: normalizeStyle(unref(attrs).style)
+			}, [
+				createVNode(_sfc_main$9, {
 					class: "astryx-command-palette-search",
-					"aria-hidden": "true"
-				}, null, -1)),
-				createElementVNode("input", {
+					icon: "search",
+					size: "sm"
+				}),
+				createElementVNode("input", mergeProps(inputAttrs.value, {
 					ref: "input",
 					"aria-activedescendant": activeDescendant.value,
-					"aria-autocomplete": "list",
-					"aria-controls": unref(palette) && unref(palette).items.value.length > 0 ? unref(palette).listId : void 0,
-					"aria-expanded": unref(palette) ? true : void 0,
+					"aria-autocomplete": autocomplete.value,
+					"aria-controls": controls.value,
+					"aria-expanded": expanded.value,
 					"aria-label": label.value,
 					class: "astryx-command-palette-field",
 					placeholder: placeholder.value,
-					role: "combobox",
+					role: role.value,
 					type: "text",
 					value: value.value,
 					onInput,
-					onKeydown: _cache[0] || (_cache[0] = (...args) => unref(palette)?.onKeyDown && unref(palette)?.onKeyDown(...args))
-				}, null, 40, _hoisted_2$1),
-				createElementVNode("span", _hoisted_3$1, [unref(palette)?.isBusy.value ? (openBlock(), createBlock(_sfc_main$9, {
+					onKeydown: onKeyDown
+				}), null, 16, _hoisted_1$2),
+				createElementVNode("span", _hoisted_2$1, [unref(palette)?.isBusy.value ? (openBlock(), createBlock(_sfc_main$10, {
 					key: 0,
 					class: "astryx-command-palette-spinner",
 					size: "sm"
 				})) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "end", {}, () => [renderSlot(_ctx.$slots, "endContent")])])
-			]);
+			], 6);
 		};
 	}
 });
 //#endregion
 //#region src/CommandPalette/CommandPaletteItem.vue
-const _hoisted_1$2 = [
+const _hoisted_1$1 = [
 	"id",
 	"aria-disabled",
 	"aria-selected",
@@ -176,6 +251,7 @@ const _sfc_main$2 = /*@__PURE__*/ defineComponent({
 		const props = __props;
 		const emit = __emit;
 		const palette = inject(commandPaletteKey, null);
+		const press = usePressFeedback({ hasOverlay: false });
 		const instance = getCurrentInstance();
 		/**
 		* Vue turns an omitted boolean prop into `false`, so a `??` fallback cannot
@@ -207,24 +283,23 @@ const _sfc_main$2 = /*@__PURE__*/ defineComponent({
 			if (item != null) palette.selectItem(item);
 		}
 		function highlight() {
-			if (!props.isDisabled && index.value >= 0) palette?.setHighlightedIndex(index.value);
+			if (!props.isDisabled && index.value >= 0) palette?.setHighlightedIndex(index.value, "pointer");
 		}
 		function scrollIntoView(element) {
-			if (!(element instanceof HTMLElement)) return;
-			if (palette?.isInline.value && palette.highlightedIndex.value === index.value && index.value === 0) return;
 			element.scrollIntoView({ block: "nearest" });
 		}
 		watch(isHighlighted, (highlighted, _previous, onCleanup) => {
-			if (!highlighted) return;
-			const id = `${palette?.listId}-item-${index.value}`;
-			const element = document.getElementById(id);
-			if (element == null) return;
-			const frame = requestAnimationFrame(() => scrollIntoView(element));
+			if (!highlighted || typeof document === "undefined") return;
+			if (palette?.highlightCause.value === "pointer") return;
+			if (palette?.highlightCause.value === "sync" && palette.isInline.value) return;
+			const id = palette && index.value >= 0 ? `${palette.listId}-item-${index.value}` : void 0;
+			const node = (id == null ? void 0 : document.getElementById(id)) ?? (instance?.vnode.el instanceof HTMLElement ? instance.vnode.el : null);
+			if (node == null) return;
+			const frame = requestAnimationFrame(() => scrollIntoView(node));
 			onCleanup(() => cancelAnimationFrame(frame));
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", {
-				id: index.value >= 0 && unref(palette) ? `${unref(palette).listId}-item-${index.value}` : void 0,
+			return openBlock(), createElementBlock("div", mergeProps({ id: index.value >= 0 && unref(palette) ? `${unref(palette).listId}-item-${index.value}` : void 0 }, unref(press).pressableProps, {
 				class: "astryx-command-palette-item",
 				role: "option",
 				tabindex: "-1",
@@ -238,17 +313,12 @@ const _sfc_main$2 = /*@__PURE__*/ defineComponent({
 				onFocus: highlight,
 				onKeydown: onKeyDown,
 				onMouseenter: highlight
-			}, [renderSlot(_ctx.$slots, "default")], 40, _hoisted_1$2);
+			}), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_1$1);
 		};
 	}
 });
 //#endregion
 //#region src/CommandPalette/CommandPaletteList.vue
-const _hoisted_1$1 = [
-	"id",
-	"role",
-	"aria-label"
-];
 const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 	name: "AstryxCommandPaletteList",
 	__name: "CommandPaletteList",
@@ -258,15 +328,21 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 		const palette = inject(commandPaletteKey, null);
 		const messages = useAstryxMessages();
 		const label = computed(() => props.label ?? messages.value.commandPalette.listLabel);
-		/** 没有可选项时它只是个空容器，不再当作 listbox 暴露给读屏。 */
+		/** 没有可选项时它只是个空容器，不再当作 listbox 暴露给读屏。单独使用时始终是 listbox。 */
 		const hasOptions = computed(() => palette == null || palette.items.value.length > 0);
+		const bindings = computed(() => {
+			const result = {};
+			if (palette != null) result.id = palette.listId;
+			if (hasOptions.value) {
+				result.role = "listbox";
+				result["aria-label"] = label.value;
+			}
+			return result;
+		});
+		const listEl = useTemplateRef("list");
+		useScrollbars(listEl);
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", {
-				id: unref(palette)?.listId,
-				class: "astryx-command-palette-list",
-				role: hasOptions.value ? "listbox" : void 0,
-				"aria-label": hasOptions.value ? label.value : void 0
-			}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1$1);
+			return openBlock(), createElementBlock("div", mergeProps({ ref: "list" }, bindings.value, { class: "astryx-command-palette-list" }), [renderSlot(_ctx.$slots, "default")], 16);
 		};
 	}
 });
@@ -326,6 +402,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const announce = useAnnounce();
 		const search = ref("");
 		const highlightedIndex = ref(-1);
+		const highlightCause = ref("sync");
 		const listId = `astryx-command-palette-${useId()}`;
 		const enabled = computed(() => props.isOpen);
 		const source = computed(() => props.searchSource);
@@ -375,7 +452,8 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		function setSearch(next) {
 			search.value = next;
 		}
-		function setHighlightedIndex(index) {
+		function setHighlightedIndex(index, cause = "keyboard") {
+			highlightCause.value = cause;
 			highlightedIndex.value = index;
 		}
 		function close() {
@@ -394,8 +472,10 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		function onKeyDown(event) {
 			if (event.isComposing || event.key === "Process") return;
 			if (event.key === "Escape") {
-				event.preventDefault();
-				close();
+				if (props.isInline) {
+					event.preventDefault();
+					close();
+				}
 				return;
 			}
 			if (event.key === " ") return;
@@ -405,16 +485,18 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				if (item != null) selectItem(item);
 				return;
 			}
-			const direction = event.key === "ArrowDown" ? "next" : event.key === "ArrowUp" ? "previous" : event.key === "Home" || event.key === "PageUp" ? "first" : event.key === "End" || event.key === "PageDown" ? "last" : null;
+			if (event.key === "Home" || event.key === "End") return;
+			const direction = event.key === "ArrowDown" ? "next" : event.key === "ArrowUp" ? "previous" : event.key === "PageUp" ? "first" : event.key === "PageDown" ? "last" : null;
 			if (direction == null) return;
 			event.preventDefault();
-			highlightedIndex.value = moveHighlight(items.value, highlightedIndex.value, direction);
+			setHighlightedIndex(moveHighlight(items.value, highlightedIndex.value, direction), "keyboard");
 		}
 		function onOpenChange(open) {
 			if (!open) close();
 			else emit("openChange", true);
 		}
 		watch(items, (list) => {
+			highlightCause.value = "sync";
 			if (search.value.trim() === "" && value.value) {
 				highlightedIndex.value = list.findIndex((item) => item.id === value.value && !item.disabled);
 				return;
@@ -438,11 +520,13 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			if (!open) {
 				results.cancel();
 				search.value = "";
+				highlightCause.value = "sync";
 				highlightedIndex.value = -1;
 			}
 		});
 		provide(commandPaletteKey, {
 			highlightedIndex,
+			highlightCause,
 			isBusy,
 			isInline,
 			items,

package/dist/ComplexSelector/index.d.ts

@@ -1,2 +1,2 @@
-import { a as ComplexSelectorProps, c as ComplexSelectorState, i as ComplexSelectorHandleRef, l as ComplexSelectorTriggerProps, n as ComplexSelectorEmits, o as ComplexSelectorSlotProps, r as ComplexSelectorHandle, s as ComplexSelectorSlots, t as _default, u as ComplexSelectorVariant } from "../index-Cde5JvtX.js";
+import { a as ComplexSelectorProps, c as ComplexSelectorState, i as ComplexSelectorHandleRef, l as ComplexSelectorTriggerProps, n as ComplexSelectorEmits, o as ComplexSelectorSlotProps, r as ComplexSelectorHandle, s as ComplexSelectorSlots, t as _default, u as ComplexSelectorVariant } from "../index-B-nESNam.js";
 export { _default as ComplexSelector, _default as default, type ComplexSelectorEmits, type ComplexSelectorHandle, type ComplexSelectorHandleRef, type ComplexSelectorProps, type ComplexSelectorSlotProps, type ComplexSelectorSlots, type ComplexSelectorState, type ComplexSelectorTriggerProps, type ComplexSelectorVariant };

package/dist/ComplexSelector/index.js

@@ -1,2 +1,2 @@
-import { n as _sfc_main, t as ComplexSelector_default } from "../ComplexSelector-Bil81sfq.js";
+import { n as _sfc_main, t as ComplexSelector_default } from "../ComplexSelector-BeVQaqRf.js";
 export { _sfc_main as ComplexSelector, ComplexSelector_default as default };