@astryx-vue/core 0.2.6 → 0.4.0

package/dist/{TreeList-BUz-KZJd.js → TreeList-DaoI7zaH.js}

@@ -1,8 +1,10 @@
+import { t as usePressFeedback } from "./usePressFeedback-BJCpjEpv.js";
+import { n as isSafeUrl } from "./safeUrl-CsvfcZ9m.js";
 import { n as useLinkComponent } from "./context-C_peZbXf.js";
-import { o as useAstryxMessages } from "./context-iABt_ueM.js";
+import { s as useAstryxMessages } from "./context-DWfi56sq.js";
 import { t as _sfc_main$2 } from "./Badge-CjDQPF5g.js";
-import { s as isIconGlyph, t as _sfc_main$3 } from "./Icon-bteSId7T.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, onMounted, openBlock, reactive, ref, renderList, renderSlot, resolveComponent, resolveDynamicComponent, toDisplayString, toRaw, unref, useId, vShow, withCtx, withDirectives } from "vue";
+import { s as isIconGlyph, t as _sfc_main$3 } from "./Icon-KDnUyY7f.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, onMounted, openBlock, reactive, ref, renderList, renderSlot, resolveComponent, resolveDynamicComponent, toDisplayString, toRaw, unref, useAttrs, useId, useSlots, vShow, withCtx, withDirectives } from "vue";
 import "../styles/tree-list.css";
 //#region src/TreeList/TreeListItem.vue
 const _hoisted_1$1 = [
@@ -14,6 +16,8 @@ const _hoisted_1$1 = [
 	"aria-selected",
 	"aria-disabled",
 	"aria-expanded",
+	"aria-labelledby",
+	"aria-describedby",
 	"tabindex"
 ];
 const _hoisted_2$1 = ["data-span"];
@@ -39,26 +43,21 @@ const _hoisted_7 = {
 	key: 1,
 	class: "astryx-tree-list__icon"
 };
-const _hoisted_8 = { class: "astryx-tree-list__label" };
-const _hoisted_9 = {
-	key: 0,
-	class: "astryx-tree-list__description"
-};
-const _hoisted_10 = ["disabled"];
-const _hoisted_11 = { class: "astryx-tree-list__label" };
-const _hoisted_12 = {
-	key: 0,
-	class: "astryx-tree-list__description"
-};
+const _hoisted_8 = ["id"];
+const _hoisted_9 = ["id"];
+const _hoisted_10 = [
+	"disabled",
+	"aria-labelledby",
+	"aria-describedby"
+];
+const _hoisted_11 = ["id"];
+const _hoisted_12 = ["id"];
 const _hoisted_13 = {
 	key: 4,
 	class: "astryx-tree-list__main"
 };
-const _hoisted_14 = { class: "astryx-tree-list__label" };
-const _hoisted_15 = {
-	key: 0,
-	class: "astryx-tree-list__description"
-};
+const _hoisted_14 = ["id"];
+const _hoisted_15 = ["id"];
 const _hoisted_16 = {
 	key: 5,
 	class: "astryx-tree-list__end"
@@ -95,8 +94,16 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 		const emit = __emit;
 		const messages = useAstryxMessages();
 		const linkComponent = useLinkComponent();
+		const labelId = useId();
+		const descriptionId = useId();
 		/** 有链接时用的根组件，没有 provider 时还是 `<a>`。 */
 		const linkRoot = computed(() => linkComponent.value == null ? "a" : toRaw(linkComponent.value));
+		const safeHref = computed(() => {
+			const href = props.item.href;
+			return href != null && href !== "" && isSafeUrl(href) ? href : void 0;
+		});
+		/** 新窗口打开时补上和列表行相同的关系标记。 */
+		const linkRel = computed(() => props.item.target === "_blank" ? "noopener noreferrer" : void 0);
 		const hasChildren = computed(() => (props.item.children?.length ?? 0) > 0);
 		const isExpanded = computed(() => hasChildren.value && props.expanded[props.item.id] === true);
 		const reservesChevron = computed(() => !hasChildren.value && props.hasExpandableItems);
@@ -116,19 +123,26 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 			event.stopPropagation();
 			emit("toggle", props.item.id);
 		}
+		const press = usePressFeedback();
+		const rowPress = computed(() => {
+			return (props.item.onClick != null || safeHref.value != null || hasChildren.value) && props.item.isDisabled !== true ? press.pressableProps : {};
+		});
 		return (_ctx, _cache) => {
 			const _component_TreeListItem = resolveComponent("TreeListItem", true);
 			return openBlock(), createElementBlock("li", {
-				class: "astryx-tree-list__item",
+				class: normalizeClass(["astryx-tree-list__item", __props.item.className]),
 				role: "treeitem",
 				"data-tree-id": __props.item.id,
 				"data-tree-disabled": __props.item.isDisabled ? "true" : void 0,
+				style: normalizeStyle(__props.item.style),
 				"aria-level": __props.nestedLevel + 1,
 				"aria-posinset": __props.posInSet,
 				"aria-setsize": __props.setSize,
 				"aria-selected": __props.item.isSelected || void 0,
 				"aria-disabled": __props.item.isDisabled || void 0,
 				"aria-expanded": hasChildren.value ? isExpanded.value : void 0,
+				"aria-labelledby": unref(labelId),
+				"aria-describedby": __props.item.description ? unref(descriptionId) : void 0,
 				tabindex: __props.item.id === __props.tabbableId ? 0 : -1
 			}, [
 				__props.variant === "lineGuides" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.ancestorsIsLast, (ancestorIsLast, level) => {
@@ -148,16 +162,15 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 					class: "astryx-tree-list__guide-line",
 					"data-span": __props.isLast ? "last" : "full"
 				}, null, 8, _hoisted_2$1)], 4)) : createCommentVNode("v-if", true)], 64)) : createCommentVNode("v-if", true),
