@astryx-vue/core 0.1.1 → 0.2.0

package/dist/Lightbox-CshKoB0r.js

@@ -0,0 +1,384 @@
+import { t as useAnnounce } from "./announce-Cnio10Wk.js";
+import { t as useScrollLock } from "./scrollLock-BzIvIimL.js";
+import { a as useAstryxMessages } from "./context-Dbo22sck.js";
+import { t as _sfc_main$1 } from "./IconButton-BNQuz9W_.js";
+import { t as _sfc_main$2 } from "./Icon-Dfr4k6-S.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, onBeforeUnmount, openBlock, ref, toDisplayString, toRef, unref, useTemplateRef, watch, withCtx } from "vue";
+import "../styles/lightbox.css";
+//#region src/Lightbox/Lightbox.vue
+const _hoisted_1 = ["aria-label"];
+const _hoisted_2 = { class: "astryx-lightbox__media" };
+const _hoisted_3 = [
+	"data-zoomable",
+	"data-zoomed",
+	"data-dragging",
+	"role",
+	"tabindex",
+	"aria-pressed",
+	"aria-label"
+];
+const _hoisted_4 = [
+	"src",
+	"aria-label",
+	"autoplay"
+];
+const _hoisted_5 = [
+	"src",
+	"alt",
+	"data-dragging"
+];
+const _hoisted_6 = {
+	key: 0,
+	class: "astryx-lightbox__caption"
+};
+const _hoisted_7 = {
+	key: 2,
+	class: "astryx-lightbox__counter"
+};
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "AstryxLightbox",
+	inheritAttrs: false,
+	__name: "Lightbox",
+	props: {
+		isOpen: { type: Boolean },
+		media: {},
+		index: {},
+		defaultIndex: { default: 0 },
+		hasZoom: {
+			type: Boolean,
+			default: false
+		},
+		hasAutoPlay: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: ["update:isOpen", "update:index"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const messages = useAstryxMessages();
+		const announce = useAnnounce();
+		const dialogRef = useTemplateRef("dialog");
+		const containerRef = ref(null);
+		useScrollLock(toRef(props, "isOpen"));
+		const mediaList = computed(() => Array.isArray(props.media) ? props.media : [props.media]);
+		const isGallery = computed(() => Array.isArray(props.media) && mediaList.value.length > 1);
+		const internalIndex = ref(props.defaultIndex);
+		const index = computed(() => {
+			const raw = props.index ?? internalIndex.value;
+			const last = Math.max(0, mediaList.value.length - 1);
+			return Math.min(Math.max(0, raw), last);
+		});
+		const current = computed(() => mediaList.value[index.value]);
+		const isVideo = computed(() => current.value?.type === "video");
+		const canPrev = computed(() => index.value > 0);
+		const canNext = computed(() => index.value < mediaList.value.length - 1);
+		const zoom = ref(1);
+		const pan = ref({
+			x: 0,
+			y: 0
+		});
+		const dragging = ref(false);
+		const didDrag = ref(false);
+		const dragStart = {
+			x: 0,
+			y: 0,
+			panX: 0,
+			panY: 0
+		};
+		let restoreFocus = null;
+		const zoomable = computed(() => props.hasZoom && !isVideo.value);
+		const imageTransform = computed(() => zoom.value === 1 ? void 0 : `scale(${zoom.value}) translate(${pan.value.x / zoom.value}px, ${pan.value.y / zoom.value}px)`);
+		function close() {
+			emit("update:isOpen", false);
+		}
+		function setIndex(next) {
+			const last = Math.max(0, mediaList.value.length - 1);
+			const clamped = Math.min(Math.max(0, next), last);
+			internalIndex.value = clamped;
+			emit("update:index", clamped);
+		}
+		function resetZoom() {
+			zoom.value = 1;
+			pan.value = {
+				x: 0,
+				y: 0
+			};
+			dragging.value = false;
+		}
+		function applyZoom(next) {
+			if (!zoomable.value || next === zoom.value) return;
+			zoom.value = next;
+			pan.value = {
+				x: 0,
+				y: 0
+			};
+			announce(next > 1 ? messages.value.lightbox.zoomedIn : messages.value.lightbox.zoomedOut);
+		}
+		function toggleZoom() {
+			applyZoom(zoom.value === 1 ? 2 : 1);
+		}
+		function onCancel(event) {
+			event.preventDefault();
+			close();
+		}
+		function onBackdropClick(event) {
+			if (didDrag.value) {
+				didDrag.value = false;
+				return;
+			}
+			if (event.target === event.currentTarget || event.target === containerRef.value) close();
+		}
+		function onKeyDown(event) {
+			if (zoomable.value) {
+				if (event.key === "+" || event.key === "=") {
+					event.preventDefault();
+					applyZoom(2);
+					return;
+				}
+				if (event.key === "-" || event.key === "_") {
+					event.preventDefault();
+					applyZoom(1);
+					return;
+				}
+				const step = 50;
+				const offsets = {
+					ArrowDown: [0, -50],
+					ArrowLeft: [step, 0],
+					ArrowRight: [-50, 0],
+					ArrowUp: [0, step]
+				};
+				const offset = zoom.value > 1 ? offsets[event.key] : void 0;
+				if (offset != null) {
+					event.preventDefault();
+					pan.value = {
+						x: pan.value.x + offset[0],
+						y: pan.value.y + offset[1]
+					};
+					return;
+				}
+			}
+			if (event.key === "ArrowLeft" && canPrev.value) {
+				event.preventDefault();
+				setIndex(index.value - 1);
+			} else if (event.key === "ArrowRight" && canNext.value) {
+				event.preventDefault();
+				setIndex(index.value + 1);
+			}
+		}
+		function onImageKeyDown(event) {
+			if (event.key === "Enter" || event.key === " ") {
+				event.preventDefault();
+				toggleZoom();
+			}
+		}
+		function onPointerDown(event) {
+			if (!zoomable.value || zoom.value <= 1) return;
+			dragging.value = true;
+			didDrag.value = false;
+			dragStart.x = event.clientX;
+			dragStart.y = event.clientY;
+			dragStart.panX = pan.value.x;
+			dragStart.panY = pan.value.y;
+		}
+		function onPointerMove(event) {
+			if (!dragging.value) return;
+			didDrag.value = true;
+			pan.value = {
+				x: dragStart.panX + event.clientX - dragStart.x,
+				y: dragStart.panY + event.clientY - dragStart.y
+			};
+		}
+		function onPointerUp() {
+			dragging.value = false;
+		}
+		watch(() => props.isOpen, (open) => {
+			const dialog = dialogRef.value;
+			if (dialog == null) return;
+			if (open && !dialog.open) {
+				const active = document.activeElement;
+				restoreFocus = active instanceof HTMLElement ? active : null;
+				dialog.showModal();
+			} else if (!open && dialog.open) {
+				dialog.close();
+				resetZoom();
+				restoreFocus?.focus();
+				restoreFocus = null;
+			}
+		}, { flush: "post" });
+		watch(index, () => {
+			resetZoom();
+			if (!props.isOpen) return;
+			const item = current.value;
+			if (item == null || mediaList.value.length < 2) return;
+			const position = {
+				index: index.value + 1,
+				total: mediaList.value.length
+			};
+			announce(item.alt ? messages.value.lightbox.mediaPosition(item.alt, position.index, position.total) : messages.value.lightbox.imagePosition(position.index, position.total));
+		});
+		watch([dragging], ([isDragging]) => {
+			if (!isDragging) return;
+			window.addEventListener("pointermove", onPointerMove);
+			window.addEventListener("pointerup", onPointerUp);
+		}, { flush: "post" });
+		onBeforeUnmount(() => {
+			window.removeEventListener("pointermove", onPointerMove);
+			window.removeEventListener("pointerup", onPointerUp);
+		});
+		watch(dragging, (isDragging, wasDragging) => {
+			if (wasDragging && !isDragging) {
+				window.removeEventListener("pointermove", onPointerMove);
+				window.removeEventListener("pointerup", onPointerUp);
+			}
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [createCommentVNode(" eslint-disable-next-line vue-a11y/click-events-have-key-events, vue-a11y/no-static-element-interactions -- 点在 dialog 自身上等于点遮罩；键盘走 Escape 和方向键。 "), current.value ? (openBlock(), createElementBlock("dialog", {
+				key: 0,
+				ref: "dialog",
+				class: normalizeClass(["astryx-lightbox", _ctx.$attrs.class]),
+				style: normalizeStyle(_ctx.$attrs.style),
+				"aria-label": current.value.alt || unref(messages).lightbox.mediaViewer,
+				"data-component": "lightbox",
+				onCancel,
+				onClick: onBackdropClick,
+				onKeydown: onKeyDown
+			}, [createElementVNode("div", {
+				ref_key: "containerRef",
+				ref: containerRef,
+				class: "astryx-lightbox__container"
+			}, [
+				createVNode(_sfc_main$1, {
+					class: "astryx-lightbox__close",
+					variant: "ghost",
+					size: "sm",
+					label: unref(messages).lightbox.close,
+					onClick: close
+				}, {
+					default: withCtx(() => [createVNode(_sfc_main$2, {
+						icon: "close",
+						size: "sm"
+					})]),
+					_: 1
+				}, 8, ["label"]),
+				isGallery.value ? (openBlock(), createBlock(_sfc_main$1, {
+					key: 0,
+					class: "astryx-lightbox__nav astryx-lightbox__nav--prev",
+					variant: "ghost",
+					size: "sm",
+					label: unref(messages).lightbox.previous,
+					"is-disabled": !canPrev.value,
+					onClick: _cache[0] || (_cache[0] = ($event) => setIndex(index.value - 1))
+				}, {
+					default: withCtx(() => [createVNode(_sfc_main$2, {
+						icon: "chevronLeft",
+						size: "sm"
+					})]),
+					_: 1
+				}, 8, ["label", "is-disabled"])) : createCommentVNode("v-if", true),
+				createElementVNode("div", _hoisted_2, [
+					createCommentVNode(" eslint-disable-next-line vue-a11y/no-static-element-interactions -- 可缩放时 role、tabindex 和 aria 从脚本绑上；视频没有这些交互。 "),
+					createElementVNode("div", {
+						class: "astryx-lightbox__frame",
+						"data-zoomable": zoomable.value || void 0,
+						"data-zoomed": zoom.value > 1 || void 0,
+						"data-dragging": dragging.value || void 0,
+						role: zoomable.value ? "button" : void 0,
+						tabindex: zoomable.value ? 0 : void 0,
+						"aria-pressed": zoomable.value ? zoom.value > 1 : void 0,
+						"aria-label": zoomable.value ? unref(messages).lightbox.zoom : void 0,
+						onDblclick: _cache[1] || (_cache[1] = ($event) => isVideo.value ? void 0 : toggleZoom()),
+						onKeydown: _cache[2] || (_cache[2] = ($event) => zoomable.value ? onImageKeyDown($event) : void 0),
+						onPointerdown: _cache[3] || (_cache[3] = ($event) => isVideo.value ? void 0 : onPointerDown($event))
+					}, [createCommentVNode(" eslint-disable-next-line vue-a11y/media-has-caption -- 说明文字在灯箱 caption 里；媒体文件本身不带字幕轨。 "), isVideo.value ? (openBlock(), createElementBlock("video", {
+						key: 0,
+						class: "astryx-lightbox__video",
+						src: current.value.src,
+						"aria-label": current.value.alt,
+						controls: "",
+						autoplay: __props.hasAutoPlay
+					}, null, 8, _hoisted_4)) : (openBlock(), createElementBlock("img", {
+						key: 1,
+						class: "astryx-lightbox__image",
+						src: current.value.src,
+						alt: current.value.alt,
+						draggable: "false",
+						style: normalizeStyle(imageTransform.value ? { transform: imageTransform.value } : void 0),
+						"data-dragging": dragging.value || void 0
+					}, null, 12, _hoisted_5))], 40, _hoisted_3),
+					current.value.caption ? (openBlock(), createElementBlock("p", _hoisted_6, toDisplayString(current.value.caption), 1)) : createCommentVNode("v-if", true)
+				]),
+				isGallery.value ? (openBlock(), createBlock(_sfc_main$1, {
+					key: 1,
+					class: "astryx-lightbox__nav astryx-lightbox__nav--next",
+					variant: "ghost",
+					size: "sm",
+					label: unref(messages).lightbox.next,
+					"is-disabled": !canNext.value,
+					onClick: _cache[4] || (_cache[4] = ($event) => setIndex(index.value + 1))
+				}, {
+					default: withCtx(() => [createVNode(_sfc_main$2, {
+						icon: "chevronRight",
+						size: "sm"
+					})]),
+					_: 1
+				}, 8, ["label", "is-disabled"])) : createCommentVNode("v-if", true),
+				isGallery.value ? (openBlock(), createElementBlock("p", _hoisted_7, toDisplayString(index.value + 1) + " / " + toDisplayString(mediaList.value.length), 1)) : createCommentVNode("v-if", true)
+			], 512)], 46, _hoisted_1)) : createCommentVNode("v-if", true)], 2112);
+		};
+	}
+});
+//#endregion
+//#region src/Lightbox/useLightbox.ts
+/**
+* Owns the open state and gallery index for a `Lightbox`.
+* Bind `bindings` onto `Lightbox`, and call `open(index)` from a thumbnail.
+*/
+function useLightbox(options) {
+	const isOpen = ref(false);
+	const index = ref(0);
+	function open(next = 0) {
+		index.value = next;
+		isOpen.value = true;
+	}
+	function close() {
+		isOpen.value = false;
+	}
+	function triggerPropsFor(next) {
+		return {
+			"aria-haspopup": "dialog",
+			"onClick": () => open(next),
+			"onKeydown": (event) => {
+				if (event.key !== "Enter" && event.key !== " ") return;
+				event.preventDefault();
+				open(next);
+			},
+			"role": "button",
+			"tabindex": 0
+		};
+	}
+	return {
+		bindings: computed(() => ({
+			"hasAutoPlay": options.hasAutoPlay,
+			"hasZoom": options.hasZoom,
+			"index": index.value,
+			"isOpen": isOpen.value,
+			"media": options.media,
+			"onUpdate:index": (next) => {
+				index.value = next;
+			},
+			"onUpdate:isOpen": (next) => {
+				isOpen.value = next;
+			}
+		})),
+		close,
+		getTriggerProps: triggerPropsFor,
+		index,
+		isOpen,
+		open,
+		triggerProps: computed(() => triggerPropsFor(0))
+	};
+}
+//#endregion
+export { _sfc_main as n, useLightbox as t };

