@clderystd/m3-ui 0.0.0-stage → 0.1.0

package/dist/index.js

@@ -0,0 +1,1011 @@
+import { Fragment as e, Teleport as t, Transition as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, h as d, mergeProps as f, nextTick as p, normalizeClass as m, normalizeStyle as h, onBeforeUnmount as g, onMounted as _, openBlock as v, ref as y, renderList as b, renderSlot as x, resolveDirective as S, resolveDynamicComponent as C, toDisplayString as w, unref as T, watch as E, withCtx as D, withDirectives as O, withKeys as k, withModifiers as A } from "vue";
+// src/components/M3Avatar.vue?vue&type=script&setup=true&lang.ts
+var ee = ["src", "alt"], j = {
+	key: 1,
+	class: "md-avatar__initials",
+	"aria-hidden": "true"
+}, te = /*@__PURE__*/ u({
+	__name: "M3Avatar",
+	props: {
+		src: { default: void 0 },
+		name: { default: "" },
+		alt: { default: void 0 },
+		size: { default: 40 },
+		ring: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(e) {
+		let t = e, n = y(!1), i = y(!1), a = y(null), s = r(() => typeof t.size == "number" ? t.size + "px" : t.size), c = r(() => {
+			let e = (t.name ?? "").trim();
+			if (!e) return "?";
+			let n = e.split(/\s+/).filter(Boolean);
+			return n.length > 1 ? (n[0][0] + n[1][0]).toUpperCase() : e.slice(0, 2).toUpperCase();
+		}), l = r(() => !!t.src && !n.value);
+		return _(() => {
+			a.value?.complete && (i.value = !0);
+		}), (t, r) => (v(), o("span", {
+			class: m(["md-avatar", { "md-avatar--ring": e.ring }]),
+			style: h({
+				width: s.value,
+				height: s.value,
+				fontSize: "calc(" + s.value + " * 0.36)"
+			})
+		}, [l.value ? (v(), o("img", {
+			key: 0,
+			ref_key: "imageEl",
+			ref: a,
+			class: m(["md-avatar__img", { "is-loaded": i.value }]),
+			src: e.src,
+			alt: e.alt ?? e.name ?? "",
+			loading: "lazy",
+			decoding: "async",
+			onLoad: r[0] ||= (e) => i.value = !0,
+			onError: r[1] ||= (e) => n.value = !0
+		}, null, 42, ee)) : (v(), o("span", j, w(c.value), 1))], 6));
+	}
+}), M = (e, t) => {
+	let n = e.__vccOpts || e;
+	for (let [e, r] of t) n[e] = r;
+	return n;
+}, ne = /*#__PURE__*/ M(te, [["__scopeId", "data-v-11c06ce9"]]), N = [
+	"role",
+	"aria-label",
+	"aria-hidden"
+], P = /*#__PURE__*/ M(/* @__PURE__ */ u({
+	__name: "M3Icon",
+	props: {
+		icon: { default: null },
+		size: { default: 24 },
+		label: { default: void 0 }
+	},
+	setup(e) {
+		let t = e, n = r(() => typeof t.size == "number" ? t.size + "px" : t.size);
+		return (t, r) => (v(), o("span", {
+			class: "md-icon",
+			style: h({ fontSize: n.value }),
+			role: e.label ? "img" : void 0,
+			"aria-label": e.label,
+			"aria-hidden": e.label ? void 0 : "true"
+		}, [e.icon ? (v(), i(C(e.icon), {
+			key: 0,
+			class: "md-icon__svg"
+		})) : x(t.$slots, "default", {}, void 0, !0, 1)], 12, N));
+	}
+}), [["__scopeId", "data-v-d4d0e18f"]]), re = {
+	key: 0,
+	class: "md-btn__spinner",
+	"aria-hidden": "true"
+}, ie = { class: "md-btn__label" }, ae = /*#__PURE__*/ M(/* @__PURE__ */ u({
+	__name: "M3Button",
+	props: {
+		variant: { default: "filled" },
+		size: { default: "md" },
+		icon: { default: null },
+		trailingIcon: { default: null },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		href: { default: void 0 },
+		target: { default: void 0 },
+		rel: { default: void 0 },
+		type: { default: "button" },
+		block: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(e) {
+		let t = e, n = r(() => t.href ? "a" : "button"), c = r(() => t.size === "lg" ? 24 : 18), l = r(() => !!t.href), u = r(() => t.disabled || t.loading);
+		return (t, r) => {
+			let d = S("ripple");
+			return O((v(), i(C(n.value), {
+				class: m(["md-btn", [
+					"md-btn--" + e.variant,
+					"md-btn--" + e.size,
+					{
+						"md-btn--block": e.block,
+						"is-disabled": u.value,
+						"is-loading": e.loading
+					}
+				]]),
+				href: e.href,
+				target: l.value ? e.target : void 0,
+				rel: l.value ? e.rel : void 0,
+				type: l.value ? void 0 : e.type,
+				disabled: !l.value && u.value ? !0 : void 0,
+				"aria-disabled": u.value ? "true" : void 0,
+				"aria-busy": e.loading ? "true" : void 0,
+				tabindex: u.value && l.value ? -1 : void 0
+			}, {
+				default: D(() => [
+					e.loading ? (v(), o("span", re)) : e.icon ? (v(), i(P, {
+						key: 1,
+						icon: e.icon,
+						size: c.value,
+						class: "md-btn__icon"
+					}, null, 8, ["icon", "size"])) : a("", !0),
+					s("span", ie, [x(t.$slots, "default", {}, void 0, !0)]),
+					e.trailingIcon && !e.loading ? (v(), i(P, {
+						key: 2,
+						icon: e.trailingIcon,
+						size: c.value,
+						class: "md-btn__icon"
+					}, null, 8, ["icon", "size"])) : a("", !0)
+				]),
+				_: 3
+			}, 8, [
+				"class",
+				"href",
+				"target",
+				"rel",
+				"type",
+				"disabled",
+				"aria-disabled",
+				"aria-busy",
+				"tabindex"
+			])), [[d]]);
+		};
+	}
+}), [["__scopeId", "data-v-99ea0895"]]), oe = {
+	key: 0,
+	class: "md-card__media"
+}, se = { class: "md-card__content" }, ce = {
+	key: 1,
+	class: "md-card__actions"
+}, le = /*#__PURE__*/ M(/* @__PURE__ */ u({
+	__name: "M3Card",
+	props: {
+		variant: { default: "elevated" },
+		interactive: {
+			type: Boolean,
+			default: !1
+		},
+		shape: { default: "medium" },
+		href: { default: void 0 },
+		target: { default: void 0 },
+		rel: { default: void 0 }
+	},
+	setup(e) {
+		return (t, n) => (v(), i(C(e.href ? "a" : "div"), {
+			class: m(["md-card", [
+				"md-card--" + e.variant,
+				"md-card--shape-" + e.shape,
+				{ "md-card--interactive": e.interactive }
+			]]),
+			href: e.href,
+			target: e.href ? e.target : void 0,
+			rel: e.href ? e.rel : void 0
+		}, {
+			default: D(() => [
+				t.$slots.media ? (v(), o("div", oe, [x(t.$slots, "media", {}, void 0, !0)])) : a("", !0),
+				s("div", se, [x(t.$slots, "default", {}, void 0, !0)]),
+				t.$slots.actions ? (v(), o("div", ce, [x(t.$slots, "actions", {}, void 0, !0)])) : a("", !0)
+			]),
+			_: 3
+		}, 8, [
+			"class",
+			"href",
+			"target",
+			"rel"
+		]));
+	}
+}), [["__scopeId", "data-v-330a5bd2"]]);
+// src/icons/index.ts
+function F(e, t) {
+	let n = () => d("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 24 24",
+		"aria-hidden": "true"
+	}, [d("path", {
+		fill: "currentColor",
+		d: e
+	})]);
+	return n.displayName = t, n;
+}
+var I = F("m9.55 18l-5.7-5.7l1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4z", "IconCheck"), L = F("M6.4 19L5 17.6l5.6-5.6L5 6.4L6.4 5l5.6 5.6L17.6 5L19 6.4L13.4 12l5.6 5.6l-1.4 1.4l-5.6-5.6z", "IconClose"), ue = F("m12 15.375l-6-6l1.4-1.4l4.6 4.6l4.6-4.6l1.4 1.4z", "IconExpandMore"), de = ["disabled", "aria-pressed"], fe = { class: "md-chip__label" }, R = /*#__PURE__*/ M(/* @__PURE__ */ u({
+	__name: "M3Chip",
+	props: {
+		label: {},
+		variant: { default: "assist" },
+		selected: {
+			type: Boolean,
+			default: !1
+		},
+		icon: { default: null },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		toggle: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: ["remove"],
+	setup(e, { emit: t }) {
+		let n = e, r = t, c = n.variant === "filter" || n.toggle;
+		return (t, n) => {
+			let u = S("ripple");
+			return O((v(), o("button", {
+				type: "button",
+				class: m(["md-chip", ["md-chip--" + e.variant, {
+					"is-selected": e.selected,
+					"is-disabled": e.disabled
+				}]]),
+				disabled: e.disabled,
+				"aria-pressed": T(c) ? e.selected : void 0
+			}, [
+				e.selected && T(c) ? (v(), i(P, {
+					key: 0,
+					icon: T(I),
+					size: 18,
+					class: "md-chip__icon md-chip__icon--check"
+				}, null, 8, ["icon"])) : e.icon ? (v(), i(P, {
+					key: 1,
+					icon: e.icon,
+					size: 18,
+					class: "md-chip__icon"
+				}, null, 8, ["icon"])) : a("", !0),
+				s("span", fe, w(e.label), 1),
+				e.variant === "input" ? (v(), o("span", {
+					key: 2,
+					class: "md-chip__trailing",
+					role: "button",
+					tabindex: "0",
+					"aria-label": "移除",
+					onClick: n[0] ||= A((e) => r("remove"), ["stop"]),
+					onKeydown: [n[1] ||= k(A((e) => r("remove"), ["stop", "prevent"]), ["enter"]), n[2] ||= k(A((e) => r("remove"), ["stop", "prevent"]), ["space"])]
+				}, [l(P, {
+					icon: T(L),
+					size: 18
+				}, null, 8, ["icon"])], 32)) : a("", !0)
+			], 10, de)), [[u]]);
+		};
+	}
+}), [["__scopeId", "data-v-d96f2b0a"]]), z = "a[href],button:not([disabled]),input:not([disabled]):not([type=\"hidden\"]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex=\"-1\"])", B = 0, V = "";
+function pe() {
+	B === 0 && (V = document.body.style.overflow, document.body.style.overflow = "hidden"), B += 1;
+}
+function H() {
+	B = Math.max(0, B - 1), B === 0 && (document.body.style.overflow = V);
+}
+function U(e, t, n) {
+	let r = null;
+	function i() {
+		let e = t.value;
+		return e ? Array.from(e.querySelectorAll(z)).filter((e) => e.offsetWidth > 0 || e.offsetHeight > 0 || e === document.activeElement) : [];
+	}
+	function a() {
+		(i()[0] ?? t.value)?.focus({ preventScroll: !0 });
+	}
+	function o(e) {
+		if (e.key === "Escape") {
+			e.stopPropagation(), n.onClose();
+			return;
+		}
+		if (e.key !== "Tab") return;
+		let r = i();
+		if (r.length === 0) {
+			e.preventDefault(), t.value?.focus({ preventScroll: !0 });
+			return;
+		}
+		let a = r[0], o = r[r.length - 1], s = document.activeElement, c = s !== null && t.value?.contains(s) === !0;
+		e.shiftKey && (!c || s === a) ? (e.preventDefault(), o.focus()) : !e.shiftKey && c && s === o && (e.preventDefault(), a.focus());
+	}
+	return E(e, (e) => {
+		e ? (r = document.activeElement ?? null, pe(), document.addEventListener("keydown", o, !0), requestAnimationFrame(() => requestAnimationFrame(a))) : (H(), document.removeEventListener("keydown", o, !0), n.restoreFocus !== !1 && r?.isConnected && r.focus({ preventScroll: !0 }), r = null);
+	}, { immediate: !0 }), g(() => {
+		e.value && (H(), document.removeEventListener("keydown", o, !0));
+	}), { focusFirst: a };
+}
+// src/components/M3Dialog.vue?vue&type=script&setup=true&lang.ts
+var me = ["aria-label"], he = {
+	key: 0,
+	class: "md-dialog__icon"
+}, ge = {
+	key: 1,
+	class: "md-dialog__headline md-typescale-headline-small"
+}, _e = { class: "md-dialog__body md-typescale-body-medium" }, ve = {
+	key: 2,
+	class: "md-dialog__actions"
+}, ye = /*#__PURE__*/ M(/* @__PURE__ */ u({
+	__name: "M3Dialog",
+	props: {
+		modelValue: { type: Boolean },
+		title: { default: void 0 },
+		icon: { default: null },
+		dismissible: {
+			type: Boolean,
+			default: !0
+		},
+		ariaLabel: { default: void 0 }
+	},
+	emits: ["update:modelValue"],
+	setup(e, { emit: c }) {
+		let u = e, d = c, f = y(null);
+		return U(r(() => u.modelValue), f, { onClose: () => {
+			u.dismissible && d("update:modelValue", !1);
+		} }), (r, c) => (v(), i(t, { to: "body" }, [l(n, { name: "md-scrim" }, {
+			default: D(() => [e.modelValue ? (v(), o("div", {
+				key: 0,
+				class: "md-scrim",
+				onClick: c[0] ||= (t) => e.dismissible && d("update:modelValue", !1)
+			})) : a("", !0)]),
+			_: 1
+		}), l(n, { name: "md-dialog-pop" }, {
+			default: D(() => [e.modelValue ? (v(), o("div", {
+				key: 0,
+				ref_key: "panelRef",
+				ref: f,
+				class: "md-dialog",
+				role: "dialog",
+				"aria-modal": "true",
+				"aria-label": e.ariaLabel ?? e.title,
+				tabindex: "-1"
+			}, [
+				e.icon ? (v(), o("div", he, [l(P, {
+					icon: e.icon,
+					size: 24
+				}, null, 8, ["icon"])])) : a("", !0),
+				e.title ? (v(), o("h2", ge, w(e.title), 1)) : a("", !0),
+				s("div", _e, [x(r.$slots, "default", {}, void 0, !0)]),
+				r.$slots.actions ? (v(), o("div", ve, [x(r.$slots, "actions", {}, void 0, !0)])) : a("", !0)
+			], 8, me)) : a("", !0)]),
+			_: 3
+		})]));
+	}
+}), [["__scopeId", "data-v-a4a34fd3"]]), be = /*#__PURE__*/ M(/* @__PURE__ */ u({
+	__name: "M3Divider",
+	props: {
+		inset: { default: "none" },
+		vertical: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(e) {
+		return (t, n) => (v(), o("hr", { class: m(["md-hr", ["md-hr--" + e.inset, { "md-hr--vertical": e.vertical }]]) }, null, 2));
+	}
+}), [["__scopeId", "data-v-cad24e3a"]]), xe = {
+	key: 0,
+	class: "md-fab__label"
+}, Se = /*#__PURE__*/ M(/* @__PURE__ */ u({
+	__name: "M3Fab",
+	props: {
+		icon: {},
+		size: { default: "md" },
+		variant: { default: "primary-container" },
+		label: { default: void 0 },
+		fixed: {
+			type: Boolean,
+			default: !1
+		},
+		colored: {
+			type: Boolean,
+			default: !0
+		},
+		href: { default: void 0 },
+		target: { default: void 0 },
+		rel: { default: void 0 },
+		type: { default: "button" },
+		ariaLabel: { default: void 0 }
+	},
+	setup(e) {
+		let t = e, n = r(() => t.href ? "a" : "button"), s = r(() => !!t.href), c = r(() => t.size === "lg" ? 36 : 24), u = r(() => typeof t.label == "string" && t.label.length > 0);
+		return (t, r) => {
+			let d = S("ripple");
+			return O((v(), i(C(n.value), {
+				class: m(["md-fab", [
+					"md-fab--" + e.size,
+					"md-fab--" + e.variant,
+					{
+						"md-fab--extended": u.value,
+						"md-fab--fixed": e.fixed,
+						"md-fab--flat": !e.colored
+					}
+				]]),
+				href: e.href,
+				target: s.value ? e.target : void 0,
+				rel: s.value ? e.rel : void 0,
+				type: s.value ? void 0 : e.type,
+				"aria-label": u.value ? void 0 : e.ariaLabel ?? "操作"
+			}, {
+				default: D(() => [l(P, {
+					icon: e.icon,
+					size: c.value,
+					class: "md-fab__icon"
+				}, null, 8, ["icon", "size"]), u.value ? (v(), o("span", xe, w(e.label), 1)) : a("", !0)]),
+				_: 1
+			}, 8, [
+				"class",
+				"href",
+				"target",
+				"rel",
+				"type",
+				"aria-label"
+			])), [[d]]);
+		};
+	}
+}), [["__scopeId", "data-v-aeda7579"]]), W = /*#__PURE__*/ M(/* @__PURE__ */ u({
+	__name: "M3IconButton",
+	props: {
+		icon: {},
+		selectedIcon: { default: null },
+		variant: { default: "standard" },
+		size: { default: "md" },
+		label: {},
+		selected: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		href: { default: void 0 },
+		target: { default: void 0 },
+		rel: { default: void 0 },
+		type: { default: "button" },
+		shape: { default: "full" }
+	},
+	setup(e) {
+		let t = e, n = r(() => t.href ? "a" : "button"), a = r(() => !!t.href), o = r(() => t.selected && t.selectedIcon ? t.selectedIcon : t.icon), s = r(() => t.size === "lg" ? 24 : t.size === "sm" ? 18 : 24), c = r(() => t.selected && t.variant === "standard" ? "tonal" : t.variant);
+		return (t, r) => {
+			let u = S("ripple");
+			return O((v(), i(C(n.value), {
+				class: m(["md-icon-btn", [
+					"md-icon-btn--" + c.value,
+					"md-icon-btn--" + e.size,
+					"md-icon-btn--shape-" + e.shape,
+					{
+						"is-selected": e.selected,
+						"is-disabled": e.disabled
+					}
+				]]),
+				href: e.href,
+				target: a.value ? e.target : void 0,
+				rel: a.value ? e.rel : void 0,
+				type: a.value ? void 0 : e.type,
+				disabled: !a.value && e.disabled ? !0 : void 0,
+				"aria-label": e.label,
+				"aria-pressed": e.selectedIcon ? e.selected : void 0,
+				"aria-disabled": e.disabled ? "true" : void 0,
+				tabindex: e.disabled && a.value ? -1 : void 0,
+				title: e.label
+			}, {
+				default: D(() => [l(P, {
+					icon: o.value,
+					size: s.value
+				}, null, 8, ["icon", "size"])]),
+				_: 1
+			}, 8, [
+				"class",
+				"href",
+				"target",
+				"rel",
+				"type",
+				"disabled",
+				"aria-label",
+				"aria-pressed",
+				"aria-disabled",
+				"tabindex",
+				"title"
+			])), [[u]]);
+		};
+	}
+}), [["__scopeId", "data-v-04092efa"]]), Ce = /*#__PURE__*/ M(/* @__PURE__ */ u({
+	__name: "M3List",
+	props: { dense: {
+		type: Boolean,
+		default: !1
+	} },
+	setup(e) {
+		return (t, n) => (v(), o("ul", {
+			class: m(["md-list", { "md-list--dense": e.dense }]),
+			role: "list"
+		}, [x(t.$slots, "default", {}, void 0, !0)], 2));
+	}
+}), [["__scopeId", "data-v-8bd5e4fe"]]), we = { class: "md-list-item__wrap" }, Te = {
+	key: 0,
+	class: "md-list-item__leading"
+}, Ee = { class: "md-list-item__text" }, De = { class: "md-list-item__headline md-typescale-body-large" }, Oe = {
+	key: 0,
+	class: "md-list-item__supporting md-typescale-body-medium"
+}, ke = {
+	key: 1,
+	class: "md-list-item__trailing"
+}, Ae = /*#__PURE__*/ M(/* @__PURE__ */ u({
+	inheritAttrs: !1,
+	__name: "M3ListItem",
+	props: {
+		headline: { default: void 0 },
+		supporting: { default: void 0 },
+		leadingIcon: { default: null },
+		href: { default: void 0 },
+		target: { default: void 0 },
+		rel: { default: void 0 },
+		clickable: {
+			type: Boolean,
+			default: !1
+		},
+		selected: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		lines: { default: void 0 },
+		padded: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(e) {
+		let t = e, n = r(() => t.href ? "a" : t.clickable ? "button" : "div"), l = r(() => !!t.href);
+		return (t, r) => {
+			let u = S("ripple");
+			return v(), o("li", we, [O((v(), i(C(n.value), f(t.$attrs, {
+				class: ["md-list-item", ["md-list-item--lines-" + (e.lines ?? (e.supporting ? 2 : 1)), {
+					"is-selected": e.selected,
+					"is-disabled": e.disabled,
+					"md-list-item--padded": e.padded
+				}]],
+				href: e.href,
+				target: l.value ? e.target : void 0,
+				rel: l.value ? e.rel : void 0,
+				type: !l.value && e.clickable ? "button" : void 0,
+				disabled: !l.value && e.clickable && e.disabled ? !0 : void 0,
+				"aria-current": e.selected ? "true" : void 0,
+				"aria-disabled": e.disabled ? "true" : void 0,
+				tabindex: e.disabled && l.value ? -1 : void 0
+			}), {
+				default: D(() => [
+					e.leadingIcon || t.$slots.leading ? (v(), o("span", Te, [x(t.$slots, "leading", {}, () => [e.leadingIcon ? (v(), i(P, {
+						key: 0,
+						icon: e.leadingIcon,
+						size: 24
+					}, null, 8, ["icon"])) : a("", !0)], !0)])) : a("", !0),
+					s("span", Ee, [s("span", De, [x(t.$slots, "default", {}, () => [c(w(e.headline), 1)], !0)]), e.supporting || t.$slots.supporting ? (v(), o("span", Oe, [x(t.$slots, "supporting", {}, () => [c(w(e.supporting), 1)], !0)])) : a("", !0)]),
+					t.$slots.trailing ? (v(), o("span", ke, [x(t.$slots, "trailing", {}, void 0, !0)])) : a("", !0)
+				]),
+				_: 3
+			}, 16, [
+				"class",
+				"href",
+				"target",
+				"rel",
+				"type",
+				"disabled",
+				"aria-current",
+				"aria-disabled",
+				"tabindex"
+			])), [[u]])]);
+		};
+	}
+}), [["__scopeId", "data-v-aa124957"]]), je = /*#__PURE__*/ M(/* @__PURE__ */ u({
+	__name: "M3Menu",
+	props: {
+		placement: { default: "bottom-start" },
+		gap: { default: 4 },
+		minWidth: { default: 112 },
+		maxWidth: { default: 720 },
+		matchTriggerWidth: {
+			type: Boolean,
+			default: !1
+		},
+		padded: {
+			type: Boolean,
+			default: !0
+		},
+		closeOnSelect: {
+			type: Boolean,
+			default: !0
+		},
+		closeOnScroll: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(r, { expose: c }) {
+		let u = r, d = y(!1), f = y(null), _ = y(null), b = y({
+			top: "0px",
+			left: "0px",
+			minWidth: "112px"
+		});
+		function S() {
+			let e = f.value;
+			if (!e) return;
+			let t = e.getBoundingClientRect(), n = _.value, r = n ? n.offsetWidth : u.minWidth, i = n ? n.offsetHeight : 0, a = t.left;
+			u.placement === "bottom-end" ? a = t.right - r : u.placement === "bottom" && (a = t.left + t.width / 2 - r / 2), a = Math.min(Math.max(a, 8), Math.max(8, window.innerWidth - r - 8));
+			let o = t.bottom + u.gap, s = i > 0 && o + i > window.innerHeight - 8, c = t.top - u.gap - i > 8;
+			s && c && (o = t.top - u.gap - i), b.value = {
+				top: o + "px",
+				left: a + "px",
+				minWidth: (u.matchTriggerWidth ? t.width : u.minWidth) + "px"
+			};
+		}
+		function C() {
+			d.value = !1;
+		}
+		function w() {
+			d.value = !d.value;
+		}
+		function T(e) {
+			let t = e.target;
+			t && (_.value?.contains(t) || f.value?.contains(t) || C());
+		}
+		function O(e) {
+			e.key === "Escape" && d.value && (C(), (f.value?.querySelector("button, a"))?.focus());
+		}
+		function k() {
+			u.closeOnScroll ? C() : S();
+		}
+		function A(e) {
+			u.closeOnSelect && e.target?.closest("a, button, [role=\"menuitem\"]") && C();
+		}
+		return E(d, async (e) => {
+			e ? (await p(), S(), window.addEventListener("resize", S), window.addEventListener("scroll", k, !0), document.addEventListener("pointerdown", T, !0), document.addEventListener("keydown", O)) : (window.removeEventListener("resize", S), window.removeEventListener("scroll", k, !0), document.removeEventListener("pointerdown", T, !0), document.removeEventListener("keydown", O));
+		}), g(() => {
+			window.removeEventListener("resize", S), window.removeEventListener("scroll", k, !0), document.removeEventListener("pointerdown", T, !0), document.removeEventListener("keydown", O);
+		}), c({
+			open: d,
+			close: C,
+			toggle: w
+		}), (c, u) => (v(), o(e, null, [s("span", {
+			ref_key: "anchorRef",
+			ref: f,
+			class: "md-menu-anchor",
+			onClick: w
+		}, [x(c.$slots, "trigger", {
+			open: d.value,
+			toggle: w,
+			close: C
+		}, void 0, !0)], 512), (v(), i(t, { to: "body" }, [l(n, { name: "md-menu-pop" }, {
+			default: D(() => [d.value ? (v(), o("div", {
+				key: 0,
+				ref_key: "panelRef",
+				ref: _,
+				class: m(["md-menu", { "md-menu--padded": r.padded }]),
+				role: "menu",
+				style: h({
+					...b.value,
+					maxWidth: "min(calc(100vw - 16px), " + r.maxWidth + "px)"
+				}),
+				onClick: A
+			}, [x(c.$slots, "default", { close: C }, void 0, !0)], 6)) : a("", !0)]),
+			_: 3
+		})]))], 64));
+	}
+}), [["__scopeId", "data-v-6d1a0bfc"]]), Me = { class: "md-menu-item__text" }, Ne = { class: "md-menu-item__label md-typescale-label-large" }, Pe = {
+	key: 0,
+	class: "md-menu-item__supporting md-typescale-body-medium"
+}, Fe = {
+	key: 1,
+	class: "md-menu-item__trailing md-typescale-label-large"
+}, Ie = /*#__PURE__*/ M(/* @__PURE__ */ u({
+	__name: "M3MenuItem",
+	props: {
+		label: { default: void 0 },
+		supporting: { default: void 0 },
+		icon: { default: null },
+		trailingText: { default: void 0 },
+		href: { default: void 0 },
+		target: { default: void 0 },
+		rel: { default: void 0 },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		selected: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(e) {
+		let t = e, n = r(() => t.href ? "a" : "button"), l = r(() => !!t.href);
+		return (t, r) => {
+			let u = S("ripple");
+			return O((v(), i(C(n.value), {
+				class: m(["md-menu-item", {
+					"is-disabled": e.disabled,
+					"md-menu-item--two-line": e.supporting
+				}]),
+				href: e.href,
+				target: l.value ? e.target : void 0,
+				rel: l.value ? e.rel : void 0,
+				type: l.value ? void 0 : "button",
+				disabled: !l.value && e.disabled ? !0 : void 0,
+				role: "menuitem",
+				tabindex: e.disabled ? -1 : 0,
+				"aria-checked": e.selected ? "true" : void 0
+			}, {
+				default: D(() => [
+					e.icon ? (v(), i(P, {
+						key: 0,
+						icon: e.icon,
+						size: 24,
+						class: "md-menu-item__icon"
+					}, null, 8, ["icon"])) : a("", !0),
+					s("span", Me, [s("span", Ne, [x(t.$slots, "default", {}, () => [c(w(e.label), 1)], !0)]), e.supporting ? (v(), o("span", Pe, w(e.supporting), 1)) : a("", !0)]),
+					e.trailingText ? (v(), o("span", Fe, w(e.trailingText), 1)) : a("", !0)
+				]),
+				_: 3
+			}, 8, [
+				"class",
+				"href",
+				"target",
+				"rel",
+				"type",
+				"disabled",
+				"tabindex",
+				"aria-checked"
+			])), [[u]]);
+		};
+	}
+}), [["__scopeId", "data-v-ac2d7164"]]), Le = ["aria-label"], Re = ["aria-checked", "onClick"], ze = { class: "md-segmented__label" }, Be = /*#__PURE__*/ M(/* @__PURE__ */ u({
+	__name: "M3SegmentedButton",
+	props: {
+		options: {},
+		modelValue: {},
+		block: {
+			type: Boolean,
+			default: !1
+		},
+		ariaLabel: { default: void 0 }
+	},
+	emits: ["update:modelValue"],
+	setup(t, { emit: n }) {
+		let r = n;
+		return (n, c) => {
+			let l = S("ripple");
+			return v(), o("div", {
+				class: m(["md-segmented", { "md-segmented--block": t.block }]),
+				role: "radiogroup",
+				"aria-label": t.ariaLabel
+			}, [(v(!0), o(e, null, b(t.options, (e) => O((v(), o("button", {
+				key: e.value,
+				type: "button",
+				role: "radio",
+				class: m(["md-segmented__item", { "is-selected": e.value === t.modelValue }]),
+				"aria-checked": e.value === t.modelValue,
+				onClick: (t) => r("update:modelValue", e.value)
+			}, [e.value === t.modelValue ? (v(), i(P, {
+				key: 0,
+				icon: T(I),
+				size: 18,
+				class: "md-segmented__check"
+			}, null, 8, ["icon"])) : e.icon ? (v(), i(P, {
+				key: 1,
+				icon: e.icon,
+				size: 18,
+				class: "md-segmented__check"
+			}, null, 8, ["icon"])) : a("", !0), s("span", ze, w(e.label), 1)], 10, Re)), [[l]])), 128))], 10, Le);
+		};
+	}
+}), [["__scopeId", "data-v-aefd896c"]]), Ve = ["aria-label"], He = {
+	key: 0,
+	class: "md-sheet__header"
+}, Ue = {
+	key: 0,
+	class: "md-sheet__title md-typescale-title-large"
+}, We = {
+	key: 1,
+	class: "md-sheet__title"
+}, Ge = { class: "md-sheet__body" }, Ke = {
+	key: 1,
+	class: "md-sheet__footer"
+}, qe = /*#__PURE__*/ M(/* @__PURE__ */ u({
+	__name: "M3Sheet",
+	props: {
+		modelValue: { type: Boolean },
+		side: { default: "start" },
+		size: { default: "360px" },
+		title: { default: void 0 },
+		bare: {
+			type: Boolean,
+			default: !1
+		},
+		hideClose: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: ["update:modelValue"],
+	setup(e, { emit: c }) {
+		let u = e, d = c, f = y(null);
+		U(r(() => u.modelValue), f, { onClose: () => d("update:modelValue", !1) });
+		let p = r(() => {
+			let e = {};
+			return u.side === "bottom" ? (e.height = "auto", e.maxHeight = u.size) : e.width = u.size, e;
+		}), g = r(() => "md-sheet-" + u.side);
+		return (r, c) => (v(), i(t, { to: "body" }, [l(n, { name: "md-scrim" }, {
+			default: D(() => [e.modelValue ? (v(), o("div", {
+				key: 0,
+				class: "md-scrim",
+				onClick: c[0] ||= (e) => d("update:modelValue", !1)
+			})) : a("", !0)]),
+			_: 1
+		}), l(n, { name: g.value }, {
+			default: D(() => [e.modelValue ? (v(), o("div", {
+				key: 0,
+				ref_key: "panelRef",
+				ref: f,
+				class: m(["md-sheet", "md-sheet--" + e.side]),
+				style: h(p.value),
+				role: "dialog",
+				"aria-modal": "true",
+				"aria-label": e.title,
+				tabindex: "-1"
+			}, [
+				e.bare ? a("", !0) : (v(), o("header", He, [e.title ? (v(), o("h2", Ue, w(e.title), 1)) : (v(), o("span", We)), e.hideClose ? a("", !0) : (v(), i(W, {
+					key: 2,
+					icon: T(L),
+					label: "关闭",
+					variant: "standard",
+					onClick: c[1] ||= (e) => d("update:modelValue", !1)
+				}, null, 8, ["icon"]))])),
+				s("div", Ge, [x(r.$slots, "default", {}, void 0, !0)]),
+				r.$slots.footer ? (v(), o("footer", Ke, [x(r.$slots, "footer", {}, void 0, !0)])) : a("", !0)
+			], 14, Ve)) : a("", !0)]),
+			_: 3
+		}, 8, ["name"])]));
+	}
+}), [["__scopeId", "data-v-22b2ddea"]]), Je = [
+	"aria-checked",
+	"aria-label",
+	"disabled"
+], Ye = { class: "md-switch__track" }, Xe = { class: "md-switch__thumb" }, Ze = {
+	key: 0,
+	class: "md-switch__thumb-icon"
+}, Qe = /*#__PURE__*/ M(/* @__PURE__ */ u({
+	__name: "M3Switch",
+	props: {
+		modelValue: { type: Boolean },
+		label: { default: void 0 },
+		disabled: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: ["update:modelValue"],
+	setup(e, { emit: t }) {
+		let n = e, r = t;
+		function i() {
+			n.disabled || r("update:modelValue", !n.modelValue);
+		}
+		return (t, n) => (v(), o("button", {
+			type: "button",
+			role: "switch",
+			class: m(["md-switch", {
+				"is-checked": e.modelValue,
+				"is-disabled": e.disabled
+			}]),
+			"aria-checked": e.modelValue,
+			"aria-label": e.label,
+			disabled: e.disabled,
+			onClick: i
+		}, [s("span", Ye, [n[0] ||= s("span", { class: "md-switch__state" }, null, -1), s("span", Xe, [e.modelValue ? (v(), o("span", Ze, [x(t.$slots, "on-icon", {}, void 0, !0)])) : a("", !0)])])], 10, Je));
+	}
+}), [["__scopeId", "data-v-ff3f9765"]]), $e = {
+	class: "md-tooltip__bubble",
+	role: "tooltip"
+}, et = /*#__PURE__*/ M(/* @__PURE__ */ u({
+	__name: "M3Tooltip",
+	props: {
+		text: {},
+		placement: { default: "top" }
+	},
+	setup(e) {
+		return (t, n) => (v(), o("span", { class: m(["md-tooltip", "md-tooltip--" + e.placement]) }, [x(t.$slots, "default", {}, void 0, !0), s("span", $e, w(e.text), 1)], 2));
+	}
+}), [["__scopeId", "data-v-3da4dbf8"]]), tt = {
+	class: "md-top-bar__background",
+	"aria-hidden": "true"
+}, nt = { class: "md-top-bar__inner md-container" }, G = { class: "md-top-bar__leading" }, rt = { class: "md-top-bar__title" }, it = { class: "md-top-bar__actions" }, at = /*#__PURE__*/ M(/* @__PURE__ */ u({
+	__name: "M3TopAppBar",
+	props: {
+		scrolled: {
+			type: Boolean,
+			default: !1
+		},
+		elevated: {
+			type: Boolean,
+			default: !1
+		},
+		size: { default: "small" },
+		centered: {
+			type: Boolean,
+			default: !1
+		},
+		sticky: {
+			type: Boolean,
+			default: !0
+		},
+		overlay: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(e) {
+		return (t, n) => (v(), o("header", { class: m(["md-top-bar", ["md-top-bar--" + e.size, {
+			"is-scrolled": e.scrolled || e.elevated,
+			"md-top-bar--centered": e.centered,
+			"md-top-bar--sticky": e.sticky,
+			"md-top-bar--overlay": e.overlay
+		}]]) }, [s("div", tt, [x(t.$slots, "background", {}, void 0, !0)]), s("div", nt, [
+			s("div", G, [x(t.$slots, "leading", {}, void 0, !0)]),
+			s("div", rt, [x(t.$slots, "default", {}, void 0, !0)]),
+			s("div", it, [x(t.$slots, "actions", {}, void 0, !0)])
+		])], 2));
+	}
+}), [["__scopeId", "data-v-9d6607f8"]]);
+// src/directives/ripple.ts
+function ot(e) {
+	return e.hasAttribute("disabled") || e.getAttribute("aria-disabled") === "true" || e.classList.contains("md-disabled");
+}
+function st(e, t) {
+	let n = e.getBoundingClientRect();
+	if (n.width === 0 || n.height === 0) return;
+	let r = Math.max(n.width, n.height) * 2, i = t.clientX - n.left, a = t.clientY - n.top, o = document.createElement("span");
+	o.className = "md-ripple", o.style.width = o.style.height = `${r}px`, o.style.left = `${i - r / 2}px`, o.style.top = `${a - r / 2}px`, o.addEventListener("animationend", () => o.remove()), window.setTimeout(() => o.remove(), 1e3), e.appendChild(o);
+}
+var ct = {
+	mounted(e) {
+		e.classList.add("md-ripple-host");
+		let t = (t) => {
+			ot(e) || st(e, t);
+		};
+		e.__mdRippleHandler = t, e.addEventListener("pointerdown", t);
+	},
+	unmounted(e) {
+		e.__mdRippleHandler && (e.removeEventListener("pointerdown", e.__mdRippleHandler), delete e.__mdRippleHandler);
+	}
+}, K = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new Set(), J = 64, Y = !1, X = 0;
+function Z() {
+	window.clearTimeout(X), window.removeEventListener("scroll", $), window.removeEventListener("resize", $);
+}
+function lt() {
+	Y = !1;
+	let e = window.innerHeight, t = window.scrollY + e >= document.documentElement.scrollHeight - 1 ? e : e - J;
+	q.forEach((e) => {
+		let n = e.getBoundingClientRect();
+		n.bottom > 0 && n.top < t && (e.classList.add("is-revealed"), q.delete(e));
+	}), q.size === 0 && Z();
+}
+function Q() {
+	Y || (Y = !0, requestAnimationFrame(lt));
+}
+function $() {
+	window.clearTimeout(X), X = window.setTimeout(() => {
+		q.size === 0 ? Z() : Q();
+	}, 120);
+}
+var ut = {
+	mounted(e, t) {
+		let n = t.value, r = typeof n == "number" ? { delay: n } : n ?? {};
+		if (e.classList.add("md-reveal"), r.blur && e.classList.add("md-reveal--blur"), r.delay && (e.style.transitionDelay = r.delay + "ms"), r.y !== void 0 && e.style.setProperty("--md-reveal-y", r.y + "px"), r.scale !== void 0 && e.style.setProperty("--md-reveal-scale", String(r.scale)), typeof IntersectionObserver > "u" || typeof window > "u") {
+			e.classList.add("is-revealed");
+			return;
+		}
+		let i = new IntersectionObserver((e) => {
+			for (let t of e) t.isIntersecting ? (t.target.classList.add("is-revealed"), q.delete(t.target), r.once !== !1 && i.unobserve(t.target)) : r.once === !1 && t.target.classList.remove("is-revealed");
+		}, {
+			threshold: 0,
+			rootMargin: `0px 0px -${J}px 0px`
+		});
+		i.observe(e), K.set(e, i), q.add(e), window.addEventListener("scroll", $, { passive: !0 }), window.addEventListener("resize", $), Q();
+	},
+	unmounted(e) {
+		q.delete(e), K.get(e)?.disconnect(), K.delete(e);
+	}
+};
+export { I as IconCheck, L as IconClose, ue as IconExpandMore, ne as M3Avatar, ae as M3Button, le as M3Card, R as M3Chip, ye as M3Dialog, be as M3Divider, Se as M3Fab, P as M3Icon, W as M3IconButton, Ce as M3List, Ae as M3ListItem, je as M3Menu, Ie as M3MenuItem, Be as M3SegmentedButton, qe as M3Sheet, Qe as M3Switch, et as M3Tooltip, at as M3TopAppBar, U as useModal, ut as vReveal, ct as vRipple };