-				createElementVNode("div", _hoisted_3, [createCommentVNode(" eslint-disable-next-line vue-a11y/click-events-have-key-events, vue-a11y/no-static-element-interactions -- 键盘由外层 role=\"tree\" 处理，这一层只接指针点击。 "), createElementVNode("div", {
+				createElementVNode("div", _hoisted_3, [createCommentVNode(" eslint-disable-next-line vue-a11y/click-events-have-key-events, vue-a11y/no-static-element-interactions -- 键盘由外层 role=\"tree\" 处理，这一层只接指针点击。 "), createElementVNode("div", mergeProps({
 					class: "astryx-tree-list__content",
 					"data-density": __props.density,
 					"data-selected": __props.item.isSelected || void 0,
 					"data-disabled": __props.item.isDisabled || void 0,
-					"data-interactive": __props.item.onClick != null || __props.item.href != null || hasChildren.value || void 0,
+					"data-interactive": __props.item.onClick != null || safeHref.value != null || hasChildren.value || void 0,
 					"data-guide-inset": __props.variant === "lineGuides" && __props.nestedLevel > 0 && !reservesChevron.value || void 0,
-					style: normalizeStyle({ "--_tree-indent": indent.value }),
-					onClick: onRowClick
-				}, [
+					style: { "--_tree-indent": indent.value }
+				}, rowPress.value, { onClick: onRowClick }), [
 					hasChildren.value ? (openBlock(), createElementBlock("button", {
 						key: 0,
 						type: "button",
@@ -182,28 +195,57 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 						class: normalizeClass(__props.item.icon),
 						"aria-hidden": "true"
 					}, null, 2)]))])) : createCommentVNode("v-if", true),
-					__props.item.href ? (openBlock(), createBlock(resolveDynamicComponent(linkRoot.value), {
+					safeHref.value ? (openBlock(), createBlock(resolveDynamicComponent(linkRoot.value), {
 						key: 2,
 						class: "astryx-tree-list__action",
-						href: __props.item.href,
-						to: linkRoot.value === "a" ? void 0 : __props.item.href,
+						href: safeHref.value,
+						to: linkRoot.value === "a" ? void 0 : safeHref.value,
 						target: __props.item.target,
+						rel: linkRel.value,
+						"aria-labelledby": unref(labelId),
+						"aria-describedby": __props.item.description ? unref(descriptionId) : void 0,
 						tabindex: "-1"
 					}, {
-						default: withCtx(() => [createElementVNode("span", _hoisted_8, toDisplayString(__props.item.label), 1), __props.item.description ? (openBlock(), createElementBlock("span", _hoisted_9, toDisplayString(__props.item.description), 1)) : createCommentVNode("v-if", true)]),
+						default: withCtx(() => [createElementVNode("span", {
+							id: unref(labelId),
+							class: "astryx-tree-list__label"
+						}, toDisplayString(__props.item.label), 9, _hoisted_8), __props.item.description ? (openBlock(), createElementBlock("span", {
+							key: 0,
+							id: unref(descriptionId),
+							class: "astryx-tree-list__description"
+						}, toDisplayString(__props.item.description), 9, _hoisted_9)) : createCommentVNode("v-if", true)]),
 						_: 1
 					}, 8, [
 						"href",
 						"to",
-						"target"
+						"target",
+						"rel",
+						"aria-labelledby",
+						"aria-describedby"
 					])) : __props.item.onClick ? (openBlock(), createElementBlock("button", {
 						key: 3,
 						type: "button",
 						class: "astryx-tree-list__action",
 						disabled: __props.item.isDisabled,
+						"aria-labelledby": unref(labelId),
+						"aria-describedby": __props.item.description ? unref(descriptionId) : void 0,
 						tabindex: "-1",
 						onClick: _cache[0] || (_cache[0] = ($event) => __props.item.onClick($event))
-					}, [createElementVNode("span", _hoisted_11, toDisplayString(__props.item.label), 1), __props.item.description ? (openBlock(), createElementBlock("span", _hoisted_12, toDisplayString(__props.item.description), 1)) : createCommentVNode("v-if", true)], 8, _hoisted_10)) : (openBlock(), createElementBlock("span", _hoisted_13, [createElementVNode("span", _hoisted_14, toDisplayString(__props.item.label), 1), __props.item.description ? (openBlock(), createElementBlock("span", _hoisted_15, toDisplayString(__props.item.description), 1)) : createCommentVNode("v-if", true)])),
+					}, [createElementVNode("span", {
+						id: unref(labelId),
+						class: "astryx-tree-list__label"
+					}, toDisplayString(__props.item.label), 9, _hoisted_11), __props.item.description ? (openBlock(), createElementBlock("span", {
+						key: 0,
+						id: unref(descriptionId),
+						class: "astryx-tree-list__description"
+					}, toDisplayString(__props.item.description), 9, _hoisted_12)) : createCommentVNode("v-if", true)], 8, _hoisted_10)) : (openBlock(), createElementBlock("span", _hoisted_13, [createElementVNode("span", {
+						id: unref(labelId),
+						class: "astryx-tree-list__label"
+					}, toDisplayString(__props.item.label), 9, _hoisted_14), __props.item.description ? (openBlock(), createElementBlock("span", {
+						key: 0,
+						id: unref(descriptionId),
+						class: "astryx-tree-list__description"
+					}, toDisplayString(__props.item.description), 9, _hoisted_15)) : createCommentVNode("v-if", true)])),
 					__props.item.badge || __props.item.endIcon ? (openBlock(), createElementBlock("span", _hoisted_16, [__props.item.badge ? (openBlock(), createBlock(_sfc_main$2, { key: 0 }, {
 						default: withCtx(() => [createTextVNode(toDisplayString(__props.item.badge), 1)]),
 						_: 1
@@ -215,7 +257,7 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 						class: normalizeClass(__props.item.endIcon),
 						"aria-hidden": "true"
 					}, null, 2)])) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true)
-				], 12, _hoisted_4)]),
+				], 16, _hoisted_4)]),
 				hasChildren.value && isExpanded.value ? (openBlock(), createElementBlock("ul", _hoisted_18, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.item.children, (child, index) => {
 					return openBlock(), createBlock(_component_TreeListItem, {
 						key: child.id,
@@ -245,7 +287,7 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 						"set-size"
 					]);
 				}), 128))])) : createCommentVNode("v-if", true)