package/dist/Link/index.d.ts

@@ -1,2 +1,2 @@
-import { n as LinkColor, r as LinkProps, t as _default } from "../index-DXDGk38y.js";
+import { n as LinkColor, r as LinkProps, t as _default } from "../index-Bn_odHQ9.js";
 export { _default as Link, type LinkColor, type LinkProps };

package/dist/List/index.d.ts

@@ -1,3 +1,3 @@
 import { a as ItemLayout, c as ItemTarget, d as ListEdgeCompensation, f as ListItemProps, g as ListSlots, h as ListProps, i as ItemLabel, l as ItemText, m as ListMarkerStyle, n as ItemDensity, o as ItemProps, p as ListItemSlots, r as ItemElement, s as ItemSlots, t as ItemAlign, u as ListDensity } from "../types-CAZY4Xua.js";
-import { a as useListContext, i as useItemDescriptionId, n as _default$1, r as _default, t as _default$2 } from "../index-5R_pi3eT.js";
+import { a as useListContext, i as useItemDescriptionId, n as _default$1, r as _default, t as _default$2 } from "../index-D-ZuubCK.js";
 export { _default as Item, type ItemAlign, type ItemDensity, type ItemElement, type ItemLabel, type ItemLayout, type ItemProps, type ItemSlots, type ItemTarget, type ItemText, _default$1 as List, type ListDensity, type ListEdgeCompensation, _default$2 as ListItem, type ListItemProps, type ListItemSlots, type ListMarkerStyle, type ListProps, type ListSlots, useItemDescriptionId, useListContext };

