@astryx-vue/core 0.2.5 → 0.3.0

package/THIRD_PARTY_NOTICES.md

@@ -43,3 +43,12 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
+
+## OverlayScrollbars
+
+`ScrollbarsProvider` uses OverlayScrollbars as a runtime dependency. It is installed from npm and is not copied into this package. `styles/scrollbars.css` imports its stylesheet into the `astryx.base` layer and defines the `os-theme-astryx` theme.
+
+- Repository: <https://github.com/KingSora/OverlayScrollbars>
+- Version: `2.16.0`
+- License: MIT
+- Copyright: (c) Rene Haas | KingSora

package/dist/AlertDialog/index.js

@@ -1,2 +1,2 @@
-import { n as _sfc_main, t as useImperativeAlertDialog } from "../AlertDialog-B6UeBCE7.js";
+import { n as _sfc_main, t as useImperativeAlertDialog } from "../AlertDialog-RAVA_cT1.js";
 export { _sfc_main as AlertDialog, useImperativeAlertDialog };

package/dist/{AlertDialog-B6UeBCE7.js → AlertDialog-RAVA_cT1.js}

@@ -1,16 +1,20 @@
-import { t as _sfc_main$1 } from "./Button-DrqeomlE.js";
+import { t as _sfc_main$1 } from "./Button-B6Hj_O_s.js";
 import { t as useMediaQuery } from "./useMediaQuery-GMmgp28-.js";
-import { t as _sfc_main$2 } from "./Dialog-rfUt3y8P.js";
-import { t as _sfc_main$3 } from "./Heading-B9C3LZlS.js";
-import { t as _sfc_main$4 } from "./Stack-gGcYdOAh.js";
-import { t as _sfc_main$5 } from "./Text-DIzZw6FA.js";
+import { t as _sfc_main$2 } from "./Dialog-FGHfDu5M.js";
+import { t as _sfc_main$3 } from "./Heading-BnwWEWkp.js";
+import { t as useScrollbars } from "./useScrollbars-C2NJ6Qwq.js";
+import { t as _sfc_main$4 } from "./Stack-kQlYbbL4.js";
+import { t as _sfc_main$5 } from "./Text-CV3LmscH.js";
 import { Fragment, computed, createBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, h, mergeProps, normalizeClass, openBlock, provide, ref, renderList, renderSlot, shallowRef, toDisplayString, unref, useId, useTemplateRef, withCtx } from "vue";
 import "../styles/alert-dialog.css";
 //#region src/AlertDialog/context.ts
 const ALERT_DIALOG_CONTEXT_KEY = Symbol("astryx-alert-dialog");
 //#endregion
 //#region src/AlertDialog/AlertDialog.vue
