@xihan-ui/web-components 1.0.0 → 2.0.0

package/dist/toast-BTlM12YF.js

@@ -0,0 +1,1405 @@
+import { a as containsPart, d as onXhConfigChange, f as resolveXhConfig, m as withXhConfig, o as discoverParts, r as createSpreader, s as wcNormalize, t as MachineController } from "./machine-controller-C1ffftux.js";
+import { t as XhReactiveElement } from "./element-BKQR3ce3.js";
+import { buttonAnatomy, buttonMachine, buttonMeta, connectButton, connectDialog, connectLoadingBar, connectNotification, connectNotificationItem, connectToast, dialogAnatomy, dialogMachine, dialogMeta, loadingBarAnatomy, loadingBarMachine, loadingBarMeta, notificationAnatomy, notificationMachine, notificationMeta, toastAnatomy, toastMachine, toastMeta } from "@xihan-ui/headless";
+import { DIAGNOSTIC_CODES, createCounterIdGenerator, createPortalLease, createRuntimeConfig, createScope, getDiagnostics, reportDiagnostic } from "@xihan-ui/core";
+import { attachCssExit, createPresence } from "@xihan-ui/core/presence";
+//#region src/dom/part-contract.ts
+/** `name` 是否已注册为 `xh-<name>` 元素、且该元素的解剖名就是它。 */
+function isRegisteredScope(name) {
+	if (typeof customElements === "undefined") return false;
+	return customElements.get(`xh-${name}`)?.partContract?.anatomy.name === name;
+}
+/**
+* 委派登记里真正归内嵌部件管的作者名 → 允许的 scope 集合。
+* 与宿主解剖重名的角色名由宿主自己接线（date-picker 的 root / control 等），不进这张表。
+*/
+function delegatedScopesOf(contract) {
+	const own = new Set(contract.anatomy.parts);
+	const out = /* @__PURE__ */ new Map();
+	for (const delegate of contract.delegates ?? []) for (const part of delegate.parts) {
+		if (own.has(part)) continue;
+		const scopes = out.get(part);
+		if (scopes) scopes.add(delegate.name);
+		else out.set(part, /* @__PURE__ */ new Set([delegate.name]));
+	}
+	return out;
+}
+/**
+* 比对已发现的角色节点与契约：缺必需 part 报 error，出现解剖外的 part 名报 warn，
+* 委派目标不是已注册元素的解剖名报 error。
+* 委派节点的接线结果排到微任务里核：宿主在本函数返回后同步接线，微任务里读到的已是接线后的 data-scope。
+* 通道静默时直接返回，不做扫描。
+*/
+function validatePartContract(contract, parts, host, instanceId) {
+	if (getDiagnostics().getLevel() === "silent") return;
+	const scope = contract.anatomy.name;
+	for (const part of contract.meta.requiredParts) {
+		if (parts.has(part)) continue;
+		reportDiagnostic({
+			code: DIAGNOSTIC_CODES.wcMissingPart,
+			level: "error",
+			message: `缺少必需的角色节点 data-xh-part="${part}"，该部件不会被接线`,
+			scope,
+			instanceId,
+			part,
+			node: host,
+			detail: {
+				tag: host.tagName.toLowerCase(),
+				requiredParts: contract.meta.requiredParts
+			}
+		});
+	}
+	const known = new Set(contract.anatomy.parts);
+	for (const delegate of contract.delegates ?? []) for (const part of delegate.parts) known.add(part);
+	for (const part of parts.keys()) {
+		if (known.has(part)) continue;
+		reportDiagnostic({
+			code: DIAGNOSTIC_CODES.wcUnknownPart,
+			level: "warn",
+			message: `角色节点 data-xh-part="${part}" 不在 ${scope} 的解剖内，不会被接线`,
+			scope,
+			instanceId,
+			part,
+			node: parts.get(part)?.[0] ?? host,
+			detail: {
+				tag: host.tagName.toLowerCase(),
+				knownParts: contract.anatomy.parts
+			}
+		});
+	}
+	for (const [part, allowed] of Object.entries(contract.tags ?? {})) for (const el of parts.get(part) ?? []) {
+		const tag = el.tagName.toLowerCase();
+		if (allowed.includes(tag)) continue;
+		reportDiagnostic({
+			code: DIAGNOSTIC_CODES.wcWrongPartTag,
+			level: "warn",
+			message: `角色节点 data-xh-part="${part}" 是 <${tag}>，须是 ${allowed.map((t) => `<${t}>`).join(" 或 ")}，否则原生语义静默失效`,
+			scope,
+			instanceId,
+			part,
+			node: el,
+			detail: {
+				tag,
+				allowed
+			}
+		});
+	}
+	if (!contract.delegates?.length) return;
+	const unregistered = /* @__PURE__ */ new Set();
+	for (const delegate of contract.delegates) {
+		if (isRegisteredScope(delegate.name)) continue;
+		unregistered.add(delegate.name);
+		reportDiagnostic({
+			code: DIAGNOSTIC_CODES.invariant,
+			level: "error",
+			message: `partContract.delegates 登记的 "${delegate.name}" 不是已注册元素 <xh-${delegate.name}> 的解剖名，委派给它的角色节点无从核对`,
+			scope,
+			instanceId,
+			node: host,
+			detail: {
+				tag: host.tagName.toLowerCase(),
+				delegate: delegate.name,
+				parts: delegate.parts
+			}
+		});
+	}
+	queueMicrotask(() => validateDelegatedParts(contract, parts, host, instanceId, unregistered));
+}
+/**
+* 核对委派节点的接线结果：登记为归内嵌部件的角色节点，接线后 data-scope 必须是登记的 scope。
+* 没拿到 data-scope 即没被接线（多半是写错了位置），拿到别的 scope 即登记与接线对不上。
+* 已从宿主离场的节点与登记目标未注册的委派跳过。
+*/
+function validateDelegatedParts(contract, parts, host, instanceId, skipScopes = /* @__PURE__ */ new Set()) {
+	if (!host.isConnected || getDiagnostics().getLevel() === "silent") return;
+	const scope = contract.anatomy.name;
+	for (const [part, scopes] of delegatedScopesOf(contract)) {
+		const expected = [...scopes].filter((s) => !skipScopes.has(s));
+		if (expected.length === 0) continue;
+		for (const el of parts.get(part) ?? []) {
+			if (!host.contains(el)) continue;
+			const wired = el.getAttribute("data-scope");
+			if (wired !== null && expected.includes(wired)) continue;
+			const target = expected.map((s) => `"${s}"`).join(" 或 ");
+			reportDiagnostic({
+				code: wired === null ? DIAGNOSTIC_CODES.wcUnknownPart : DIAGNOSTIC_CODES.invariant,
+				level: wired === null ? "warn" : "error",
+				message: wired === null ? `角色节点 data-xh-part="${part}" 登记为委派给 ${target}，接线后没有 data-scope：没被接线，检查它是否放在了该放的部件里` : `角色节点 data-xh-part="${part}" 登记为委派给 ${target}，接线后 data-scope 却是 "${wired}"，契约登记与接线对不上`,
+				scope,
+				instanceId,
+				part,
+				node: el,
+				detail: {
+					tag: host.tagName.toLowerCase(),
+					expectedScopes: expected,
+					wiredScope: wired
+				}
+			});
+		}
+	}
+}
+//#endregion
+//#region src/dom/stacking-context.ts
+/** 初始值是 none 的一批：取任何别的值都建层叠上下文。 */
+const NONE_INITIAL = [
+	"transform",
+	"translate",
+	"rotate",
+	"scale",
+	"perspective",
+	"filter",
+	"backdrop-filter",
+	"clip-path",
+	"mask-image",
+	"view-transition-name"
+];
+/** 建层叠上下文的那几档 contain；单独的 size 与 style 不算。 */
+const CONTAIN = /\b(?:layout|paint|strict|content)\b/;
+/** container-type 只有带 size 的两档施加布局限制；normal 与 scroll-state 不算。 */
+const CONTAINER_TYPE = /\bsize\b/;
+/** will-change 点到这些属性时，元素照样建层叠上下文。前缀能覆盖 transform-style、backdrop-filter、mask-image 等派生名。 */
+const WILL_CHANGE = /\b(?:transform|translate|rotate|scale|perspective|filter|opacity|mix-blend-mode|isolation|clip-path|mask|contain|content-visibility|container-type|view-transition-name)\b/;
+const FLEX_OR_GRID = /^(?:inline-)?(?:flex|grid)$/;
+/** 未设置的属性在部分无头 DOM 实现里回空串而不是初始值，两者一并当没设。 */
+function unset(value, initial) {
+	return value === "" || value === initial;
+}
+/** 元素标识：标签名 + id + 前几个类名，够在页面里认出是哪一个。 */
+function describeElement(el) {
+	const id = el.id ? `#${el.id}` : "";
+	const names = Array.from(el.classList);
+	const cls = names.length ? `.${names.slice(0, 3).join(".")}${names.length > 3 ? "…" : ""}` : "";
+	return `${el.tagName.toLowerCase()}${id}${cls}`;
+}
+/**
+* 这个元素建不建层叠上下文。命中即回那条属性与取值。
+* 判据与「抢走包含块」不同：position 本身与 z-index 在这里算数，而 container-type 收窄到带 size 的两档。
+*/
+function stackingCauseOf(el) {
+	const view = el.ownerDocument.defaultView;
+	if (!view) return null;
+	const style = view.getComputedStyle(el);
+	const read = (property) => style.getPropertyValue(property);
+	const cause = (property) => ({
+		property,
+		value: read(property)
+	});
+	for (const property of NONE_INITIAL) if (!unset(read(property), "none")) return cause(property);
+	if (read("transform-style") === "preserve-3d") return cause("transform-style");
+	const opacity = Number.parseFloat(read("opacity"));
+	if (Number.isFinite(opacity) && opacity < 1) return cause("opacity");
+	if (!unset(read("mix-blend-mode"), "normal")) return cause("mix-blend-mode");
+	if (read("isolation") === "isolate") return cause("isolation");
+	if (CONTAIN.test(read("contain"))) return cause("contain");
+	if (/^(?:auto|hidden)$/.test(read("content-visibility"))) return cause("content-visibility");
+	if (CONTAINER_TYPE.test(read("container-type"))) return cause("container-type");
+	if (WILL_CHANGE.test(read("will-change"))) return cause("will-change");
+	const position = read("position");
+	if (position === "fixed" || position === "sticky") return cause("position");
+	if (unset(read("z-index"), "auto")) return null;
+	if (position === "relative" || position === "absolute") return cause("z-index");
+	const parent = el.parentElement;
+	if (parent && FLEX_OR_GRID.test(view.getComputedStyle(parent).display)) return cause("z-index");
+	return null;
+}
+/**
+* 从浮层往上找第一个建层叠上下文的祖先，走到 body 为止。
+* 撞上外层浮层的 positioner 即止步：那一层由它自己的宿主去查。
+* body 与 documentElement 不算：页面内容与浮层同在其中，相对次序不受影响，
+* 而滚动锁本来就会给 body 写上 position: fixed。
+*/
+function findStackingTrap(positioner) {
+	const doc = positioner.ownerDocument;
+	const stop = doc.body ?? doc.documentElement;
+	for (let node = positioner.parentElement; node && node !== stop; node = node.parentElement) {
+		if (node.dataset.part === "positioner") return null;
+		const cause = stackingCauseOf(node);
+		if (cause) return {
+			ancestor: node,
+			cause
+		};
+	}
+	return null;
+}
+/**
+* 浮层展开后查一次祖先链，被层叠上下文困住就投诊断。
+* 通道静默时直接返回，不做扫描。
+*/
+function reportStackingTrap(positioner, scope, instanceId) {
+	if (getDiagnostics().getLevel() === "silent") return;
+	const trap = findStackingTrap(positioner);
+	if (!trap) return;
+	const where = describeElement(trap.ancestor);
+	const { property, value } = trap.cause;
+	reportDiagnostic({
+		code: DIAGNOSTIC_CODES.overlayStackingTrap,
+		level: "warn",
+		message: `浮层的祖先 <${where}> 用 ${property}: ${value} 建了层叠上下文，浮层的层号只在它内部有效，会被上层兄弟盖住；去掉该祖先这条属性，或别把浮层放进这类容器`,
+		scope,
+		instanceId,
+		part: "positioner",
+		node: trap.ancestor,
+		detail: {
+			ancestor: where,
+			property,
+			value
+		}
+	});
+}
+//#endregion
+//#region src/element-base.ts
+let instanceSeq = 0;
+/**
+* 变动中是否真有角色节点进出。只认进出的元素自身是角色节点、或其子树中有角色节点：
+* 业务内容（图表、虚拟列表、面板中的业务 DOM）的增删与 part 集合无关，不应引发重新接线；
+* 更重要的是切断一条死循环：角色节点若本身是会在属性变化时改写自身子节点的自定义元素，
+* 宿主重新接线、写属性、该节点改子节点、再次命中观察器会形成环。
+*/
+function touchesParts(record) {
+	for (const list of [record.addedNodes, record.removedNodes]) for (const node of Array.from(list)) if (node.nodeType === 1 && containsPart(node)) return true;
+	return false;
+}
+/**
+* 角色节点上属于作者的声明（与状态机写入的状态分属两侧），改变即等于更换了一个条目，必须重新接线。
+* 只观察这几个而不是所有属性：wire() 每帧都向角色节点写 aria- 与 data-，全量观察等于自己触发自己。
+*/
+const AUTHORED_ATTRS = [
+	"value",
+	"name",
+	"data-path",
+	"disabled",
+	"aria-disabled"
+];
+function rewritesDeclaration(record) {
+	if (record.type !== "attributes" || !record.attributeName) return false;
+	const el = record.target;
+	return containsPart(el) && AUTHORED_ATTRS.includes(record.attributeName);
+}
+var XhElement = class extends XhReactiveElement {
+	/** 子类声明所属组件的解剖与元数据，接线后据它校验作者写的角色节点。 */
+	static partContract;
+	spreader = createSpreader();
+	partMap = /* @__PURE__ */ new Map();
+	partObserver;
+	instanceId = `${++instanceSeq}`;
+	createRenderRoot() {
+		return this;
+	}
+	getPart(name, index = 0) {
+		return this.partMap.get(name)?.[index] ?? null;
+	}
+	getParts(name) {
+		return this.partMap.get(name) ?? [];
+	}
+	/**
+	* 仍归本实例所有、但为脱离祖先层叠上下文而迁移到 Portal 的角色根。
+	* 默认没有；返回的根必须与宿主属于同一 Document。
+	*/
+	externalPartRoots() {
+		return [];
+	}
+	/** 接管前记下角色节点上作者写的内联 display。 */
+	authorDisplay = /* @__PURE__ */ new WeakMap();
+	/**
+	* 用内联 display 保证收起态：作者层若为该 part 声明了 display，会覆盖 UA 的 `[hidden]{display:none}`，
+	* 仅靠 hidden 属性无法收起。展开时恢复作者原本的内联值而不是清为 ''：后者会把作者写在该节点上的
+	* `style="display:grid"` 一并清除，且无法恢复。
+	*/
+	setPartHidden(el, hidden) {
+		if (!el) return;
+		if (!this.authorDisplay.has(el)) this.authorDisplay.set(el, el.style.display);
+		el.style.display = hidden ? "none" : this.authorDisplay.get(el) ?? "";
+	}
+	refreshParts() {
+		const externalRoots = this.externalPartRoots();
+		const ownerDocument = this.ownerDocument;
+		for (const root of externalRoots) if (root.ownerDocument !== ownerDocument) throw new Error("[xh] Web Component 的 Portal 角色根必须与宿主属于同一 Document");
+		const next = discoverParts(this, externalRoots);
+		const live = /* @__PURE__ */ new Set();
+		for (const els of next.values()) for (const el of els) live.add(el);
+		const gone = [];
+		for (const els of this.partMap.values()) for (const el of els) if (!live.has(el)) gone.push(el);
+		if (gone.length) this.onPartsReleased(gone);
+		for (const el of gone) this.spreader.release(el);
+		this.partMap = next;
+		this.syncPartObservers();
+	}
+	/**
+	* 角色节点即将离开本宿主时的回调，交还前调用（节点上仍带着本状态机写入的标记）。
+	* 承载焦点的节点被移除时浏览器不派发 focusout（Chrome 如此），状态机无法得知，需要焦点语义的子类在此如实上报。
+	*/
+	onPartsReleased(_nodes) {}
+	connectedCallback() {
+		super.connectedCallback();
+		this.observeParts();
+		this.stopConfigWatch ??= onXhConfigChange(() => this.requestUpdate());
+		this.requestUpdate();
+	}
+	stopConfigWatch;
+	/**
+	* 把沿祖先链解析到的全局配置合入这份 props：translations 按组件名分桶合并，
+	* locale 与 size 在元素上未提供时取配置中的值。不运行状态机的元素在 wire() 中用它包一层。
+	*/
+	configured(component, props) {
+		return withXhConfig(component, props, this);
+	}
+	/** 已排了断开后的交还，还没跑到。 */
+	releaseScheduled = false;
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.stopConfigWatch?.();
+		this.stopConfigWatch = void 0;
+		this.partObserver?.disconnect();
+		this.partObserver = void 0;
+		this.scheduleRelease();
+	}
+	/**
+	* 排一次断开后的交还，到微任务里再按 isConnected 决定跑不跑。
+	* 元素被移动（remove 后同步 append 到别处）走的也是 disconnect，延到微任务才分得清移动与真离场。
+	*/
+	scheduleRelease() {
+		if (this.releaseScheduled) return;
+		this.releaseScheduled = true;
+		queueMicrotask(() => {
+			this.releaseScheduled = false;
+			if (!this.isConnected) this.releaseAllParts();
+		});
+	}
+	/**
+	* 交还全部角色节点并清空 partMap，重连时由 refreshParts 重新发现。
+	* 宿主离场后没有观察器再触发更新，refreshParts 那条交还路径够不着，没摘的监听器会经节点钉住整台宿主。
+	*/
+	releaseAllParts() {
+		const gone = [];
+		for (const els of this.partMap.values()) gone.push(...els);
+		if (!gone.length) return;
+		this.onPartsReleased(gone);
+		for (const el of gone) this.spreader.release(el);
+		this.partMap = /* @__PURE__ */ new Map();
+	}
+	/** 层叠上下文那条诊断已经查过。 */
+	stackingChecked = false;
+	/**
+	* 浮层首次展开后查一次祖先链有没有建层叠上下文，命中即投诊断。
+	* 每个实例只查一次，重定位与后续展开不再重复。
+	*/
+	checkStackingTrap(scope) {
+		if (this.stackingChecked) return;
+		const positioner = this.getParts("positioner").find((el) => el.dataset.state === "open");
+		if (!positioner) return;
+		this.stackingChecked = true;
+		reportStackingTrap(positioner, scope, this.instanceId);
+	}
+	/** 标记 wire() 正在写属性。 */
+	wiring = false;
+	/**
+	* 作者在运行期改动 Light DOM 后重新接线，两类改动都要接住：增删角色节点（漏掉会留下没有
+	* data-scope/data-part 与处理器的"死条目"）；原地改写节点上的声明（列表换数据复用节点时就是这形状，
+	* 漏掉会留着上一轮写的 aria-selected="true"，而它自称的 value 已经变了，读屏念出的选中项就不是真的选中项）。
+	*/
+	observeParts() {
+		if (this.partObserver) return;
+		this.partObserver = new MutationObserver((records) => {
+			if (this.wiring) return;
+			if (records.some((r) => (touchesParts(r) || rewritesDeclaration(r)) && this.ownsSubtree(r.target))) this.requestUpdate();
+		});
+		this.syncPartObservers();
+	}
+	syncPartObservers() {
+		const observer = this.partObserver;
+		if (!observer) return;
+		observer.disconnect();
+		const observe = (root) => observer.observe(root, {
+			childList: true,
+			subtree: true,
+			attributes: true,
+			attributeFilter: [...AUTHORED_ATTRS]
+		});
+		observe(this);
+		for (const root of this.externalPartRoots()) observe(root);
+	}
+	/** 目标是否归本宿主管：嵌套 xh-* 子树归内层元素自己管，外层不替它重跑 wire（discoverParts 本来也跳过它们）。 */
+	ownsSubtree(target) {
+		for (const root of this.externalPartRoots()) {
+			if (target !== root && !root.contains(target)) continue;
+			for (let node = target; node; node = node.parentNode) {
+				if (node === root) return true;
+				const tag = node.tagName;
+				if (typeof tag === "string" && tag.toLowerCase().startsWith("xh-")) break;
+			}
+		}
+		for (let node = target; node; node = node.parentNode) {
+			if (node === this) return true;
+			const tag = node.tagName;
+			if (typeof tag === "string" && tag.toLowerCase().startsWith("xh-")) return false;
+		}
+		return false;
+	}
+	updated(changed) {
+		super.updated(changed);
+		if (!this.isConnected) return;
+		this.refreshParts();
+		const contract = this.constructor.partContract;
+		if (contract) validatePartContract(contract, this.partMap, this, this.instanceId);
+		this.wiring = true;
+		try {
+			this.wire();
+		} finally {
+			queueMicrotask(() => {
+				this.wiring = false;
+			});
+		}
+		this.checkStackingTrap(contract?.anatomy.name);
+	}
+};
+//#endregion
+//#region src/overlay-exit.ts
+function createOverlayExit(options) {
+	let disposed = false;
+	const tracked = /* @__PURE__ */ new Map();
+	const presence = createPresence({
+		config: options.config,
+		open: options.open,
+		onRenderedChange: (rendered) => {
+			if (!rendered && !disposed) options.onExitComplete();
+		}
+	});
+	return {
+		presence,
+		get visible() {
+			return !disposed && presence.rendered;
+		},
+		track(...nodes) {
+			if (disposed) return;
+			const next = new Set(nodes.filter((node) => node !== null));
+			for (const node of next) if (!tracked.has(node)) tracked.set(node, attachCssExit(node, presence));
+			for (const [node, detach] of tracked) if (!next.has(node)) {
+				tracked.delete(node);
+				detach();
+			}
+		},
+		update(open) {
+			if (!disposed) presence.update(open);
+		},
+		dispose() {
+			if (disposed) return;
+			disposed = true;
+			presence.dispose();
+			for (const detach of tracked.values()) detach();
+			tracked.clear();
+		}
+	};
+}
+//#endregion
+//#region src/elements/button.ts
+/**
+* `<xh-button>`：按钮行为宿主，宿主属性即 button props；机器只承载按压通道（data-pressed）。
+*
+* @customElement xh-button
+* @attr {'button'|'submit'|'reset'} type - 原生按钮类型，默认 button
+* @attr {boolean} disabled - 禁用（原生 disabled，失去焦点）
+* @attr {boolean} icon-only - 仅图标：左右内边距清零、宽高相等；作者须自行提供可及名
+* @attr {boolean} full-width - 撑满行宽
+* @attr {boolean} loading - 加载中（aria-disabled，保留焦点并拦截点击）
+* @attr {'solid'|'subtle'|'outline'|'ghost'} variant - 视觉变体，默认 solid（只有 Button 缺省品牌实心，其余触发器缺省中性）
+* @attr {'brand'|'neutral'|'success'|'warning'|'danger'|'info'} tone - 颜色
+* @attr {'sm'|'md'|'lg'} size - 尺寸
+* @attr {'button'|'a'} as - 根节点渲染的标签，默认 button；写 a 时不再产出 type 与原生 disabled
+* @csspart root - 承载 data-scope/data-part/data-* 的原生 button（as="a" 时是 a）
+*/
+var XhButtonElement = class extends XhElement {
+	static partContract = {
+		anatomy: buttonAnatomy,
+		meta: buttonMeta
+	};
+	static properties = {
+		type: {},
+		disabled: { type: Boolean },
+		iconOnly: {
+			type: Boolean,
+			attribute: "icon-only"
+		},
+		fullWidth: {
+			type: Boolean,
+			attribute: "full-width"
+		},
+		loading: { type: Boolean },
+		variant: {},
+		tone: {},
+		size: {},
+		as: {}
+	};
+	ctrl = new MachineController(this, buttonMachine, () => this.machineProps());
+	machineProps() {
+		const root = this.getPart("root");
+		return {
+			type: this.type,
+			disabled: this.disabled,
+			loading: this.loading,
+			variant: this.variant,
+			tone: this.tone,
+			size: this.size,
+			as: this.as,
+			iconOnly: this.iconOnly,
+			fullWidth: this.fullWidth,
+			ariaLabel: root?.getAttribute("aria-label") ?? void 0,
+			ariaLabelledby: root?.getAttribute("aria-labelledby") ?? void 0
+		};
+	}
+	wire() {
+		const root = this.getPart("root");
+		if (!root) return;
+		const api = connectButton(this.ctrl.service, wcNormalize);
+		this.spreader.spread(root, api.getRootProps());
+		const put = (name, props) => {
+			const el = this.getPart(name);
+			if (el) this.spreader.spread(el, props);
+		};
+		put("label", api.getLabelProps());
+		put("prefix", api.getPrefixProps());
+		put("suffix", api.getSuffixProps());
+		put("indicator", api.getIndicatorProps());
+	}
+};
+//#endregion
+//#region src/runtime/portal-lease-controller.ts
+/**
+* Web Components 对 Core PortalLease 的共享生命周期接线。
+* placeholder、独占壳、视觉桥、事务回滚与精确归位仍全部由 Core 持有。
+*/
+var PortalLeaseController = class {
+	options;
+	lease = null;
+	constructor(options) {
+		this.options = options;
+	}
+	/** XhElement 用它继续发现已经迁移到宿主外的全部角色节点。 */
+	get roots() {
+		return this.lease?.roots ?? [];
+	}
+	/**
+	* 某个根在作者结构里的落点：未搬迁时就是它自己，搬迁中是租约留在原位的占位节点。
+	* 宿主自己生成、要排在浮层之前的节点（表单出口）按它定位，浮层归位后顺序不变。
+	*/
+	homeOf(root) {
+		const index = this.lease?.roots.indexOf(root) ?? -1;
+		return index >= 0 ? this.lease.placeholders[index] : root;
+	}
+	/** Presence 仍可见时持有租约；退场完成或必要节点缺席时精确归位。 */
+	sync(active) {
+		const source = this.options.source();
+		const roots = this.options.roots();
+		if (!active || !source || !roots.length) {
+			if (this.release()) this.options.onChange();
+			return;
+		}
+		const target = this.resolveTarget();
+		if (this.lease?.source === source && this.lease.target === target && roots.length === this.lease.roots.length && roots.every((root, index) => root === this.lease.roots[index])) return;
+		this.release();
+		this.lease = createPortalLease({
+			source,
+			target,
+			roots,
+			onShellReady: this.options.onShellReady
+		});
+		this.options.onChange();
+	}
+	/** 宿主断开或 realm 换代时立即归位；Core 的 release 自身幂等。 */
+	dispose() {
+		this.release();
+	}
+	release() {
+		const lease = this.lease;
+		if (!lease) return false;
+		this.lease = null;
+		lease.release();
+		return true;
+	}
+	resolveTarget() {
+		const resolver = this.options.portalContainer?.() ?? this.options.config()?.portalContainer;
+		let target;
+		try {
+			target = resolver?.();
+		} catch (error) {
+			if (this.release()) this.options.onChange();
+			throw error;
+		}
+		if (target) return target;
+		if (this.release()) this.options.onChange();
+		throw new Error(`[xh] ${this.options.name} 的 portalContainer 必须返回已连接的同 Document Element`);
+	}
+};
+//#endregion
+//#region src/runtime/anchored-portal-controller.ts
+/**
+* 锚定浮层的 Web Components 共享 Portal 接线。
+* placeholder、独占壳、视觉桥、事务回滚与精确归位全部由 Core PortalLease 持有。
+*/
+var AnchoredPortalController = class {
+	options;
+	portal;
+	constructor(options) {
+		this.options = options;
+		this.portal = new PortalLeaseController({
+			...options,
+			roots: () => {
+				const root = options.root();
+				return root ? [root] : [];
+			}
+		});
+	}
+	/** XhElement 用它继续发现已经迁移到宿主外的全部角色节点。 */
+	get roots() {
+		return this.portal.roots;
+	}
+	/** positioner 在作者结构里的落点：未搬迁时是它自己，搬迁中是占位节点；缺席时为 null。 */
+	home() {
+		const root = this.options.root();
+		return root ? this.portal.homeOf(root) : null;
+	}
+	/** Presence 仍可见时持有租约；退场完成或必要节点缺席时精确归位。 */
+	sync(active) {
+		this.portal.sync(active);
+	}
+	/** 宿主断开或 realm 换代时立即归位；Core 的 release 自身幂等。 */
+	dispose() {
+		this.portal.dispose();
+	}
+};
+//#endregion
+//#region src/runtime/portal-host.ts
+/**
+* 只供真正物理 Portal 宿主继承；普通 XhElement（包括 NavigationMenu）不公开此能力。
+* property 响应式由基类统一声明，实例变化会自然触发各宿主既有 wire/sync。
+*/
+var XhPortalHostElement = class extends XhElement {
+	static properties = { portalContainer: { attribute: false } };
+	createPortalLeaseController(options) {
+		return new PortalLeaseController({
+			...options,
+			portalContainer: () => this.portalContainer ?? resolveXhConfig(this).portalContainer
+		});
+	}
+	createAnchoredPortalController(options) {
+		return new AnchoredPortalController({
+			...options,
+			portalContainer: () => this.portalContainer ?? resolveXhConfig(this).portalContainer
+		});
+	}
+};
+//#endregion
+//#region src/elements/dialog.ts
+const BOOLEAN_CONVERTER$3 = { fromAttribute: (v) => v === null ? void 0 : v !== "false" };
+const STRING_CONVERTER$3 = { fromAttribute: (v) => v ?? void 0 };
+/**
+* `<xh-dialog>`：Light-DOM 行为宿主，运行 dialog 状态机并把 connect 产出接到角色节点上，
+* 关闭时用内联 style.display 隐藏浮层子树。
+*
+* @customElement xh-dialog
+* @attr {boolean} open - 受控开合；未提供该属性即非受控
+* @attr {boolean} default-open - 非受控初始为打开
+* @attr {boolean} modal - 模态（陷入焦点、锁定滚动、遮罩交互外关闭），默认 true
+* @attr {'dialog'|'alertdialog'} role - 语义角色，默认 dialog
+* @attr {boolean} close-on-escape - Esc 关闭，默认 true
+* @attr {boolean} restore-focus - 关闭后把焦点归还触发元素，默认 true
+* @attr {string} initial-focus - 展开后先聚焦到 content 内匹配此选择器的元素
+* @attr {'sm'|'md'|'lg'} size - 尺寸：只影响 content 的最大宽度，写在 content 上
+* @attr {'opaque'|'blur'|'transparent'} variant - 遮罩形态：只影响 backdrop 的底色与模糊
+* @fires open-change - open 状态变化；detail 为 `{ open: boolean }`
+* @fires exit-complete - 退出完成且本层资源已释放
+* @csspart trigger - 触发按钮
+* @csspart backdrop - 遮罩层
+* @csspart positioner - 浮层定位容器
+* @csspart content - 对话框内容（role / aria-modal / 焦点陷阱所在）
+* @csspart header - 面板头：标题与说明所在的段，不随正文滚动
+* @csspart indicator - 语气徽记：未提供内容时由皮肤按节点上的 data-tone 绘制兜底字形
+* @csspart title - 标题（aria-labelledby 目标）
+* @csspart description - 描述（aria-describedby 目标）
+* @csspart body - 正文：面板中唯一会滚动的段
+* @csspart footer - 面板尾：动作按钮所在的段，不随正文滚动
+* @csspart close-trigger - 关闭按钮
+*/
+var XhDialogElement = class extends XhPortalHostElement {
+	static partContract = {
+		anatomy: dialogAnatomy,
+		meta: dialogMeta
+	};
+	static properties = {
+		open: { converter: BOOLEAN_CONVERTER$3 },
+		defaultOpen: {
+			type: Boolean,
+			attribute: "default-open"
+		},
+		modal: { converter: BOOLEAN_CONVERTER$3 },
+		closeOnEscape: {
+			converter: BOOLEAN_CONVERTER$3,
+			attribute: "close-on-escape"
+		},
+		restoreFocus: {
+			converter: BOOLEAN_CONVERTER$3,
+			attribute: "restore-focus"
+		},
+		initialFocus: {
+			converter: STRING_CONVERTER$3,
+			attribute: "initial-focus"
+		},
+		size: { converter: STRING_CONVERTER$3 },
+		variant: { converter: STRING_CONVERTER$3 },
+		translations: { attribute: false }
+	};
+	idGen = createCounterIdGenerator();
+	dialogScope = createScope(() => this, this.idGen);
+	config = null;
+	contentNode = null;
+	exit = null;
+	backdropNode = null;
+	portal = this.createPortalLeaseController({
+		name: "Dialog 视口模态",
+		config: () => this.config,
+		source: () => this,
+		roots: () => {
+			const positioner = this.getPart("positioner");
+			return this.backdropNode && positioner ? [this.backdropNode, positioner] : [];
+		},
+		onChange: () => this.requestUpdate()
+	});
+	notify = (details) => {
+		this.dispatchEvent(new CustomEvent("open-change", {
+			detail: details,
+			bubbles: true,
+			composed: true
+		}));
+	};
+	ctrl = new MachineController(this, dialogMachine, () => this.machineProps(), {
+		scope: this.dialogScope,
+		onBuilt: (svc) => this.injectRefs(svc)
+	});
+	machineProps() {
+		return {
+			open: this.open,
+			defaultOpen: this.defaultOpen ?? false,
+			modal: this.modal,
+			role: this.getAttribute("role") ?? void 0,
+			closeOnEscape: this.closeOnEscape,
+			restoreFocus: this.restoreFocus,
+			initialFocus: this.initialFocus,
+			size: this.size,
+			variant: this.variant,
+			translations: this.translations,
+			onOpenChange: this.notify,
+			onExitComplete: () => this.dispatchEvent(new CustomEvent("exit-complete", {
+				bubbles: true,
+				composed: true
+			}))
+		};
+	}
+	ensureConfig() {
+		if (this.config) return;
+		this.config = createRuntimeConfig({
+			scope: this.dialogScope,
+			idGenerator: this.idGen,
+			scrollRoot: () => resolveXhConfig(this).scrollRoot?.() ?? null
+		});
+	}
+	/** 退场闸门建一次；presence 不是响应式 cell，退场结束要显式排一次更新才轮得到收起。 */
+	ensureExit(open) {
+		this.ensureConfig();
+		this.exit ??= createOverlayExit({
+			config: this.config,
+			open,
+			onExitComplete: () => this.requestUpdate()
+		});
+		return this.exit;
+	}
+	externalPartRoots() {
+		return this.portal.roots;
+	}
+	registerLayer = () => {
+		this.ensureConfig();
+		return this.config.layerRegistry.register({
+			kind: "modal",
+			node: () => this.contentNode,
+			branches: () => [],
+			isModal: () => this.machineProps().modal ?? true,
+			surfaces: () => [this.backdropNode].filter(Boolean)
+		});
+	};
+	injectRefs(svc) {
+		this.ensureConfig();
+		svc.refs.set("config", this.config);
+		svc.refs.set("registerLayer", this.registerLayer);
+		svc.refs.set("presence", this.ensureExit(svc.state.get() === "open").presence);
+		svc.refs.set("getContentEl", () => this.contentNode);
+		svc.refs.set("getTriggerEl", () => this.getPart("trigger"));
+		svc.refs.set("branches", () => []);
+	}
+	wire() {
+		const svc = this.ctrl.service;
+		const api = connectDialog(svc, wcNormalize);
+		const open = svc.state.get() === "open";
+		this.contentNode = this.getPart("content");
+		this.backdropNode = this.getPart("backdrop");
+		const put = (name, props) => {
+			const el = this.getPart(name);
+			if (el) this.spreader.spread(el, props);
+		};
+		put("trigger", api.getTriggerProps());
+		put("backdrop", api.getBackdropProps());
+		put("positioner", api.getPositionerProps());
+		put("content", api.getContentProps());
+		put("header", api.getHeaderProps());
+		put("indicator", api.getIndicatorProps());
+		put("title", api.getTitleProps());
+		put("description", api.getDescriptionProps());
+		put("body", api.getBodyProps());
+		put("footer", api.getFooterProps());
+		put("close-trigger", api.getCloseTriggerProps());
+		const exit = this.ensureExit(open);
+		const modal = this.machineProps().modal ?? true;
+		exit.track(this.contentNode, modal ? this.backdropNode : null);
+		exit.update(open);
+		const visible = exit.visible;
+		const positioner = this.getPart("positioner");
+		this.portal.sync(modal && (open || visible));
+		if (positioner) this.setPartHidden(positioner, !visible);
+		if (this.backdropNode) this.setPartHidden(this.backdropNode, !visible || !modal);
+		this.setPartHidden(this.contentNode, !visible);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.exit?.dispose();
+		this.exit = null;
+		this.portal.dispose();
+		if (this.ctrl.service.state.get() !== "open") this.setPartHidden(this.contentNode, true);
+		this.config = null;
+	}
+};
+//#endregion
+//#region src/elements/loading-bar.ts
+const STRING_CONVERTER$2 = { fromAttribute: (v) => v ?? void 0 };
+const NUMBER_CONVERTER$2 = { fromAttribute: (v) => v == null || v === "" ? void 0 : Number(v) };
+const BOOLEAN_CONVERTER$2 = { fromAttribute: (v) => v === null ? void 0 : v !== "false" };
+const HEIGHT_CONVERTER = { fromAttribute: (v) => {
+	if (v == null || v === "") return void 0;
+	const px = Number(v);
+	return Number.isFinite(px) ? px : v;
+} };
+/**
+* `<xh-loading-bar>`：Light-DOM 行为宿主：作者写 root / track / range 角色节点，
+* 元素运行 loading-bar 状态机并把 connect 产出接上。
+*
+* 两种模式互不相干：提供 `value` 即为确定进度，宽度按它显示、读屏可以获取 aria-valuenow；
+* 未提供时使用模拟进度：`loading` 置真时先跳到 `minimum`，随后按 `trickle-speed` 逐拍爬升，
+* 步长按剩余量取，因此越接近满格越慢且永远到不了 100；此时按规范不报告 aria-valuenow，
+* 属性缺席本身就是进度未知的表达。`loading` 转为假时先到达 100，走完淡出窗口才归零收起。
+*
+* 收起态只给 root 加 hidden 并写一条内联 display，作者编写的结构一个都不卸载。
+*
+* @customElement xh-loading-bar
+* @attr {number} value - 受控进度值（0-100）；提供后即为确定进度，内部爬升整体让位
+* @attr {number} default-value - 非受控初值，默认 0
+* @attr {boolean} loading - 加载开关：属性存在即开始，`loading="false"` 或移除即结束
+* @attr {string|number} height - 进度条厚度：纯数字按像素，其余按 CSS 长度；默认 2px
+* @attr {'brand'|'neutral'|'success'|'warning'|'danger'|'info'} tone - 语气，决定进度段使用哪族颜色；提供 color 时以 color 为准
+* @attr {boolean} trickle - 不确定进度时自行向前爬升，默认开启；`trickle="false"` 关闭
+* @attr {number} trickle-speed - 爬升节拍毫秒，默认 200；<=0 等同于关闭爬升
+* @attr {number} minimum - 起步值，默认 8
+* @attr {number} fade-duration - 到达 100 之后的淡出窗口毫秒，默认 200
+* @fires value-change - 进度值变化；detail 为 `{ value: number }`
+* @csspart root - progressbar 本身（承载名字、值域、data-state 与收起态）
+* @csspart track - 背景槽
+* @csspart range - 进度段；宽度由元素写入内联样式，样式层不应修改该轴
+* @csspart peg - 进度段末端的亮边（对读屏隐藏）
+*/
+var XhLoadingBarElement = class extends XhElement {
+	static partContract = {
+		anatomy: loadingBarAnatomy,
+		meta: loadingBarMeta
+	};
+	static properties = {
+		value: { converter: NUMBER_CONVERTER$2 },
+		defaultValue: {
+			converter: NUMBER_CONVERTER$2,
+			attribute: "default-value"
+		},
+		loading: { converter: BOOLEAN_CONVERTER$2 },
+		height: { converter: HEIGHT_CONVERTER },
+		tone: { converter: STRING_CONVERTER$2 },
+		trickle: { converter: BOOLEAN_CONVERTER$2 },
+		trickleSpeed: {
+			converter: NUMBER_CONVERTER$2,
+			attribute: "trickle-speed"
+		},
+		minimum: { converter: NUMBER_CONVERTER$2 },
+		fadeDuration: {
+			converter: NUMBER_CONVERTER$2,
+			attribute: "fade-duration"
+		},
+		translations: { attribute: false }
+	};
+	notify = (details) => {
+		this.dispatchEvent(new CustomEvent("value-change", {
+			detail: details,
+			bubbles: true,
+			composed: true
+		}));
+	};
+	ctrl = new MachineController(this, loadingBarMachine, () => this.machineProps());
+	machineProps() {
+		return {
+			value: this.value,
+			defaultValue: this.defaultValue,
+			loading: this.loading,
+			height: this.height,
+			tone: this.tone,
+			trickle: this.trickle,
+			trickleSpeed: this.trickleSpeed,
+			minimum: this.minimum,
+			fadeDuration: this.fadeDuration,
+			translations: this.translations,
+			onValueChange: this.notify
+		};
+	}
+	wire() {
+		const api = connectLoadingBar(this.ctrl.service, wcNormalize);
+		const put = (name, props) => {
+			const el = this.getPart(name);
+			if (el) this.spreader.spread(el, props);
+		};
+		put("root", api.getRootProps());
+		put("track", api.getTrackProps());
+		put("range", api.getRangeProps());
+		put("peg", api.getPegProps());
+		this.setPartHidden(this.getPart("root"), !api.visible);
+	}
+};
+//#endregion
+//#region src/elements/notification.ts
+const STRING_CONVERTER$1 = { fromAttribute: (v) => v ?? void 0 };
+const NUMBER_CONVERTER$1 = { fromAttribute: (v) => v == null || v === "" ? void 0 : Number(v) };
+const BOOLEAN_CONVERTER$1 = { fromAttribute: (v) => v === null ? void 0 : v !== "false" };
+/**
+* 该堆叠对应哪个位置。属性缺席时交 undefined，由 connect 回落到队列的 placement。
+* 写错时照原样交出：它与九个位置没有一个匹配，该堆叠就一直为空：
+* 明显的空白好过静默冒充另一个位置，把通知放到作者未预期的角落。
+*/
+function groupPlacement(el) {
+	const raw = el.getAttribute("placement");
+	return raw == null || raw === "" ? void 0 : raw;
+}
+/**
+* `<xh-notification>`：Light-DOM 行为宿主：作者写 root 与若干 group 角色节点，
+* 元素运行 notification 状态机并把 connect 产出接上。每个 group 用 `placement` 属性声明所在位置，
+* 未写时落在队列的 placement 上。
+*
+* 单条通知的节点由作者按队列渲染（读取 `items` 或监听 `items-change`），元素不替作者生成：
+* 生成节点等于收走模板控制权，图标、进度条、i18n 文案都无法再加入。
+* 每条渲染为一个 `<xh-notification-item>`，它走完退场会冒泡一条 status-change，本元素据此删除记录。
+*
+* @customElement xh-notification
+* @attr {'top-start'|'top'|'top-end'|'middle-start'|'middle'|'middle-end'|'bottom-start'|'bottom'|'bottom-end'} placement - 默认落位，默认 bottom-end
+* @attr {number} max - 每个位置最多同时保留几条，超出时先移除低优先级、同级中移除最旧的；默认 5，提供 Infinity 即不限
+* @attr {'id'|'content'} dedupe - 重复的处理方式，默认 id；content 则同一内容合并为一条并计数
+* @attr {number} gap - 同一组内的间距（px），默认 16
+* @attr {number} duration - 单条未写 duration 时的默认停留毫秒
+* @attr {number} remove-delay - 单条未写 remove-delay 时的默认退场窗口毫秒
+* @attr {boolean} pause-on-page-idle - 页面切到后台时暂停计时，逐条下发
+* @fires items-change - 队列变化；detail 为 `{ items: NotificationRecord[] }`
+* @csspart root - 队列的作用域包装（display: contents，不占布局），承载 data-count / data-empty
+* @csspart group - role=region 的地标，某一个位置上的一组；可自带 placement 属性，承载 data-placement / data-count / data-empty 与间距
+*/
+var XhNotificationElement = class extends XhElement {
+	static partContract = {
+		anatomy: notificationAnatomy,
+		meta: notificationMeta
+	};
+	static properties = {
+		items: { attribute: false },
+		defaultItems: { attribute: false },
+		placement: { converter: STRING_CONVERTER$1 },
+		max: { converter: NUMBER_CONVERTER$1 },
+		dedupe: { converter: STRING_CONVERTER$1 },
+		gap: { converter: NUMBER_CONVERTER$1 },
+		duration: { converter: NUMBER_CONVERTER$1 },
+		removeDelay: {
+			converter: NUMBER_CONVERTER$1,
+			attribute: "remove-delay"
+		},
+		pauseOnPageIdle: {
+			converter: BOOLEAN_CONVERTER$1,
+			attribute: "pause-on-page-idle"
+		},
+		translations: { attribute: false }
+	};
+	notify = (details) => {
+		this.dispatchEvent(new CustomEvent("items-change", {
+			detail: details,
+			bubbles: true,
+			composed: true
+		}));
+	};
+	ctrl = new MachineController(this, notificationMachine, () => this.machineProps());
+	machineProps() {
+		return {
+			items: this.items,
+			defaultItems: this.defaultItems,
+			placement: this.placement,
+			max: this.max,
+			dedupe: this.dedupe,
+			gap: this.gap,
+			duration: this.duration,
+			removeDelay: this.removeDelay,
+			pauseOnPageIdle: this.pauseOnPageIdle,
+			translations: this.translations,
+			onItemsChange: this.notify
+		};
+	}
+	/**
+	* 命令式入口共用的取法。状态机在进入文档（hostConnected）后才建立：
+	* 尚未进入文档就发通知是调用方的时序问题，明确报错好过把通知静默丢弃。
+	*/
+	commands() {
+		if (!this.ctrl.service) throw new Error("[xh] <xh-notification> 还没进文档，命令式接口此时不可用");
+		return connectNotification(this.ctrl.service, wcNormalize);
+	}
+	/** 入队并返回 id；同 id 已存在则就地改写，位置不变（处理中转为已完成即使用此路径）。 */
+	create(options = {}) {
+		return this.commands().create(options);
+	}
+	/**
+	* 刻意不命名为 `update`：那是 Lit 自身的渲染生命周期钩子，占用它会使宿主每次重渲
+	* 都进入此处（并把 changedProperties 当作 id），组件将无法工作。
+	* Vue 侧没有这层基类，composable 上仍命名为 `update`。
+	*/
+	updateItem(id, options) {
+		this.commands().update(id, options);
+	}
+	dismiss(id) {
+		this.commands().dismiss(id);
+	}
+	dismissAll() {
+		this.commands().dismissAll();
+	}
+	/** max 之内、按加入先后排列的可见条目，已补齐默认值，可直接展开给 `<xh-notification-item>`。 */
+	get visibleNotifications() {
+		return this.commands().visibleNotifications;
+	}
+	/** 当前有条目的位置，按九宫格固定顺序。 */
+	get placements() {
+		return this.commands().placements;
+	}
+	get count() {
+		return this.commands().count;
+	}
+	getItemsByPlacement(placement) {
+		return this.commands().getItemsByPlacement(placement);
+	}
+	/**
+	* 单条通知退场完成后会冒泡上来：记录应从队列中删除。
+	* 识别元素名而不是只识别事件名：avatar 之类的部件也派发 status-change，且完全可能位于通知内部。
+	*/
+	onItemStatus = (event) => {
+		if (event.target?.tagName.toLowerCase() !== "xh-notification-item") return;
+		const detail = event.detail;
+		if (detail?.status !== "unmounted") return;
+		if (this.ctrl.service?.getStatus() !== "Started") return;
+		this.dismiss(detail.id);
+	};
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener("status-change", this.onItemStatus);
+	}
+	disconnectedCallback() {
+		this.removeEventListener("status-change", this.onItemStatus);
+		super.disconnectedCallback();
+	}
+	wire() {
+		const api = connectNotification(this.ctrl.service, wcNormalize);
+		const root = this.getPart("root");
+		if (root) this.spreader.spread(root, api.getRootProps());
+		for (const el of this.getParts("group")) this.spreader.spread(el, api.getGroupProps({ placement: groupPlacement(el) }));
+	}
+};
+const ITEM_CONTRACT = {
+	anatomy: notificationAnatomy,
+	meta: {
+		component: "notification",
+		requiredParts: ["item"]
+	}
+};
+/**
+* `<xh-notification-item>`：单条通知卡片：作者写 item / item-indicator / item-title /
+* item-description / item-action-trigger / item-close-trigger 角色节点，
+* 元素运行生命周期状态机并把 connect 产出接上。
+*
+* item 承载 role 与 aria-live：默认 status + polite（排队等待读屏的空隙），
+* tone="danger" 换为 alert + assertive（打断当前朗读）。指针停在卡片上、
+* 或焦点落进卡片内部都会暂停倒计时，离开后继续剩余部分。
+*
+* 退场窗口结束时只把卡片收起、不删除节点：作者写在其中的内容归作者，
+* 何时把该条从队列中删除是 `<xh-notification>` 的职责（它接收本元素冒泡的 status-change）。
+*
+* @customElement xh-notification-item
+* @attr {string} id - 队列身份，`<xh-notification>` 按它寻址；未提供时使用实例自身的 scope id
+* @attr {string} title - 标题文案；作者未在 item-title 部件中写内容时由元素填入
+* @attr {string} description - 补充说明；作者未在 item-description 部件中写内容时由元素填入
+* @attr {'info'|'success'|'warning'|'danger'} tone - 语气，默认 info；danger 使用 alert + assertive
+* @attr {boolean} loading - 事情尚未完成：图标换为转圈，且不自动消失
+* @attr {number} duration - 停留毫秒，默认 5000；<=0 即关闭自动消失
+* @attr {number} remove-delay - 退场窗口毫秒，默认 200，留给退场动画
+* @attr {boolean} closable - 是否提供可用的关闭按钮，默认 true；写 closable="false" 关闭
+* @attr {boolean} pause-on-page-idle - 页面切到后台时暂停计时，默认关闭
+* @attr {boolean} paused - 由宿主整组一起暂停计时，默认关闭；与指针、焦点等来源并存
+* @fires status-change - 生命周期落定；detail 为 `{ id: string, status: 'dismissing'|'unmounted' }`
+* @fires action - 操作按钮被按下；detail 为 `{ id: string }`
+* @csspart item - role=status（danger 时 alert）的卡片，承载 data-tone / data-loading / data-state / data-paused
+* @csspart item-indicator - 语气指示符；留空即由皮肤按卡片上的语气绘制兜底字形，卡片加载中则换为转圈
+* @csspart item-title - 标题，aria-labelledby 的目标
+* @csspart item-description - 补充说明，aria-describedby 的目标
+* @csspart item-action-trigger - 操作按钮：先发出 action 再进入退场
+* @csspart item-progress - 倒计时条；不自动消失时收起
+* @csspart item-close-trigger - 关闭按钮；closable=false 时为原生 disabled 并收起
+*/
+var XhNotificationItemElement = class extends XhElement {
+	static partContract = ITEM_CONTRACT;
+	static properties = {
+		itemId: {
+			converter: STRING_CONVERTER$1,
+			attribute: "id"
+		},
+		titleText: {
+			converter: STRING_CONVERTER$1,
+			attribute: "title"
+		},
+		description: { converter: STRING_CONVERTER$1 },
+		tone: { converter: STRING_CONVERTER$1 },
+		loading: { converter: BOOLEAN_CONVERTER$1 },
+		duration: { converter: NUMBER_CONVERTER$1 },
+		removeDelay: {
+			converter: NUMBER_CONVERTER$1,
+			attribute: "remove-delay"
+		},
+		closable: { converter: BOOLEAN_CONVERTER$1 },
+		pauseOnPageIdle: {
+			converter: BOOLEAN_CONVERTER$1,
+			attribute: "pause-on-page-idle"
+		},
+		paused: { converter: BOOLEAN_CONVERTER$1 },
+		translations: { attribute: false }
+	};
+	notifyStatus = (details) => {
+		this.dispatchEvent(new CustomEvent("status-change", {
+			detail: details,
+			bubbles: true,
+			composed: true
+		}));
+	};
+	notifyAction = (details) => {
+		this.dispatchEvent(new CustomEvent("action", {
+			detail: details,
+			bubbles: true,
+			composed: true
+		}));
+	};
+	ctrl = new MachineController(this, toastMachine, () => this.machineProps(), { configName: "notification" });
+	machineProps() {
+		return {
+			id: this.itemId,
+			title: this.titleText,
+			description: this.description,
+			tone: this.tone,
+			loading: this.loading,
+			duration: this.duration,
+			removeDelay: this.removeDelay,
+			closable: this.closable,
+			pauseOnPageIdle: this.pauseOnPageIdle,
+			paused: this.paused,
+			translations: this.translations,
+			onStatusChange: this.notifyStatus,
+			onAction: this.notifyAction
+		};
+	}
+	/** 这个部件的文字归不归作者：头一回见到它时定案，之后不再改口。 */
+	authorOwnsText = /* @__PURE__ */ new WeakMap();
+	/**
+	* 作者没往部件里写内容时，用 props 上的文案填进去。
+	*
+	* 归属只判一次：判完本轮就会把文字写进去，再回读分不清是作者写的还是自己写的，
+	* 从那以后 title 属性改了也再刷不动（Vue 侧是响应式渲染，会跟着改，两侧就此分叉）。
+	*/
+	fillText(el, text) {
+		if (!el) return;
+		let authored = this.authorOwnsText.get(el);
+		if (authored === void 0) {
+			authored = el.childElementCount > 0 || (el.textContent ?? "").trim() !== "";
+			this.authorOwnsText.set(el, authored);
+		}
+		if (authored) return;
+		const next = text ?? "";
+		if (el.textContent !== next) el.textContent = next;
+	}
+	wire() {
+		const api = connectNotificationItem(this.ctrl.service, wcNormalize);
+		const put = (name, props) => {
+			const el = this.getPart(name);
+			if (el) this.spreader.spread(el, props);
+		};
+		put("item", api.getItemProps());
+		put("item-indicator", api.getItemIndicatorProps());
+		put("item-title", api.getItemTitleProps());
+		put("item-description", api.getItemDescriptionProps());
+		put("item-action-trigger", api.getItemActionTriggerProps());
+		put("item-progress", api.getItemProgressProps());
+		put("item-close-trigger", api.getItemCloseTriggerProps());
+		this.fillText(this.getPart("item-title"), api.title);
+		this.fillText(this.getPart("item-description"), api.description);
+		this.setPartHidden(this.getPart("item"), api.status === "unmounted");
+		this.setPartHidden(this.getPart("item-close-trigger"), !api.closable);
+	}
+};
+//#endregion
+//#region src/elements/toast.ts
+const STRING_CONVERTER = { fromAttribute: (v) => v ?? void 0 };
+const NUMBER_CONVERTER = { fromAttribute: (v) => v == null || v === "" ? void 0 : Number(v) };
+const BOOLEAN_CONVERTER = { fromAttribute: (v) => v === null ? void 0 : v !== "false" };
+/**
+* `<xh-toast>`：Light-DOM 行为宿主：作者写 root / title / action-trigger / close-trigger
+* 角色节点，元素运行 toast 状态机并把 connect 产出接上。
+*
+* root 承载 role 与 aria-live：默认 status + polite（排队等待读屏的空隙），
+* tone="danger" 换为 alert + assertive（打断当前朗读）。指针停在提示上、
+* 或焦点落进提示内部都会暂停倒计时，离开后继续剩余部分。
+*
+* 退场窗口结束时只把 root 收起、不删除节点：作者写在其中的内容归作者，
+* 何时把该条从队列中删除是全局服务的职责（它接收本元素冒泡的 status-change）。
+*
+* @customElement xh-toast
+* @attr {string} id - 队列身份，全局服务按它寻址；未提供时使用实例自身的 scope id
+* @attr {string} title - 标题文案；作者未在 title 部件中写内容时由元素填入
+* @attr {string} description - 简短补充说明；作者未在 description 部件中写内容时由元素填入
+* @attr {'info'|'success'|'warning'|'danger'} tone - 语气，默认 info；danger 使用 alert + assertive
+* @attr {boolean} loading - 事情尚未完成：行首换为转圈，且不自动消失
+* @attr {number} duration - 停留毫秒，默认 4000；<=0 即关闭自动消失
+* @attr {number} remove-delay - 退场窗口毫秒，默认 300，留给退场动画
+* @attr {boolean} closable - 是否提供可用的关闭按钮，默认 true；写 closable="false" 关闭
+* @attr {boolean} pause-on-page-idle - 页面切到后台时暂停计时，单组件默认关闭；全局服务默认开启
+* @attr {boolean} paused - 由宿主整组一起暂停计时，默认关闭；与指针、焦点等来源并存
+* @fires status-change - 生命周期落定；detail 为 `{ id: string, status: 'dismissing'|'unmounted' }`
+* @fires action - 操作按钮被按下；detail 为 `{ id: string }`
+* @csspart root - role=status（danger 时 alert）的容器，承载 data-tone / data-loading / data-state / data-paused
+* @csspart indicator - 语气指示符（对读屏隐藏），同样承载 data-loading；不渲染它时字形由 root 的伪元素兜底
+* @csspart content - 标题与说明的文本列
+* @csspart title - 标题，aria-labelledby 的目标
+* @csspart description - 可选的简短补充说明
+* @csspart action-trigger - 操作按钮：先发出 action 再进入退场
+* @csspart progress - 倒计时条；不自动消失时收起
+* @csspart close-trigger - 关闭按钮；closable=false 时为原生 disabled 并收起
+*/
+var XhToastElement = class extends XhElement {
+	static partContract = {
+		anatomy: toastAnatomy,
+		meta: toastMeta
+	};
+	static properties = {
+		toastId: {
+			converter: STRING_CONVERTER,
+			attribute: "id"
+		},
+		titleText: {
+			converter: STRING_CONVERTER,
+			attribute: "title"
+		},
+		descriptionText: {
+			converter: STRING_CONVERTER,
+			attribute: "description"
+		},
+		tone: { converter: STRING_CONVERTER },
+		loading: { converter: BOOLEAN_CONVERTER },
+		duration: { converter: NUMBER_CONVERTER },
+		removeDelay: {
+			converter: NUMBER_CONVERTER,
+			attribute: "remove-delay"
+		},
+		closable: { converter: BOOLEAN_CONVERTER },
+		pauseOnPageIdle: {
+			converter: BOOLEAN_CONVERTER,
+			attribute: "pause-on-page-idle"
+		},
+		paused: { converter: BOOLEAN_CONVERTER },
+		translations: { attribute: false }
+	};
+	notifyStatus = (details) => {
+		this.dispatchEvent(new CustomEvent("status-change", {
+			detail: details,
+			bubbles: true,
+			composed: true
+		}));
+	};
+	notifyAction = (details) => {
+		this.dispatchEvent(new CustomEvent("action", {
+			detail: details,
+			bubbles: true,
+			composed: true
+		}));
+	};
+	ctrl = new MachineController(this, toastMachine, () => this.machineProps());
+	machineProps() {
+		return {
+			id: this.toastId,
+			title: this.titleText,
+			description: this.descriptionText,
+			tone: this.tone,
+			loading: this.loading,
+			duration: this.duration,
+			removeDelay: this.removeDelay,
+			closable: this.closable,
+			pauseOnPageIdle: this.pauseOnPageIdle,
+			paused: this.paused,
+			translations: this.translations,
+			onStatusChange: this.notifyStatus,
+			onAction: this.notifyAction
+		};
+	}
+	/** 这个部件的文字归不归作者：头一回见到它时定案，之后不再改口。 */
+	authorOwnsText = /* @__PURE__ */ new WeakMap();
+	/**
+	* 作者没往部件里写内容时，用 props 上的文案填进去。
+	*
+	* 归属只判一次：判完本轮就会把文字写进去，再回读分不清是作者写的还是自己写的，
+	* 从那以后 title 属性改了也再刷不动（Vue 侧是响应式渲染，会跟着改，两侧就此分叉）。
+	*/
+	fillText(el, text) {
+		if (!el) return;
+		let authored = this.authorOwnsText.get(el);
+		if (authored === void 0) {
+			authored = el.childElementCount > 0 || (el.textContent ?? "").trim() !== "";
+			this.authorOwnsText.set(el, authored);
+		}
+		if (authored) return;
+		const next = text ?? "";
+		if (el.textContent !== next) el.textContent = next;
+	}
+	wire() {
+		const api = connectToast(this.ctrl.service, wcNormalize);
+		const put = (name, props) => {
+			const el = this.getPart(name);
+			if (el) this.spreader.spread(el, props);
+		};
+		put("root", api.getRootProps());
+		put("indicator", api.getIndicatorProps());
+		put("content", api.getContentProps());
+		put("title", api.getTitleProps());
+		put("description", api.getDescriptionProps());
+		put("action-trigger", api.getActionTriggerProps());
+		put("progress", api.getProgressProps());
+		put("close-trigger", api.getCloseTriggerProps());
+		this.fillText(this.getPart("title"), api.title);
+		this.fillText(this.getPart("description"), api.description);
+		this.setPartHidden(this.getPart("root"), api.status === "unmounted");
+		this.setPartHidden(this.getPart("close-trigger"), !api.closable);
+	}
+};
+//#endregion
+export { XhDialogElement as a, createOverlayExit as c, XhLoadingBarElement as i, XhElement as l, XhNotificationElement as n, XhPortalHostElement as o, XhNotificationItemElement as r, XhButtonElement as s, XhToastElement as t };
+
+//# sourceMappingURL=toast-BTlM12YF.js.map