package/dist/Markdown/index.d.ts

@@ -1,2 +1,2 @@
-import { _ as MarkdownSlots, a as MarkdownAlign, c as MarkdownDensity, d as MarkdownHeadingProps, f as MarkdownImageProps, g as MarkdownProps, h as MarkdownListProps, i as _default, l as MarkdownDisplay, m as MarkdownLinkProps, n as uniqueSlug, o as MarkdownCodeProps, p as MarkdownInlineCodeProps, r as parseMarkdown, s as MarkdownComponents, t as slugify, u as MarkdownHeadingLevel } from "../index--dh0s8Li.js";
+import { _ as MarkdownSlots, a as MarkdownAlign, c as MarkdownDensity, d as MarkdownHeadingProps, f as MarkdownImageProps, g as MarkdownProps, h as MarkdownListProps, i as _default, l as MarkdownDisplay, m as MarkdownLinkProps, n as uniqueSlug, o as MarkdownCodeProps, p as MarkdownInlineCodeProps, r as parseMarkdown, s as MarkdownComponents, t as slugify, u as MarkdownHeadingLevel } from "../index-DfgHJE7H.js";
 export { _default as Markdown, type MarkdownAlign, type MarkdownCodeProps, type MarkdownComponents, type MarkdownDensity, type MarkdownDisplay, type MarkdownHeadingLevel, type MarkdownHeadingProps, type MarkdownImageProps, type MarkdownInlineCodeProps, type MarkdownLinkProps, type MarkdownListProps, type MarkdownProps, type MarkdownSlots, parseMarkdown, slugify, uniqueSlug };