-const _hoisted_1 = { class: "astryx-alert-dialog__content" };
+const _hoisted_1 = {
+	ref: "content",
+	class: "astryx-alert-dialog__content"
+};
 const _hoisted_2 = { class: "astryx-alert-dialog__footer" };
 /**
 * Order is part of the contract, not just the visual: on a narrow screen the
@@ -51,6 +55,8 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			titleId
 		});
 		const dialog = useTemplateRef("dialog");
+		const contentEl = useTemplateRef("content");
+		useScrollbars(contentEl);
 		const element = computed(() => {
 			const rendered = dialog.value?.$el;
 			return rendered instanceof HTMLElement ? rendered : null;
@@ -120,7 +126,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				}, {
 					default: withCtx(() => [renderSlot(_ctx.$slots, "description", {}, () => [createTextVNode(toDisplayString(__props.description), 1)])]),
 					_: 3
-				})]), createElementVNode("div", _hoisted_2, [createVNode(_sfc_main$4, {
+				})], 512), createElementVNode("div", _hoisted_2, [createVNode(_sfc_main$4, {
 					class: "astryx-alert-dialog__actions",
 					direction: unref(isSmallScreen) ? "vertical" : "horizontal",
 					gap: 2,

package/dist/AppShell/index.d.ts

@@ -1,2 +1,2 @@
-import { a as AppShellMobileNav, c as AppShellVariant, i as AppShellHeight, n as AppShellBreakpoint, o as AppShellProps, r as AppShellEmits, s as AppShellSlots, t as _default } from "../index-CA6RbRWx.js";
+import { a as AppShellMobileNav, c as AppShellVariant, i as AppShellHeight, n as AppShellBreakpoint, o as AppShellProps, r as AppShellEmits, s as AppShellSlots, t as _default } from "../index-TXcNH86P.js";
 export { _default as AppShell, type AppShellBreakpoint, type AppShellEmits, type AppShellHeight, type AppShellMobileNav, type AppShellProps, type AppShellSlots, type AppShellVariant };

package/dist/AppShell/index.js

@@ -1,2 +1,2 @@
-import { t as _sfc_main } from "../AppShell-CeBmB0Q9.js";
+import { t as _sfc_main } from "../AppShell-0wTvOo3H.js";
 export { _sfc_main as AppShell };

package/dist/{AppShell-CeBmB0Q9.js → AppShell-0wTvOo3H.js}

@@ -1,7 +1,7 @@
 import { t as appShellMobileKey } from "./useAppShellMobile-DTsyuAJ4.js";
-import { o as useAstryxMessages } from "./context-CPh7kE-a.js";
-import { a as _sfc_main$2, n as _sfc_main$4, r as _sfc_main$3, t as _sfc_main$5 } from "./LayoutPanel-C34uOq3e.js";
-import { n as _sfc_main$7, t as _sfc_main$6 } from "./MobileNavToggle-Dh3uLivq.js";
+import { o as useAstryxMessages } from "./context-iABt_ueM.js";
+import { a as _sfc_main$2, n as _sfc_main$4, r as _sfc_main$3, t as _sfc_main$5 } from "./LayoutPanel-DXOsaeQb.js";
+import { n as _sfc_main$7, t as _sfc_main$6 } from "./MobileNavToggle-DxGz0xKA.js";
 import { n as sideNavRenderModeKey } from "./context-BjNya0v8.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createVNode, defineComponent, mergeModels, mergeProps, openBlock, provide, reactive, ref, renderSlot, toDisplayString, unref, useAttrs, useId, useModel, useSlots, useTemplateRef, watch, withCtx } from "vue";
 import "../styles/app-shell.css";

package/dist/Avatar/index.d.ts

@@ -1,2 +1,2 @@
-import { a as AvatarProps, c as AvatarStatusDotProps, i as AvatarNumericSize, l as AvatarStatusDotVariant, n as _default, o as AvatarShape, r as AvatarNamedSize, s as AvatarSize, t as _default$1 } from "../index-BmmdzwT9.js";
-export { _default as Avatar, type AvatarNamedSize, type AvatarNumericSize, type AvatarProps, type AvatarShape, type AvatarSize, _default$1 as AvatarStatusDot, type AvatarStatusDotProps, type AvatarStatusDotVariant };
+import { a as AvatarProps, c as AvatarStatusDotProps, d as AvatarStatusDotVariantName, i as AvatarNumericSize, l as AvatarStatusDotSlots, n as _default, o as AvatarShape, r as AvatarNamedSize, s as AvatarSize, t as _default$1, u as AvatarStatusDotVariant } from "../index-DNA2l1RN.js";
+export { _default as Avatar, type AvatarNamedSize, type AvatarNumericSize, type AvatarProps, type AvatarShape, type AvatarSize, _default$1 as AvatarStatusDot, type AvatarStatusDotProps, type AvatarStatusDotSlots, type AvatarStatusDotVariant, type AvatarStatusDotVariantName };

package/dist/Avatar/index.js

@@ -1,2 +1,2 @@
-import { n as _sfc_main, t as _sfc_main$1 } from "../Avatar-BB4Z4LF1.js";
+import { n as _sfc_main, t as _sfc_main$1 } from "../Avatar-pPZ4dI_s.js";
 export { _sfc_main as Avatar, _sfc_main$1 as AvatarStatusDot };

package/dist/{Avatar-BB4Z4LF1.js → Avatar-pPZ4dI_s.js}

@@ -1,12 +1,35 @@
-import { t as _sfc_main$2 } from "./Tooltip-C2fh9anJ.js";
-import { n as AvatarGroupContext, t as resolveSize } from "./utils-C9r3UD_y.js";
-import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, inject, mergeProps, normalizeStyle, openBlock, ref, renderSlot, resolveDynamicComponent, toDisplayString, toRaw, unref, useAttrs, withCtx } from "vue";
+import { n as useLinkComponent } from "./context-C_peZbXf.js";
+import { o as useAstryxMessages } from "./context-iABt_ueM.js";
+import { t as _sfc_main$2 } from "./Tooltip-C4Vaqd3G.js";
+import { a as AvatarGroupContext, i as resolveStatusDotVariant, n as resolveSize, r as resolveStatusDotMetrics, t as composeAccessibleName } from "./utils-D33VQDnk.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, inject, mergeProps, normalizeStyle, onUnmounted, openBlock, provide, ref, renderSlot, resolveDynamicComponent, toDisplayString, toRaw, unref, useAttrs, useSlots, watch, withCtx } from "vue";
 import "../styles/avatar.css";
+//#region src/Avatar/context.ts
+/**
+* 头像换算出来的像素尺寸。子组件（例如 `AvatarStatusDot`）靠它把自身大小
+* 跟着头像走，所以这里给的是响应式的值：给快照会冻住第一次读到的尺寸。
+*
+* 没有住在任何头像里时取默认的 36，和默认尺寸 `md` 一致。
+*/
+const AvatarSizeContext = Symbol("AvatarSizeContext");
+/**
+* 状态元素往外层头像报自己读屏名字的入口。
+*
+* 头像根元素是 `role="img"`，子节点的语义会被剪掉，所以状态名字只能拼进头像
+* 自己的无障碍名称里才到得了辅助技术（WCAG 4.1.2）。状态点在自己的 setup 里
+* 往这个 ref 写 `label`，卸载时清空；头像那边用 computed 直接读，不用额外的
+* 状态和事件。
+*
+* 一个头像只有一个 status 插槽，所以这里只留一格：多个状态点同时上报时最后
+* 一个生效。
+*/
+const AvatarStatusLabelContext = Symbol("AvatarStatusLabelContext");
+//#endregion
 //#region src/Avatar/Avatar.vue
 const _hoisted_1$1 = { class: "astryx-avatar__content" };