-			], 8, _hoisted_1$1);
+			], 14, _hoisted_1$1);
 		};
 	}
 });
@@ -291,6 +333,17 @@ function useTreeFocus(options) {
 		if (options.getLevel != null) return options.getLevel(item);
 		return Number(item.getAttribute("aria-level") ?? "1");
 	}
+	/** typeahead 用的名字。指明时只读标签，否则用整行文字。 */
+	function matchText(item) {
+		if (options.matchLabelledBy === true) {
+			const ids = item.getAttribute("aria-labelledby")?.split(/\s+/).filter(Boolean) ?? [];
+			if (ids.length > 0) {
+				const doc = item.ownerDocument;
+				return ids.map((id) => doc.getElementById(id)?.textContent ?? "").join(" ").trim().toLowerCase();
+			}
+		}
+		return (item.textContent ?? "").trim().toLowerCase();
+	}
 	/** 树节点的 id：优先 `data-tree-id`，退回元素自己的 `id`。 */
 	function idOf(item) {
 		const id = item.dataset.treeId ?? item.id;
@@ -334,7 +387,7 @@ function useTreeFocus(options) {
 				typeahead.buffer = "";
 			}, TYPEAHEAD_RESET_MS);
 			const query = typeahead.buffer;
-			const match = [...list.slice(currentIndex + 1), ...list.slice(0, currentIndex + 1)].find((item) => !disabled(item) && (item.textContent ?? "").trim().toLowerCase().startsWith(query));
+			const match = [...list.slice(currentIndex + 1), ...list.slice(0, currentIndex + 1)].find((item) => !disabled(item) && matchText(item).startsWith(query));
 			if (match != null) {
 				event.preventDefault();
 				focusItem(match);
@@ -440,7 +493,30 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 	},
 	setup(__props) {
 		const props = __props;
+		const attrs = useAttrs();
+		const slots = useSlots();
 		const headerId = `astryx-tree-list-${useId()}`;
+		const hasHeader = computed(() => props.header != null || slots.header != null);
+		const rootAttrs = computed(() => {
+			const rest = {};
+			for (const [key, value] of Object.entries(attrs)) {
+				if (key === "class" || key === "style" || key === "onKeydown" || key === "onKeyDown") continue;
+				if (key === "aria-label" || key === "aria-labelledby") continue;
+				rest[key] = value;
+			}
+			return rest;
+		});
+		const treeLabel = computed(() => {
+			if (hasHeader.value) return void 0;
+			const fromAttr = attrs["aria-label"];
+			if (typeof fromAttr === "string") return fromAttr;
+			return props.label;
+		});
+		const treeLabelledBy = computed(() => {
+			if (hasHeader.value) return headerId;
+			const fromAttr = attrs["aria-labelledby"];
+			return typeof fromAttr === "string" ? fromAttr : void 0;
+		});
 		const expanded = reactive({});
 		function walk(items, visit) {
 			for (const item of items) {
@@ -490,6 +566,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const tabbableId = computed(() => initialTabbable(props.items));
 		const { treeRef, handleKeyDown, handleFocus } = useTreeFocus({
 			hasRovingTabIndex: true,
+			matchLabelledBy: true,
 			onToggleExpand: toggle,
 			onActivate: (current) => {
 				const candidates = current.querySelectorAll("a[href], button:not([data-tree-toggle])");
@@ -500,17 +577,23 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				return false;
 			}
 		});
+		function callKeydown(listener, event) {
+			if (typeof listener === "function") listener(event);
+			else if (Array.isArray(listener)) listener.forEach((entry) => callKeydown(entry, event));
+		}
 		function onKeyDown(event) {
+			callKeydown(attrs.onKeydown ?? attrs.onKeyDown, event);
+			if (event.defaultPrevented) return;
 			if (treeRef.value != null && event.target instanceof Node && treeRef.value.contains(event.target)) handleKeyDown(event);
 		}
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock(Fragment, null, [createCommentVNode(" eslint-disable-next-line vue-a11y/no-static-element-interactions -- 方向键从内部 role=\"tree\" 冒泡上来，这一层只负责转发给树的键盘逻辑。 "), createElementVNode("div", {
-				class: normalizeClass(["astryx-tree-list", _ctx.$attrs.class]),
-				style: normalizeStyle(_ctx.$attrs.style),
+			return openBlock(), createElementBlock(Fragment, null, [createCommentVNode(" eslint-disable-next-line vue-a11y/no-static-element-interactions -- 方向键从内部 role=\"tree\" 冒泡上来，这一层只负责转发给树的键盘逻辑。 "), createElementVNode("div", mergeProps(rootAttrs.value, {
+				class: ["astryx-tree-list", unref(attrs).class],
+				style: unref(attrs).style,
 				"data-density": __props.density,
 				"data-variant": __props.variant,
 				onKeydown: onKeyDown
-			}, [__props.header || _ctx.$slots.header ? (openBlock(), createElementBlock("div", {
+			}), [hasHeader.value ? (openBlock(), createElementBlock("div", {
 				key: 0,
 				id: headerId,
 				class: "astryx-tree-list__header"
@@ -519,8 +602,8 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				ref: treeRef,
 				class: "astryx-tree-list__list",
 				role: "tree",
-				"aria-label": __props.header || _ctx.$slots.header ? void 0 : __props.label,
-				"aria-labelledby": __props.header || _ctx.$slots.header ? headerId : void 0,
+				"aria-label": treeLabel.value,
+				"aria-labelledby": treeLabelledBy.value,
 				onFocus: _cache[0] || (_cache[0] = (...args) => unref(handleFocus) && unref(handleFocus)(...args))
 			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item, index) => {
 				return openBlock(), createBlock(_sfc_main$1, {
@@ -548,7 +631,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					"pos-in-set",
 					"set-size"
 				]);
-			}), 128))], 40, _hoisted_2)], 46, _hoisted_1)], 2112);
+			}), 128))], 40, _hoisted_2)], 16, _hoisted_1)], 2112);
 		};
 	}
 });

