@astryx-vue/core 0.2.5 → 0.3.0

package/dist/{Selector-5N-hq2nF.js → Selector-DJ2BhUTV.js}

@@ -1,17 +1,21 @@
+import { t as _sfc_main$1 } from "./VisuallyHidden-C7NN3VEP.js";
+import { n as useButtonTooltip } from "./Button-B6Hj_O_s.js";
+import { t as _sfc_main$2 } from "./ButtonTooltip-nWWrth8j.js";
 import { t as useAnnounce } from "./announce-Cnio10Wk.js";
 import { t as useCombobox } from "./useCombobox-CTo5C-gc.js";
-import { t as useDismiss } from "./useDismiss-Cj8x_51F.js";
+import { n as useDismiss, t as usePositionedLayer } from "./usePositionedLayer-Cru9_00b.js";
 import { t as useFieldControlState } from "./useFieldControlState-voICDrys.js";
-import { o as useAstryxMessages } from "./context-CPh7kE-a.js";
-import { t as usePositionedLayer } from "./usePositionedLayer-C1NBOsVT.js";
-import { t as _sfc_main$1 } from "./BottomSheet-BV6vfgGu.js";
-import { t as _sfc_main$2 } from "./Icon-bteSId7T.js";
-import { t as _sfc_main$3 } from "./Spinner-9cYUCnDy.js";
+import { o as useAstryxMessages } from "./context-iABt_ueM.js";
+import { t as useScrollbars } from "./useScrollbars-C2NJ6Qwq.js";
+import { t as _sfc_main$3 } from "./BottomSheet-pt7m4CvC.js";
+import { t as _sfc_main$4 } from "./Icon-bteSId7T.js";
+import { t as _sfc_main$5 } from "./Spinner-9cYUCnDy.js";
 import { t as useIndicator } from "./useIndicator-i1NORM7W.js";
-import { t as _sfc_main$4 } from "./Field-8zRxzDHE.js";
+import { t as _sfc_main$6 } from "./Field-D5gUEGw4.js";
 import { t as INPUT_GROUP_KEY } from "./context-D5-MwxnN.js";
-import { n as fieldStatusPlacement, r as _sfc_main$5, t as searchResultMessage } from "./searchResultMessage-CCnq-_ce.js";
+import { n as fieldStatusPlacement, r as _sfc_main$7, t as searchResultMessage } from "./searchResultMessage-hXXNOFJP.js";
 import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, nextTick, normalizeClass, normalizeStyle, onMounted, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, useId, useSlots, useTemplateRef, vShow, watch, withCtx, withDirectives, withKeys, withModifiers } from "vue";
+import "../styles/button.css";
 import "../styles/visually-hidden-utility.css";
 import "../styles/selector.css";
 //#region src/Selector/Selector.vue
@@ -22,13 +26,13 @@ const _hoisted_1 = [
 	"aria-expanded",
 	"aria-controls",
 	"aria-readonly",
+	"aria-disabled",
 	"aria-busy",
 	"aria-required",
 	"aria-label",
 	"aria-describedby",
 	"aria-autocomplete",
-	"aria-activedescendant",
-	"title"
+	"aria-activedescendant"
 ];
 const _hoisted_2 = { class: "astryx-selector-value-label" };
 const _hoisted_3 = ["aria-label"];
@@ -103,6 +107,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			type: Boolean,
 			default: false
 		},
+		disabledMessage: {},
 		disabledReason: {},
 		status: { default: "default" },
 		statusMessage: {},
@@ -119,6 +124,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			type: Boolean,
 			default: false
 		},
+		hasClear: { type: Boolean },
 		clearLabel: {},
 		emptyText: {},
 		emptySearchText: {},
@@ -151,7 +157,10 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 	emits: [
 		"update:modelValue",
 		"change",
-		"search"
+		"search",
+		"click",
+		"focus",
+		"keydown"
 	],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
@@ -164,6 +173,8 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const resolvedPlaceholder = computed(() => props.placeholder ?? messages.value.selector.placeholder);
 		const resolvedSearchPlaceholder = computed(() => props.searchPlaceholder ?? messages.value.selector.search);
 		const resolvedClearLabel = computed(() => props.clearLabel ?? messages.value.selector.clear);
+		/** 值上的清除按钮带着字段名，读屏能听出清的是哪一项。 */
+		const valueClearLabel = computed(() => props.clearLabel ?? messages.value.selector.clearField(props.label));
 		const resolvedEmptyText = computed(() => props.emptyText ?? messages.value.selector.empty);
 		const resolvedEmptySearchText = computed(() => props.emptySearchText ?? messages.value.selector.emptySearch);
 		const inputGroup = inject(INPUT_GROUP_KEY, null);
@@ -175,10 +186,18 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		});
 		const announce = useAnnounce();
 		const readOnlyId = `${selectorId}-readonly`;