-const _hoisted_2 = ["src"];
-const _hoisted_3 = ["src"];
-const _hoisted_4 = {
+const _hoisted_2$1 = ["src"];
+const _hoisted_3$1 = ["src"];
+const _hoisted_4$1 = {
 	key: 0,
 	class: "astryx-avatar__status"
 };
@@ -17,7 +40,7 @@ const _hoisted_8 = {
 	key: 0,
 	class: "astryx-avatar__status"
 };
-const INITIALS_FONT_SIZE_RATIO = 16 / 36;
+const INITIALS_FONT_SIZE_RATIO = .4;
 const DEFAULT_ICON_RATIO = .6;
 const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 	inheritAttrs: false,
@@ -42,6 +65,7 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
+		const linkComponent = useLinkComponent();
 		const attrs = useAttrs();
 		const erroredSrc = ref(void 0);
 		const erroredFallbackSrc = ref(void 0);
@@ -49,6 +73,11 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 		const resolvedSize = computed(() => avatarGroup?.size.value ?? props.size);
 		const resolvedShape = computed(() => avatarGroup?.shape.value ?? props.shape);
 		const numericSize = computed(() => resolveSize(resolvedSize.value));
+		/** 状态点这类子组件靠它把自己的尺寸跟着头像走。 */
+		provide(AvatarSizeContext, numericSize);
+		/** 状态插槽里的圆点把读屏名字写在这里，下面会拼进头像自己的名字。 */
+		const statusLabel = ref(void 0);
+		provide(AvatarStatusLabelContext, statusLabel);
 		const groupStyle = computed(() => {
 			if (!avatarGroup) return {};
 			return {
@@ -82,15 +111,20 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 		});
 		const showInitials = computed(() => !showImage.value && !showFallbackImage.value && initials.value !== "");
 		const showIcon = computed(() => !showImage.value && !showFallbackImage.value && initials.value === "");
+		const messages = useAstryxMessages();
 		const accessibleName = computed(() => {
-			return meaningfulAlt.value || meaningfulName.value;
+			const label = statusLabel.value;
+			const status = typeof label === "string" && label.trim() !== "" ? label.trim() : void 0;
+			return composeAccessibleName(meaningfulAlt.value || meaningfulName.value, status, messages.value.nav.avatarNameWithStatus);
 		});
 		const isLink = computed(() => props.href != null && props.href !== "");
 		const isButton = computed(() => !isLink.value && attrs.onClick != null);
 		const isInteractive = computed(() => isLink.value || isButton.value);
-		const isCustomLink = computed(() => isLink.value && props.as != null);
+		/** 自己的 `as` 优先，其次是 LinkProvider 给的默认链接组件。 */
+		const customLink = computed(() => props.as ?? linkComponent.value);
+		const isCustomLink = computed(() => isLink.value && customLink.value != null);
 		const rootTag = computed(() => {
-			if (isLink.value) return props.as == null ? "a" : toRaw(props.as);
+			if (isLink.value) return customLink.value == null ? "a" : toRaw(customLink.value);
 			return isButton.value ? "button" : "span";
 		});
 		const linkRel = computed(() => {
@@ -160,13 +194,13 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 						src: __props.src,
 						alt: "",
 						onError: handleImageError
-					}, null, 40, _hoisted_2)) : showFallbackImage.value ? (openBlock(), createElementBlock("img", {
+					}, null, 40, _hoisted_2$1)) : showFallbackImage.value ? (openBlock(), createElementBlock("img", {
 						key: 1,
 						class: "astryx-avatar__image",
 						src: __props.fallbackSrc,
 						alt: "",
 						onError: handleFallbackError
-					}, null, 40, _hoisted_3)) : showInitials.value ? (openBlock(), createElementBlock("span", {
+					}, null, 40, _hoisted_3$1)) : showInitials.value ? (openBlock(), createElementBlock("span", {
 						key: 2,
 						class: "astryx-avatar__fallback astryx-avatar__fallback--initials",
 						style: normalizeStyle({ fontSize: `${numericSize.value * INITIALS_FONT_SIZE_RATIO}px` })
@@ -178,7 +212,7 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 						viewBox: "0 0 24 24",
 						fill: "currentColor",
 						"aria-hidden": "true"
-					}, [createElementVNode("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" })], -1))])], 4)) : createCommentVNode("v-if", true)]), _ctx.$slots.status ? (openBlock(), createElementBlock("span", _hoisted_4, [renderSlot(_ctx.$slots, "status")])) : createCommentVNode("v-if", true)]),
+					}, [createElementVNode("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" })], -1))])], 4)) : createCommentVNode("v-if", true)]), _ctx.$slots.status ? (openBlock(), createElementBlock("span", _hoisted_4$1, [renderSlot(_ctx.$slots, "status")])) : createCommentVNode("v-if", true)]),
 					_: 3
 				}, 16, ["class", "style"]))]),
 				_: 3