package/dist/Markdown/index.js

@@ -1,2 +1,2 @@
-import { i as parseMarkdown, n as slugify, r as uniqueSlug, t as _sfc_main } from "../Markdown-Dnlp8cVx.js";
+import { i as parseMarkdown, n as slugify, r as uniqueSlug, t as _sfc_main } from "../Markdown-D-Ua055V.js";
 export { _sfc_main as Markdown, parseMarkdown, slugify, uniqueSlug };

package/dist/{Markdown-Dnlp8cVx.js → Markdown-D-Ua055V.js}

@@ -1,9 +1,9 @@
 import { t as _sfc_main$1 } from "./VisuallyHidden-C7NN3VEP.js";
 import { t as _sfc_main$2 } from "./Heading-Dugosn6j.js";
+import { a as useAstryxMessages } from "./context-Dbo22sck.js";
 import { t as _sfc_main$3 } from "./Blockquote-DFqBv_oJ.js";
-import { a as useAstryxMessages } from "./context-BshXcNYX.js";
 import { t as _sfc_main$4 } from "./CheckboxIndicator-DdJmksHt.js";
-import { c as _sfc_main$5, t as _sfc_main$6 } from "./CodeBlock-BQdooQy2.js";
+import { c as _sfc_main$5, t as _sfc_main$6 } from "./CodeBlock-CxTb6j9_.js";
 import { t as _sfc_main$7 } from "./Link-CprjOuTI.js";
 import { Fragment, computed, defineComponent, h, ref } from "vue";
 import { fromMarkdown } from "mdast-util-from-markdown";