package/dist/Typeahead/index.d.ts

@@ -1,2 +1,2 @@
-import { a as TypeaheadEmits, c as TypeaheadSize, i as BaseTypeaheadProps, l as TypeaheadSlots, n as _default$1, o as TypeaheadItemProps, r as _default, s as TypeaheadProps, t as _default$2, u as TypeaheadStatus } from "../index-Bu8NA2SD.js";
+import { a as TypeaheadEmits, c as TypeaheadSize, i as BaseTypeaheadProps, l as TypeaheadSlots, n as _default$1, o as TypeaheadItemProps, r as _default, s as TypeaheadProps, t as _default$2, u as TypeaheadStatus } from "../index-BnEhvmdR.js";
 export { _default as BaseTypeahead, type BaseTypeaheadProps, _default$1 as Typeahead, type TypeaheadEmits, _default$2 as TypeaheadItem, type TypeaheadItemProps, type TypeaheadProps, type TypeaheadSize, type TypeaheadSlots, type TypeaheadStatus };

package/dist/Typeahead/index.js

@@ -1,3 +1,3 @@
-import { n as _sfc_main$2 } from "../TypeaheadMenu-DBW6rHeO.js";
-import { n as _sfc_main, t as _sfc_main$1 } from "../Typeahead-k3xhFxkr.js";
+import { n as _sfc_main$2 } from "../TypeaheadMenu-BQlMrfqX.js";
+import { n as _sfc_main, t as _sfc_main$1 } from "../Typeahead-D4JjvjK4.js";
 export { _sfc_main as BaseTypeahead, _sfc_main$1 as Typeahead, _sfc_main$2 as TypeaheadItem };