@@ -228,21 +262,132 @@ const _hoisted_1 = [
 	"aria-label",
 	"aria-hidden"
 ];
+const _hoisted_2 = [
+	"data-shape",
+	"viewBox",
+	"width",
+	"height"
+];
+const _hoisted_3 = [
+	"cx",
+	"cy",
+	"r",
+	"stroke-width"
+];
+const _hoisted_4 = [
+	"x1",
+	"y1",
+	"x2",
+	"y2",
+	"stroke-width"
+];
 const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "AstryxAvatarStatusDot",
 	__name: "AvatarStatusDot",
 	props: {
-		variant: { default: "neutral" },
+		variant: { default: "success" },
 		label: {}
 	},
 	setup(__props) {
+		const props = __props;
+		const slots = useSlots();
+		/** 头像没给尺寸时按默认的 `md`（36px）算，单独放着用也是这个尺寸。 */
+		const avatarSize = inject(AvatarSizeContext, null);
+		const statusLabel = inject(AvatarStatusLabelContext, null);
+		/**
+		* 把状态名字交给外层头像，由它拼进自己的无障碍名称（`Jane Doe, Online`）。
+		* 头像根元素是 `role="img"`，子节点语义会被剪掉，只有拼进名字这一条路。
+		*/
+		if (statusLabel) {
+			watch(() => props.label, (label) => {
+				statusLabel.value = label;
+			}, { immediate: true });
+			onUnmounted(() => {
+				statusLabel.value = void 0;
+			});
+		}
+		const resolvedVariant = computed(() => resolveStatusDotVariant(props.variant));
+		const metrics = computed(() => resolveStatusDotMetrics(avatarSize?.value ?? 36));
+		const hasIcon = computed(() => slots.icon != null);
+		/** 最小一档放不下图标，此时退回自带形状，状态仍然不只靠颜色区分。 */
+		const showIcon = computed(() => hasIcon.value && metrics.value.iconSize > 0);
+		const glyphShape = computed(() => {
+			if (showIcon.value) return;
+			switch (resolvedVariant.value) {
+				case "neutral": return "ring";
+				case "error": return "minus";
+				default: return;
+			}
+		});
+		/** 减号两端往里收一点，圆头的帽才能落在净空里而不是压在边上。 */
+		const glyph = computed(() => {
+			const shape = glyphShape.value;
+			if (shape == null) return;
+			const { field, stroke } = metrics.value;
+			const center = field / 2;
+			return {
+				shape,
+				field,
+				stroke,
+				center,
+				radius: (field - stroke) / 2,
+				x1: field * .25 / 2 + stroke / 2,
+				x2: field * 1.75 / 2 - stroke / 2,
+				y: center
+			};
+		});
+		/**
+		* 尺寸走内联的 `--astryx-avatar-status-dot-computed-*`，CSS 里再用公开的
+		* `--astryx-avatar-status-dot-size` 盖在上面，这样主题还能改大小。
+		*/
+		const rootStyle = computed(() => ({
+			"--astryx-avatar-status-dot-computed-size": `${metrics.value.size}px`,
+			"--astryx-avatar-status-dot-computed-border-width": `${metrics.value.borderWidth}px`
+		}));
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("span", {
 				class: "astryx-avatar-status-dot",
-				"data-variant": __props.variant,
+				"data-variant": resolvedVariant.value,
+				style: normalizeStyle(rootStyle.value),
 				role: __props.label ? "img" : void 0,
 				"aria-label": __props.label || void 0,
 				"aria-hidden": __props.label ? void 0 : "true"
-			}, null, 8, _hoisted_1);
+			}, [showIcon.value ? (openBlock(), createElementBlock("span", {
+				key: 0,
+				class: "astryx-avatar-status-dot__icon",
+				"aria-hidden": "true",
+				style: normalizeStyle({
+					width: `${metrics.value.iconSize}px`,
+					height: `${metrics.value.iconSize}px`,
+					fontSize: `${metrics.value.iconSize}px`
+				})
+			}, [renderSlot(_ctx.$slots, "icon")], 4)) : glyph.value ? (openBlock(), createElementBlock("svg", {
+				key: 1,
+				class: "astryx-avatar-status-dot__glyph",
+				"data-shape": glyph.value.shape,
+				"aria-hidden": "true",
+				viewBox: `0 0 ${glyph.value.field} ${glyph.value.field}`,
+				width: glyph.value.field,
+				height: glyph.value.field,
+				fill: "none"
+			}, [glyph.value.shape === "ring" ? (openBlock(), createElementBlock("circle", {
+				key: 0,
+				cx: glyph.value.center,
+				cy: glyph.value.center,
+				r: glyph.value.radius,
+				fill: "none",
+				stroke: "currentColor",
+				"stroke-width": glyph.value.stroke
+			}, null, 8, _hoisted_3)) : (openBlock(), createElementBlock("line", {
+				key: 1,
+				x1: glyph.value.x1,
+				y1: glyph.value.y,
+				x2: glyph.value.x2,
+				y2: glyph.value.y,
+				stroke: "currentColor",
+				"stroke-width": glyph.value.stroke,
+				"stroke-linecap": "round"
+			}, null, 8, _hoisted_4))], 8, _hoisted_2)) : createCommentVNode("v-if", true)], 12, _hoisted_1);
 		};
 	}
 });

