@astryx-vue/core 0.1.0 → 0.1.3

package/dist/{TopNav-CjbMCbkC.js → TopNav-CZokS7E_.js}

@@ -1,13 +1,14 @@
 import { t as useMediaQuery } from "./useMediaQuery-GMmgp28-.js";
+import { n as useAppShellMobile } from "./useAppShellMobile-DTsyuAJ4.js";
 import { t as useListFocus } from "./useListFocus-D0iOJl39.js";
-import { a as useAstryxMessages } from "./locale-56lkR7OK.js";
-import { t as _sfc_main$7 } from "./Icon-B6qNgBP9.js";
-import { n as _sfc_main$9, r as mobileNavKey, t as _sfc_main$8 } from "./MobileNavToggle-BK2iRJF-.js";
+import { a as useAstryxMessages } from "./context-D6ECRdc5.js";
+import { n as _sfc_main$8, r as mobileNavKey, t as _sfc_main$7 } from "./MobileNavToggle-CgQamG6E.js";
+import { t as _sfc_main$9 } from "./Icon-5MdZQ18k.js";
 import { n as resolveNavRoot } from "./link-CdcUSxAj.js";
 import { t as _sfc_main$10 } from "./NavItem-FFOisITc.js";
 import { n as navMenuCloseKey, t as _sfc_main$11 } from "./NavDisclosure-DHrSNRDR.js";
 import { n as _sfc_main$13, t as _sfc_main$12 } from "./NavMenuItem-mzNQESpB.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, inject, normalizeClass, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, useId, useSlots, vShow, withCtx, withDirectives } from "vue";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, inject, normalizeClass, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, useId, useSlots, vShow, withCtx, withDirectives } from "vue";
 import "../styles/top-nav.css";
 //#region src/TopNav/TopNav.vue
 const _hoisted_1$5 = ["aria-label"];
@@ -26,6 +27,7 @@ const _hoisted_5$1 = {
 };
 const _hoisted_6$1 = { class: "astryx-top-nav__end" };
 const _hoisted_7$1 = { class: "astryx-top-nav__drawer" };
