@astryx-vue/core 0.3.0 → 0.4.1

package/dist/MediaTheme-DlLqYhDy.js

@@ -0,0 +1,433 @@
+import { t as useMediaQuery } from "./useMediaQuery-GMmgp28-.js";
+import { n as themeContextKey, t as mediaThemeKey } from "./context-Cws_tXTr.js";
+import { n as resolveLightDark, t as readColorMode } from "./colorMode-BxqfDP4P.js";
+import { computed, createElementBlock, defineComponent, inject, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, onUpdated, openBlock, provide, ref, renderSlot, unref, useAttrs, useTemplateRef, watch } from "vue";
+import "../styles/media-theme.css";
+//#region src/Theme/dataTokens.ts
+/**
+* Data-visualization color defaults, by upstream name.
+*
+* The CSS lives in `@astryx-vue/themes/data.css`, which every theme entry
+* imports; this is the same group for code that paints outside CSS, such as
+* a canvas chart, and for checking a theme's `--color-data-*` overrides.
+* `data.test.ts` keeps the two in sync.
+*/
+const DATA_TOKEN_DEFAULTS = {
+	"--color-data-categorical-blue": "light-dark(#0171E3, #0171E3)",
+	"--color-data-categorical-orange": "light-dark(#EB6E00, #EB6E00)",
+	"--color-data-categorical-purple": "light-dark(#6B1EFD, #6B1EFD)",
+	"--color-data-categorical-green": "light-dark(#0B991F, #0B991F)",
+	"--color-data-categorical-pink": "light-dark(#F351C0, #F351C0)",
+	"--color-data-categorical-cyan": "light-dark(#0171A4, #0171A4)",
+	"--color-data-categorical-red": "light-dark(#F5394F, #F5394F)",
+	"--color-data-categorical-teal": "light-dark(#08A3A3, #08A3A3)",
+	"--color-data-categorical-brown": "light-dark(#965E03, #965E03)",
+	"--color-data-categorical-indigo": "light-dark(#6F8AFF, #6F8AFF)",
+	"--color-data-neutral": "light-dark(#8494A3, #8C939B)",
+	"--color-data-blue-5": "light-dark(#02165E, #02165E)",
+	"--color-data-blue-4": "light-dark(#004CBC, #004CBC)",
+	"--color-data-blue-3": "light-dark(#2694FE, #2694FE)",
+	"--color-data-blue-2": "light-dark(#78BEFF, #78BEFF)",
+	"--color-data-blue-1": "light-dark(#DBECFF, #DBECFF)",
+	"--color-data-shamrock-5": "light-dark(#0B603D, #0B603D)",
+	"--color-data-shamrock-4": "light-dark(#138546, #138546)",
+	"--color-data-shamrock-3": "light-dark(#24BB5E, #24BB5E)",
+	"--color-data-shamrock-2": "light-dark(#8EF7AA, #8EF7AA)",
+	"--color-data-shamrock-1": "light-dark(#D6FEE4, #D6FEE4)",
+	"--color-data-orange-5": "light-dark(#A13F04, #A13F04)",
+	"--color-data-orange-4": "light-dark(#D66100, #D66100)",
+	"--color-data-orange-3": "light-dark(#FD9537, #FD9537)",
+	"--color-data-orange-2": "light-dark(#FDB876, #FDB876)",
+	"--color-data-orange-1": "light-dark(#FFE6CF, #FFE6CF)",
+	"--color-data-pink-5": "light-dark(#8E1073, #8E1073)",
+	"--color-data-pink-4": "light-dark(#D123A1, #D123A1)",
+	"--color-data-pink-3": "light-dark(#F989D3, #F989D3)",
+	"--color-data-pink-2": "light-dark(#FEADE3, #FEADE3)",
+	"--color-data-pink-1": "light-dark(#FCE3F4, #FCE3F4)",
+	"--color-data-purple-5": "light-dark(#3E0697, #3E0697)",
+	"--color-data-purple-4": "light-dark(#6B1EFD, #6B1EFD)",
+	"--color-data-purple-3": "light-dark(#9081FF, #9081FF)",
+	"--color-data-purple-2": "light-dark(#B3B0FE, #B3B0FE)",
+	"--color-data-purple-1": "light-dark(#E8E8FB, #E8E8FB)",
+	"--color-data-red-5": "light-dark(#9D0519, #9D0519)",
+	"--color-data-red-4": "light-dark(#D31130, #D31130)",
+	"--color-data-red-3": "light-dark(#FB7D87, #FB7D87)",
+	"--color-data-red-2": "light-dark(#FFB2B8, #FFB2B8)",
+	"--color-data-red-1": "light-dark(#FEE4E6, #FEE4E6)",
+	"--color-data-teal-5": "light-dark(#08767D, #08767D)",
+	"--color-data-teal-4": "light-dark(#0C9293, #0C9293)",
+	"--color-data-teal-3": "light-dark(#0DB7AF, #0DB7AF)",
+	"--color-data-teal-2": "light-dark(#6CE6D8, #6CE6D8)",
+	"--color-data-teal-1": "light-dark(#D7FCF8, #D7FCF8)",
+	"--color-data-yellow-5": "light-dark(#8A5001, #8A5001)",
+	"--color-data-yellow-4": "light-dark(#D69804, #D69804)",
+	"--color-data-yellow-3": "light-dark(#FBCE03, #FBCE03)",
+	"--color-data-yellow-2": "light-dark(#FCEC85, #FCEC85)",
+	"--color-data-yellow-1": "light-dark(#FDF6BA, #FDF6BA)",
+	"--color-data-gray-5": "light-dark(#25363F, #333338)",
+	"--color-data-gray-4": "light-dark(#5D6C7B, #666A72)",
+	"--color-data-gray-3": "light-dark(#AFB9C4, #B2B8BE)",
+	"--color-data-gray-2": "light-dark(#CCD3DB, #D0D3D6)",
+	"--color-data-gray-1": "light-dark(#F1F4F7, #F2F4F6)"
+};
+//#endregion
+//#region src/Theme/contrast.ts
+const HEX = /^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
+const RGB = /^rgba?\(\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)(?:[,\s/]+([\d.]+)(%)?)?\s*\)$/i;
+function parseColor(input) {
+	const value = input.trim().toLowerCase();
+	if (value === "transparent") return {
+		r: 0,
+		g: 0,
+		b: 0,
+		a: 0
+	};
+	const hex = HEX.exec(value);
+	if (hex?.[1]) {
+		const raw = hex[1];
+		const expanded = raw.length === 3 ? raw.split("").map((part) => part + part).join("") : raw;
+		const channels = expanded.length === 6 ? `${expanded}ff` : expanded;
+		return {
+			r: Number.parseInt(channels.slice(0, 2), 16),
+			g: Number.parseInt(channels.slice(2, 4), 16),
+			b: Number.parseInt(channels.slice(4, 6), 16),
+			a: Number.parseInt(channels.slice(6, 8), 16) / 255
+		};
+	}
+	const rgb = RGB.exec(value);
+	if (!rgb) return null;
+	const alpha = rgb[4] == null ? 1 : rgb[5] === "%" ? Number.parseFloat(rgb[4]) / 100 : Number.parseFloat(rgb[4]);
+	return {
+		r: Number.parseFloat(rgb[1] ?? "0"),
+		g: Number.parseFloat(rgb[2] ?? "0"),
+		b: Number.parseFloat(rgb[3] ?? "0"),
+		a: alpha
+	};
+}
+function channel(value) {
+	const scaled = value / 255;
+	return scaled <= .04045 ? scaled / 12.92 : ((scaled + .055) / 1.055) ** 2.4;
+}
+function relativeLuminance(color) {
+	return .2126 * channel(color.r) + .7152 * channel(color.g) + .0722 * channel(color.b);
+}
+/** WCAG contrast ratio. 1 is no contrast. */
+function contrastRatio(foreground, background) {
+	const first = relativeLuminance(foreground);
+	const second = relativeLuminance(background);
+	const lighter = Math.max(first, second);
+	const darker = Math.min(first, second);
+	return (lighter + .05) / (darker + .05);
+}
+/** Paint `foreground` over an opaque `backdrop`. The result is opaque. */
+function compositeOver(foreground, backdrop) {
+	const a = foreground.a;
+	return {
+		r: foreground.r * a + backdrop.r * (1 - a),
+		g: foreground.g * a + backdrop.g * (1 - a),
+		b: foreground.b * a + backdrop.b * (1 - a),
+		a: 1
+	};
+}
+/** Ambient text counts as reading well on a surface at this contrast or more. */
+const AMBIENT_READS_AT = 3;
+/**
+* Choose a media surface from the painted background.
+*
+* `off` means the ambient text already reads on that background at 3:1, so
+* no inverted context is needed. Otherwise the side whose text color, the
+* theme's `on-dark` or `on-light`, contrasts more wins. `null` means a color
+* could not be read.
+*/
+function pickMediaMode(background, ambient, onDark, onLight) {
+	if (onDark === null || onLight === null) return null;
+	if (ambient !== null && contrastRatio(ambient, background) >= AMBIENT_READS_AT) return "off";
+	return contrastRatio(onDark, background) >= contrastRatio(onLight, background) ? "dark" : "light";
+}
+//#endregion
+//#region src/Theme/tokenName.ts
+/** Unprefixed theme vocabulary: `--color-accent`, `--spacing-4`, `--font-size-base`. */
+const THEME_TOKEN_PREFIX = /^--(?:color|font|text|radius|duration|ease|spacing|size|shadow|border|focus|heading)-/;
+/** Accept `--color-accent`, `--astryx-color-accent`, or `color-accent`. */
+function normalizeTokenName(name) {
+	const trimmed = name.trim();
+	if (trimmed.startsWith("--astryx-")) return trimmed;
+	if (trimmed.startsWith("--")) return `--astryx-${trimmed.slice(2)}`;
+	return `--astryx-${trimmed}`;
+}
+/**
+* Whether a custom-property name belongs to the shared theme vocabulary,
+* written either way: `--color-accent` or `--astryx-color-accent`.
+*
+* A theme-local token may not use one of these names, because the shared
+* name already has a meaning every component reads.
+*/
+function isPortableTokenName(name) {
+	const trimmed = name.trim();
+	const bare = trimmed.startsWith("--astryx-") ? `--${trimmed.slice(9)}` : trimmed;
+	return THEME_TOKEN_PREFIX.test(bare);
+}
+/**
+* Rewrite `var(--color-accent)` to `var(--astryx-color-accent)`.
+*
+* Custom properties outside the theme vocabulary are left alone, so a
+* theme-local `var(--brand-ink)` keeps its exact name.
+*/
+function prefixTokenReferences(value) {
+	return value.replace(/var\(\s*(--(?!astryx-)[\w-]+)/g, (match, name) => {
+		if (!THEME_TOKEN_PREFIX.test(name)) return match;
+		return `var(${normalizeTokenName(name)}`;
+	});
+}
+//#endregion
+//#region src/Theme/themeStyle.ts
+/**
+* Aliases declared on `:root` are substituted there. A later override of the
+* semantic token does not flow through that already-substituted value, so the
+* alias has to be written again on the element that sets the semantic token.
+*
+* Card background and border are not aliases: Neutral paints them with its own
+* stops, and they follow the semantic token only when a theme sets one.
+*/
+const COMPONENT_BRIDGES = {
+	"--astryx-color-text-primary": [
+		"--astryx-text-foreground",
+		"--astryx-heading-foreground",
+		"--astryx-button-secondary-foreground",
+		"--astryx-button-ghost-foreground"
+	],
+	"--astryx-color-text-secondary": ["--astryx-text-supporting-foreground"],
+	"--astryx-color-accent": ["--astryx-button-primary-background", "--astryx-button-focus"],
+	"--astryx-color-on-accent": ["--astryx-button-primary-foreground"],
+	"--astryx-color-neutral": ["--astryx-button-secondary-background"],
+	"--astryx-color-icon-primary": ["--astryx-icon-primary-foreground"],
+	"--astryx-color-background-card": ["--astryx-card-background"],
+	"--astryx-color-background-muted": ["--astryx-card-muted-background"],
+	"--astryx-color-border": ["--astryx-card-border"]
+};
+/** Surfaces keep their own button treatment. Text aliases still follow onDark and onLight. */
+const SURFACE_BRIDGES = {
+	"--astryx-color-text-primary": ["--astryx-text-foreground", "--astryx-heading-foreground"],
+	"--astryx-color-text-secondary": ["--astryx-text-supporting-foreground"],
+	"--astryx-color-background-card": ["--astryx-card-background"],
+	"--astryx-color-background-muted": ["--astryx-card-muted-background"],
+	"--astryx-color-border": ["--astryx-card-border"]
+};
+function bridgeComponentTokens(tokens, bridges = COMPONENT_BRIDGES) {
+	const style = { ...tokens };
+	for (const [source, targets] of Object.entries(bridges)) {
+		const value = tokens[source];
+		if (!value) continue;
+		for (const target of targets) style[target] = value;
+	}
+	return style;
+}
+/**
+* Inline custom properties for an inverted media surface: the surface's
+* semantic tokens with their component aliases.
+*/
+function bridgeSurfaceTokens(tokens) {
+	return bridgeComponentTokens(tokens, SURFACE_BRIDGES);
+}
+//#endregion
+//#region src/Theme/useTheme.ts
+/** Prefixed data-color defaults, for reads outside a stylesheet. */
+const DATA_DEFAULTS = Object.fromEntries(Object.entries(DATA_TOKEN_DEFAULTS).map(([name, value]) => [normalizeTokenName(name), value]));
+function readDocumentToken(name, mode) {
+	if (typeof document === "undefined") return "";
+	const raw = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+	return raw ? resolveLightDark(raw, mode) : "";
+}
+/**
+* Read the nearest theme. Outside a `Theme`, the name is `neutral` and tokens
+* are read from the document's custom properties.
+*
+* Values are the theme's root values. An adaptation rule that changes a token
+* on narrow or touch screens applies through CSS only, so `token()` and
+* `tokens` stay the same across environments.
+*
+* The returned object and `token` are created once per component. `name`,
+* `mode`, and `tokens` update only when the theme or the effective mode
+* changes, so watching them does not trigger on unrelated renders.
+*/
+function useTheme() {
+	const context = inject(themeContextKey, null);
+	const prefersDark = useMediaQuery("(prefers-color-scheme: dark)");
+	const mode = computed(() => {
+		const requested = context?.value.mode;
+		if (requested === "light" || requested === "dark") return requested;
+		return readColorMode(prefersDark.value);
+	});
+	const theme = computed(() => context?.value.theme);
+	const name = computed(() => theme.value?.name ?? "neutral");
+	const tokens = computed(() => {
+		const resolved = {};
+		const source = theme.value;
+		for (const [key, value] of Object.entries({
+			...source?.tokens,
+			...source?.localTokens
+		})) resolved[key] = resolveLightDark(value, mode.value);
+		return resolved;
+	});
+	function token(tokenName) {
+		const trimmed = tokenName.trim();
+		const local = tokens.value[trimmed];
+		if (local !== void 0) return local;
+		const key = normalizeTokenName(trimmed);
+		const fallback = DATA_DEFAULTS[key];
+		return tokens.value[key] || readDocumentToken(key, mode.value) || (fallback ? resolveLightDark(fallback, mode.value) : "");
+	}
+	return {
+		name,
+		mode,
+		token,
+		tokens
+	};
+}
+//#endregion
+//#region src/Theme/useAutoMediaMode.ts
+/**
+* The opaque color behind `start`: every translucent layer up the tree,
+* composited over the first opaque one. `null` when a background image is in
+* the way, since its pixels are not readable from CSS, or when nothing
+* opaque is found.
+*/
+function resolveBackdrop(start) {
+	const layers = [];
+	for (let node = start; node; node = node.parentElement) {
+		const style = getComputedStyle(node);
+		const image = style.backgroundImage;
+		if (image !== "none" && image !== "initial" && image !== "") return null;
+		const color = parseColor(style.backgroundColor);
+		if (color && color.a > 0) {
+			layers.push(color);
+			if (color.a >= 1) break;
+		}
+	}
+	const base = layers.pop();
+	if (!base || base.a < 1) return null;
+	return layers.reduceRight((backdrop, layer) => compositeOver(layer, backdrop), base);
+}
+/**
+* Read what each token paints by assigning it to a hidden probe's `color`.
+* A custom property read directly returns its written text, such as
+* `light-dark(a, b)`; the probe returns the color the browser resolved.
+*/
+function paintedColors(host, tokens) {
+	const probe = document.createElement("span");
+	probe.style.display = "none";
+	host.appendChild(probe);
+	try {
+		return tokens.map((token) => {
+			probe.style.color = `var(${token})`;
+			return parseColor(getComputedStyle(probe).color);
+		});
+	} finally {
+		probe.remove();
+	}
+}
+/**
+* Measure the element that actually paints behind a `display: contents`
+* media theme, its parent, and pick a surface for it.
+*
+* Measures after mount, after every update of the owning component, whenever
+* the parent's `style` or `class` changes, and whenever the theme's color mode
+* or tokens change, so a surface recolored by its own prop and a surface
+* repainted by a theme switch are both picked up without the media theme
+* re-rendering. The probe is only appended when the painted backdrop or the
+* theme moved. `null` until the surface can be read.
+*/
+function useAutoMediaMode(element, enabled) {
+	const detected = ref(null);
+	const { mode, tokens } = useTheme();
+	let lastKey = null;
+	function measure() {
+		if (!enabled.value || typeof getComputedStyle !== "function") return;
+		const surface = element.value?.parentElement;
+		if (!surface) return;
+		const backdrop = resolveBackdrop(surface);
+		if (!backdrop) return;
+		const key = {
+			backdrop: `${backdrop.r},${backdrop.g},${backdrop.b}`,
+			mode: mode.value,
+			tokens: tokens.value
+		};
+		if (lastKey !== null && key.backdrop === lastKey.backdrop && key.mode === lastKey.mode && key.tokens === lastKey.tokens && detected.value !== null) return;
+		lastKey = key;
+		const [ambient, onDark, onLight] = paintedColors(surface, [
+			"--astryx-color-text-primary",
+			"--astryx-color-on-dark",
+			"--astryx-color-on-light"
+		]);
+		const next = pickMediaMode(backdrop, ambient ?? null, onDark ?? null, onLight ?? null);
+		if (next !== null) detected.value = next;
+	}
+	let observer = null;
+	function observe() {
+		observer?.disconnect();
+		observer = null;
+		const surface = element.value?.parentElement;
+		if (!enabled.value || !surface || typeof MutationObserver === "undefined") return;
+		observer = new MutationObserver(measure);
+		observer.observe(surface, {
+			attributes: true,
+			attributeFilter: ["style", "class"]
+		});
+	}
+	onMounted(() => {
+		measure();
+		observe();
+	});
+	onUpdated(measure);
+	onBeforeUnmount(() => observer?.disconnect());
+	watch(enabled, (isOn) => {
+		lastKey = null;
+		observe();
+		if (isOn) measure();
+		else detected.value = null;
+	});
+	watch([mode, tokens], measure, { flush: "post" });
+	return detected;
+}
+//#endregion
+//#region src/Theme/MediaTheme.vue
+const _hoisted_1 = ["data-astryx-media"];
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "AstryxMediaTheme",
+	inheritAttrs: false,
+	__name: "MediaTheme",
+	props: {
+		mode: {},
+		fallback: { default: "dark" }
+	},
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		const attrs = useAttrs();
+		const root = useTemplateRef("root");
+		const theme = inject(themeContextKey, null);
+		const detected = useAutoMediaMode(root, computed(() => props.mode === "auto"));
+		const resolved = computed(() => {
+			if (props.mode === "off") return "off";
+			if (props.mode === "auto") return detected.value ?? props.fallback;
+			return props.mode;
+		});
+		provide(mediaThemeKey, resolved);
+		const rootStyle = computed(() => {
+			const surface = resolved.value === "dark" ? theme?.value.theme.onDark : resolved.value === "light" ? theme?.value.theme.onLight : void 0;
+			if (!surface) return {};
+			return bridgeSurfaceTokens(surface);
+		});
+		__expose({ element: root });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "root",
+				ref: root,
+				class: normalizeClass(["astryx-media-theme", unref(attrs).class]),
+				"data-astryx-media": resolved.value === "off" ? void 0 : resolved.value,
+				style: normalizeStyle([rootStyle.value, unref(attrs).style])
+			}, [renderSlot(_ctx.$slots, "default")], 14, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { normalizeTokenName as a, parseColor as c, isPortableTokenName as i, DATA_TOKEN_DEFAULTS as l, useTheme as n, prefixTokenReferences as o, bridgeComponentTokens as r, contrastRatio as s, _sfc_main as t };