package/dist/AvatarGroup/index.d.ts

@@ -1,2 +1,2 @@
-import { i as AvatarGroupProps, n as _default, r as AvatarGroupOverflowProps, t as _default$1 } from "../index-B9rqmYxh.js";
-export { _default as AvatarGroup, _default$1 as AvatarGroupOverflow, type AvatarGroupOverflowProps, type AvatarGroupProps };
+import { a as AvatarGroupOverflowSlots, i as AvatarGroupOverflowProps, n as _default, o as AvatarGroupProps, r as AvatarGroupOverflowEmits, t as _default$1 } from "../index-DUaLJO7l.js";
+export { _default as AvatarGroup, _default$1 as AvatarGroupOverflow, type AvatarGroupOverflowEmits, type AvatarGroupOverflowProps, type AvatarGroupOverflowSlots, type AvatarGroupProps };

package/dist/AvatarGroup/index.js

@@ -1,2 +1,2 @@
-import { n as _sfc_main, t as _sfc_main$1 } from "../AvatarGroup-QyzSrpYA.js";
+import { n as _sfc_main, t as _sfc_main$1 } from "../AvatarGroup-B--NQSB3.js";
 export { _sfc_main as AvatarGroup, _sfc_main$1 as AvatarGroupOverflow };

package/dist/AvatarGroup-B--NQSB3.js