+const _hoisted_8$1 = { class: "astryx-top-nav__drawer" };
 const _sfc_main$6 = /*@__PURE__*/ defineComponent({
 	name: "AstryxTopNav",
 	__name: "TopNav",
@@ -39,38 +41,62 @@ const _sfc_main$6 = /*@__PURE__*/ defineComponent({
 		const messages = useAstryxMessages();
 		const drawerId = `astryx-top-nav-${useId()}`;
 		const mobileOpen = ref(false);
+		const shell = useAppShellMobile();
 		const queryMatches = props.mobileQuery ? useMediaQuery(props.mobileQuery) : ref(false);
-		const isCompact = computed(() => Boolean(props.mobileQuery) && queryMatches.value);
+		const shellCompact = computed(() => shell.isMobile && shell.isMobileNavEnabled);
+		const isCompact = computed(() => shellCompact.value || Boolean(props.mobileQuery) && queryMatches.value);
+		const ownsDrawer = computed(() => isCompact.value && !shellCompact.value);
 		const hasCenter = computed(() => slots.center != null);
 		const hasDrawer = computed(() => slots.start != null || slots.default != null || slots.center != null);
+		const showShellToggle = computed(() => shellCompact.value && shell.hasAutoToggle && (hasDrawer.value || shell.hasSideNav));
+		function setShellOpen(next) {
+			if (next) shell.openMobileNav();
+			else shell.closeMobileNav();
+		}
 		const label = computed(() => props.label || messages.value.nav.topNav);
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock(Fragment, null, [createElementVNode("nav", {
-				class: normalizeClass(["astryx-top-nav", { "astryx-top-nav--centered": hasCenter.value && !isCompact.value }]),
-				"aria-label": label.value
-			}, [
-				createElementVNode("div", _hoisted_2$5, [unref(slots).heading ? (openBlock(), createElementBlock("div", _hoisted_3$3, [renderSlot(_ctx.$slots, "heading")])) : createCommentVNode("v-if", true), !isCompact.value ? (openBlock(), createElementBlock("div", _hoisted_4$3, [renderSlot(_ctx.$slots, "start"), renderSlot(_ctx.$slots, "default")])) : createCommentVNode("v-if", true)]),
-				hasCenter.value && !isCompact.value ? (openBlock(), createElementBlock("div", _hoisted_5$1, [renderSlot(_ctx.$slots, "center")])) : createCommentVNode("v-if", true),
-				createElementVNode("div", _hoisted_6$1, [renderSlot(_ctx.$slots, "end"), isCompact.value && hasDrawer.value ? (openBlock(), createBlock(_sfc_main$8, {
+			return openBlock(), createElementBlock(Fragment, null, [
+				createElementVNode("nav", {
+					class: normalizeClass(["astryx-top-nav", { "astryx-top-nav--centered": hasCenter.value && !isCompact.value }]),
+					"aria-label": label.value
+				}, [
+					createElementVNode("div", _hoisted_2$5, [unref(slots).heading ? (openBlock(), createElementBlock("div", _hoisted_3$3, [renderSlot(_ctx.$slots, "heading")])) : createCommentVNode("v-if", true), !isCompact.value ? (openBlock(), createElementBlock("div", _hoisted_4$3, [renderSlot(_ctx.$slots, "start"), renderSlot(_ctx.$slots, "default")])) : createCommentVNode("v-if", true)]),
+					hasCenter.value && !isCompact.value ? (openBlock(), createElementBlock("div", _hoisted_5$1, [renderSlot(_ctx.$slots, "center")])) : createCommentVNode("v-if", true),
+					createElementVNode("div", _hoisted_6$1, [renderSlot(_ctx.$slots, "end"), showShellToggle.value ? (openBlock(), createBlock(_sfc_main$7, {
+						key: 0,
+						"is-open": unref(shell).isMobileNavOpen,
+						controls: unref(shell).mobileNavId,
+						"onUpdate:isOpen": setShellOpen
+					}, null, 8, ["is-open", "controls"])) : ownsDrawer.value && hasDrawer.value ? (openBlock(), createBlock(_sfc_main$7, {
+						key: 1,
+						"is-open": mobileOpen.value,
+						"onUpdate:isOpen": _cache[0] || (_cache[0] = ($event) => mobileOpen.value = $event),
+						controls: drawerId
+					}, null, 8, ["is-open"])) : createCommentVNode("v-if", true)])
+				], 10, _hoisted_1$5),
+				shellCompact.value && hasDrawer.value ? (openBlock(), createBlock(Teleport, {
 					key: 0,
-					"is-open": mobileOpen.value,
-					"onUpdate:isOpen": _cache[0] || (_cache[0] = ($event) => mobileOpen.value = $event),
-					controls: drawerId
-				}, null, 8, ["is-open"])) : createCommentVNode("v-if", true)])
-			], 10, _hoisted_1$5), isCompact.value && hasDrawer.value ? (openBlock(), createBlock(_sfc_main$9, {
-				key: 0,
-				id: drawerId,
-				"is-open": mobileOpen.value,
-				"onUpdate:isOpen": _cache[1] || (_cache[1] = ($event) => mobileOpen.value = $event),
-				label: label.value
-			}, {
-				default: withCtx(() => [createElementVNode("div", _hoisted_7$1, [
+					to: `#${unref(shell).mobileNavId}-items`
+				}, [createElementVNode("div", _hoisted_7$1, [
 					renderSlot(_ctx.$slots, "start"),
 					renderSlot(_ctx.$slots, "default"),
 					renderSlot(_ctx.$slots, "center")
-				])]),
-				_: 3
-			}, 8, ["is-open", "label"])) : createCommentVNode("v-if", true)], 64);
+				])], 8, ["to"])) : createCommentVNode("v-if", true),
+				ownsDrawer.value && hasDrawer.value ? (openBlock(), createBlock(_sfc_main$8, {
+					key: 1,
+					id: drawerId,
+					"is-open": mobileOpen.value,
+					"onUpdate:isOpen": _cache[1] || (_cache[1] = ($event) => mobileOpen.value = $event),
+					label: label.value
+				}, {
+					default: withCtx(() => [createElementVNode("div", _hoisted_8$1, [
+						renderSlot(_ctx.$slots, "start"),
+						renderSlot(_ctx.$slots, "default"),
+						renderSlot(_ctx.$slots, "center")
+					])]),
+					_: 3
+				}, 8, ["is-open", "label"])) : createCommentVNode("v-if", true)
+			], 64);
 		};
 	}
 });