package/dist/{Typeahead-k3xhFxkr.js → Typeahead-D4JjvjK4.js}

@@ -1,12 +1,17 @@
-import { n as useButtonTooltip } from "./Button-B6Hj_O_s.js";
-import { t as _sfc_main$2 } from "./ButtonTooltip-nWWrth8j.js";
-import { o as useAstryxMessages } from "./context-iABt_ueM.js";
-import { t as _sfc_main$3 } from "./Spinner-9cYUCnDy.js";
-import { t as _sfc_main$4 } from "./Field-D5gUEGw4.js";
-import { t as _sfc_main$5 } from "./Token-DsntTYhQ.js";
-import { n as useAnchoredListbox, t as scrollOptionIntoView } from "./useAnchoredListbox-DwztMNjP.js";
-import { r as useTypeaheadMenu, t as _sfc_main$6 } from "./TypeaheadMenu-DBW6rHeO.js";
-import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createVNode, defineComponent, inject, mergeProps, nextTick, normalizeClass, normalizeStyle, onMounted, openBlock, provide, ref, renderSlot, toDisplayString, unref, useAttrs, useId, useTemplateRef, vShow, watch, withCtx, withDirectives } from "vue";
+import { n as useButtonTooltip } from "./Button-ONOoHdkg.js";
+import { t as _sfc_main$2 } from "./ButtonTooltip-CNKOQHYR.js";
+import { a as isImeKeyEvent } from "./layerDepth-CNDh-IHb.js";
+import { s as useAstryxMessages } from "./context-DWfi56sq.js";
+import { t as useResolvedLabelHidden } from "./useResolvedLabelHidden-B2rlWiaI.js";
+import { t as useScrollbars } from "./useScrollbars-C2NJ6Qwq.js";
+import { t as _sfc_main$3 } from "./Spinner-DdVUadii.js";
+import { t as _sfc_main$4 } from "./Field--OEsLBfE.js";
+import { t as useFieldPartStyling } from "./fieldParts--SyRZVQG.js";
+import { t as _sfc_main$5 } from "./Token-BfS4vi__.js";
+import { n as useAnchoredListbox, t as scrollOptionIntoView } from "./useAnchoredListbox-DGxxKHZb.js";
+import { i as useTypeaheadMenu, r as useLatchedOptionGrid, t as _sfc_main$6 } from "./TypeaheadMenu-BQlMrfqX.js";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createVNode, defineComponent, inject, mergeProps, nextTick, normalizeClass, normalizeStyle, onMounted, openBlock, provide, ref, renderSlot, resolveDynamicComponent, toDisplayString, unref, useAttrs, useId, useTemplateRef, vShow, watch, withCtx, withDirectives } from "vue";
+import "../styles/layer.css";
 import "../styles/visually-hidden-utility.css";
 import "../styles/typeahead.css";
 //#region src/Typeahead/context.ts