package/dist/MetadataList/index.js

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

package/dist/{MetadataList-B-OelQlt.js → MetadataList-DLlSLX1n.js}

@@ -1,10 +1,11 @@
-import { o as useAstryxMessages } from "./context-iABt_ueM.js";
-import { Comment, Fragment, computed, defineComponent, h, inject, provide, ref, useId, useSlots } from "vue";
+import { n as readLayerScoped, t as defineLayerScopedKey } from "./scopedProvide-C-Df7c15.js";
+import { s as useAstryxMessages } from "./context-CM-cjGg_.js";
+import { Comment, Fragment, computed, defineComponent, h, provide, ref, useId, useSlots } from "vue";
 import "../styles/metadata-list.css";
 //#region src/MetadataList/context.ts
-const metadataListKey = Symbol("astryx-metadata-list");
+const metadataListKey = defineLayerScopedKey("astryx-metadata-list", null);
 function useMetadataListContext() {
-	return inject(metadataListKey, null);
+	return readLayerScoped(metadataListKey);
 }
 //#endregion
 //#region src/MetadataList/MetadataList.vue
@@ -103,11 +104,12 @@ const _sfc_main$1 = defineComponent({
 //#region src/MetadataList/MetadataListItem.vue
 const _sfc_main = defineComponent({
 	name: "AstryxMetadataListItem",
+	inheritAttrs: false,
 	props: { label: {
 		type: String,
 		required: true
 	} },
-	setup(props) {
+	setup(props, { attrs }) {
 		const context = useMetadataListContext();
 		const slots = useSlots();
 		const stacked = computed(() => {
@@ -115,8 +117,14 @@ const _sfc_main = defineComponent({
 		});
 		return () => {
 			const icon = slots.icon ? h("span", { class: "astryx-metadata-list__icon" }, slots.icon()) : null;
-			if (stacked.value) return h("div", { class: "astryx-metadata-list__item" }, [h("dt", { class: "astryx-metadata-list__item-label" }, [icon, props.label]), h("dd", { class: "astryx-metadata-list__item-value" }, slots.default?.())]);
-			return [h("dt", { class: "astryx-metadata-list__label" }, [icon, props.label]), h("dd", { class: "astryx-metadata-list__value" }, slots.default?.())];
+			if (stacked.value) return h("div", {
+				...attrs,
+				class: ["astryx-metadata-list__item", attrs.class]
+			}, [h("dt", { class: "astryx-metadata-list__item-label" }, [icon, props.label]), h("dd", { class: "astryx-metadata-list__item-value" }, slots.default?.())]);
+			return [h("dt", {
+				...attrs,
+				class: ["astryx-metadata-list__label", attrs.class]
+			}, [icon, props.label]), h("dd", { class: "astryx-metadata-list__value" }, slots.default?.())];
 		};
 	}
 });

package/dist/MobileNav/index.js

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

package/dist/{MobileNavToggle-DxGz0xKA.js → MobileNavToggle-DgJYyzT6.js}

@@ -1,12 +1,46 @@
-import { n as useFocusTrap, t as useRestoreFocus } from "./useRestoreFocus-Djw9RUIf.js";
-import { o as useAstryxMessages } from "./context-iABt_ueM.js";
+import { r as resetLayerScopedContext } from "./scopedProvide-C-Df7c15.js";
+import { i as pushLayer, n as useLayerDepth, r as isTopLayer, t as provideLayerDepth } from "./layerDepth-CNDh-IHb.js";
+import { n as useFocusTrap, t as useRestoreFocus } from "./useRestoreFocus-XEKs5-gp.js";
+import { s as useAstryxMessages } from "./context-CM-cjGg_.js";
+import { t as useScrollLock } from "./scrollLock-C3aT4-0z.js";
 import { t as useScrollbars } from "./useScrollbars-C2NJ6Qwq.js";
-import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, mergeModels, nextTick, normalizeClass, normalizeStyle, onMounted, openBlock, provide, ref, renderSlot, toDisplayString, unref, useId, useModel, useTemplateRef, watch } from "vue";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, mergeModels, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, onScopeDispose, openBlock, provide, ref, renderSlot, toDisplayString, unref, useId, useModel, useTemplateRef, watch } from "vue";
 import "../styles/mobile-nav.css";
 //#region src/MobileNav/context.ts
 /** 内容渲染在移动导航抽屉里时为 true。菜单在这里改成内联折叠，不再弹出。 */
 const mobileNavKey = Symbol("astryx-mobile-nav");
 //#endregion
+//#region src/MobileNav/useMobileNavLayer.ts
+/**
+* 抽屉打开时登记进全页关闭栈。
+* 点遮罩由对话框自己认，不在这里当「点外面」。
+* Escape 只关最上面一层。浏览器另外发出的 cancel，也要先确认自己还在最上面。
+*/
+function useMobileNavLayer(options) {
+	const depth = useLayerDepth();
+	const token = {};
+	let stop = null;
+	function sync(open) {
+		stop?.();
+		stop = null;
+		if (!open) return;
+		stop = pushLayer({
+			token,
+			depth,
+			getContainer: options.getContainer,
+			dismissOnPointerOutside: false,
+			dismissOnEscape: "close",
+			onDismiss: options.onDismiss
+		});
+	}
+	watch(options.isOpen, sync, { immediate: true });
+	onScopeDispose(() => {
+		stop?.();
+		stop = null;
+	});
+	return { shouldCloseOnCancel: () => options.isOpen.value && isTopLayer(token) };
+}
+//#endregion
 //#region src/MobileNav/MobileNav.vue
 const _hoisted_1$1 = [
 	"id",
@@ -41,6 +75,8 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 		const props = __props;
 		const emit = __emit;
 		const messages = useAstryxMessages();
+		resetLayerScopedContext();
+		provideLayerDepth();
 		const isOpen = useModel(__props, "isOpen");
 		const dialogRef = ref(null);
 		const bodyEl = useTemplateRef("body");
@@ -49,12 +85,12 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 		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);
 		const sideIsStart = computed(() => resolvedSide.value === "start");
+		useScrollLock(isOpen);
 		useRestoreFocus({
-			isEnabled: trapEnabled,
+			isEnabled: computed(() => true),
 			shouldRestore: trapEnabled
 		});
 		useFocusTrap({
@@ -62,6 +98,11 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 			isEnabled: trapEnabled
 		});
 		provide(mobileNavKey, true);
+		const layer = useMobileNavLayer({
+			getContainer: () => dialogRef.value,
+			isOpen,
+			onDismiss: () => setOpen(false)
+		});
 		function resolveSide(side) {
 			if (side === "start" || side === "end") return side;
 			const active = document.activeElement;
@@ -71,26 +112,15 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 			}
 			return "start";
 		}
-		function lockScroll(lock) {
-			if (typeof document === "undefined") return;
-			if (lock) {
-				previousOverflow = document.documentElement.style.overflow;
-				document.documentElement.style.overflow = "clip";
-				return;
-			}
-			document.documentElement.style.overflow = previousOverflow;
-		}
 		function syncDialog(open) {
 			const dialog = dialogRef.value;
 			if (!dialog) return;
 			if (open) {
 				resolvedSide.value = resolveSide(props.side);
-				lockScroll(true);
 				if (typeof dialog.showModal === "function" && !dialog.open) dialog.showModal();
 				else dialog.setAttribute("open", "");
 				return;
 			}
-			lockScroll(false);
 			if (typeof dialog.close === "function" && dialog.open) dialog.close();
 			else dialog.removeAttribute("open");
 		}
@@ -101,6 +131,7 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 		}
 		function onCancel(event) {
 			event.preventDefault();
+			if (!layer.shouldCloseOnCancel()) return;
 			setOpen(false);
 		}
 		function onDialogClick(event) {
@@ -112,12 +143,16 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 		onMounted(() => {
 			if (isOpen.value) syncDialog(true);
 		});
+		onBeforeUnmount(() => {
+			const dialog = dialogRef.value;
+			if (dialog?.open && typeof dialog.close === "function") dialog.close();
+		});
 		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.value,
 				ref_key: "dialogRef",
 				ref: dialogRef,
-				class: normalizeClass(["astryx-mobile-nav", sideIsStart.value ? "astryx-mobile-nav--start" : "astryx-mobile-nav--end"]),
+				class: normalizeClass(["astryx-mobile-nav astryx-layer", 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.value : void 0,

package/dist/MoreMenu/index.d.ts

@@ -1,2 +1,2 @@
-import { $r as MoreMenuEmits, Qr as MoreMenuDivider, Zr as _default, ai as MoreMenuPresentation, ci as MoreMenuSection, ei as MoreMenuIcon, ii as MoreMenuOption, li as MoreMenuSlots, ni as MoreMenuItem, oi as MoreMenuProps, ri as MoreMenuItemVariant, si as MoreMenuResolvedPresentation, ti as MoreMenuInitialFocus } from "../index-DUaLJO7l.js";
+import { $r as MoreMenuDivider, Qr as _default, ai as MoreMenuOption, ci as MoreMenuResolvedPresentation, ei as MoreMenuEmits, ii as MoreMenuItemVariant, li as MoreMenuSection, ni as MoreMenuInitialFocus, oi as MoreMenuPresentation, ri as MoreMenuItem, si as MoreMenuProps, ti as MoreMenuIcon, ui as MoreMenuSlots } from "../index-UA93Im7H.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-Dlb7MLlW.js";
+import { t as _sfc_main } from "../MoreMenu-C8BEt6-O.js";
 export { _sfc_main as MoreMenu };