@@ -217,7 +243,7 @@ const _sfc_main$3 = /*@__PURE__*/ defineComponent({
 				class: "astryx-top-nav-menu__drawer-trigger",
 				"aria-expanded": expanded.value ? "true" : "false",
 				onClick: _cache[0] || (_cache[0] = ($event) => expanded.value = !expanded.value)
-			}, [createElementVNode("span", null, toDisplayString(__props.label), 1), createVNode(_sfc_main$7, {
+			}, [createElementVNode("span", null, toDisplayString(__props.label), 1), createVNode(_sfc_main$9, {
 				icon: "chevronDown",
 				size: "sm",
 				class: normalizeClass({ "astryx-top-nav-menu__chevron--open": expanded.value })
@@ -237,7 +263,7 @@ const _sfc_main$3 = /*@__PURE__*/ defineComponent({
 					"aria-expanded": isOpen ? "true" : "false",
 					"aria-controls": panelId,
 					"aria-haspopup": "menu"
-				}, [createElementVNode("span", null, toDisplayString(__props.label), 1), createVNode(_sfc_main$7, {
+				}, [createElementVNode("span", null, toDisplayString(__props.label), 1), createVNode(_sfc_main$9, {
 					icon: "chevronDown",
 					size: "sm",
 					class: normalizeClass(["astryx-top-nav-menu__chevron", { "astryx-top-nav-menu__chevron--open": isOpen }])
@@ -388,7 +414,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				class: "astryx-top-nav-menu__drawer-trigger",
 				"aria-expanded": expanded.value ? "true" : "false",
 				onClick: _cache[0] || (_cache[0] = ($event) => expanded.value = !expanded.value)
-			}, [createElementVNode("span", null, toDisplayString(__props.label), 1), createVNode(_sfc_main$7, {
+			}, [createElementVNode("span", null, toDisplayString(__props.label), 1), createVNode(_sfc_main$9, {
 				icon: "chevronDown",
 				size: "sm",
 				class: normalizeClass({ "astryx-top-nav-menu__chevron--open": expanded.value })
@@ -423,7 +449,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					"aria-expanded": isOpen ? "true" : "false",
 					"aria-controls": panelId,
 					"aria-haspopup": "menu"
-				}, [createElementVNode("span", null, toDisplayString(__props.label), 1), createVNode(_sfc_main$7, {
+				}, [createElementVNode("span", null, toDisplayString(__props.label), 1), createVNode(_sfc_main$9, {
 					icon: "chevronDown",
 					size: "sm",
 					class: normalizeClass(["astryx-top-nav-menu__chevron", { "astryx-top-nav-menu__chevron--open": isOpen }])

package/dist/TreeList/index.d.ts

@@ -0,0 +1,2 @@
+import { a as TreeListItemData, c as TreeListVariant, i as TreeListDensity, n as useTreeFocus, o as TreeListProps, r as _default, s as TreeListSlots, t as UseTreeFocusOptions } from "../index-C_2Z65Rp.js";
+export { _default as TreeList, type TreeListDensity, type TreeListItemData, type TreeListProps, type TreeListSlots, type TreeListVariant, type UseTreeFocusOptions, useTreeFocus };

package/dist/TreeList/index.js

@@ -0,0 +1,2 @@
+import { n as useTreeFocus, t as _sfc_main } from "../TreeList-CIbAGOMf.js";
+export { _sfc_main as TreeList, useTreeFocus };

package/dist/TreeList-CIbAGOMf.js

@@ -0,0 +1,506 @@
+import { a as useAstryxMessages } from "./context-D6ECRdc5.js";
+import { t as _sfc_main$2 } from "./Badge-Ba0EwsTj.js";
+import { n as isIconGlyph, t as _sfc_main$3 } from "./Icon-5MdZQ18k.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, onMounted, openBlock, reactive, ref, renderList, renderSlot, resolveComponent, toDisplayString, unref, useId, vShow, withCtx, withDirectives } from "vue";
+import "../styles/tree-list.css";
+//#region src/TreeList/TreeListItem.vue
+const _hoisted_1$1 = [
+	"data-tree-id",
+	"data-tree-disabled",
+	"aria-level",
+	"aria-posinset",
+	"aria-setsize",
+	"aria-selected",
+	"aria-disabled",
+	"aria-expanded",
+	"tabindex"
+];
+const _hoisted_2$1 = ["data-span"];
+const _hoisted_3 = { class: "astryx-tree-list__row" };
+const _hoisted_4 = [
+	"data-density",
+	"data-selected",
+	"data-disabled",
+	"data-interactive",
+	"data-guide-inset"
+];
+const _hoisted_5 = [
+	"data-state",
+	"aria-expanded",
+	"aria-label",
+	"disabled"
+];
+const _hoisted_6 = {
+	key: 1,
+	class: "astryx-tree-list__start"
+};
+const _hoisted_7 = {
+	key: 1,
+	class: "astryx-tree-list__icon"
+};
+const _hoisted_8 = ["href", "target"];
+const _hoisted_9 = { class: "astryx-tree-list__label" };
+const _hoisted_10 = {
+	key: 0,
+	class: "astryx-tree-list__description"
+};
+const _hoisted_11 = ["disabled"];
+const _hoisted_12 = { class: "astryx-tree-list__label" };
+const _hoisted_13 = {
+	key: 0,
+	class: "astryx-tree-list__description"
+};
+const _hoisted_14 = {
+	key: 4,
+	class: "astryx-tree-list__main"
+};
+const _hoisted_15 = { class: "astryx-tree-list__label" };
+const _hoisted_16 = {
+	key: 0,
+	class: "astryx-tree-list__description"
+};
+const _hoisted_17 = {
+	key: 5,
+	class: "astryx-tree-list__end"
+};
+const _hoisted_18 = {
+	key: 2,
+	class: "astryx-tree-list__icon"
+};
+const _hoisted_19 = {
+	key: 1,
+	class: "astryx-tree-list__group",
+	role: "group"
+};
+const branchMargin = "calc(var(--astryx-spacing-2, 8px) + var(--astryx-spacing-0-5, 2px))";
+const _sfc_main$1 = /*@__PURE__*/ defineComponent({
+	name: "AstryxTreeListItem",
+	__name: "TreeListItem",
+	props: {
+		item: {},
+		density: {},
+		variant: {},
+		nestedLevel: {},
+		isLast: { type: Boolean },
+		ancestorsIsLast: {},
+		expanded: {},
+		hasExpandableItems: { type: Boolean },
+		tabbableId: {},
+		posInSet: {},
+		setSize: {}
+	},
+	emits: ["toggle"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const messages = useAstryxMessages();
+		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);
+		const indent = computed(() => reservesChevron.value ? `calc(${props.nestedLevel} * var(--tree-list-indent) + var(--astryx-spacing-4, 16px) + var(--astryx-spacing-2, 8px))` : `calc(${props.nestedLevel} * var(--tree-list-indent))`);
+		const childAncestors = computed(() => [...props.ancestorsIsLast, props.isLast]);
+		function branchOffset(level) {
+			return `calc(${branchMargin} + ${level} * var(--tree-list-indent))`;
+		}
+		function onRowClick(event) {
+			if (props.item.isDisabled) return;
+			const target = event.target;
+			if (target instanceof Element && target.closest("button, a, input, select, textarea")) return;
+			if (props.item.onClick) props.item.onClick(event);
+			else if (hasChildren.value) emit("toggle", props.item.id);
+		}
+		function onToggle(event) {
+			event.stopPropagation();
+			emit("toggle", props.item.id);
+		}
+		return (_ctx, _cache) => {
+			const _component_TreeListItem = resolveComponent("TreeListItem", true);
+			return openBlock(), createElementBlock("li", {
+				class: "astryx-tree-list__item",
+				role: "treeitem",
+				"data-tree-id": __props.item.id,
+				"data-tree-disabled": __props.item.isDisabled ? "true" : void 0,
+				"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,
+				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) => {
+					return withDirectives((openBlock(), createElementBlock("span", {
+						key: level,
+						class: "astryx-tree-list__guide",
+						style: normalizeStyle({ insetInlineStart: branchOffset(level) })
+					}, [..._cache[2] || (_cache[2] = [createElementVNode("span", {
+						class: "astryx-tree-list__guide-line",
+						"data-span": "full"
+					}, null, -1)])], 4)), [[vShow, !ancestorIsLast && level !== __props.nestedLevel - 1]]);
+				}), 128)), __props.nestedLevel > 0 ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					class: "astryx-tree-list__guide",
+					style: normalizeStyle({ insetInlineStart: branchOffset(__props.nestedLevel - 1) })
+				}, [createElementVNode("span", {
+					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", {
+					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-guide-inset": __props.variant === "lineGuides" && __props.nestedLevel > 0 && !reservesChevron.value || void 0,
+					style: normalizeStyle({ "--_tree-indent": indent.value }),
+					onClick: onRowClick
+				}, [
+					hasChildren.value ? (openBlock(), createElementBlock("button", {
+						key: 0,
+						type: "button",
+						class: "astryx-tree-list__chevron",
+						"data-tree-toggle": "",
+						"data-state": isExpanded.value ? "expanded" : "collapsed",
+						"aria-expanded": isExpanded.value,
+						"aria-label": unref(messages).treeList.toggleChildren,
+						disabled: __props.item.isDisabled,
+						tabindex: "-1",
+						onClick: onToggle
+					}, [createVNode(_sfc_main$3, {
+						icon: "chevronRight",
+						size: "sm",
+						color: "inherit"
+					})], 8, _hoisted_5)) : createCommentVNode("v-if", true),
+					__props.item.icon ? (openBlock(), createElementBlock("span", _hoisted_6, [unref(isIconGlyph)(__props.item.icon) ? (openBlock(), createBlock(_sfc_main$3, {
+						key: 0,
+						icon: __props.item.icon,
+						size: "sm"
+					}, null, 8, ["icon"])) : (openBlock(), createElementBlock("span", _hoisted_7, [createElementVNode("i", {
+						class: normalizeClass(__props.item.icon),
+						"aria-hidden": "true"
+					}, null, 2)]))])) : createCommentVNode("v-if", true),
+					__props.item.href ? (openBlock(), createElementBlock("a", {
+						key: 2,
+						class: "astryx-tree-list__action",
+						href: __props.item.href,
+						target: __props.item.target,
+						tabindex: "-1"
+					}, [createElementVNode("span", _hoisted_9, toDisplayString(__props.item.label), 1), __props.item.description ? (openBlock(), createElementBlock("span", _hoisted_10, toDisplayString(__props.item.description), 1)) : createCommentVNode("v-if", true)], 8, _hoisted_8)) : __props.item.onClick ? (openBlock(), createElementBlock("button", {
+						key: 3,
+						type: "button",
+						class: "astryx-tree-list__action",
+						disabled: __props.item.isDisabled,
+						tabindex: "-1",
+						onClick: _cache[0] || (_cache[0] = ($event) => __props.item.onClick($event))
+					}, [createElementVNode("span", _hoisted_12, toDisplayString(__props.item.label), 1), __props.item.description ? (openBlock(), createElementBlock("span", _hoisted_13, toDisplayString(__props.item.description), 1)) : createCommentVNode("v-if", true)], 8, _hoisted_11)) : (openBlock(), createElementBlock("span", _hoisted_14, [createElementVNode("span", _hoisted_15, toDisplayString(__props.item.label), 1), __props.item.description ? (openBlock(), createElementBlock("span", _hoisted_16, toDisplayString(__props.item.description), 1)) : createCommentVNode("v-if", true)])),
+					__props.item.badge || __props.item.endIcon ? (openBlock(), createElementBlock("span", _hoisted_17, [__props.item.badge ? (openBlock(), createBlock(_sfc_main$2, { key: 0 }, {
+						default: withCtx(() => [createTextVNode(toDisplayString(__props.item.badge), 1)]),
+						_: 1
+					})) : __props.item.endIcon && unref(isIconGlyph)(__props.item.endIcon) ? (openBlock(), createBlock(_sfc_main$3, {
+						key: 1,
+						icon: __props.item.endIcon,
+						size: "sm"
+					}, null, 8, ["icon"])) : __props.item.endIcon ? (openBlock(), createElementBlock("span", _hoisted_18, [createElementVNode("i", {
+						class: normalizeClass(__props.item.endIcon),
+						"aria-hidden": "true"
+					}, null, 2)])) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true)
+				], 12, _hoisted_4)]),
+				hasChildren.value && isExpanded.value ? (openBlock(), createElementBlock("ul", _hoisted_19, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.item.children, (child, index) => {
+					return openBlock(), createBlock(_component_TreeListItem, {
+						key: child.id,
+						item: child,
+						density: __props.density,
+						variant: __props.variant,
+						"nested-level": __props.nestedLevel + 1,
+						"is-last": index === (__props.item.children?.length ?? 1) - 1,
+						"ancestors-is-last": childAncestors.value,
+						expanded: __props.expanded,
+						"has-expandable-items": __props.hasExpandableItems,
+						"tabbable-id": __props.tabbableId,
+						"pos-in-set": index + 1,
+						"set-size": __props.item.children?.length ?? 0,
+						onToggle: _cache[1] || (_cache[1] = ($event) => emit("toggle", $event))
+					}, null, 8, [
+						"item",
+						"density",
+						"variant",
+						"nested-level",
+						"is-last",
+						"ancestors-is-last",
+						"expanded",
+						"has-expandable-items",
+						"tabbable-id",
+						"pos-in-set",
+						"set-size"
+					]);
+				}), 128))])) : createCommentVNode("v-if", true)
+			], 8, _hoisted_1$1);
+		};
+	}
+});
+//#endregion
+//#region src/TreeList/useTreeFocus.ts
+const NAVIGATION_KEYS = /* @__PURE__ */ new Set([
+	"ArrowDown",
+	"ArrowUp",
+	"ArrowRight",
+	"ArrowLeft",
+	"Home",
+	"End",
+	"Enter",
+	" "
+]);
+function isRtl(element) {
+	return element != null && getComputedStyle(element).direction === "rtl";
+}
+function useTreeFocus(options) {
+	const treeRef = ref(null);
+	const typeahead = {
+		buffer: "",
+		timer: void 0
+	};
+	function items() {
+		const root = treeRef.value;
+		if (root == null) return [];
+		return [...root.querySelectorAll("[role=\"treeitem\"]")];
+	}
+	function disabled(item) {
+		return item.dataset.treeDisabled === "true" || item.getAttribute("aria-disabled") === "true";
+	}
+	function levelOf(item) {
+		return Number(item.getAttribute("aria-level") ?? "1");
+	}
+	function focusItem(item) {
+		for (const candidate of items()) candidate.tabIndex = candidate === item ? 0 : -1;
+		item.focus();
+	}
+	function focusEnabledFrom(list, start, step) {
+		for (let index = start; index >= 0 && index < list.length; index += step) {
+			const item = list[index];
+			if (item != null && !disabled(item)) {
+				focusItem(item);
+				return;
+			}
+		}
+	}
+	function syncTabStops() {
+		const list = items();
+		const active = document.activeElement;
+		const current = active instanceof Element ? active.closest("[role=\"treeitem\"]") : null;
+		const owned = current != null && list.includes(current) ? current : list.find((item) => item.tabIndex === 0) ?? list.find((item) => !disabled(item));
+		for (const item of list) item.tabIndex = item === owned ? 0 : -1;
+	}
+	onMounted(syncTabStops);
+	function handleKeyDown(event) {
+		const list = items();
+		if (list.length === 0) return;
+		const active = document.activeElement;
+		const activeItem = active instanceof Element ? active.closest("[role=\"treeitem\"]") : null;
+		const currentIndex = list.findIndex((item) => item === activeItem);
+		const current = currentIndex >= 0 ? list[currentIndex] : void 0;
+		if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey && !NAVIGATION_KEYS.has(event.key)) {
+			typeahead.buffer += event.key.toLowerCase();
+			clearTimeout(typeahead.timer);
+			typeahead.timer = setTimeout(() => {
+				typeahead.buffer = "";
+			}, 500);
+			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));
+			if (match != null) {
+				event.preventDefault();
+				focusItem(match);
+			}
+			return;
+		}
+		if (!NAVIGATION_KEYS.has(event.key)) return;
+		let key = event.key;
+		if ((key === "ArrowLeft" || key === "ArrowRight") && isRtl(treeRef.value)) key = key === "ArrowLeft" ? "ArrowRight" : "ArrowLeft";
+		switch (key) {
+			case "ArrowDown":
+				event.preventDefault();
+				focusEnabledFrom(list, currentIndex < 0 ? 0 : currentIndex + 1, 1);
+				break;
+			case "ArrowUp":
+				event.preventDefault();
+				focusEnabledFrom(list, currentIndex < 0 ? list.length - 1 : currentIndex - 1, -1);
+				break;
+			case "ArrowRight": {
+				if (current == null) break;
+				event.preventDefault();
+				const expanded = current.getAttribute("aria-expanded");
+				if (expanded === "false") options.onToggleExpand?.(current.dataset.treeId ?? "");
+				else if (expanded === "true") {
+					const next = list[currentIndex + 1];
+					if (next != null && levelOf(next) > levelOf(current)) focusItem(next);
+				}
+				break;
+			}
+			case "ArrowLeft":
+				if (current == null) break;
+				event.preventDefault();
+				if (current.getAttribute("aria-expanded") === "true") options.onToggleExpand?.(current.dataset.treeId ?? "");
+				else {
+					const currentLevel = levelOf(current);
+					for (let index = currentIndex - 1; index >= 0; index -= 1) {
+						const candidate = list[index];
+						if (candidate != null && levelOf(candidate) < currentLevel) {
+							focusItem(candidate);
+							break;
+						}
+					}
+				}
+				break;
+			case "Home":
+				event.preventDefault();
+				focusEnabledFrom(list, 0, 1);
+				break;
+			case "End":
+				event.preventDefault();
+				focusEnabledFrom(list, list.length - 1, -1);
+				break;
+			case "Enter":
+			case " ":
+				if (current == null || disabled(current)) break;
+				event.preventDefault();
+				if (!(options.onActivate?.(current) === true) && current.getAttribute("aria-expanded") != null) options.onToggleExpand?.(current.dataset.treeId ?? "");
+		}
+	}
+	function handleFocus() {
+		syncTabStops();
+	}
+	return {
+		treeRef,
+		handleKeyDown,
+		handleFocus
+	};
+}
+//#endregion
+//#region src/TreeList/TreeList.vue
+const _hoisted_1 = ["data-density", "data-variant"];
+const _hoisted_2 = ["aria-label", "aria-labelledby"];
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "AstryxTreeList",
+	inheritAttrs: false,
+	__name: "TreeList",
+	props: {
+		items: {},
+		density: { default: "balanced" },
+		variant: { default: "lineGuides" },
+		header: {},
+		label: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const headerId = `astryx-tree-list-${useId()}`;
+		const expanded = reactive({});
+		function walk(items, visit) {
+			for (const item of items) {
+				visit(item);
+				if (item.children) walk(item.children, visit);
+			}
+		}
+		walk(props.items, (item) => {
+			if (item.isExpanded && item.children && item.children.length > 0) expanded[item.id] = true;
+		});
+		function currentExpanded(id, items) {
+			let found = false;
+			let seeded = false;
+			walk(items, (item) => {
+				if (item.id === id) {
+					found = true;
+					seeded = item.isExpanded === true;
+				}
+			});
+			if (!found) return false;
+			return id in expanded ? expanded[id] === true : seeded;
+		}
+		function toggle(id) {
+			expanded[id] = !currentExpanded(id, props.items);
+		}
+		const hasExpandable = computed(() => {
+			let found = false;
+			walk(props.items, (item) => {
+				if (item.children && item.children.length > 0) found = true;
+			});
+			return found;
+		});
+		function initialTabbable(items) {
+			let firstEnabled;
+			const visit = (list) => {
+				for (const item of list) {
+					if (item.isSelected && item.isDisabled !== true) return item.id;
+					if (firstEnabled == null && item.isDisabled !== true) firstEnabled = item.id;
+					if (item.children && item.children.length > 0) {
+						const selected = visit(item.children);
+						if (selected != null) return selected;
+					}
+				}
+			};
+			return visit(items) ?? firstEnabled ?? items[0]?.id;
+		}
+		const tabbableId = computed(() => initialTabbable(props.items));
+		const { treeRef, handleKeyDown, handleFocus } = useTreeFocus({
+			onToggleExpand: toggle,
+			onActivate: (current) => {
+				const candidates = current.querySelectorAll("a[href], button:not([data-tree-toggle])");
+				for (const candidate of candidates) if (candidate.closest("[role=\"treeitem\"]") === current) {
+					candidate.click();
+					return true;
+				}
+				return false;
+			}
+		});
+		function onKeyDown(event) {
+			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),
+				"data-density": __props.density,
+				"data-variant": __props.variant,
+				onKeydown: onKeyDown
+			}, [__props.header || _ctx.$slots.header ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				id: headerId,
+				class: "astryx-tree-list__header"
+			}, [renderSlot(_ctx.$slots, "header", {}, () => [createTextVNode(toDisplayString(__props.header), 1)])])) : createCommentVNode("v-if", true), createElementVNode("ul", {
+				ref_key: "treeRef",
+				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,
+				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, {
+					key: item.id,
+					item,
+					density: __props.density,
+					variant: __props.variant,
+					"nested-level": 0,
+					"is-last": index === __props.items.length - 1,
+					"ancestors-is-last": [],
+					expanded,
+					"has-expandable-items": hasExpandable.value,
+					"tabbable-id": tabbableId.value,
+					"pos-in-set": index + 1,
+					"set-size": __props.items.length,
+					onToggle: toggle
+				}, null, 8, [
+					"item",
+					"density",
+					"variant",
+					"is-last",
+					"expanded",
+					"has-expandable-items",
+					"tabbable-id",
+					"pos-in-set",
+					"set-size"
+				]);
+			}), 128))], 40, _hoisted_2)], 46, _hoisted_1)], 2112);
+		};
+	}
+});
+//#endregion
+export { useTreeFocus as n, _sfc_main as t };

package/dist/Typeahead/index.d.ts

@@ -1,2 +1,2 @@
-import { a as TypeaheadSlots, i as TypeaheadSize, n as TypeaheadEmits, o as TypeaheadStatus, r as TypeaheadProps, t as _default } from "../index-CnVbMebA.js";
+import { a as TypeaheadSlots, i as TypeaheadSize, n as TypeaheadEmits, o as TypeaheadStatus, r as TypeaheadProps, t as _default } from "../index-Bqb_Fyju.js";
 export { _default as Typeahead, type TypeaheadEmits, type TypeaheadProps, type TypeaheadSize, type TypeaheadSlots, type TypeaheadStatus };

package/dist/Typeahead/index.js

@@ -1,2 +1,2 @@
-import { t as _sfc_main } from "../Typeahead-BMoU3hfx.js";
+import { t as _sfc_main } from "../Typeahead-DIw-K4aa.js";
 export { _sfc_main as Typeahead };