@@ -33,6 +38,7 @@ const _hoisted_2 = [
 	"aria-disabled",
 	"aria-expanded",
 	"aria-controls",
+	"aria-haspopup",
 	"aria-label",
 	"aria-labelledby",
 	"aria-activedescendant",
@@ -44,6 +50,7 @@ const _hoisted_4 = ["id"];
 const _hoisted_5 = ["name", "value"];
 const _hoisted_6 = [
 	"id",
+	"role",
 	"aria-label",
 	"data-placement"
 ];
@@ -93,7 +100,21 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 			default: false
 		},
 		name: {},
-		inputTabIndex: {}
+		inputTabIndex: {},
+		controlClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		controlStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
 	},
 	emits: [
 		"update:modelValue",
@@ -117,6 +138,7 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 		const inputRef = useTemplateRef("inputRef");
 		const controlRef = useTemplateRef("controlRef");
 		const listboxRef = useTemplateRef("listboxRef");
+		useScrollbars(listboxRef);
 		const placeholder = computed(() => props.placeholder ?? messages.value.typeahead.placeholder);
 		const emptyText = computed(() => props.emptySearchText ?? props.emptyText ?? messages.value.typeahead.empty);
 		const clearLabel = computed(() => messages.value.typeahead.clear);
@@ -273,8 +295,16 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 		* 外面的 keydown 先跑，它 preventDefault 就不再走内部导航。
 		* 顺序靠模板里 `v-bind` 写在 `@keydown` 前面保证。
 		*/
+		const optionGrid = useLatchedOptionGrid({
+			entries: () => menu.entries.value,
+			isOpen: () => menu.combobox.isOpen.value,
+			activeIndex: menu.combobox.activeIndex,
+			getListbox: () => listboxRef.value,
+			listboxId: () => listboxId.value
+		});
 		function onKeydown(event) {
-			if (event.defaultPrevented) return;
+			if (event.defaultPrevented || isImeKeyEvent(event)) return;
+			if (optionGrid.actionGrid.onKeyDown(event)) return;
 			menu.onKeyDown(event);
 		}
 		function onControlClick(event) {
@@ -304,11 +334,17 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 				createElementVNode("div", { class: normalizeClass(["astryx-typeahead", [`size-${props.size}`, { "astryx-typeahead--bare": !hasChrome }]]) }, [createCommentVNode(" eslint-disable-next-line vue-a11y/click-events-have-key-events, vue-a11y/no-static-element-interactions -- 点空白处只是把焦点交给组合框；键盘用户直接 Tab 到输入框。 "), createElementVNode("div", {
 					ref_key: "controlRef",
 					ref: controlRef,
-					class: normalizeClass(["astryx-typeahead-control", [`status-${props.status}`, {
-						"is-open": unref(menu).combobox.isOpen.value,
-						"is-disabled": props.disabled,
-						"is-bare": !hasChrome
-					}]]),
+					class: normalizeClass(["astryx-typeahead-control", [
+						unref(attrs).class,
+						props.controlClass,
+						`status-${props.status}`,
+						{
+							"is-open": unref(menu).combobox.isOpen.value,
+							"is-disabled": props.disabled,
+							"is-bare": !hasChrome
+						}
+					]]),
+					style: normalizeStyle([unref(attrs).style, props.controlStyle]),
 					onClick: onControlClick,
 					onPointerenter: _cache[0] || (_cache[0] = (...args) => unref(disabledTooltip).onPointerEnter && unref(disabledTooltip).onPointerEnter(...args)),
 					onPointerleave: _cache[1] || (_cache[1] = (...args) => unref(disabledTooltip).onPointerLeave && unref(disabledTooltip).onPointerLeave(...args))
@@ -344,10 +380,11 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 						"aria-disabled": focusableDisabled.value ? "true" : void 0,
 						"aria-expanded": unref(menu).combobox.isOpen.value,
 						"aria-controls": listboxId.value,
+						"aria-haspopup": unref(optionGrid).popupKind.value,
 						"aria-label": ariaLabel.value,
 						"aria-labelledby": labelledBy.value,
 						"aria-autocomplete": "list",
-						"aria-activedescendant": unref(menu).activeId.value ? `${listboxId.value}-option-${unref(menu).combobox.activeIndex.value}` : void 0,
+						"aria-activedescendant": unref(optionGrid).gridMode.value ? unref(optionGrid).actionGrid.activeDescendant.value : unref(menu).activeId.value ? `${listboxId.value}-option-${unref(menu).combobox.activeIndex.value}` : void 0,
 						"aria-describedby": describedBy.value,
 						"aria-required": props.required || void 0,
 						onInput,
@@ -390,7 +427,7 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 						name: props.name,
 						value: selected.value?.id ?? ""
 					}, null, 8, _hoisted_5)) : createCommentVNode("v-if", true)
-				], 34)], 2),
+				], 38)], 2),
 				showsDisabledMessage.value ? (openBlock(), createBlock(_sfc_main$2, {
 					key: 0,
 					id: disabledTooltipId.value,
@@ -411,8 +448,8 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 					id: listboxId.value,
 					ref_key: "listboxRef",
 					ref: listboxRef,
-					class: "astryx-typeahead-listbox",
-					role: "listbox",
+					class: "astryx-typeahead-listbox astryx-layer",
+					role: unref(optionGrid).gridMode.value ? "grid" : "listbox",
 					"aria-label": unref(messages).typeahead.results,
 					"data-placement": unref(anchored).position.value.placement,
 					style: normalizeStyle(unref(anchored).style.value),
@@ -424,9 +461,12 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 						description: entry.description,
 						disabled: entry.disabled,
 						group: entry.group,
+						action: entry.action,
 						selected: optionSelected(entry.item.id)
 					})),
 					"active-index": unref(menu).combobox.activeIndex.value,