+		const disabledMessageId = `${selectorId}-disabled-message`;
+		const disabledTooltipId = `${selectorId}-disabled-tooltip`;
+		/** 旧名 disabledReason 和新名 disabledMessage 等价。 */
+		const resolvedDisabledMessage = computed(() => props.disabledMessage?.trim() || props.disabledReason?.trim());
+		const showsDisabledMessage = computed(() => control.isDisabled.value && !!resolvedDisabledMessage.value);
+		const disabledTooltip = useButtonTooltip(showsDisabledMessage);
+		const hasClear = computed(() => props.hasClear || props.clearable);
 		const fieldRef = useTemplateRef("fieldRef");
 		const listboxRef = useTemplateRef("listboxRef");
 		const searchInputRef = useTemplateRef("searchInputRef");
 		const sheetSlot = useTemplateRef("sheetSlot");
+		useScrollbars(listboxRef);
 		const isSheet = computed(() => props.presentation === "bottom-sheet");
 		const sheetLabel = computed(() => props.label || resolvedPlaceholder.value);
 		const isEnabled = control.canActivate;
@@ -315,7 +334,11 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const isSearching = computed(() => props.searchable && combobox.searchQuery.value.trim() !== "");
 		const showEmpty = computed(() => isEmpty.value && !control.isLoading.value);
 		const describedBy = computed(() => {
-			return [inGroup.value ? inputGroup?.describedBy.value : void 0, control.isReadOnly.value ? readOnlyId : void 0].filter(Boolean).join(" ") || void 0;
+			return [
+				inGroup.value ? inputGroup?.describedBy.value : void 0,
+				control.isReadOnly.value ? readOnlyId : void 0,
+				showsDisabledMessage.value ? disabledMessageId : void 0
+			].filter(Boolean).join(" ") || void 0;
 		});
 		const announcement = computed(() => searchResultMessage({
 			isOpen: combobox.isOpen.value,
@@ -329,11 +352,21 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		watch(announcement, (message) => {
 			if (message) announce(message);
 		});
-		function onTriggerClick() {
+		function onTriggerClick(event) {
+			emit("click", event);
 			if (control.canActivate.value) combobox.toggle();
 		}
+		function onTriggerFocus(event) {
+			emit("focus", event);
+			disabledTooltip.onFocus(event);
+		}
 		function onTriggerKeyDown(event) {
 			combobox.onKeyDown(event);
+			if (!event.defaultPrevented) emit("keydown", event);
+		}
+		/** 搜索框里的按键只走键盘模型，不当作触发器的事件透出。 */
+		function onSearchKeyDown(event) {
+			combobox.onKeyDown(event);
 		}
 		function onOptionClick(option) {
 			if (!option.disabled) combobox.select(option.value);
@@ -383,7 +416,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			});
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(_sfc_main$4, {
+			return openBlock(), createBlock(_sfc_main$6, {
 				class: normalizeClass(["astryx-selector", [
 					`size-${props.size}`,
 					`status-${statusType.value}`,
@@ -410,7 +443,9 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 							"is-readonly": unref(control).isReadOnly.value,
 							"is-loading": unref(control).isLoading.value,
 							"is-ghost": props.variant === "ghost"
-						}])
+						}]),
+						onPointerenter: _cache[1] || (_cache[1] = (...args) => unref(disabledTooltip).onPointerEnter && unref(disabledTooltip).onPointerEnter(...args)),
+						onPointerleave: _cache[2] || (_cache[2] = (...args) => unref(disabledTooltip).onPointerLeave && unref(disabledTooltip).onPointerLeave(...args))
 					}, [
 						createElementVNode("button", {
 							id: selectorId,
@@ -419,20 +454,22 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 								"is-open": unref(combobox).isOpen.value,
 								"is-disabled": unref(control).isDisabled.value
 							}]),
-							disabled: unref(control).isDisabled.value,
+							disabled: unref(control).isDisabled.value && !showsDisabledMessage.value,
 							role: unref(control).isReadOnly.value || !props.searchable ? "combobox" : void 0,
 							"aria-haspopup": unref(control).isReadOnly.value ? void 0 : "listbox",
 							"aria-expanded": unref(control).isReadOnly.value ? false : unref(combobox).isOpen.value,
 							"aria-controls": unref(control).isReadOnly.value ? void 0 : listboxId,
 							"aria-readonly": unref(control).isReadOnly.value || void 0,
+							"aria-disabled": showsDisabledMessage.value || void 0,
 							"aria-busy": unref(control).isLoading.value || void 0,
 							"aria-required": props.isRequired || void 0,
 							"aria-label": props.label,
 							"aria-describedby": describedBy.value,
 							"aria-autocomplete": props.searchable ? void 0 : "none",
 							"aria-activedescendant": !props.searchable && !unref(control).isReadOnly.value && unref(combobox).activeIndex.value >= 0 ? getOptionId(unref(combobox).activeIndex.value) : void 0,
-							title: props.disabledReason,
 							onClick: onTriggerClick,
+							onFocus: onTriggerFocus,
+							onBlur: _cache[0] || (_cache[0] = (...args) => unref(disabledTooltip).onBlur && unref(disabledTooltip).onBlur(...args)),
 							onKeydown: onTriggerKeyDown
 						}, [createElementVNode("span", { class: normalizeClass(["astryx-selector-value", {
 							"is-placeholder": !selectedOption.value,
@@ -443,23 +480,23 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 							class: normalizeClass(["astryx-selector-value-icon", selectedOption.value.icon]),
 							"aria-hidden": "true"
 						}, null, 2)) : createCommentVNode("v-if", true), createElementVNode("span", _hoisted_2, toDisplayString(displayText.value), 1)], 64))], 2)], 42, _hoisted_1),