@@ -0,0 +1,98 @@
+import { o as useAstryxMessages } from "./context-iABt_ueM.js";
+import { a as AvatarGroupContext, n as resolveSize } from "./utils-D33VQDnk.js";
+import { computed, createBlock, createElementBlock, createTextVNode, defineComponent, getCurrentInstance, inject, normalizeClass, normalizeStyle, openBlock, provide, renderSlot, resolveDynamicComponent, toDisplayString, withCtx } from "vue";
+import "../styles/avatar-group.css";
+//#region src/AvatarGroup/AvatarGroup.vue
+const _hoisted_1 = ["aria-label"];
+const OVERLAP_RATIO = .25;
+const _sfc_main$1 = /*@__PURE__*/ defineComponent({
+	__name: "AvatarGroup",
+	props: {
+		size: { default: "md" },
+		shape: { default: "circle" },
+		label: { default: "Avatar group" }
+	},
+	setup(__props) {
+		const props = __props;
+		const numericSize = computed(() => resolveSize(props.size));
+		const overlap = computed(() => Math.round(numericSize.value * OVERLAP_RATIO));
+		provide(AvatarGroupContext, {
+			size: computed(() => props.size),
+			shape: computed(() => props.shape),
+			overlap
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: "astryx-avatar-group",
+				role: "group",
+				"aria-label": __props.label
+			}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1);
+		};
+	}
+});
+//#endregion
+//#region src/AvatarGroup/AvatarGroupOverflow.vue
+const OVERFLOW_FONT_RATIO = .35;
+/**
+* 短文字时是个圆，文字变长就长成胶囊：宽度只给下限（和头像一样大），
+* 高度固定，靠内边距让文字不贴边。
+*/
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "AstryxAvatarGroupOverflow",
+	__name: "AvatarGroupOverflow",
+	props: { count: {} },
+	emits: ["click"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const instance = getCurrentInstance();
+		const messages = useAstryxMessages();
+		const avatarGroup = inject(AvatarGroupContext, void 0);
+		const size = computed(() => avatarGroup?.size.value ?? "md");
+		const shape = computed(() => avatarGroup?.shape.value ?? "circle");
+		const numericSize = computed(() => resolveSize(size.value));
+		/**
+		* A click listener turns the indicator into a real button so it can take
+		* focus; without one it stays a static figure.
+		*/
+		const isInteractive = computed(() => instance?.vnode.props?.onClick != null);
+		/**
+		* `count` 是「总人数 - 看到的人数」，列表比切片短时会是负数。夹到 0 以上，
+		* 免得画出 `+-3`。
+		*/
+		const safeCount = computed(() => Math.max(0, props.count));
+		/** 读屏名走语言包（英文 `5 more`），跟着 `count` 变。 */
+		const accessibleName = computed(() => {
+			const t = messages.value.nav.avatarOverflow;
+			return t(safeCount.value);
+		});
+		/** 字号随头像长：小头像沿用正文字号，大头像按比例放大。 */
+		const rootStyle = computed(() => ({
+			"minWidth": `${numericSize.value + 4}px`,
+			"height": `${numericSize.value + 4}px`,
+			"marginInlineStart": `${-(avatarGroup?.overlap.value ?? 0)}px`,
+			"--astryx-avatar-group-overflow-computed-font-size": `max(var(--astryx-text-supporting-size, 0.75rem), ${Math.round(numericSize.value * OVERFLOW_FONT_RATIO * 100) / 100}px)`
+		}));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(isInteractive.value ? "button" : "span"), {
+				class: normalizeClass(["astryx-avatar-group-overflow", [`astryx-avatar-group-overflow--${shape.value}`, { "astryx-avatar-group-overflow--interactive": isInteractive.value }]]),
+				style: normalizeStyle(rootStyle.value),
+				type: isInteractive.value ? "button" : void 0,
+				"aria-label": accessibleName.value,
+				role: isInteractive.value ? void 0 : "img",
+				onClick: _cache[0] || (_cache[0] = ($event) => emit("click", $event))
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(`+${safeCount.value}`), 1)])]),
+				_: 3
+			}, 8, [
+				"class",
+				"style",
+				"type",
+				"aria-label",
+				"role"
+			]);
+		};
+	}
+});
+//#endregion
+export { _sfc_main$1 as n, _sfc_main as t };

package/dist/Banner/index.d.ts

@@ -1,2 +1,2 @@
-import { Ci as BannerContainer, Di as BannerStatus, Ei as BannerSlots, Si as _default, Ti as BannerProps, wi as BannerEmits } from "../index-B9rqmYxh.js";
+import { Ga as BannerContainer, Ja as BannerSlots, Ka as BannerEmits, Wa as _default, Ya as BannerStatus, qa as BannerProps } from "../index-DUaLJO7l.js";
 export { _default as Banner, type BannerContainer, type BannerEmits, type BannerProps, type BannerSlots, type BannerStatus };

package/dist/Banner/index.js

@@ -1,2 +1,2 @@
-import { t as _sfc_main } from "../Banner-CJe9Im5a.js";
+import { t as _sfc_main } from "../Banner-GbGxrqQO.js";
 export { _sfc_main as Banner };

package/dist/{Banner-CJe9Im5a.js → Banner-GbGxrqQO.js}