+					grid: unref(optionGrid).gridMode.value,
+					"action-index": unref(optionGrid).actionGrid.column.value === "action" ? unref(menu).combobox.activeIndex.value : -1,
 					status: unref(menu).status.value,
 					"listbox-id": listboxId.value,
 					"empty-text": emptyText.value,
@@ -449,6 +489,8 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 				} : void 0]), 1032, [
 					"entries",
 					"active-index",
+					"grid",
+					"action-index",
 					"status",
 					"listbox-id",
 					"empty-text",
@@ -469,6 +511,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		modelValue: { default: null },
 		searchSource: {},
 		label: {},
+		isLabelHidden: { type: Boolean },
 		labelHidden: {
 			type: Boolean,
 			default: false
@@ -516,7 +559,36 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			default: false
 		},
 		name: {},
-		width: {}
+		width: {},
+		startIcon: {},
+		containerClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		containerStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		controlClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		controlStyle: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
 	},
 	emits: [
 		"update:modelValue",
@@ -529,6 +601,25 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const props = __props;
 		const emit = __emit;
 		const attrs = useAttrs();
+		const parts = useFieldPartStyling({
+			component: "Typeahead",
+			props,
+			attrs,
+			reservedAttrs: [
+				"id",
+				"role",
+				"aria-label",
+				"aria-labelledby",
+				"aria-describedby",
+				"aria-expanded",
+				"aria-controls",
+				"aria-haspopup",
+				"aria-activedescendant",
+				"aria-autocomplete",
+				"aria-disabled",
+				"aria-required"
+			]
+		});
 		provide(typeaheadChromeKey, true);
 		const inputId = `astryx-typeahead-${useId()}`;
 		const base = useTemplateRef("base");
@@ -541,6 +632,8 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const showsClear = computed(() => props.hasClear && props.clearable);
 		/** 两个名字任一为真就在聚焦时先展开。 */
 		const showsEntriesOnFocus = computed(() => props.hasEntriesOnFocus || props.showOnFocus);
+		/** 正名 isLabelHidden，旧名 labelHidden 任一为真就藏起标签。 */
+		const hideLabel = useResolvedLabelHidden(() => props.isLabelHidden, () => props.labelHidden);
 		const emptySearchText = computed(() => props.emptySearchText ?? props.emptyText);
 		const fieldStatus = computed(() => {
 			if (!props.statusMessage || props.status === "default") return void 0;
@@ -555,12 +648,13 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(_sfc_main$4, {
-				class: normalizeClass(["astryx-typeahead", [`size-${props.size}`]]),
+				class: normalizeClass(["astryx-typeahead", [unref(parts).containerClass.value, `size-${props.size}`]]),
+				style: normalizeStyle(unref(parts).containerStyle.value),
 				label: props.label,
 				"input-id": inputId,
 				description: props.description,
 				"label-tooltip": props.labelTooltip,
-				"is-label-hidden": props.labelHidden,
+				"is-label-hidden": unref(hideLabel),
 				"is-disabled": props.disabled,
 				"is-required": props.required,
 				"is-optional": props.optional,
@@ -570,7 +664,9 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				default: withCtx((field) => [createVNode(_sfc_main$1, mergeProps({
 					ref_key: "base",
 					ref: base
-				}, unref(attrs), {
+				}, unref(parts).forwardedAttrs(), {
+					"control-class": unref(parts).controlClass(),
+					"control-style": unref(parts).controlStyle(),
 					"model-value": props.modelValue,
 					"search-source": props.searchSource,
 					"input-id": field.inputId,
@@ -595,9 +691,9 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					onChangeQuery: _cache[3] || (_cache[3] = ($event) => emit("changeQuery", $event)),
 					onOpenChange: _cache[4] || (_cache[4] = ($event) => emit("openChange", $event))
 				}), createSlots({ _: 2 }, [
-					_ctx.$slots.icon ? {
+					_ctx.$slots.icon || props.startIcon ? {
 						name: "icon",
-						fn: withCtx(() => [renderSlot(_ctx.$slots, "icon")]),
+						fn: withCtx(() => [renderSlot(_ctx.$slots, "icon", {}, () => [(openBlock(), createBlock(resolveDynamicComponent(props.startIcon)))])]),
 						key: "0"
 					} : void 0,
 					_ctx.$slots.item ? {
@@ -615,6 +711,8 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 						key: "2"
 					} : void 0
 				]), 1040, [
+					"control-class",
+					"control-style",
 					"model-value",
 					"search-source",
 					"input-id",
@@ -637,6 +735,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				_: 3
 			}, 8, [
 				"class",
+				"style",
 				"label",
 				"description",
 				"label-tooltip",