@astryx-vue/core 0.2.3 → 0.2.5

package/README.md

@@ -1,54 +1,56 @@
 # @astryx-vue/core
 
-Vue components for astryx-vue.
+Vue 3 components for [astryx-vue](https://github.com/astryx-vue/astryx-vue), an unofficial port of Astryx. Not affiliated with Meta.
 
-Docs: <https://astryx-vue.pages.dev>
+> **Using an agent?** Install `@astryx-vue/cli` and run `astryx-vue component Button`, or `astryx-vue init --features agents` so the agent looks components up instead of guessing. The binary is `astryx-vue`, not `astryx`.
 
-```bash
+## Install
+
+```sh
 pnpm add @astryx-vue/core @astryx-vue/themes
 ```
 
-Component entries load structural styles. Import a theme once at the app entry. To load every structural stylesheet yourself, also import `@astryx-vue/core/styles.css`.
+Peer dependency: `vue` `^3.5.0`.
+
+## Use
+
+Import a theme once at the app entry, then import the component you need from its subpath. The subpath loads that component's structural styles. You do not need StyleX or UnoCSS.
 
 ```ts
-import { Badge } from '@astryx-vue/core/Badge'
-import '@astryx-vue/core/styles.css'
 import '@astryx-vue/themes/neutral.css'
 ```
 
 ```vue
 <script setup lang="ts">
-import { Badge } from '@astryx-vue/core/Badge'
+import { Button } from '@astryx-vue/core/Button'
 </script>
 
 <template>
-  <Badge variant="success">
-    Ready
-  </Badge>
+  <Button label="Save changes" variant="primary" />
 </template>
 ```
 
-Text inputs include their own label, description and validation status:
-
-```vue
-<script setup lang="ts">
-import { TextInput } from '@astryx-vue/core/TextInput'
-import { shallowRef } from 'vue'
+Prefer a subpath such as `@astryx-vue/core/Button` over the package root. The root re-exports the same components, and a bundler that keeps unused re-exports can pull in more than you asked for. Import `@astryx-vue/core/styles.css` only when you want every structural sheet in one file.
 
-const email = shallowRef('')
-</script>
+Props, slots, and events are on the docs site, or:
 
-<template>
-  <TextInput v-model="email" label="Email" type="email" auto-complete="email" />
-</template>
+```sh
+npx @astryx-vue/cli component Button
 ```
 
-Use `Field` and `FieldLabel` from `@astryx-vue/core/Field`, and `FieldStatus` from `@astryx-vue/core/FieldStatus`, for custom controls. `Field` supplies association IDs through its default slot; forward them to the control's `id`, `aria-labelledby` and `aria-describedby`.
+## Related packages
+
+| Package | What it is |
+| --- | --- |
+| `@astryx-vue/themes` | Neutral, Butter, Chocolate, Gothic, Matcha, Stone, and Y2K |
+| `@astryx-vue/cli` | `astryx-vue` for component docs, search, and agent context |
 
-`TextInput` supports clear buttons, disabled reasons, read-only values, three sizes, status messages and asynchronous `changeAction`. Use `@action-error` to handle failed actions. Inputs remain editable while actions are pending; request cancellation and stale-result handling belong to the application.
+## Resources
 
-`CheckboxInput` from `@astryx-vue/core/CheckboxInput` supports `v-model` with `boolean | 'indeterminate'`. It includes a label, description, validation status, disabled reasons, native form submission and asynchronous `changeAction`. Pending actions block repeat activation. Failures emit `actionError`; the application decides whether to revert the model. `CheckboxIndicator` from `@astryx-vue/core/CheckboxIndicator` provides the decorative visual without input behavior.
+- [Documentation](https://astryx-vue.pages.dev/en/components/)
+- [CLI guide](https://astryx-vue.pages.dev/en/guide/cli)
+- [Repository](https://github.com/astryx-vue/astryx-vue)
 
-`Slider` from `@astryx-vue/core/Slider` accepts a numeric `v-model` or a `[number, number]` range. It supports marks, horizontal and vertical orientation, keyboard controls, value formatting, form values and disabled reasons. `changeEnd` fires when an adjustment ends.
+## License
 
-`Banner` from `@astryx-vue/core/Banner` shows persistent info, success, warning or error messages. It supports actions, dismissal, card and section containers, and optional details. Use `v-model:is-open` to control the details or `:collapsible="false"` to keep them visible.
+MIT. Astryx is copyright Meta Platforms, Inc. This package is an unofficial port and is not affiliated with or endorsed by Meta.

package/THIRD_PARTY_NOTICES.md

@@ -14,6 +14,8 @@ The TextInput, CheckboxInput, CheckboxIndicator, Slider, Banner and Field family
 
 The indicator family and semantic icon names added in October 2026 also reference the upstream implementation at commit `fdb53f3` (0.7.1), including CheckIndicator, RadioIndicator, the indicator registry, and the semantic icon name list. Their public behavior is adapted into Vue components and a name-to-Iconify map under the same MIT license. The Vue slots, composables, and built-in glyph fallback are local adaptations.
 
+The locale JSON files in `locales/` are copied from `packages/core/locales` at commit `df75749470029f0b34680e13deac635f2d72c89d`. They stay in the upstream React Intl shape. `loadAstryxCatalog` maps their keys onto this package's message tree. The files are not hand-translated here.
+
 When files or substantial portions are copied or adapted, their original copyright and license notices must be kept here or alongside the adapted files.
 
 No Meta trademarks, logos, or endorsement are granted by the Astryx software license.

package/dist/AlertDialog/index.js

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

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

@@ -1,9 +1,9 @@
 import { t as _sfc_main$1 } from "./Button-DrqeomlE.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-Dugosn6j.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-BHVghsWo.js";
+import { t as _sfc_main$5 } from "./Text-DIzZw6FA.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

package/dist/AppShell/index.js

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

package/dist/{AppShell-Dd-D4bA2.js → AppShell-CeBmB0Q9.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 { a as useAstryxMessages } from "./context-DmOLCubj.js";
-import { n as _sfc_main$7, t as _sfc_main$6 } from "./MobileNavToggle-fqcSafkc.js";
+import { n as _sfc_main$7, t as _sfc_main$6 } from "./MobileNavToggle-Dh3uLivq.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-Bu3oXIIS.js";
+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 };

package/dist/Avatar/index.js

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

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

@@ -1,6 +1,6 @@
+import { t as _sfc_main$2 } from "./Tooltip-C2fh9anJ.js";
 import { n as AvatarGroupContext, t as resolveSize } from "./utils-C9r3UD_y.js";
-import { t as _sfc_main$2 } from "./Tooltip-mp0NMh_Y.js";
-import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, inject, mergeProps, normalizeStyle, openBlock, ref, renderSlot, resolveDynamicComponent, toDisplayString, unref, useAttrs, withCtx } from "vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, inject, mergeProps, normalizeStyle, openBlock, ref, renderSlot, resolveDynamicComponent, toDisplayString, toRaw, unref, useAttrs, withCtx } from "vue";
 import "../styles/avatar.css";
 //#region src/Avatar/Avatar.vue
 const _hoisted_1$1 = { class: "astryx-avatar__content" };
@@ -30,6 +30,7 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 		shape: { default: "circle" },
 		src: {},
 		href: {},
+		as: {},
 		target: {},
 		rel: {},
 		tooltip: {
@@ -84,10 +85,14 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 		const accessibleName = computed(() => {
 			return meaningfulAlt.value || meaningfulName.value;
 		});
-		const isLink = computed(() => props.href != null);
+		const isLink = computed(() => props.href != null && props.href !== "");
 		const isButton = computed(() => !isLink.value && attrs.onClick != null);
 		const isInteractive = computed(() => isLink.value || isButton.value);
-		const rootTag = computed(() => isLink.value ? "a" : isButton.value ? "button" : "span");
+		const isCustomLink = computed(() => isLink.value && props.as != null);
+		const rootTag = computed(() => {
+			if (isLink.value) return props.as == null ? "a" : toRaw(props.as);
+			return isButton.value ? "button" : "span";
+		});
 		const linkRel = computed(() => {
 			const parts = new Set((props.rel ?? "").split(/\s+/).filter(Boolean));
 			if (props.target === "_blank") {
@@ -124,6 +129,7 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 				bindings.href = props.href;
 				bindings.target = props.target;
 				bindings.rel = linkRel.value;
+				if (isCustomLink.value) bindings.to = props.href;
 			}
 			if (isButton.value) bindings.type = attrs.type ?? "button";
 			if (!isInteractive.value && tooltipText.value != null && bindings.tabindex == null && bindings.tabIndex == null) bindings.tabindex = 0;

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-BTAgQRP0.js";
+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 };

package/dist/Banner/index.d.ts

@@ -1,2 +1,2 @@
-import { Ci as BannerProps, Si as BannerEmits, Ti as BannerStatus, bi as _default, wi as BannerSlots, xi as BannerContainer } from "../index-BTAgQRP0.js";
+import { Ci as BannerContainer, Di as BannerStatus, Ei as BannerSlots, Si as _default, Ti as BannerProps, wi as BannerEmits } from "../index-B9rqmYxh.js";
 export { _default as Banner, type BannerContainer, type BannerEmits, type BannerProps, type BannerSlots, type BannerStatus };

package/dist/BottomSheet/index.d.ts

@@ -1,2 +1,2 @@
-import { a as BottomSheetPadding, c as BottomSheetSlots, i as BottomSheetMotion, l as BottomSheetSnapPoint, n as BottomSheetEmits, o as BottomSheetProps, r as BottomSheetHeight, s as BottomSheetPurpose, t as _default, u as BottomSheetState } from "../index-C8wDPDcP.js";
-export { _default as BottomSheet, type BottomSheetEmits, type BottomSheetHeight, type BottomSheetMotion, type BottomSheetPadding, type BottomSheetProps, type BottomSheetPurpose, type BottomSheetSlots, type BottomSheetSnapPoint, type BottomSheetState };
+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";
+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,2 +1,3 @@
-import { t as _sfc_main } from "../BottomSheet-Dg95HB1s.js";
-export { _sfc_main as BottomSheet };
+import { t as _sfc_main } from "../BottomSheet-BV6vfgGu.js";
+import { t as _sfc_main$1 } from "../BottomSheet-o7xw-TOi.js";
+export { _sfc_main as BottomSheet, _sfc_main$1 as BottomSheetSwitcher };

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

@@ -1,6 +1,6 @@
 import { n as useFocusTrap, t as useRestoreFocus } from "./useRestoreFocus-BvMdXVX9.js";
 import { t as useScrollLock } from "./scrollLock-BzIvIimL.js";
-import { computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeModels, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, onUpdated, openBlock, ref, renderSlot, toValue, unref, useAttrs, useModel, useTemplateRef, watch, withCtx } from "vue";
+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. */
 const MIN_PEEK_SCRIM_OPACITY = .3;
@@ -676,16 +676,20 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 	}
 });
 //#endregion
+//#region src/BottomSheet/switcher.ts
+const bottomSheetSwitcherKey = Symbol("astryx-bottom-sheet-switcher");
+//#endregion
 //#region src/BottomSheet/BottomSheet.vue
-const _hoisted_1 = {
-	key: 0,
+const _hoisted_1 = ["inert"];
+const _hoisted_2 = {
+	key: 1,
 	class: "astryx-bottom-sheet-inline"
 };
-const _hoisted_2 = {
+const _hoisted_3 = {
 	key: 0,
 	class: "astryx-bottom-sheet__positioner astryx-bottom-sheet__positioner--inline"
 };
-const _hoisted_3 = [
+const _hoisted_4 = [
 	"aria-label",
 	"aria-labelledby",
 	"aria-modal",
@@ -693,7 +697,7 @@ const _hoisted_3 = [
 	"role",
 	"inert"
 ];
-const _hoisted_4 = { class: "astryx-bottom-sheet__positioner" };
+const _hoisted_5 = { class: "astryx-bottom-sheet__positioner" };
 const _sfc_main = /*@__PURE__*/ defineComponent({
 	name: "AstryxBottomSheet",
 	inheritAttrs: false,
@@ -701,6 +705,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 	props: /*@__PURE__*/ mergeModels({
 		isOpen: { type: Boolean },
 		label: {},
+		sheetId: {},
 		isInline: {
 			type: Boolean,
 			default: false
@@ -732,14 +737,25 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const props = __props;
 		const emit = __emit;
 		const isOpen = useModel(__props, "isOpen");
+		const switcher = inject(bottomSheetSwitcherKey, null);
+		const hosted = computed(() => switcher != null && props.sheetId != null);
+		const retained = computed(() => {
+			if (!hosted.value || switcher == null) return false;
+			return switcher.retainedId.value === props.sheetId && switcher.activeId.value !== props.sheetId;
+		});
+		const open = computed(() => {
+			if (!hosted.value || props.sheetId == null) return isOpen.value;
+			return switcher?.activeId.value === props.sheetId || switcher?.retainedId.value === props.sheetId;
+		});
 		const attrs = useAttrs();
 		const dialog = useTemplateRef("dialog");
 		const panel = useTemplateRef("panel");
 		const isPresented = ref(false);
 		const scrimOpacity = ref(1);
 		const panelState = computed(() => {
-			if (isOpen.value) return "open";
-			if (props.isInline) return "hidden";
+			if (retained.value) return "exiting";
+			if (open.value) return "open";
+			if (props.isInline || hosted.value) return "hidden";
 			return isPresented.value ? "exiting" : "hidden";
 		});
 		const isDismissible = computed(() => props.purpose === "info");
@@ -747,10 +763,10 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const dialogStyle = computed(() => ({ "--_sheet-scrim-opacity": String(scrimOpacity.value) }));
 		useFocusTrap({
 			container: computed(() => panelElement()),
-			isEnabled: computed(() => isOpen.value && props.hasScrim)
+			isEnabled: computed(() => !hosted.value && isOpen.value && props.hasScrim)
 		});
 		useRestoreFocus({
-			isEnabled: computed(() => !props.isInline),
+			isEnabled: computed(() => !props.isInline && !hosted.value),
 			shouldRestore: isOpen
 		});
 		/** The dialog carries the accessible name; the panel keeps every other attribute. */
@@ -805,6 +821,11 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			if (target?.isConnected) target.focus();
 		}
 		function requestClose() {
+			if (hosted.value && props.sheetId != null) {
+				if (switcher?.activeId.value === props.sheetId) switcher.setActive(null);
+				emit("openChange", false);
+				return;
+			}
 			isOpen.value = false;
 			emit("openChange", false);
 		}
@@ -830,13 +851,23 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			emit("motionComplete", motion);
 			if (motion === "exiting") closeSheet();
 		}
-		watch(isOpen, (open) => {
-			if (open) openSheet();
+		watch(isOpen, (value) => {
+			if (hosted.value || !value) return;
+			openSheet();
 		}, { flush: "post" });
 		onMounted(() => {
+			if (hosted.value && props.sheetId != null) {
+				switcher?.register(props.sheetId, {
+					getElement: () => panelElement(),
+					label: () => props.label,
+					purpose: () => props.purpose
+				});
+				return;
+			}
 			if (isOpen.value) openSheet();
 		});
 		onBeforeUnmount(() => {
+			if (props.sheetId != null) switcher?.unregister(props.sheetId);
 			unlockScroll();
 		});
 		__expose({
@@ -845,7 +876,36 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			blur: () => panelElement()?.blur()
 		});
 		return (_ctx, _cache) => {
-			return __props.isInline ? (openBlock(), createElementBlock("div", _hoisted_1, [isOpen.value ? (openBlock(), createElementBlock("div", _hoisted_2, [createVNode(_sfc_main$1, mergeProps({
+			return hosted.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [open.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: normalizeClass(["astryx-bottom-sheet__positioner", retained.value ? "astryx-bottom-sheet__positioner--retained" : "astryx-bottom-sheet__positioner--active"]),
+				style: normalizeStyle(retained.value ? { "--_sheet-align": `${unref(switcher)?.alignmentOffset.value ?? 0}px` } : void 0),
+				inert: retained.value || void 0
+			}, [createVNode(_sfc_main$1, mergeProps({
+				ref_key: "panel",
+				ref: panel
+			}, panelAttrs(), {
+				state: panelState.value,
+				label: __props.label,
+				height: __props.height,
+				padding: __props.padding,
+				"snap-points": __props.snapPoints,
+				"is-swipe-dismiss-allowed": __props.purpose === "info",
+				onDismiss: requestClose,
+				onSnap: _cache[0] || (_cache[0] = ($event) => emit("snap", $event)),
+				onMotionStart: _cache[1] || (_cache[1] = ($event) => emit("motionStart", $event)),
+				onMotionComplete: _cache[2] || (_cache[2] = ($event) => emit("motionComplete", $event))
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, [
+				"state",
+				"label",
+				"height",
+				"padding",
+				"snap-points",
+				"is-swipe-dismiss-allowed"
+			])], 14, _hoisted_1)) : createCommentVNode("v-if", true)], 64)) : __props.isInline ? (openBlock(), createElementBlock("div", _hoisted_2, [isOpen.value ? (openBlock(), createElementBlock("div", _hoisted_3, [createVNode(_sfc_main$1, mergeProps({
 				ref_key: "panel",
 				ref: panel
 			}, panelAttrs(), {
@@ -855,7 +915,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				padding: __props.padding,
 				"snap-points": __props.snapPoints,
 				"is-swipe-dismiss-allowed": false,
-				onSnap: _cache[0] || (_cache[0] = ($event) => emit("snap", $event))
+				onSnap: _cache[3] || (_cache[3] = ($event) => emit("snap", $event))
 			}), {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
 				_: 3
@@ -866,7 +926,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				"padding",
 				"snap-points"
 			])])) : createCommentVNode("v-if", true)])) : (openBlock(), createElementBlock("dialog", {
-				key: 1,
+				key: 2,
 				ref_key: "dialog",
 				ref: dialog,
 				class: normalizeClass(["astryx-bottom-sheet-dialog", {
@@ -883,7 +943,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				onCancel,
 				onClick: onDialogClick,
 				onKeydown
-			}, [createElementVNode("div", _hoisted_4, [createVNode(_sfc_main$1, mergeProps({
+			}, [createElementVNode("div", _hoisted_5, [createVNode(_sfc_main$1, mergeProps({
 				ref_key: "panel",
 				ref: panel
 			}, panelAttrs(), {
@@ -894,9 +954,9 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				"snap-points": __props.snapPoints,
 				"is-swipe-dismiss-allowed": isSwipeDismissAllowed.value,
 				onDismiss: requestClose,
-				onScrimOpacity: _cache[1] || (_cache[1] = ($event) => scrimOpacity.value = $event),
-				onSnap: _cache[2] || (_cache[2] = ($event) => emit("snap", $event)),
-				onMotionStart: _cache[3] || (_cache[3] = ($event) => emit("motionStart", $event)),
+				onScrimOpacity: _cache[4] || (_cache[4] = ($event) => scrimOpacity.value = $event),
+				onSnap: _cache[5] || (_cache[5] = ($event) => emit("snap", $event)),
+				onMotionStart: _cache[6] || (_cache[6] = ($event) => emit("motionStart", $event)),
 				onMotionComplete: onPanelMotionComplete
 			}), {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
@@ -908,12 +968,12 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				"padding",
 				"snap-points",
 				"is-swipe-dismiss-allowed"
-			])]), _cache[4] || (_cache[4] = createElementVNode("div", {
+			])]), _cache[7] || (_cache[7] = createElementVNode("div", {
 				class: "astryx-bottom-sheet__edge-tint",
 				"aria-hidden": "true"
-			}, null, -1))], 46, _hoisted_3));
+			}, null, -1))], 46, _hoisted_4));
 		};
 	}
 });
 //#endregion
-export { _sfc_main as t };
+export { bottomSheetSwitcherKey as n, _sfc_main as t };

package/dist/BottomSheet-o7xw-TOi.js

@@ -0,0 +1,153 @@
+import { n as useFocusTrap } from "./useRestoreFocus-BvMdXVX9.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 "../styles/bottom-sheet.css";
+//#region src/BottomSheet/BottomSheetSwitcher.vue
+const _hoisted_1 = ["aria-label", "aria-modal"];
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "AstryxBottomSheetSwitcher",
+	inheritAttrs: false,
+	__name: "BottomSheetSwitcher",
+	props: /*@__PURE__*/ mergeModels({
+		label: {},
+		purpose: {},
+		hasScrim: {
+			type: Boolean,
+			default: true
+		}
+	}, {
+		"activeSheet": { default: null },
+		"activeSheetModifiers": {}
+	}),
+	emits: ["update:activeSheet"],
+	setup(__props) {
+		const props = __props;
+		const activeSheet = useModel(__props, "activeSheet");
+		const retainedId = ref(null);
+		const alignmentOffset = ref(0);
+		const sheets = shallowRef(/* @__PURE__ */ new Map());
+		const dialog = useTemplateRef("dialog");
+		const isScrollLocked = ref(false);
+		let handoffTimer;
+		useScrollLock(isScrollLocked);
+		function registration(id) {
+			return id == null ? void 0 : sheets.value.get(id);
+		}
+		const activeElement = computed(() => registration(activeSheet.value)?.getElement() ?? null);
+		const flowPurpose = computed(() => props.purpose ?? registration(activeSheet.value)?.purpose() ?? "info");
+		const dialogLabel = computed(() => props.label ?? registration(activeSheet.value)?.label() ?? "Bottom sheet");
+		useFocusTrap({
+			container: activeElement,
+			isEnabled: computed(() => activeSheet.value != null && props.hasScrim)
+		});
+		function setActive(id) {
+			const previous = activeSheet.value;
+			if (previous === id) return;
+			if (handoffTimer != null) clearTimeout(handoffTimer);
+			if (previous != null && id != null) {
+				retainedId.value = previous;
+				alignmentOffset.value = 0;
+				activeSheet.value = id;
+				nextTick(() => {
+					const previousHeight = registration(previous)?.getElement()?.offsetHeight ?? 0;
+					const nextHeight = registration(id)?.getElement()?.offsetHeight ?? 0;
+					alignmentOffset.value = Math.max(0, previousHeight - nextHeight);
+				});
+				handoffTimer = setTimeout(() => {
+					if (retainedId.value === previous) {
+						retainedId.value = null;
+						alignmentOffset.value = 0;
+					}
+				}, 420);
+				return;
+			}
+			retainedId.value = null;
+			alignmentOffset.value = 0;
+			activeSheet.value = id;
+		}
+		function register(id, entry) {
+			const next = new Map(sheets.value);
+			next.set(id, entry);
+			sheets.value = next;
+		}
+		function unregister(id) {
+			const next = new Map(sheets.value);
+			next.delete(id);
+			sheets.value = next;
+		}
+		provide(bottomSheetSwitcherKey, {
+			activeId: activeSheet,
+			retainedId,
+			alignmentOffset,
+			setActive,
+			register,
+			unregister
+		});
+		function openDialog() {
+			const element = dialog.value;
+			if (!element) return;
+			if (!element.open) {
+				if (props.hasScrim) element.showModal();
+				else element.show();
+			}
+			isScrollLocked.value = props.hasScrim;
+			nextTick(() => {
+				const panel = activeElement.value;
+				if (!panel) return;
+				(panel.querySelector("[data-autofocus]") ?? panel).focus({ preventScroll: true });
+			});
+		}
+		function closeDialog() {
+			dialog.value?.close();
+			isScrollLocked.value = false;
+			retainedId.value = null;
+			alignmentOffset.value = 0;
+		}
+		function requestClose() {
+			if (flowPurpose.value === "required") return;
+			setActive(null);
+		}
+		function onKeydown(event) {
+			if (event.key !== "Escape" || event.isComposing) return;
+			event.preventDefault();
+			requestClose();
+		}
+		function onCancel(event) {
+			event.preventDefault();
+			requestClose();
+		}
+		function onDialogClick(event) {
+			if (event.target !== event.currentTarget) return;
+			if (props.hasScrim && flowPurpose.value === "info") setActive(null);
+		}
+		watch(activeSheet, (id) => {
+			if (id) openDialog();
+			else closeDialog();
+		}, { flush: "post" });
+		onMounted(() => {
+			if (activeSheet.value) openDialog();
+		});
+		onBeforeUnmount(() => {
+			if (handoffTimer != null) clearTimeout(handoffTimer);
+			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", {
+				ref_key: "dialog",
+				ref: dialog,
+				class: normalizeClass(["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);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as t };

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-uVM0FD2f.js";
-import { a as BreadcrumbsProps, i as BreadcrumbMenuOption, n as _default, o as BreadcrumbsVariant, r as BreadcrumbItemProps, t as _default$4 } from "../index-B1x05arQ.js";
+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";
 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-OaEwjK44.js";
-import { n as _sfc_main, t as _sfc_main$4 } from "../Breadcrumbs-CWGfgLNK.js";
+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";
 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 };

package/dist/{Breadcrumbs-CWGfgLNK.js → Breadcrumbs-D6G7f5WL.js}

@@ -1,5 +1,5 @@
 import { t as _sfc_main$2 } from "./Icon-bteSId7T.js";
-import { t as _sfc_main$3 } from "./DropdownMenu-BoZChdev.js";
+import { t as _sfc_main$3 } from "./DropdownMenu--lnUeJEG.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createVNode, defineComponent, inject, mergeProps, normalizeClass, openBlock, provide, renderSlot, toDisplayString, useSlots, withCtx } from "vue";
 import "../styles/breadcrumbs.css";
 //#region src/Breadcrumbs/context.ts

package/dist/Button/index.d.ts

@@ -1,3 +1,3 @@
 import { a as ButtonProps, c as ButtonSizeValue, d as ButtonVariantMap, i as ButtonLinkElement, l as ButtonSlots, n as ButtonElevation, o as ButtonRootElement, r as ButtonEmits, s as ButtonSize, t as ButtonClickAction, u as ButtonVariant } from "../types-WlmsNL1I.js";
-import { t as _default } from "../index-f4NGT-e2.js";
+import { t as _default } from "../index-EFqQF2Bx.js";
 export { _default as Button, _default as default, type ButtonClickAction, type ButtonElevation, type ButtonEmits, type ButtonLinkElement, type ButtonProps, type ButtonRootElement, type ButtonSize, type ButtonSizeValue, type ButtonSlots, type ButtonVariant, type ButtonVariantMap };

package/dist/ButtonGroup/index.d.ts

@@ -1,2 +1,2 @@
-import { _i as ButtonGroupProps, gi as _default, vi as ButtonGroupSlots, yi as ButtonGroupOrientation } from "../index-BTAgQRP0.js";
+import { bi as ButtonGroupSlots, vi as _default, xi as ButtonGroupOrientation, yi as ButtonGroupProps } from "../index-B9rqmYxh.js";
 export { _default as ButtonGroup, _default as default, type ButtonGroupOrientation, type ButtonGroupProps, type ButtonGroupSlots };

package/dist/Calendar/index.d.ts

@@ -1,2 +1,2 @@
-import { di as CalendarHandle, fi as CalendarHandleRef, hi as CalendarSlots, li as _default, mi as CalendarRangeValue, pi as CalendarProps, ui as CalendarEmits } from "../index-BTAgQRP0.js";
+import { _i as CalendarSlots, di as _default, fi as CalendarEmits, gi as CalendarRangeValue, hi as CalendarProps, mi as CalendarHandleRef, pi as CalendarHandle } from "../index-B9rqmYxh.js";
 export { _default as Calendar, type CalendarEmits, type CalendarHandle, type CalendarHandleRef, type CalendarProps, type CalendarRangeValue, type CalendarSlots };

package/dist/Calendar/index.js

@@ -1,2 +1,2 @@
-import { t as _sfc_main } from "../Calendar-CnOsSjMY.js";
+import { t as _sfc_main } from "../Calendar-DmTeM7PO.js";
 export { _sfc_main as Calendar };