@@ -1,5 +1,5 @@
 import { t as _sfc_main$1 } from "./FieldIcon--NTgW5IU.js";
-import { t as _sfc_main$2 } from "./IconButton-BNQuz9W_.js";
+import { t as _sfc_main$2 } from "./IconButton-DDNgNl7B.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, openBlock, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, toRaw, useId, useModel, useSlots, useTemplateRef, watch, withCtx } from "vue";
 import "../styles/banner.css";
 import "../styles/field.css";

package/dist/BottomSheet/index.d.ts

@@ -1,2 +1,2 @@
-import { a as BottomSheetMotion, c as BottomSheetPurpose, d as BottomSheetState, i as BottomSheetHeight, l as BottomSheetSlots, n as _default, o as BottomSheetPadding, r as BottomSheetEmits, s as BottomSheetProps, t as _default$1, u as BottomSheetSnapPoint } from "../index-CLmKfnqf.js";
+import { a as BottomSheetMotion, c as BottomSheetPurpose, d as BottomSheetState, i as BottomSheetHeight, l as BottomSheetSlots, n as _default, o as BottomSheetPadding, r as BottomSheetEmits, s as BottomSheetProps, t as _default$1, u as BottomSheetSnapPoint } from "../index-0QGtSf3r.js";
 export { _default as BottomSheet, type BottomSheetEmits, type BottomSheetHeight, type BottomSheetMotion, type BottomSheetPadding, type BottomSheetProps, type BottomSheetPurpose, type BottomSheetSlots, type BottomSheetSnapPoint, type BottomSheetState, _default$1 as BottomSheetSwitcher };

package/dist/BottomSheet/index.js

@@ -1,3 +1,3 @@
-import { t as _sfc_main } from "../BottomSheet-BV6vfgGu.js";
-import { t as _sfc_main$1 } from "../BottomSheet-o7xw-TOi.js";
+import { t as _sfc_main } from "../BottomSheet-pt7m4CvC.js";
+import { t as _sfc_main$1 } from "../BottomSheet-JYMB_Ofl.js";
 export { _sfc_main as BottomSheet, _sfc_main$1 as BottomSheetSwitcher };

package/dist/{BottomSheet-o7xw-TOi.js → BottomSheet-JYMB_Ofl.js}

@@ -1,7 +1,7 @@
-import { n as useFocusTrap } from "./useRestoreFocus-BvMdXVX9.js";
+import { n as useFocusTrap } from "./useRestoreFocus-Djw9RUIf.js";
 import { t as useScrollLock } from "./scrollLock-BzIvIimL.js";
-import { n as bottomSheetSwitcherKey } from "./BottomSheet-BV6vfgGu.js";
-import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeModels, nextTick, normalizeClass, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, shallowRef, useModel, useTemplateRef, watch } from "vue";
+import { n as bottomSheetSwitcherKey } from "./BottomSheet-pt7m4CvC.js";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeModels, mergeProps, nextTick, onBeforeUnmount, onMounted, openBlock, provide, ref, renderSlot, shallowRef, useModel, useTemplateRef, watch } from "vue";
 import "../styles/bottom-sheet.css";
 //#region src/BottomSheet/BottomSheetSwitcher.vue
 const _hoisted_1 = ["aria-label", "aria-modal"];
@@ -20,9 +20,10 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		"activeSheet": { default: null },
 		"activeSheetModifiers": {}
 	}),
-	emits: ["update:activeSheet"],
-	setup(__props) {
+	emits: /*@__PURE__*/ mergeModels(["cancel"], ["update:activeSheet"]),
+	setup(__props, { emit: __emit }) {
 		const props = __props;
+		const emit = __emit;
 		const activeSheet = useModel(__props, "activeSheet");
 		const retainedId = ref(null);
 		const alignmentOffset = ref(0);
@@ -114,6 +115,8 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			requestClose();
 		}
 		function onCancel(event) {
+			emit("cancel", event);
+			if (event.defaultPrevented) return;
 			event.preventDefault();
 			requestClose();
 		}
@@ -133,19 +136,19 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			isScrollLocked.value = false;
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock(Fragment, null, [createCommentVNode(" eslint-disable-next-line vue-a11y/no-static-element-interactions -- 点在对话框空白处才关闭；键盘用 Escape，不给对话框再加一个按钮。 "), createElementVNode("dialog", {
+			return openBlock(), createElementBlock(Fragment, null, [createCommentVNode(" eslint-disable-next-line vue-a11y/no-static-element-interactions -- 点在对话框空白处才关闭；键盘用 Escape，不给对话框再加一个按钮。 "), createElementVNode("dialog", mergeProps(_ctx.$attrs, {
 				ref_key: "dialog",
 				ref: dialog,
-				class: normalizeClass(["astryx-bottom-sheet-dialog astryx-bottom-sheet-switcher", {
+				class: ["astryx-bottom-sheet-dialog astryx-bottom-sheet-switcher", {
 					"astryx-bottom-sheet-dialog--scrim": __props.hasScrim,
 					"astryx-bottom-sheet-dialog--closing": activeSheet.value == null
-				}]),
+				}],
 				"aria-label": dialogLabel.value,
 				"aria-modal": __props.hasScrim && activeSheet.value != null ? "true" : void 0,
 				onCancel,
 				onClick: onDialogClick,
 				onKeydown
-			}, [renderSlot(_ctx.$slots, "default")], 42, _hoisted_1)], 2112);
+			}), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_1)], 2112);
 		};
 	}
 });