package/dist/MetadataList/index.js

@@ -1,2 +1,2 @@
-import { n as _sfc_main, t as _sfc_main$1 } from "../MetadataList-DIsqS1Qb.js";
+import { n as _sfc_main, t as _sfc_main$1 } from "../MetadataList-sYph_d8Q.js";
 export { _sfc_main as MetadataList, _sfc_main$1 as MetadataListItem };

package/dist/{MetadataList-DIsqS1Qb.js → MetadataList-sYph_d8Q.js}

@@ -1,4 +1,4 @@
-import { a as useAstryxMessages } from "./context-BshXcNYX.js";
+import { a as useAstryxMessages } from "./context-Dbo22sck.js";
 import { Comment, Fragment, computed, defineComponent, h, inject, provide, ref, useId, useSlots } from "vue";
 import "../styles/metadata-list.css";
 //#region src/MetadataList/context.ts

package/dist/MobileNav/index.d.ts

@@ -1,2 +1,2 @@
-import { a as MobileNavSide, c as MobileNavToggleProps, i as MobileNavProps, l as mobileNavKey, n as _default, o as MobileNavSlots, r as MobileNavEmits, s as MobileNavToggleEmits, t as _default$1 } from "../index-Dbmgcm8a.js";
+import { a as MobileNavSide, c as MobileNavToggleProps, i as MobileNavProps, l as mobileNavKey, n as _default, o as MobileNavSlots, r as MobileNavEmits, s as MobileNavToggleEmits, t as _default$1 } from "../index-BeR-1LgF.js";
 export { _default as MobileNav, type MobileNavEmits, type MobileNavProps, type MobileNavSide, type MobileNavSlots, _default$1 as MobileNavToggle, type MobileNavToggleEmits, type MobileNavToggleProps, mobileNavKey };

package/dist/MobileNav/index.js

@@ -1,2 +1,2 @@
-import { n as _sfc_main, r as mobileNavKey, t as _sfc_main$1 } from "../MobileNavToggle-aUZiDwHm.js";
+import { n as _sfc_main, r as mobileNavKey, t as _sfc_main$1 } from "../MobileNavToggle-DD9D01aj.js";
 export { _sfc_main as MobileNav, _sfc_main$1 as MobileNavToggle, mobileNavKey };

package/dist/{MobileNavToggle-aUZiDwHm.js → MobileNavToggle-DD9D01aj.js}

@@ -1,5 +1,5 @@
 import { n as useFocusTrap, t as useRestoreFocus } from "./useRestoreFocus-BvMdXVX9.js";
-import { a as useAstryxMessages } from "./context-BshXcNYX.js";
+import { a as useAstryxMessages } from "./context-Dbo22sck.js";
 import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, mergeModels, nextTick, normalizeClass, normalizeStyle, onMounted, openBlock, provide, ref, renderSlot, toDisplayString, unref, useId, useModel, watch } from "vue";
 import "../styles/mobile-nav.css";
 //#region src/MobileNav/context.ts
@@ -7,10 +7,15 @@ import "../styles/mobile-nav.css";
 const mobileNavKey = Symbol("astryx-mobile-nav");
 //#endregion
 //#region src/MobileNav/MobileNav.vue
-const _hoisted_1$1 = ["aria-labelledby", "aria-label"];
+const _hoisted_1$1 = [
+	"id",
+	"aria-labelledby",
+	"aria-label"
+];
 const _hoisted_2 = { class: "astryx-mobile-nav__drawer" };
-const _hoisted_3 = ["aria-label"];
-const _hoisted_4 = { class: "astryx-mobile-nav__body" };
+const _hoisted_3 = ["id"];
+const _hoisted_4 = ["aria-label"];
+const _hoisted_5 = { class: "astryx-mobile-nav__body" };
 const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 	name: "AstryxMobileNav",
 	__name: "MobileNav",