-						unref(control).isLoading.value ? (openBlock(), createBlock(_sfc_main$3, {
+						unref(control).isLoading.value ? (openBlock(), createBlock(_sfc_main$5, {
 							key: 0,
 							class: "astryx-selector-spinner",
 							size: "sm",
 							"aria-label": unref(messages).selector.loading
 						}, null, 8, ["aria-label"])) : createCommentVNode("v-if", true),
-						props.clearable && selectedOption.value && unref(control).canActivate.value ? (openBlock(), createElementBlock("button", {
+						hasClear.value && selectedOption.value && unref(control).canActivate.value ? (openBlock(), createElementBlock("button", {
 							key: 1,
 							type: "button",
 							class: "astryx-selector-clear",
-							"aria-label": resolvedClearLabel.value,
+							"aria-label": valueClearLabel.value,
 							onClick: onClear
-						}, [createVNode(_sfc_main$2, {
+						}, [createVNode(_sfc_main$4, {
 							icon: "close",
 							size: "sm"
 						})], 8, _hoisted_3)) : createCommentVNode("v-if", true),
-						statusGlyph.value ? (openBlock(), createBlock(_sfc_main$5, {
+						statusGlyph.value ? (openBlock(), createBlock(_sfc_main$7, {
 							key: 2,
 							type: statusGlyph.value,
 							message: fieldStatus.value?.message,
@@ -468,7 +505,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 							"type",
 							"message",
 							"tooltip"
-						])) : unref(control).canActivate.value ? (openBlock(), createBlock(_sfc_main$2, {
+						])) : unref(control).canActivate.value ? (openBlock(), createBlock(_sfc_main$4, {
 							key: 3,
 							class: "astryx-selector-icon",
 							icon: "chevronDown",
@@ -479,11 +516,33 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 							id: readOnlyId,
 							class: "astryx-visually-hidden"
 						}, toDisplayString(unref(messages).selector.readOnly), 1)) : createCommentVNode("v-if", true)
-					], 2),
-					isSheet.value ? (openBlock(), createBlock(_sfc_main$1, {
+					], 34),
+					showsDisabledMessage.value ? (openBlock(), createBlock(_sfc_main$1, {
 						key: 0,
+						id: disabledMessageId
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(resolvedDisabledMessage.value), 1)]),
+						_: 1
+					})) : createCommentVNode("v-if", true),
+					showsDisabledMessage.value ? (openBlock(), createBlock(_sfc_main$2, {
+						key: 1,
+						id: disabledTooltipId,
+						anchor: fieldRef.value,
+						open: unref(disabledTooltip).isOpen.value,
+						text: resolvedDisabledMessage.value ?? "",
+						onPointerEnter: unref(disabledTooltip).onTooltipPointerEnter,
+						onPointerLeave: unref(disabledTooltip).onTooltipPointerLeave
+					}, null, 8, [
+						"anchor",
+						"open",
+						"text",
+						"onPointerEnter",
+						"onPointerLeave"
+					])) : createCommentVNode("v-if", true),
+					isSheet.value ? (openBlock(), createBlock(_sfc_main$3, {
+						key: 2,
 						"is-open": sheetOpen.value,
-						"onUpdate:isOpen": _cache[0] || (_cache[0] = ($event) => sheetOpen.value = $event),
+						"onUpdate:isOpen": _cache[3] || (_cache[3] = ($event) => sheetOpen.value = $event),
 						height: "hug",
 						label: sheetLabel.value,
 						padding: 2
@@ -505,7 +564,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 						style: normalizeStyle(listboxStyle.value),
 						tabindex: "-1"
 					}, [props.searchable ? (openBlock(), createElementBlock("div", _hoisted_6, [
-						createVNode(_sfc_main$2, {
+						createVNode(_sfc_main$4, {
 							class: "astryx-selector-search-icon",
 							icon: "search",
 							size: "sm"
@@ -526,7 +585,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 							placeholder: resolvedSearchPlaceholder.value,
 							value: unref(combobox).searchQuery.value,
 							onInput: onSearchInput,
-							onKeydown: onTriggerKeyDown
+							onKeydown: onSearchKeyDown
 						}, null, 40, _hoisted_7),
 						unref(combobox).searchQuery.value ? (openBlock(), createElementBlock("button", {
 							key: 0,
@@ -534,7 +593,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 							class: "astryx-selector-search-clear",
 							"aria-label": resolvedClearLabel.value,
 							onClick: clearSearch
-						}, [createVNode(_sfc_main$2, {
+						}, [createVNode(_sfc_main$4, {
 							icon: "close",
 							size: "sm"
 						})], 8, _hoisted_8)) : createCommentVNode("v-if", true)
@@ -578,7 +637,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 						], 42, _hoisted_11)) : createCommentVNode("v-if", true)], 64);
 					}), 128))])) : showEmpty.value ? (openBlock(), createElementBlock("div", _hoisted_18, [!isSearching.value && unref(slots).empty ? renderSlot(_ctx.$slots, "empty", {}, void 0, void 0, 0) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(isSearching.value ? resolvedEmptySearchText.value : resolvedEmptyText.value), 1)], 64))])) : createCommentVNode("v-if", true)], 14, _hoisted_5), [[vShow, unref(combobox).isOpen.value]])], 8, ["to"])),
 					props.name ? (openBlock(), createElementBlock("select", {
-						key: 1,
+						key: 3,
 						id: `${selectorId}-hidden-select`,
 						name: props.name,
 						value: props.modelValue ?? "",
@@ -591,7 +650,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 							"width": "1px",
 							"height": "1px"
 						}
-					}, [_cache[1] || (_cache[1] = createElementVNode("option", { value: "" }, null, -1)), (openBlock(true), createElementBlock(Fragment, null, renderList(flatOptions.value, (option) => {
+					}, [_cache[4] || (_cache[4] = createElementVNode("option", { value: "" }, null, -1)), (openBlock(true), createElementBlock(Fragment, null, renderList(flatOptions.value, (option) => {
 						return openBlock(), createElementBlock("option", {
 							key: option.value,
 							value: option.value

package/dist/SideNav/index.d.ts

@@ -1,2 +1,2 @@
-import { $t as useSideNavCollapse, Bt as _default$1, Gt as SideNavHandle, Ht as SideNavCollapseButtonProps, Jt as SideNavItemProps, Kt as SideNavHeadingProps, Lt as _default$4, Qt as SideNavCollapseContext, Rt as _default$3, Ut as SideNavCollapsible, Vt as _default, Wt as SideNavEmits, Xt as SideNavResizable, Yt as SideNavProps, Zt as SideNavSectionProps, qt as SideNavItemEmits, zt as _default$2 } from "../index-B9rqmYxh.js";
-export { _default as SideNav, _default$1 as SideNavCollapseButton, type SideNavCollapseButtonProps, type SideNavCollapseContext, type SideNavCollapsible, type SideNavEmits, type SideNavHandle, _default$2 as SideNavHeading, type SideNavHeadingProps, _default$3 as SideNavItem, type SideNavItemEmits, type SideNavItemProps, type SideNavProps, type SideNavResizable, _default$4 as SideNavSection, type SideNavSectionProps, useSideNavCollapse };
+import { $n as _default$3, Qn as _default$4, _r as useSideNavCollapse, ar as SideNavCollapseButtonSlots, cr as SideNavEmits, dr as SideNavItemEmits, er as _default$2, fr as SideNavItemProps, gr as SideNavCollapseContext, hr as SideNavSectionProps, ir as SideNavCollapseButtonSize, lr as SideNavHandle, mr as SideNavResizable, nr as _default, or as SideNavCollapsible, pr as SideNavProps, rr as SideNavCollapseButtonProps, sr as SideNavControlledCollapsible, tr as _default$1, ur as SideNavHeadingProps } from "../index-DUaLJO7l.js";
+export { _default as SideNav, _default$1 as SideNavCollapseButton, type SideNavCollapseButtonProps, type SideNavCollapseButtonSize, type SideNavCollapseButtonSlots, type SideNavCollapseContext, type SideNavCollapsible, type SideNavControlledCollapsible, type SideNavEmits, type SideNavHandle, _default$2 as SideNavHeading, type SideNavHeadingProps, _default$3 as SideNavItem, type SideNavItemEmits, type SideNavItemProps, type SideNavProps, type SideNavResizable, _default$4 as SideNavSection, type SideNavSectionProps, useSideNavCollapse };

package/dist/SideNav/index.js

@@ -1,3 +1,3 @@
 import { r as useSideNavCollapse } from "../context-BjNya0v8.js";
-import { a as _sfc_main$1, i as _sfc_main, n as _sfc_main$3, r as _sfc_main$2, t as _sfc_main$4 } from "../SideNav-CT9lfspi.js";
+import { a as _sfc_main$1, i as _sfc_main, n as _sfc_main$3, r as _sfc_main$2, t as _sfc_main$4 } from "../SideNav-BF8mYDxl.js";
 export { _sfc_main as SideNav, _sfc_main$1 as SideNavCollapseButton, _sfc_main$2 as SideNavHeading, _sfc_main$3 as SideNavItem, _sfc_main$4 as SideNavSection, useSideNavCollapse };

package/dist/{SideNav-CT9lfspi.js → SideNav-BF8mYDxl.js}

@@ -1,24 +1,22 @@
+import { n as useLinkComponent } from "./context-C_peZbXf.js";
+import { t as _sfc_main$5 } from "./Button-B6Hj_O_s.js";
 import { t as useHandleRef } from "./useHandleRef-6cdKugm8.js";
 import { n as useResizable, r as useHotkeys } from "./useResizable-B3ahKLoZ.js";
-import { o as useAstryxMessages } from "./context-CPh7kE-a.js";
-import { t as _sfc_main$5 } from "./Tooltip-C2fh9anJ.js";
+import { o as useAstryxMessages } from "./context-iABt_ueM.js";
+import { t as _sfc_main$6 } from "./Tooltip-C4Vaqd3G.js";
+import { t as useScrollbars } from "./useScrollbars-C2NJ6Qwq.js";
 import { i as useSideNavRenderMode, r as useSideNavCollapse, t as sideNavCollapseKey } from "./context-BjNya0v8.js";
-import { t as _sfc_main$6 } from "./Icon-bteSId7T.js";
-import { n as resolveNavRoot } from "./link-CdcUSxAj.js";
-import { t as _sfc_main$7 } from "./NavItem-FFOisITc.js";
-import { t as _sfc_main$8 } from "./NavDisclosure-C6sPZ89n.js";
-import { t as _sfc_main$9 } from "./ResizeHandle-DYy0e3v9.js";
-import { t as _sfc_main$10 } from "./NavHeadingSurface-Cb3x9iDx.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createVNode, defineComponent, getCurrentInstance, guardReactiveProps, normalizeClass, normalizeProps, normalizeStyle, openBlock, provide, reactive, ref, renderSlot, resolveDynamicComponent, toDisplayString, unref, useId, useSlots, watch, watchEffect, withCtx, withModifiers } from "vue";
+import { t as _sfc_main$7 } from "./Icon-bteSId7T.js";
+import { n as resolveNavRoot } from "./link-C4_WogdF.js";
+import { t as _sfc_main$8 } from "./NavItem-BBIGSvDj.js";
+import { t as _sfc_main$9 } from "./NavDisclosure-C_fugrQ3.js";
+import { t as _sfc_main$10 } from "./ResizeHandle-q4nD_586.js";
+import { t as _sfc_main$11 } from "./NavHeadingSurface-B3yJspSN.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createVNode, defineComponent, getCurrentInstance, guardReactiveProps, inject, normalizeClass, normalizeProps, normalizeStyle, openBlock, provide, reactive, ref, renderSlot, resolveDynamicComponent, toDisplayString, unref, useId, useSlots, useTemplateRef, watch, watchEffect, withCtx, withModifiers } from "vue";
 import "../styles/visually-hidden.css";
 import "../styles/side-nav.css";
 //#region src/SideNav/SideNavCollapseButton.vue
-const _hoisted_1$4 = [
-	"aria-label",
-	"aria-expanded",
-	"aria-controls"
-];
-const _hoisted_2$4 = {
+const _hoisted_1$4 = {
 	class: "astryx-side-nav-collapse__mirror",
 	"aria-hidden": "true"
 };
@@ -27,10 +25,12 @@ const _sfc_main$4 = /*@__PURE__*/ defineComponent({
 	__name: "SideNavCollapseButton",
 	props: {
 		label: {},
+		collapsible: { default: void 0 },
 		isCollapsed: {
 			type: Boolean,
 			default: void 0
-		}
+		},
+		size: { default: void 0 }
 	},
 	emits: ["update:isCollapsed"],
 	setup(__props, { emit: __emit }) {
@@ -38,31 +38,52 @@ const _sfc_main$4 = /*@__PURE__*/ defineComponent({
 		const emit = __emit;
 		const collapse = useSideNavCollapse();
 		const messages = useAstryxMessages();
+		const inSideNav = inject(sideNavCollapseKey, null) !== null;
+		/** The controlled config handed in from outside; it outranks `v-model:isCollapsed`. */
+		const controlled = computed(() => props.collapsible ?? null);
 		const usingModel = computed(() => props.isCollapsed !== void 0);
-		const visible = computed(() => usingModel.value || collapse.isCollapsible.value);
-		const collapsed = computed(() => usingModel.value ? Boolean(props.isCollapsed) : collapse.isCollapsed.value);
+		const visible = computed(() => controlled.value != null || usingModel.value || collapse.isCollapsible.value);
+		const collapsed = computed(() => {
+			if (controlled.value != null) return Boolean(controlled.value.isCollapsed);
+			return usingModel.value ? Boolean(props.isCollapsed) : collapse.isCollapsed.value;
+		});
+		const size = computed(() => props.size ?? (inSideNav ? "sm" : "md"));
 		const label = computed(() => {
 			if (props.label) return props.label;
 			return collapsed.value ? messages.value.nav.expandSidebar : messages.value.nav.collapseSidebar;
 		});
+		/** A visible label turns the icon-only square into a text button. */
+		const hasVisibleLabel = computed(() => Boolean(props.label));
 		function onClick() {
-			if (usingModel.value) emit("update:isCollapsed", !collapsed.value);
+			if (controlled.value != null) controlled.value.onCollapsedChange(!collapsed.value);
+			else if (usingModel.value) emit("update:isCollapsed", !collapsed.value);
 			else collapse.toggle();
 		}
 		return (_ctx, _cache) => {
-			return visible.value ? (openBlock(), createElementBlock("button", {
+			return visible.value ? (openBlock(), createBlock(_sfc_main$5, {
 				key: 0,
-				type: "button",
 				class: "astryx-side-nav-collapse",
-				"aria-label": label.value,
+				label: label.value,
+				size: size.value,
+				"is-icon-only": !hasVisibleLabel.value,
+				variant: "ghost",
 				"aria-expanded": collapsed.value ? "false" : "true",
 				"aria-controls": unref(collapse).navId || void 0,
 				onClick
-			}, [createElementVNode("span", _hoisted_2$4, [createVNode(_sfc_main$6, {
-				icon: "chevronLeft",
-				size: "sm",
-				class: normalizeClass(["astryx-side-nav-collapse__chevron", { "astryx-side-nav-collapse__chevron--collapsed": collapsed.value }])
-			}, null, 8, ["class"])])], 8, _hoisted_1$4)) : createCommentVNode("v-if", true);
+			}, {
+				icon: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, () => [createElementVNode("span", _hoisted_1$4, [createVNode(_sfc_main$7, {
+					icon: "chevronLeft",
+					size: "sm",
+					class: normalizeClass(["astryx-side-nav-collapse__chevron", { "astryx-side-nav-collapse__chevron--collapsed": collapsed.value }])
+				}, null, 8, ["class"])])])]),
+				_: 3
+			}, 8, [
+				"label",
+				"size",
+				"is-icon-only",
+				"aria-expanded",
+				"aria-controls"
+			])) : createCommentVNode("v-if", true);
 		};
 	}
 });
@@ -182,7 +203,10 @@ const _hoisted_4$3 = {
 	key: 0,
 	class: "astryx-side-nav__top-content"
 };
-const _hoisted_5$2 = { class: "astryx-side-nav__body" };
+const _hoisted_5$2 = {
+	ref: "body",
+	class: "astryx-side-nav__body"
+};
 const _hoisted_6$2 = {
 	key: 1,
 	class: "astryx-side-nav__bottom"
@@ -204,7 +228,10 @@ const _hoisted_11 = {
 	key: 1,
 	class: "astryx-side-nav__top-content"
 };
-const _hoisted_12 = { class: "astryx-side-nav__body" };
+const _hoisted_12 = {
+	ref: "body",
+	class: "astryx-side-nav__body"
+};
 const _hoisted_13 = {
 	key: 1,
 	class: "astryx-side-nav__bottom"
@@ -244,6 +271,8 @@ const _sfc_main$3 = /*@__PURE__*/ defineComponent({
 		const messages = useAstryxMessages();
 		const navId = `astryx-side-nav-${useId()}`;
 		const localCollapsed = ref(false);
+		const bodyEl = useTemplateRef("body");
+		useScrollbars(bodyEl);
 		const config = computed(() => typeof props.collapsible === "object" ? props.collapsible : {});
 		function controlledCollapsed() {
 			if (props.isCollapsed !== void 0) return props.isCollapsed;
@@ -320,7 +349,7 @@ const _sfc_main$3 = /*@__PURE__*/ defineComponent({
 		return (_ctx, _cache) => {
 			return unref(renderMode) === "topbar" ? (openBlock(), createElementBlock("div", _hoisted_1$3, [renderSlot(_ctx.$slots, "header"), slots.footerIcons ? (openBlock(), createElementBlock("div", _hoisted_2$3, [renderSlot(_ctx.$slots, "footerIcons")])) : createCommentVNode("v-if", true)])) : unref(renderMode) === "drawer" || unref(renderMode) === "drawer-content" ? (openBlock(), createElementBlock("div", _hoisted_3$3, [
 				slots.top ? (openBlock(), createElementBlock("div", _hoisted_4$3, [renderSlot(_ctx.$slots, "top")])) : createCommentVNode("v-if", true),
-				createElementVNode("div", _hoisted_5$2, [renderSlot(_ctx.$slots, "default")]),
+				createElementVNode("div", _hoisted_5$2, [renderSlot(_ctx.$slots, "default")], 512),
 				hasBottom.value ? (openBlock(), createElementBlock("div", _hoisted_6$2, [renderSlot(_ctx.$slots, "footer"), slots.footerIcons ? (openBlock(), createElementBlock("div", _hoisted_7$1, [renderSlot(_ctx.$slots, "footerIcons")])) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true)
 			])) : (openBlock(), createElementBlock("div", {
 				key: 2,
@@ -339,9 +368,9 @@ const _sfc_main$3 = /*@__PURE__*/ defineComponent({
 					key: 0,
 					label: config.value.buttonLabel
 				}, null, 8, ["label"])) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true), slots.top ? (openBlock(), createElementBlock("div", _hoisted_11, [renderSlot(_ctx.$slots, "top")])) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true),
-				createElementVNode("div", _hoisted_12, [renderSlot(_ctx.$slots, "default")]),
+				createElementVNode("div", _hoisted_12, [renderSlot(_ctx.$slots, "default")], 512),
 				hasBottom.value ? (openBlock(), createElementBlock("div", _hoisted_13, [renderSlot(_ctx.$slots, "footer"), slots.footerIcons ? (openBlock(), createElementBlock("div", _hoisted_14, [renderSlot(_ctx.$slots, "footerIcons")])) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true)
-			], 14, _hoisted_8$1), showResizeHandle.value ? (openBlock(), createBlock(_sfc_main$9, {
+			], 14, _hoisted_8$1), showResizeHandle.value ? (openBlock(), createBlock(_sfc_main$10, {
 				key: 0,
 				"data-testid": "astryx-sidenav-resize-handle",
 				direction: "horizontal",
@@ -387,17 +416,20 @@ const _sfc_main$2 = /*@__PURE__*/ defineComponent({
 		const props = __props;
 		const slots = useSlots();
 		const collapse = useSideNavCollapse();
+		const linkComponent = useLinkComponent();
 		const collapsed = computed(() => collapse.isCollapsed.value);
 		const hasIcon = computed(() => slots.icon != null);
 		const hasMenu = computed(() => slots.menu != null);
-		const linkRoot = computed(() => resolveNavRoot(props.headingHref, false, props.as));
+		/** 自己的 `as` 优先，其次是 LinkProvider 给的默认链接组件。 */
+		const customLink = computed(() => props.as ?? linkComponent.value);
+		const linkRoot = computed(() => resolveNavRoot(props.headingHref, false, customLink.value));
 		return (_ctx, _cache) => {
-			return collapsed.value && hasIcon.value ? (openBlock(), createBlock(_sfc_main$5, {
+			return collapsed.value && hasIcon.value ? (openBlock(), createBlock(_sfc_main$6, {
 				key: 0,
 				content: __props.heading,
 				placement: "end"
 			}, {
-				default: withCtx(() => [hasMenu.value ? (openBlock(), createBlock(_sfc_main$8, {
+				default: withCtx(() => [hasMenu.value ? (openBlock(), createBlock(_sfc_main$9, {
 					key: 0,
 					hover: "",
 					placement: "end",
@@ -420,7 +452,7 @@ const _sfc_main$2 = /*@__PURE__*/ defineComponent({
 					key: 1,
 					class: "astryx-side-nav-heading astryx-side-nav-heading--collapsed",
 					href: __props.headingHref,
-					to: __props.as != null ? __props.headingHref : void 0,
+					to: customLink.value != null ? __props.headingHref : void 0,
 					"aria-label": __props.heading
 				}, {
 					default: withCtx(() => [createElementVNode("span", _hoisted_4$2, [renderSlot(_ctx.$slots, "icon")])]),
@@ -431,7 +463,7 @@ const _sfc_main$2 = /*@__PURE__*/ defineComponent({
 					"aria-label"
 				])) : (openBlock(), createElementBlock("div", _hoisted_5$1, [createElementVNode("span", _hoisted_6$1, [renderSlot(_ctx.$slots, "icon")])]))]),
 				_: 3
-			}, 8, ["content"])) : (openBlock(), createBlock(_sfc_main$10, {
+			}, 8, ["content"])) : (openBlock(), createBlock(_sfc_main$11, {
 				key: 1,
 				kind: "side",
 				as: __props.as,
@@ -567,12 +599,12 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 		}
 		const toggleLabel = computed(() => nestedCollapsed.value ? messages.value.nav.expandItem(props.label) : messages.value.nav.collapseItem(props.label));
 		return (_ctx, _cache) => {
-			return sidebarCollapsed.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [hasIcon.value && !hasChildren.value ? (openBlock(), createBlock(_sfc_main$5, {
+			return sidebarCollapsed.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [hasIcon.value && !hasChildren.value ? (openBlock(), createBlock(_sfc_main$6, {
 				key: 0,
 				content: __props.label,
 				placement: "end"
 			}, {
-				default: withCtx(() => [createVNode(_sfc_main$7, {
+				default: withCtx(() => [createVNode(_sfc_main$8, {
 					block: "",
 					"is-icon-only": "",
 					as: __props.as,
@@ -607,7 +639,7 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 					"target"
 				])]),
 				_: 3
-			}, 8, ["content"])) : hasIcon.value ? (openBlock(), createBlock(_sfc_main$8, {
+			}, 8, ["content"])) : hasIcon.value ? (openBlock(), createBlock(_sfc_main$9, {
 				key: 1,
 				hover: "",
 				placement: "end",
@@ -634,7 +666,7 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 			}, 8, ["label"])) : createCommentVNode("v-if", true)], 64)) : (openBlock(), createElementBlock("div", _hoisted_5, [splitToggle.value ? (openBlock(), createElementBlock("div", {
 				key: 0,
 				class: normalizeClass(["astryx-nav-item astryx-nav-item--block", [`astryx-nav-item--${__props.size}`, { "astryx-nav-item--selected": __props.isSelected }]])
-			}, [createVNode(_sfc_main$7, {
+			}, [createVNode(_sfc_main$8, {
 				plain: "",
 				class: "astryx-side-nav-item__split",
 				as: __props.as,
@@ -682,11 +714,11 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 				"aria-controls": childrenId,
 				"aria-label": toggleLabel.value,
 				onClick: withModifiers(toggleNested, ["stop"])
-			}, [createVNode(_sfc_main$6, {
+			}, [createVNode(_sfc_main$7, {
 				icon: "chevronDown",
 				size: "sm",
 				class: normalizeClass(["astryx-side-nav-item__chevron", { "astryx-side-nav-item__chevron--open": !nestedCollapsed.value }])
-			}, null, 8, ["class"])], 8, _hoisted_6)], 2)) : (openBlock(), createBlock(_sfc_main$7, {
+			}, null, 8, ["class"])], 8, _hoisted_6)], 2)) : (openBlock(), createBlock(_sfc_main$8, {
 				key: 1,
 				block: "",
 				as: __props.as,
@@ -715,7 +747,7 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 				} : void 0,
 				_ctx.$slots.end || canNest.value ? {
 					name: "end",
-					fn: withCtx(() => [renderSlot(_ctx.$slots, "end"), canNest.value ? (openBlock(), createBlock(_sfc_main$6, {
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "end"), canNest.value ? (openBlock(), createBlock(_sfc_main$7, {
 						key: 0,
 						icon: "chevronDown",
 						size: "sm",

package/dist/Slider/index.d.ts

@@ -1,2 +1,2 @@
-import { a as SliderProps, c as SliderValueDisplay, i as SliderOrientation, n as SliderEmits, o as SliderSlots, r as SliderMark, s as SliderValue, t as _default } from "../index-BIPc1v82.js";
+import { a as SliderProps, c as SliderValueDisplay, i as SliderOrientation, n as SliderEmits, o as SliderSlots, r as SliderMark, s as SliderValue, t as _default } from "../index-TntQsADQ.js";
 export { _default as Slider, type SliderEmits, type SliderMark, type SliderOrientation, type SliderProps, type SliderSlots, type SliderValue, type SliderValueDisplay };

package/dist/Slider/index.js

@@ -1,2 +1,2 @@
-import { t as _sfc_main } from "../Slider-D8h_RKcF.js";
+import { t as _sfc_main } from "../Slider-DWobsPgm.js";
 export { _sfc_main as Slider };

package/dist/{Slider-D8h_RKcF.js → Slider-DWobsPgm.js}

@@ -1,7 +1,7 @@
 import { t as _sfc_main$2 } from "./VisuallyHidden-C7NN3VEP.js";
-import { n as useButtonTooltip } from "./Button-DrqeomlE.js";
+import { n as useButtonTooltip } from "./Button-B6Hj_O_s.js";
 import { t as _sfc_main$3 } from "./ButtonTooltip-nWWrth8j.js";
-import { t as _sfc_main$4 } from "./Field-8zRxzDHE.js";
+import { t as _sfc_main$4 } from "./Field-D5gUEGw4.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, mergeModels, mergeProps, normalizeStyle, openBlock, renderList, renderSlot, shallowRef, toDisplayString, unref, useAttrs, useId, useModel, useTemplateRef, watch, withCtx, withKeys } from "vue";
 import "../styles/button.css";
 import "../styles/slider.css";

package/dist/Stack/index.d.ts

@@ -1,3 +1,3 @@
-import { a as StackDirection, c as StackItemProps, d as StackProps, f as StackSizeValue, i as StackCrossAlignment, l as StackItemSize, m as VStackProps, n as SpacingStep, o as StackElement, p as StackWrap, r as StackAlignment, s as StackItemCrossAlignSelf, t as HStackProps, u as StackMainAlignment } from "../types-D7QNSqoN.js";
-import { i as _default, n as _default$2, r as _default$1, t as _default$3 } from "../index-BpH4wvsg.js";
+import { a as StackDirection, c as StackItemProps, d as StackProps, f as StackSizeValue, i as StackCrossAlignment, l as StackItemSize, m as VStackProps, n as SpacingStep, o as StackElement, p as StackWrap, r as StackAlignment, s as StackItemCrossAlignSelf, t as HStackProps, u as StackMainAlignment } from "../types-BTk0WZ0b.js";
+import { i as _default, n as _default$2, r as _default$1, t as _default$3 } from "../index-BgT6mH3U.js";
 export { _default as HStack, type HStackProps, type SpacingStep, _default$1 as Stack, type StackAlignment, type StackCrossAlignment, type StackDirection, type StackElement, _default$2 as StackItem, type StackItemCrossAlignSelf, type StackItemProps, type StackItemSize, type StackMainAlignment, type StackProps, type StackSizeValue, type StackWrap, _default$3 as VStack, type VStackProps };

package/dist/Stack/index.js

@@ -1,3 +1,3 @@
-import { t as _sfc_main$1 } from "../Stack-gGcYdOAh.js";
-import { n as _sfc_main$2, r as _sfc_main, t as _sfc_main$3 } from "../Stack-iv52y_Jv.js";
+import { t as _sfc_main$1 } from "../Stack-kQlYbbL4.js";
+import { n as _sfc_main$2, r as _sfc_main, t as _sfc_main$3 } from "../Stack-CTsTFfar.js";
 export { _sfc_main as HStack, _sfc_main$1 as Stack, _sfc_main$2 as StackItem, _sfc_main$3 as VStack };