package/dist/{BottomSheet-BV6vfgGu.js → BottomSheet-pt7m4CvC.js}

@@ -1,5 +1,6 @@
-import { n as useFocusTrap, t as useRestoreFocus } from "./useRestoreFocus-BvMdXVX9.js";
+import { n as useFocusTrap, t as useRestoreFocus } from "./useRestoreFocus-Djw9RUIf.js";
 import { t as useScrollLock } from "./scrollLock-BzIvIimL.js";
+import { t as useScrollbars } from "./useScrollbars-C2NJ6Qwq.js";
 import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, inject, mergeModels, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, onUpdated, openBlock, ref, renderSlot, toValue, unref, useAttrs, useModel, useTemplateRef, watch, withCtx } from "vue";
 import "../styles/bottom-sheet.css";
 /** Scrim opacity at the peek stop: dimmed, never clear, because the sheet stays modal. */
@@ -578,6 +579,7 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 		};
 		const panel = useTemplateRef("panel");
 		const body = useTemplateRef("body");
+		useScrollbars(body);
 		const isInteractive = computed(() => props.state === "open");
 		const heightKind = computed(() => {
 			const height = props.height;

package/dist/Breadcrumbs/index.d.ts

@@ -1,3 +1,3 @@
 import { E as DropdownMenuRadioItemProps, n as _default$2, r as _default$1, s as DropdownMenuCheckboxItemProps, t as _default$3, w as DropdownMenuRadioGroupProps } from "../DropdownMenuRadioItem.vue-CXEURBcq.js";
-import { a as BreadcrumbsProps, i as BreadcrumbMenuOption, n as _default, o as BreadcrumbsVariant, r as BreadcrumbItemProps, t as _default$4 } from "../index-BlOIC_AM.js";
+import { a as BreadcrumbsProps, i as BreadcrumbMenuOption, n as _default, o as BreadcrumbsVariant, r as BreadcrumbItemProps, t as _default$4 } from "../index-CsNi1I8j.js";
 export { _default as BreadcrumbItem, type BreadcrumbItemProps, _default$1 as BreadcrumbMenuCheckboxItem, type DropdownMenuCheckboxItemProps as BreadcrumbMenuCheckboxItemProps, type BreadcrumbMenuOption, _default$2 as BreadcrumbMenuRadioGroup, type DropdownMenuRadioGroupProps as BreadcrumbMenuRadioGroupProps, _default$3 as BreadcrumbMenuRadioItem, type DropdownMenuRadioItemProps as BreadcrumbMenuRadioItemProps, _default$4 as Breadcrumbs, type BreadcrumbsProps, type BreadcrumbsVariant };

package/dist/Breadcrumbs/index.js

@@ -1,3 +1,3 @@
-import { i as _sfc_main$1, n as _sfc_main$3, r as _sfc_main$2 } from "../useMenuDrillIn-BgjJcY3K.js";
-import { n as _sfc_main, t as _sfc_main$4 } from "../Breadcrumbs-D6G7f5WL.js";
+import { i as _sfc_main$1, n as _sfc_main$3, r as _sfc_main$2 } from "../useMenuDrillIn-DzKGkTho.js";
+import { n as _sfc_main, t as _sfc_main$4 } from "../Breadcrumbs-DIm4figq.js";
 export { _sfc_main as BreadcrumbItem, _sfc_main$1 as BreadcrumbMenuCheckboxItem, _sfc_main$2 as BreadcrumbMenuRadioGroup, _sfc_main$3 as BreadcrumbMenuRadioItem, _sfc_main$4 as Breadcrumbs };