@@ -18,7 +23,8 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 		header: {},
 		width: { default: 320 },
 		side: { default: "auto" },
-		label: {}
+		label: {},
+		id: {}
 	}, {
 		"isOpen": {
 			type: Boolean,
@@ -34,8 +40,9 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 		const isOpen = useModel(__props, "isOpen");
 		const dialogRef = ref(null);
 		const resolvedSide = ref(props.side === "end" ? "end" : "start");
-		const dialogId = `astryx-mobile-nav-${useId()}`;
-		const labelId = `${dialogId}-label`;
+		const generatedId = `astryx-mobile-nav-${useId()}`;
+		const dialogId = computed(() => props.id || generatedId);
+		const labelId = computed(() => `${dialogId.value}-label`);
 		let previousOverflow = "";
 		const accessibleName = computed(() => props.label || props.header || messages.value.nav.mobileNav);
 		const trapEnabled = computed(() => isOpen.value);
@@ -101,21 +108,21 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock(Fragment, null, [createCommentVNode(" eslint-disable-next-line vue-a11y/click-events-have-key-events, vue-a11y/no-static-element-interactions -- 点在 dialog 自身上等于点遮罩；键盘用户走原生 cancel。 "), createElementVNode("dialog", {
-				id: dialogId,
+				id: dialogId.value,
 				ref_key: "dialogRef",
 				ref: dialogRef,
 				class: normalizeClass(["astryx-mobile-nav", sideIsStart.value ? "astryx-mobile-nav--start" : "astryx-mobile-nav--end"]),
 				style: normalizeStyle({ "--astryx-mobile-nav-width": `${__props.width}px` }),
 				"aria-modal": "true",
-				"aria-labelledby": _ctx.$slots.header || __props.header ? labelId : void 0,
+				"aria-labelledby": _ctx.$slots.header || __props.header ? labelId.value : void 0,
 				"aria-label": _ctx.$slots.header || __props.header ? void 0 : accessibleName.value,
 				onCancel,
 				onClick: onDialogClick
 			}, [createElementVNode("div", _hoisted_2, [createElementVNode("div", { class: normalizeClass(["astryx-mobile-nav__header", { "astryx-mobile-nav__header--end": !_ctx.$slots.header && !__props.header }]) }, [_ctx.$slots.header || __props.header ? (openBlock(), createElementBlock("div", {
 				key: 0,
-				id: labelId,
+				id: labelId.value,
 				class: "astryx-mobile-nav__title"
-			}, [renderSlot(_ctx.$slots, "header", {}, () => [createTextVNode(toDisplayString(__props.header), 1)])])) : createCommentVNode("v-if", true), createElementVNode("button", {
+			}, [renderSlot(_ctx.$slots, "header", {}, () => [createTextVNode(toDisplayString(__props.header), 1)])], 8, _hoisted_3)) : createCommentVNode("v-if", true), createElementVNode("button", {
 				type: "button",
 				class: "astryx-mobile-nav__close",
 				"aria-label": unref(messages).nav.close,
@@ -123,7 +130,7 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 			}, [..._cache[1] || (_cache[1] = [createElementVNode("span", {
 				class: "astryx-mobile-nav__close-glyph",
 				"aria-hidden": "true"
-			}, null, -1)])], 8, _hoisted_3)], 2), createElementVNode("div", _hoisted_4, [renderSlot(_ctx.$slots, "default")])])], 46, _hoisted_1$1)], 2112);
+			}, null, -1)])], 8, _hoisted_4)], 2), createElementVNode("div", _hoisted_5, [renderSlot(_ctx.$slots, "default")])])], 46, _hoisted_1$1)], 2112);
 		};
 	}
 });

package/dist/MoreMenu/index.d.ts

@@ -1,2 +1,2 @@
-import { An as MoreMenuResolvedPresentation, Cn as MoreMenuIcon, Dn as MoreMenuOption, En as MoreMenuItemVariant, Mn as MoreMenuSlots, On as MoreMenuPresentation, Sn as MoreMenuEmits, Tn as MoreMenuItem, bn as _default, jn as MoreMenuSection, kn as MoreMenuProps, wn as MoreMenuInitialFocus, xn as MoreMenuDivider } from "../index-CQ9F1f_F.js";
+import { An as MoreMenuIcon, Dn as _default, Fn as MoreMenuPresentation, In as MoreMenuProps, Ln as MoreMenuResolvedPresentation, Mn as MoreMenuItem, Nn as MoreMenuItemVariant, On as MoreMenuDivider, Pn as MoreMenuOption, Rn as MoreMenuSection, jn as MoreMenuInitialFocus, kn as MoreMenuEmits, zn as MoreMenuSlots } from "../index-C6iJwTL0.js";
 export { _default as MoreMenu, type MoreMenuDivider, type MoreMenuEmits, type MoreMenuIcon, type MoreMenuInitialFocus, type MoreMenuItem, type MoreMenuItemVariant, type MoreMenuOption, type MoreMenuPresentation, type MoreMenuProps, type MoreMenuResolvedPresentation, type MoreMenuSection, type MoreMenuSlots };

package/dist/MoreMenu/index.js

@@ -1,2 +1,2 @@
-import { t as _sfc_main } from "../MoreMenu-BXL6Dqsu.js";
+import { t as _sfc_main } from "../MoreMenu-BVrK5kkk.js";
 export { _sfc_main as MoreMenu };

package/dist/{MoreMenu-BXL6Dqsu.js → MoreMenu-BVrK5kkk.js}

@@ -2,7 +2,7 @@ import { n as getFocusables, t as focusElement } from "./focus-CpficIgf.js";
 import { n as useOverflow } from "./useOverflow-VrwF5oek.js";
 import { t as _sfc_main$5 } from "./Heading-Dugosn6j.js";
 import { t as _sfc_main$6 } from "./IconButton-BNQuz9W_.js";
-import { t as _sfc_main$7 } from "./Icon-5MdZQ18k.js";
+import { t as _sfc_main$7 } from "./Icon-Dfr4k6-S.js";
 import { t as _sfc_main$8 } from "./Divider-BtwnL18I.js";
 import { n as _sfc_main$10, t as _sfc_main$9 } from "./ListItem-pGxvn6QJ.js";
 import { t as usePositionedLayer } from "./usePositionedLayer-C1NBOsVT.js";

package/dist/MultiSelector/index.d.ts

@@ -1,2 +1,2 @@
-import { a as MultiSelectorDivider, c as MultiSelectorOptionData, d as MultiSelectorSection, f as MultiSelectorSize, g as MultiSelectorVariant, h as MultiSelectorTriggerDisplay, i as MultiSelectorCheckboxPosition, l as MultiSelectorPresentation, m as MultiSelectorStatus, n as flattenOptions, o as MultiSelectorEmits, p as MultiSelectorSlots, r as _default, s as MultiSelectorOption, t as SELECT_ALL_VALUE, u as MultiSelectorProps } from "../index-D3V7yRUP.js";
+import { a as MultiSelectorDivider, c as MultiSelectorOptionData, d as MultiSelectorSection, f as MultiSelectorSize, g as MultiSelectorVariant, h as MultiSelectorTriggerDisplay, i as MultiSelectorCheckboxPosition, l as MultiSelectorPresentation, m as MultiSelectorStatus, n as flattenOptions, o as MultiSelectorEmits, p as MultiSelectorSlots, r as _default, s as MultiSelectorOption, t as SELECT_ALL_VALUE, u as MultiSelectorProps } from "../index-DOUEn7V0.js";
 export { _default as MultiSelector, type MultiSelectorCheckboxPosition, type MultiSelectorDivider, type MultiSelectorEmits, type MultiSelectorOption, type MultiSelectorOptionData, type MultiSelectorPresentation, type MultiSelectorProps, type MultiSelectorSection, type MultiSelectorSize, type MultiSelectorSlots, type MultiSelectorStatus, type MultiSelectorTriggerDisplay, type MultiSelectorVariant, SELECT_ALL_VALUE, flattenOptions };

package/dist/MultiSelector/index.js

@@ -1,2 +1,2 @@
-import { n as SELECT_ALL_VALUE, r as flattenOptions, t as _sfc_main } from "../MultiSelector-Bh8or2S6.js";
+import { n as SELECT_ALL_VALUE, r as flattenOptions, t as _sfc_main } from "../MultiSelector-DiYov9sF.js";
 export { _sfc_main as MultiSelector, SELECT_ALL_VALUE, flattenOptions };

package/dist/{MultiSelector-Bh8or2S6.js → MultiSelector-DiYov9sF.js}

@@ -1,10 +1,10 @@
 import { t as useCombobox } from "./useCombobox-CTo5C-gc.js";
 import { n as useOverflow } from "./useOverflow-VrwF5oek.js";
+import { a as useAstryxMessages } from "./context-Dbo22sck.js";
 import { t as _sfc_main$1 } from "./BottomSheet-Dg95HB1s.js";
-import { a as useAstryxMessages } from "./context-BshXcNYX.js";
 import { t as _sfc_main$2 } from "./CheckboxIndicator-DdJmksHt.js";
-import { t as _sfc_main$3 } from "./Field-VlTBsIEo.js";
-import { t as _sfc_main$4 } from "./Token-CV2J94bn.js";
+import { t as _sfc_main$3 } from "./Field-8zRxzDHE.js";
+import { t as _sfc_main$4 } from "./Token-wt4e80IM.js";
 import { n as useAnchoredListbox, t as scrollOptionIntoView } from "./useAnchoredListbox-7W90Ny-9.js";
 import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useId, useTemplateRef, vShow, watch, withCtx, withDirectives, withModifiers } from "vue";
 import "../styles/visually-hidden-utility.css";

package/dist/NavItem/index.d.ts

@@ -1,3 +1,3 @@
 import { a as NavItemSize, i as NavItemProps, n as NavIconSlots, o as NavItemSlots, r as NavItemEmits, s as NavLinkComponent, t as NavIconProps } from "../types-BG23kC3S.js";
-import { n as _default, r as resolveNavRoot, t as _default$1 } from "../index-Q4gqBSIZ.js";
+import { n as _default, r as resolveNavRoot, t as _default$1 } from "../index-fa72tWIU.js";
 export { _default as NavIcon, type NavIconProps, type NavIconSlots, _default$1 as NavItem, type NavItemEmits, type NavItemProps, type NavItemSize, type NavItemSlots, type NavLinkComponent, resolveNavRoot };

package/dist/NavMenu/index.d.ts

@@ -1,2 +1,2 @@
-import { a as NavMenuEmits, c as NavMenuProps, i as NavDisclosureProps, l as NavMenuFocusRequest, n as _default$1, o as NavMenuItemEmits, r as _default, s as NavMenuItemProps, t as _default$2, u as NavMenuSize } from "../index-g03bmR4K.js";
+import { a as NavMenuEmits, c as NavMenuProps, i as NavDisclosureProps, l as NavMenuFocusRequest, n as _default$1, o as NavMenuItemEmits, r as _default, s as NavMenuItemProps, t as _default$2, u as NavMenuSize } from "../index-D0TlUOtG.js";
 export { _default as NavDisclosure, type NavDisclosureProps, _default$1 as NavMenu, type NavMenuEmits, type NavMenuFocusRequest, _default$2 as NavMenuItem, type NavMenuItemEmits, type NavMenuItemProps, type NavMenuProps, type NavMenuSize };

package/dist/NavMenu/index.js

@@ -1,3 +1,3 @@
 import { t as _sfc_main } from "../NavDisclosure-DHrSNRDR.js";
-import { n as _sfc_main$1, t as _sfc_main$2 } from "../NavMenuItem-mzNQESpB.js";
+import { n as _sfc_main$1, t as _sfc_main$2 } from "../NavMenuItem-B-k7olt5.js";
 export { _sfc_main as NavDisclosure, _sfc_main$1 as NavMenu, _sfc_main$2 as NavMenuItem };

package/dist/{NavMenuItem-mzNQESpB.js → NavMenuItem-B-k7olt5.js}

@@ -126,8 +126,9 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				event.preventDefault();
 				return;
 			}
+			const preventedBeforeItem = event.defaultPrevented;
 			emit("click", event);
-			if (event.defaultPrevented || props.keepOpen) return;
+			if (props.keepOpen || !preventedBeforeItem && event.defaultPrevented) return;
 			closeMenu?.();
 			menu?.close();
 		}

package/dist/NumberInput/index.d.ts

@@ -1,2 +1,2 @@
-import { n as NumberInputEmits, r as NumberInputProps, t as _default } from "../index-CsJpQElv.js";
+import { n as NumberInputEmits, r as NumberInputProps, t as _default } from "../index-NzLDrOkk.js";
 export { _default as NumberInput, type NumberInputEmits, type NumberInputProps };

package/dist/NumberInput/index.js

@@ -1,2 +1,2 @@
-import { t as _sfc_main } from "../NumberInput-C3S-4dIu.js";
+import { t as _sfc_main } from "../NumberInput-CTYiQxHq.js";
 export { _sfc_main as NumberInput };

package/dist/{NumberInput-C3S-4dIu.js → NumberInput-CTYiQxHq.js}

@@ -1,5 +1,5 @@
 import { t as useNumberField } from "./useNumberField-DL-Radsp.js";
-import { a as useAstryxMessages } from "./context-BshXcNYX.js";
+import { a as useAstryxMessages } from "./context-Dbo22sck.js";
 import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, ref, unref, useId } from "vue";
 import "../styles/number-input.css";
 //#region src/NumberInput/NumberInput.vue

package/dist/Outline/index.d.ts

@@ -0,0 +1,2 @@
+import { a as OutlineProps, i as OutlineItem, n as OutlineDensity, r as OutlineEmits, t as _default } from "../index-Cn-sSds-.js";
+export { _default as Outline, type OutlineDensity, type OutlineEmits, type OutlineItem, type OutlineProps };

package/dist/Outline/index.js

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