@skaldapp/monaco-sfc 1.2.15 → 1.3.1

package/dist/vue.worker.js

@@ -51,6 +51,8 @@ var NS = Symbol("ns");
 var OWNER_ELEMENT = Symbol("owner");
 var OWNER_DOCUMENT = Symbol("owner_document");
 var ATTRIBUTES = Symbol("attributes");
+var CLASS_LIST = Symbol("class_list");
+var DATASET = Symbol("dataset");
 var PREV = Symbol("prev");
 var NEXT = Symbol("next");
 var CHILD = Symbol("child");
@@ -442,6 +444,13 @@ var NodeList = class extends Array {
 		return this[index] ?? null;
 	}
 };
+/** Common fields available on every selector matcher. */
+/** Matchers whose comparison value is carried entirely by `name`. */
+/** An attribute selector, optionally requiring an exact value. */
+/** A pseudo-class selector without an argument. */
+/** A functional pseudo-class selector. */
+/** The internal scope marker used while matching relative selectors. */
+/** A local- or qualified-name matcher with a precomputed HTML comparison name. */
 var SUPPORTED_IDENTIFIER_TEST = /^(?:--|-?[A-Za-z_\u0080-\u{10FFFF}])[A-Za-z0-9_\u0080-\u{10FFFF}-]*$/u;
 function readFunctionArgument(selector, start) {
 	let depth = 1;
@@ -514,7 +523,7 @@ function parseSelector(selector, insideHas = false, allowLeadingCombinator = fal
 		}
 		const name = token[8] ? asciiLowercase(token[8]) : token[2] || token[7];
 		if (token[7] != null && !token[6] && part.matchers.length > 0) throwSelectorSyntaxError(selector);
-		let type;
+		let type = 0;
 		let value = token[4] ?? token[5] ?? token[7];
 		if (token[2]) {
 			if (!SUPPORTED_IDENTIFIER_TEST.test(name)) throwSelectorSyntaxError(selector);
@@ -529,19 +538,20 @@ function parseSelector(selector, insideHas = false, allowLeadingCombinator = fal
 		} else if (token[6]) {
 			if (!SUPPORTED_IDENTIFIER_TEST.test(name)) throwSelectorSyntaxError(selector);
 			type = token[6] === "#" ? 2 : 3;
-		} else if (token[8]) type = token[9] == null ? 5 : 6;
-		else if (token[7] === "*") type = 0;
-		else if (token[7] && SUPPORTED_IDENTIFIER_TEST.test(token[7])) type = 1;
-		else throwSelectorSyntaxError(selector);
-		if (token[9]) {
+		} else if (token[8]) {
+			if (!token[9]) throwSelectorSyntaxError(selector);
 			[value, tokenizer.lastIndex] = readFunctionArgument(normalizedSelector, tokenizer.lastIndex);
 			if (name !== "has" && name !== "not") throwSelectorSyntaxError(selector);
 			if (name === "has" && insideHas) throwSelectorSyntaxError(selector);
 			parseSelector(value, insideHas || name === "has", name === "has");
-		} else if (type === 5) throwSelectorSyntaxError(selector);
+			type = 6;
+		} else if (token[7] === "*") type = 0;
+		else if (token[7] && SUPPORTED_IDENTIFIER_TEST.test(token[7])) type = 1;
+		else throwSelectorSyntaxError(selector);
 		part.matchers.push({
 			type,
 			name,
+			htmlName: type === 1 || type === 4 ? asciiLowercase(name) : void 0,
 			value
 		});
 		consumed = tokenizer.lastIndex;
@@ -603,8 +613,7 @@ function matchesSelectorRecursive(element, parts, scope) {
 	const { combinator, matchers } = parts[parts.length - 1];
 	if (combinator === 4) {
 		if (!matchesSelectorMatcher(element, matchers, scope)) return false;
-		const pp = parts.slice(0, -1);
-		return pp.length === 0 || matchesSelectorRecursive(element, pp, scope);
+		return parts.length === 1 || matchesSelectorRecursive(element, parts.slice(0, -1), scope);
 	}
 	const link = combinator === 1 || combinator === 0 ? PARENT : PREV;
 	let ref = element[link];
@@ -612,9 +621,7 @@ function matchesSelectorRecursive(element, parts, scope) {
 	if (combinator === 0 || combinator === 2) {
 		while (ref) {
 			if (isElementNode(ref) && matchesSelectorMatcher(ref, matchers, scope)) {
-				const pp = parts.slice(0, -1);
-				if (pp.length === 0) return true;
-				if (matchesSelectorRecursive(ref, pp, scope)) return true;
+				if (parts.length === 1 || matchesSelectorRecursive(ref, parts.slice(0, -1), scope)) return true;
 			}
 			ref = ref[link];
 		}
@@ -625,30 +632,27 @@ function matchesSelectorRecursive(element, parts, scope) {
 			if (!ref) return false;
 		}
 		if (!isElementNode(ref) || !matchesSelectorMatcher(ref, matchers, scope)) return false;
-		const pp = parts.slice(0, -1);
-		return pp.length === 0 || matchesSelectorRecursive(ref, pp, scope);
+		return parts.length === 1 || matchesSelectorRecursive(ref, parts.slice(0, -1), scope);
 	}
 }
-function getSelectorAttribute(element, name) {
-	return element.getAttributeNS(null, element.namespaceURI === "http://www.w3.org/1999/xhtml" ? asciiLowercase(name) : name);
-}
 function matchesSelectorMatcher(element, matcher, scope) {
 	if (!element) return false;
 	if (Array.isArray(matcher)) {
 		for (const single of matcher) if (matchesSelectorMatcher(element, single, scope) === false) return false;
 		return true;
 	}
-	const { type, name, value } = matcher;
+	const { type, name, htmlName, value } = matcher;
 	switch (type) {
 		case 0: return name === "*";
-		case 1: return element.namespaceURI === "http://www.w3.org/1999/xhtml" ? element.localName === asciiLowercase(name) : element.localName === name;
-		case 2: return getSelectorAttribute(element, "id") === name;
+		case 1: return element.localName === (element.namespaceURI === "http://www.w3.org/1999/xhtml" ? htmlName : name);
+		case 8: return element[NAME] === (element.namespaceURI === "http://www.w3.org/1999/xhtml" ? htmlName : name);
+		case 2: return element.getAttributeNS(null, "id") === name;
 		case 3:
-			const classAttr = getSelectorAttribute(element, "class");
+			const classAttr = element.getAttributeNS(null, "class");
 			if (!classAttr) return false;
 			return splitOnASCIIWhitespace(classAttr).includes(name);
 		case 4:
-			const attribute = getSelectorAttribute(element, name);
+			const attribute = element.getAttributeNS(null, element.namespaceURI === "http://www.w3.org/1999/xhtml" ? htmlName : name);
 			return value == null ? attribute != null : attribute === value;
 		case 7: return element === scope;
 		case 5: throwSelectorSyntaxError(`:${name}`);
@@ -661,6 +665,11 @@ function matchesSelectorMatcher(element, matcher, scope) {
 	return false;
 }
 // node_modules/@remote-dom/polyfill/build/esm/shared.mjs
+function toPropertyIndex(property) {
+	if (typeof property !== "string") return void 0;
+	const index = Number(property);
+	return Number.isInteger(index) && index >= 0 && index < 2 ** 32 - 1 && String(index) === property ? index : void 0;
+}
 function isAttributeNode(node) {
 	return node.nodeType === 2;
 }
@@ -823,13 +832,11 @@ function getElementsByClassName(within, classNames) {
 }
 function getElementsByTagName(within, qualifiedName) {
 	const name = String(qualifiedName);
-	const normalizedHtmlName = asciiLowercase(name);
-	const elements = [];
-	for (const node of descendants(within)) {
-		if (!isElementNode(node)) continue;
-		if (name === "*" || (node.namespaceURI === "http://www.w3.org/1999/xhtml" ? node[NAME] === normalizedHtmlName : node[NAME] === name)) elements.push(node);
-	}
-	return elements;
+	return querySelectorAll(within, [{
+		type: name === "*" ? 0 : 8,
+		name,
+		htmlName: asciiLowercase(name)
+	}]);
 }
 function descendants(node) {
 	const nodes = [];
@@ -1561,39 +1568,12 @@ var NamedNodeMap = class {
 	removeNamedItem(name) {
 		const qualifiedName = String(name);
 		const normalizedName = this[OWNER_ELEMENT][NS] === "http://www.w3.org/1999/xhtml" ? asciiLowercase(qualifiedName) : qualifiedName;
-		return performWithCustomElementReactions(() => this.removeNamedItemImmediately((attr) => attr.name === normalizedName));
+		return performWithCustomElementReactions(() => removeNamedItemImmediately(this, (attr) => attr.name === normalizedName));
 	}
 	removeNamedItemNS(namespaceURI, localName) {
 		const namespace = normalizeNamespace(namespaceURI);
 		const normalizedLocalName = String(localName);
-		return performWithCustomElementReactions(() => this.removeNamedItemImmediately((attr) => attr.localName === normalizedLocalName && attr[NS] === namespace));
-	}
-	removeNamedItemImmediately(matches) {
-		const ownerElement = this[OWNER_ELEMENT];
-		let attr = this[CHILD];
-		let prev = null;
-		while (attr != null) {
-			if (matches(attr)) {
-				if (prev) prev[NEXT] = attr[NEXT];
-				if (this[CHILD] === attr) this[CHILD] = attr[NEXT];
-				const oldValue = attr.value;
-				attr[NEXT] = null;
-				attr[OWNER_ELEMENT] = null;
-				if (attributeObserversActive) queueMutationRecord({
-					type: "attributes",
-					target: ownerElement,
-					attributeName: attr.name,
-					attributeNamespace: attr[NS],
-					oldValue
-				});
-				ownerElement[HOOKS].removeAttribute?.(ownerElement, attr.name, attr[NS]);
-				enqueueAttributeReaction(ownerElement, attr.localName, oldValue, null, attr[NS]);
-				return attr;
-			}
-			prev = attr;
-			attr = attr[NEXT];
-		}
-		return null;
+		return performWithCustomElementReactions(() => removeNamedItemImmediately(this, (attr) => attr.localName === normalizedLocalName && attr[NS] === namespace));
 	}
 	setNamedItem(attr) {
 		return performWithCustomElementReactions(() => this.setNamedItemImmediately(attr));
@@ -1650,6 +1630,54 @@ var NamedNodeMap = class {
 		}
 	}
 };
+function removeNamedItemImmediately(attributes, matches, destination) {
+	const ownerElement = attributes[OWNER_ELEMENT];
+	let attr = attributes[CHILD];
+	let prev = null;
+	while (attr != null) {
+		if (matches(attr)) {
+			const qualifiedName = attr.name;
+			const localName = attr.localName;
+			const namespace = attr[NS];
+			const oldValue = attr.value;
+			if (prev) prev[NEXT] = attr[NEXT];
+			if (attributes[CHILD] === attr) attributes[CHILD] = attr[NEXT];
+			attr[NEXT] = null;
+			attr[OWNER_ELEMENT] = null;
+			if (destination) adoptNodes([attr], destination);
+			if (attributeObserversActive) queueMutationRecord({
+				type: "attributes",
+				target: ownerElement,
+				attributeName: qualifiedName,
+				attributeNamespace: namespace,
+				oldValue
+			});
+			ownerElement[HOOKS].removeAttribute?.(ownerElement, qualifiedName, namespace);
+			enqueueAttributeReaction(ownerElement, localName, oldValue, null, namespace);
+			return attr;
+		}
+		prev = attr;
+		attr = attr[NEXT];
+	}
+	return null;
+}
+/** @internal */
+function removeAttributeForAdoption(attributes, attribute, destination) {
+	const removed = removeNamedItemImmediately(attributes, (candidate) => candidate === attribute, destination);
+	if (removed == null) throw new Error("The owner element does not contain the adopted attribute.");
+	return removed;
+}
+var namedNodeMapPropertyFallback = new Proxy({}, { get(target, property, receiver) {
+	const namedNodeMap = receiver;
+	const index = toPropertyIndex(property);
+	if (index !== void 0) {
+		const indexedAttribute = namedNodeMap.item(index);
+		if (indexedAttribute) return indexedAttribute;
+	}
+	if (property in target) return Reflect.get(target, property, receiver);
+	return typeof property === "string" ? namedNodeMap.getNamedItem(property) ?? void 0 : void 0;
+} });
+Object.setPrototypeOf(NamedNodeMap.prototype, namedNodeMapPropertyFallback);
 // node_modules/@remote-dom/polyfill/build/esm/Attr.mjs
 var Attr = class extends Node$2 {
 	nodeType = 2;
@@ -1904,6 +1932,186 @@ function serialize(workItems) {
 	}
 	return chunks.join("");
 }
+// node_modules/@remote-dom/polyfill/build/esm/DOMTokenList.mjs
+function validateTokens(token, otherToken) {
+	if (token === "" || otherToken === "") throw createDOMException("The token provided must not be empty.", "SyntaxError");
+	if (/[\t\n\f\r ]/.test(token) || otherToken !== void 0 && /[\t\n\f\r ]/.test(otherToken)) throw createDOMException("The token provided contains ASCII whitespace, which is not valid in tokens.", "InvalidCharacterError");
+}
+function normalizeTokens(tokens) {
+	for (let index = 0; index < tokens.length; index++) tokens[index] = String(tokens[index]);
+	for (const token of tokens) validateTokens(token);
+	return tokens;
+}
+var DOMTokenList = class {
+	#cachedRawValue;
+	#cachedTokens = [];
+	constructor(element) {
+		this[OWNER_ELEMENT] = element;
+	}
+	get [VALUE]() {
+		const rawValue = this[OWNER_ELEMENT].className;
+		if (rawValue !== this.#cachedRawValue) {
+			this.#cachedTokens = [...new Set(splitOnASCIIWhitespace(rawValue))];
+			this.#cachedRawValue = rawValue;
+		}
+		return this.#cachedTokens;
+	}
+	get length() {
+		return this[VALUE].length;
+	}
+	get value() {
+		return this[OWNER_ELEMENT].className;
+	}
+	set value(value) {
+		this[OWNER_ELEMENT].className = String(value);
+	}
+	#setTokens(tokens) {
+		const rawValue = tokens.join(" ");
+		this.#cachedRawValue = rawValue;
+		this.#cachedTokens = tokens;
+		this.value = rawValue;
+	}
+	item(index) {
+		return this[VALUE][index] ?? null;
+	}
+	contains(token) {
+		return this[VALUE].includes(String(token));
+	}
+	add(...tokens) {
+		const normalizedTokens = normalizeTokens(tokens);
+		const currentTokens = this[VALUE];
+		if (normalizedTokens.length === 0) {
+			this.#setTokens(currentTokens);
+			return;
+		}
+		if (normalizedTokens.length === 1) {
+			const token = normalizedTokens[0];
+			this.#setTokens(currentTokens.includes(token) ? currentTokens : [...currentTokens, token]);
+			return;
+		}
+		const nextTokens = new Set(currentTokens);
+		for (const token of normalizedTokens) nextTokens.add(token);
+		this.#setTokens(nextTokens.size === currentTokens.length ? currentTokens : [...nextTokens]);
+	}
+	remove(...tokens) {
+		const normalizedTokens = normalizeTokens(tokens);
+		if (!this[OWNER_ELEMENT].hasAttribute("class")) return;
+		const currentTokens = this[VALUE];
+		if (normalizedTokens.length === 0 || currentTokens.length === 0) {
+			this.#setTokens(currentTokens);
+			return;
+		}
+		if (normalizedTokens.length === 1) {
+			const index = currentTokens.indexOf(normalizedTokens[0]);
+			this.#setTokens(index < 0 ? currentTokens : currentTokens.filter((_, tokenIndex) => tokenIndex !== index));
+			return;
+		}
+		const removedTokens = new Set(normalizedTokens);
+		const nextTokens = [];
+		for (const token of currentTokens) if (!removedTokens.has(token)) nextTokens.push(token);
+		this.#setTokens(nextTokens.length === currentTokens.length ? currentTokens : nextTokens);
+	}
+	toggle(token, force) {
+		const normalizedToken = String(token);
+		validateTokens(normalizedToken);
+		const tokens = this[VALUE];
+		const index = tokens.indexOf(normalizedToken);
+		const present = index >= 0;
+		const next = force === void 0 ? !present : Boolean(force);
+		if (next !== present) this.#setTokens(next ? [...tokens, normalizedToken] : tokens.filter((_, tokenIndex) => tokenIndex !== index));
+		return next;
+	}
+	replace(token, newToken) {
+		const normalizedToken = String(token);
+		const normalizedNewToken = String(newToken);
+		validateTokens(normalizedToken, normalizedNewToken);
+		const tokens = this[VALUE];
+		const index = tokens.indexOf(normalizedToken);
+		if (index < 0) return false;
+		if (normalizedToken === normalizedNewToken) {
+			this.#setTokens(tokens);
+			return true;
+		}
+		const nextTokens = [];
+		let seenReplacement = false;
+		for (let tokenIndex = 0; tokenIndex < tokens.length; tokenIndex++) {
+			const candidate = tokenIndex === index ? normalizedNewToken : tokens[tokenIndex];
+			if (candidate === normalizedNewToken) {
+				if (seenReplacement) continue;
+				seenReplacement = true;
+			}
+			nextTokens.push(candidate);
+		}
+		this.#setTokens(nextTokens);
+		return true;
+	}
+	toString() {
+		return this.value;
+	}
+	[Symbol.iterator]() {
+		return this[VALUE][Symbol.iterator]();
+	}
+};
+Object.setPrototypeOf(DOMTokenList.prototype, new Proxy({}, {
+	get(target, name, receiver) {
+		const index = toPropertyIndex(name);
+		return index !== void 0 ? receiver[VALUE][index] : Reflect.get(target, name, receiver);
+	},
+	set(target, name, value, receiver) {
+		return toPropertyIndex(name) !== void 0 || Reflect.set(target, name, value, receiver);
+	}
+}));
+// node_modules/@remote-dom/polyfill/build/esm/DOMStringMap.mjs
+function toDataAttributeName(name) {
+	return "data-" + asciiLowercase(name.replace(/[A-Z]/g, "-$&"));
+}
+function toDataPropertyName(name) {
+	return name.slice(5).replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+}
+function isValidDataPropertyName(name) {
+	return !/-[a-z]/.test(name);
+}
+function validateDataPropertyName(name) {
+	if (!isValidDataPropertyName(name)) throw createDOMException("Invalid dataset property name", "SyntaxError");
+}
+function createDOMStringMap(element) {
+	return new Proxy({}, {
+		get: (target, name) => typeof name === "string" && isValidDataPropertyName(name) ? element.getAttribute(toDataAttributeName(name)) ?? Reflect.get(target, name) : Reflect.get(target, name),
+		set: (target, name, value) => {
+			if (typeof name !== "string") return Reflect.set(target, name, value);
+			validateDataPropertyName(name);
+			element.setAttribute(toDataAttributeName(name), String(value));
+			return true;
+		},
+		deleteProperty: (target, name) => {
+			if (typeof name !== "string") return Reflect.deleteProperty(target, name);
+			if (!isValidDataPropertyName(name)) return true;
+			element.removeAttribute(toDataAttributeName(name));
+			return true;
+		},
+		defineProperty: (target, name, descriptor) => {
+			if (typeof name !== "string") return Reflect.defineProperty(target, name, descriptor);
+			if ("get" in descriptor || "set" in descriptor) return false;
+			validateDataPropertyName(name);
+			element.setAttribute(toDataAttributeName(name), String(descriptor.value));
+			return true;
+		},
+		preventExtensions: () => false,
+		has: (target, name) => Reflect.has(target, name) || typeof name === "string" && isValidDataPropertyName(name) && element.hasAttribute(toDataAttributeName(name)),
+		ownKeys: (target) => [...element.getAttributeNames().filter((name) => name.startsWith("data-") && toDataAttributeName(toDataPropertyName(name)) === name).map(toDataPropertyName), ...Reflect.ownKeys(target).filter((key) => typeof key !== "string")],
+		getOwnPropertyDescriptor: (target, name) => {
+			if (typeof name !== "string") return Reflect.getOwnPropertyDescriptor(target, name);
+			if (!isValidDataPropertyName(name)) return Reflect.getOwnPropertyDescriptor(target, name);
+			const value = element.getAttribute(toDataAttributeName(name));
+			return value == null ? Reflect.getOwnPropertyDescriptor(target, name) : {
+				value,
+				writable: true,
+				enumerable: true,
+				configurable: true
+			};
+		}
+	});
+}
 // node_modules/@remote-dom/polyfill/build/esm/Element.mjs
 var Element$2 = class extends ParentNode {
 	nodeType = 1;
@@ -1925,6 +2133,18 @@ var Element$2 = class extends ParentNode {
 	get tagName() {
 		return this.nodeName;
 	}
+	get className() {
+		return this.getAttribute("class") ?? "";
+	}
+	set className(value) {
+		this.setAttribute("class", String(value));
+	}
+	get classList() {
+		return this[CLASS_LIST] ??= new DOMTokenList(this);
+	}
+	get dataset() {
+		return this[DATASET] ??= createDOMStringMap(this);
+	}
 	get id() {
 		return this.getAttributeNS(null, "id") ?? "";
 	}
@@ -2026,6 +2246,17 @@ var Element$2 = class extends ParentNode {
 	removeAttributeNS(namespace, name) {
 		this.attributes.removeNamedItemNS(namespace, name);
 	}
+	matches(selector) {
+		return matchesSelector(this, selector);
+	}
+	closest(selector) {
+		let element = this;
+		while (element) {
+			if (element.matches(selector)) return element;
+			element = element.parentElement;
+		}
+		return null;
+	}
 	get outerHTML() {
 		return serializeNode(this);
 	}
@@ -2185,6 +2416,17 @@ var Document$1 = class extends ParentNode {
 		return cloneNode(node, deep, this);
 	}
 	adoptNode(node) {
+		if (node.nodeType === 2) {
+			const attribute = node;
+			const ownerElement = attribute.ownerElement;
+			if (ownerElement) return performWithCustomElementReactions(() => {
+				removeAttributeForAdoption(ownerElement.attributes, attribute, this);
+				return attribute;
+			});
+			if (attribute[OWNER_DOCUMENT] === this) return attribute;
+			adoptNodes([attribute], this);
+			return attribute;
+		}
 		if (node[OWNER_DOCUMENT] === this) return node;
 		const adoption = collectAdoptionSnapshot(node);
 		return performWithCustomElementReactions(() => {
@@ -3162,7 +3404,8 @@ var require_language_core$1 = /* @__PURE__ */ __commonJSMin(((exports, module, t
 					return scriptRegistry.get(id);
 				},
 				set(id, snapshot, languageId, _plugins = plugins) {
-					if (!languageId) for (const plugin of plugins) {
+					const scriptPlugins = filterPluginsByExtension(id, plugins);
+					if (!languageId) for (const plugin of scriptPlugins) {
 						languageId = plugin.getLanguageId?.(id);
 						if (languageId) break;
 					}
@@ -3171,7 +3414,7 @@ var require_language_core$1 = /* @__PURE__ */ __commonJSMin(((exports, module, t
 						return;
 					}
 					let associatedOnly = false;
-					for (const plugin of plugins) if (plugin.isAssociatedFileOnly?.(id, languageId)) {
+					for (const plugin of scriptPlugins) if (plugin.isAssociatedFileOnly?.(id, languageId)) {
 						associatedOnly = true;
 						break;
 					}
@@ -3220,7 +3463,7 @@ var require_language_core$1 = /* @__PURE__ */ __commonJSMin(((exports, module, t
 						};
 						scriptRegistry.set(id, sourceScript);
 						if (associatedOnly) return sourceScript;
-						for (const languagePlugin of _plugins) {
+						for (const languagePlugin of filterPluginsByExtension(id, _plugins)) {
 							const virtualCode = languagePlugin.createVirtualCode?.(id, languageId, snapshot, prepareCreateVirtualCode(sourceScript));
 							if (virtualCode) {
 								sourceScript.generated = {
@@ -3298,6 +3541,12 @@ var require_language_core$1 = /* @__PURE__ */ __commonJSMin(((exports, module, t
 			} };
 		}
 	}
+	function filterPluginsByExtension(id, plugins) {
+		const fileName = String(id);
+		let longestExtension;
+		for (const plugin of plugins) for (const extension of plugin.extensions ?? []) if (fileName.endsWith(extension) && extension.length > (longestExtension?.length ?? -1)) longestExtension = extension;
+		return plugins.filter((plugin) => !plugin.extensions || longestExtension !== void 0 && plugin.extensions.includes(longestExtension));
+	}
 	function* forEachEmbeddedCode(virtualCode) {
 		yield virtualCode;
 		if (virtualCode.embeddedCodes) for (const embeddedCode of virtualCode.embeddedCodes) yield* forEachEmbeddedCode(embeddedCode);
@@ -4209,6 +4458,7 @@ var require_transform$2 = /* @__PURE__ */ __commonJSMin(((exports) => {
 	}
 	function transformWorkspaceEdit(edit, context, mode, versions = {}) {
 		const sourceResult = {};
+		const unmappedEdits = /* @__PURE__ */ new Set();
 		let hasResult = false;
 		for (const tsUri in edit.changeAnnotations) {
 			sourceResult.changeAnnotations ??= {};
@@ -4230,6 +4480,8 @@ var require_transform$2 = /* @__PURE__ */ __commonJSMin(((exports) => {
 			const virtualCode = decoded && sourceScript?.generated?.embeddedCodes.get(decoded[1]);
 			if (sourceScript && virtualCode) {
 				const embeddedDocument = context.documents.get(context.encodeEmbeddedDocumentUri(sourceScript.id, virtualCode.id), virtualCode.languageId, virtualCode.snapshot);
+				const tsEdits = edit.changes[tsUri];
+				for (const tsEdit of tsEdits) unmappedEdits.add(tsEdit);
 				for (const [sourceScript, map] of context.language.maps.forEach(virtualCode)) {
 					const sourceDocument = context.documents.get(sourceScript.id, sourceScript.languageId, sourceScript.snapshot);
 					const docs = [
@@ -4237,7 +4489,6 @@ var require_transform$2 = /* @__PURE__ */ __commonJSMin(((exports) => {
 						embeddedDocument,
 						map
 					];
-					const tsEdits = edit.changes[tsUri];
 					for (const tsEdit of tsEdits) if (mode === "rename" || mode === "fileName" || mode === "codeAction") {
 						let _data;
 						const range = (0, featureWorkers_1.getSourceRange)(docs, tsEdit.range, (data) => {
@@ -4245,6 +4496,7 @@ var require_transform$2 = /* @__PURE__ */ __commonJSMin(((exports) => {
 							return (0, language_core_1.isRenameEnabled)(data);
 						});
 						if (range) {
+							unmappedEdits.delete(tsEdit);
 							sourceResult.changes[sourceDocument.uri] ??= [];
 							sourceResult.changes[sourceDocument.uri].push({
 								newText: (0, language_core_1.resolveRenameEditText)(tsEdit.newText, _data),
@@ -4255,6 +4507,7 @@ var require_transform$2 = /* @__PURE__ */ __commonJSMin(((exports) => {
 					} else {
 						const range = (0, featureWorkers_1.getSourceRange)(docs, tsEdit.range);
 						if (range) {
+							unmappedEdits.delete(tsEdit);
 							sourceResult.changes[sourceDocument.uri] ??= [];
 							sourceResult.changes[sourceDocument.uri].push({
 								newText: tsEdit.newText,
@@ -4278,6 +4531,7 @@ var require_transform$2 = /* @__PURE__ */ __commonJSMin(((exports) => {
 				const virtualCode = decoded && sourceScript?.generated?.embeddedCodes.get(decoded[1]);
 				if (sourceScript && virtualCode) {
 					const embeddedDocument = context.documents.get(context.encodeEmbeddedDocumentUri(sourceScript.id, virtualCode.id), virtualCode.languageId, virtualCode.snapshot);
+					for (const tsEdit of tsDocEdit.edits) unmappedEdits.add(tsEdit);
 					for (const [sourceScript, map] of context.language.maps.forEach(virtualCode)) {
 						const sourceDocument = context.documents.get(sourceScript.id, sourceScript.languageId, sourceScript.snapshot);
 						const docs = [
@@ -4298,18 +4552,24 @@ var require_transform$2 = /* @__PURE__ */ __commonJSMin(((exports) => {
 								_data = data;
 								return (0, language_core_1.isRenameEnabled)(data);
 							});
-							if (range) sourceEdit.edits.push({
-								annotationId: "annotationId" in tsEdit ? tsEdit.annotationId : void 0,
-								newText: (0, language_core_1.resolveRenameEditText)(tsEdit.newText, _data),
-								range
-							});
+							if (range) {
+								unmappedEdits.delete(tsEdit);
+								sourceEdit.edits.push({
+									annotationId: "annotationId" in tsEdit ? tsEdit.annotationId : void 0,
+									newText: (0, language_core_1.resolveRenameEditText)(tsEdit.newText, _data),
+									range
+								});
+							}
 						} else {
 							const range = (0, featureWorkers_1.getSourceRange)(docs, tsEdit.range);
-							if (range) sourceEdit.edits.push({
-								annotationId: "annotationId" in tsEdit ? tsEdit.annotationId : void 0,
-								newText: tsEdit.newText,
-								range
-							});
+							if (range) {
+								unmappedEdits.delete(tsEdit);
+								sourceEdit.edits.push({
+									annotationId: "annotationId" in tsEdit ? tsEdit.annotationId : void 0,
+									newText: tsEdit.newText,
+									range
+								});
+							}
 						}
 						if (!sourceEdit.edits.length) sourceEdit = void 0;
 					}
@@ -4344,6 +4604,7 @@ var require_transform$2 = /* @__PURE__ */ __commonJSMin(((exports) => {
 				hasResult = true;
 			}
 		}
+		if (mode === "codeAction" && unmappedEdits.size) return;
 		if (hasResult) return sourceResult;
 	}
 	function pushEditToDocumentChanges(arr, item) {
@@ -4558,6 +4819,13 @@ var init_main$3 = __esmMin((() => {
 				const startOffset = this.offsetAt(range.start);
 				const endOffset = this.offsetAt(range.end);
 				this._content = this._content.substring(0, startOffset) + change.text + this._content.substring(endOffset, this._content.length);
+				const insertedEndOffset = startOffset + change.text.length;
+				const crlfAtStart = this._content.charCodeAt(startOffset - 1) === 13 && this._content.charCodeAt(startOffset) === 10;
+				const crlfAtEnd = this._content.charCodeAt(insertedEndOffset - 1) === 13 && this._content.charCodeAt(insertedEndOffset) === 10;
+				if (crlfAtStart || crlfAtEnd) {
+					this._lineOffsets = void 0;
+					continue;
+				}
 				const startLine = Math.max(range.start.line, 0);
 				const endLine = Math.max(range.end.line, 0);
 				let lineOffsets = this._lineOffsets;
@@ -5096,6 +5364,7 @@ var require_provideCompletionItems = /* @__PURE__ */ __commonJSMin(((exports) =>
 	function register(context) {
 		let lastResult;
 		return async (uri, position, completionContext = { triggerKind: 1 }, token = cancellation_1.NoneCancellationToken) => {
+			let currentResult;
 			let langaugeIdAndSnapshot;
 			let sourceScript;
 			const decoded = context.decodeEmbeddedDocumentUri(uri);
@@ -5108,59 +5377,61 @@ var require_provideCompletionItems = /* @__PURE__ */ __commonJSMin(((exports) =>
 				isIncomplete: false,
 				items: []
 			};
-			if (completionContext?.triggerKind === 3 && lastResult?.uri.toString() === uri.toString()) for (const cacheData of lastResult.results) {
-				if (!cacheData.list?.isIncomplete) continue;
-				const pluginIndex = context.plugins.findIndex((plugin) => plugin[1] === cacheData.plugin);
-				if (cacheData.embeddedDocumentUri) {
-					const decoded = context.decodeEmbeddedDocumentUri(cacheData.embeddedDocumentUri);
-					const sourceScript = decoded && context.language.scripts.get(decoded[0]);
-					const virtualCode = decoded && sourceScript?.generated?.embeddedCodes.get(decoded[1]);
-					if (!sourceScript || !virtualCode) continue;
-					const embeddedDocument = context.documents.get(context.encodeEmbeddedDocumentUri(sourceScript.id, virtualCode.id), virtualCode.languageId, virtualCode.snapshot);
-					for (const [sourceScript, map] of context.language.maps.forEach(virtualCode)) {
-						const docs = [
-							context.documents.get(sourceScript.id, sourceScript.languageId, sourceScript.snapshot),
-							embeddedDocument,
-							map
-						];
-						for (const mapped of (0, featureWorkers_1.getGeneratedPositions)(docs, position, (data) => (0, language_core_1.isCompletionEnabled)(data))) {
-							if (!cacheData.plugin.provideCompletionItems) continue;
-							cacheData.list = await cacheData.plugin.provideCompletionItems(embeddedDocument, mapped, completionContext, token);
-							if (!cacheData.list) continue;
-							for (const item of cacheData.list.items) if (cacheData.plugin.resolveCompletionItem) item.data = {
-								uri: uri.toString(),
-								original: {
-									additionalTextEdits: item.additionalTextEdits,
-									textEdit: item.textEdit,
-									data: item.data
-								},
-								pluginIndex,
-								embeddedDocumentUri: embeddedDocument.uri
-							};
-							else delete item.data;
-							cacheData.list = (0, transform_1.transformCompletionList)(cacheData.list, (range) => (0, featureWorkers_1.getSourceRange)(docs, range), embeddedDocument, context);
+			if (completionContext?.triggerKind === 3 && lastResult?.uri.toString() === uri.toString()) {
+				currentResult = lastResult;
+				for (const cacheData of currentResult.results) {
+					if (!cacheData.list?.isIncomplete) continue;
+					const pluginIndex = context.plugins.findIndex((plugin) => plugin[1] === cacheData.plugin);
+					if (cacheData.embeddedDocumentUri) {
+						const decoded = context.decodeEmbeddedDocumentUri(cacheData.embeddedDocumentUri);
+						const sourceScript = decoded && context.language.scripts.get(decoded[0]);
+						const virtualCode = decoded && sourceScript?.generated?.embeddedCodes.get(decoded[1]);
+						if (!sourceScript || !virtualCode) continue;
+						const embeddedDocument = context.documents.get(context.encodeEmbeddedDocumentUri(sourceScript.id, virtualCode.id), virtualCode.languageId, virtualCode.snapshot);
+						for (const [sourceScript, map] of context.language.maps.forEach(virtualCode)) {
+							const docs = [
+								context.documents.get(sourceScript.id, sourceScript.languageId, sourceScript.snapshot),
+								embeddedDocument,
+								map
+							];
+							for (const mapped of (0, featureWorkers_1.getGeneratedPositions)(docs, position, (data) => (0, language_core_1.isCompletionEnabled)(data))) {
+								if (!cacheData.plugin.provideCompletionItems) continue;
+								cacheData.list = await cacheData.plugin.provideCompletionItems(embeddedDocument, mapped, completionContext, token);
+								if (!cacheData.list) continue;
+								for (const item of cacheData.list.items) if (cacheData.plugin.resolveCompletionItem) item.data = {
+									uri: uri.toString(),
+									original: {
+										additionalTextEdits: item.additionalTextEdits,
+										textEdit: item.textEdit,
+										data: item.data
+									},
+									pluginIndex,
+									embeddedDocumentUri: embeddedDocument.uri
+								};
+								else delete item.data;
+								cacheData.list = (0, transform_1.transformCompletionList)(cacheData.list, (range) => (0, featureWorkers_1.getSourceRange)(docs, range), embeddedDocument, context);
+							}
 						}
+					} else {
+						if (!cacheData.plugin.provideCompletionItems) continue;
+						const document = context.documents.get(uri, langaugeIdAndSnapshot.languageId, langaugeIdAndSnapshot.snapshot);
+						cacheData.list = await cacheData.plugin.provideCompletionItems(document, position, completionContext, token);
+						if (!cacheData.list) continue;
+						for (const item of cacheData.list.items) if (cacheData.plugin.resolveCompletionItem) item.data = {
+							uri: uri.toString(),
+							original: {
+								additionalTextEdits: item.additionalTextEdits,
+								textEdit: item.textEdit,
+								data: item.data
+							},
+							pluginIndex,
+							embeddedDocumentUri: void 0
+						};
+						else delete item.data;
 					}
-				} else {
-					if (!cacheData.plugin.provideCompletionItems) continue;
-					const document = context.documents.get(uri, langaugeIdAndSnapshot.languageId, langaugeIdAndSnapshot.snapshot);
-					cacheData.list = await cacheData.plugin.provideCompletionItems(document, position, completionContext, token);
-					if (!cacheData.list) continue;
-					for (const item of cacheData.list.items) if (cacheData.plugin.resolveCompletionItem) item.data = {
-						uri: uri.toString(),
-						original: {
-							additionalTextEdits: item.additionalTextEdits,
-							textEdit: item.textEdit,
-							data: item.data
-						},
-						pluginIndex,
-						embeddedDocumentUri: void 0
-					};
-					else delete item.data;
 				}
-			}
-			else {
-				lastResult = {
+			} else {
+				currentResult = lastResult = {
 					uri,
 					results: []
 				};
@@ -5175,7 +5446,7 @@ var require_provideCompletionItems = /* @__PURE__ */ __commonJSMin(((exports) =>
 						if (completionContext?.triggerCharacter && !plugin[0].capabilities.completionProvider?.triggerCharacters?.includes(completionContext.triggerCharacter)) continue;
 						const isAdditional = codeInfo && typeof codeInfo.completion === "object" && codeInfo.completion.isAdditional || plugin[1].isAdditionalCompletion;
 						if (mainCompletionUri && (!isAdditional || mainCompletionUri !== document.uri)) continue;
-						if (plugin[1].isAdditionalCompletion && lastResult?.results.some((data) => data.plugin === plugin[1])) continue;
+						if (plugin[1].isAdditionalCompletion && currentResult.results.some((data) => data.plugin === plugin[1])) continue;
 						let completionList = await plugin[1].provideCompletionItems(document, position, completionContext, token);
 						if (!completionList || !completionList.items.length) continue;
 						if (typeof codeInfo?.completion === "object" && codeInfo.completion.onlyImport) completionList.items = completionList.items.filter((item) => !!item.labelDetails);
@@ -5193,7 +5464,7 @@ var require_provideCompletionItems = /* @__PURE__ */ __commonJSMin(((exports) =>
 						};
 						else delete item.data;
 						if (docs) completionList = (0, transform_1.transformCompletionList)(completionList, (range) => (0, featureWorkers_1.getSourceRange)(docs, range, language_core_1.isCompletionEnabled), document, context);
-						lastResult?.results.push({
+						currentResult.results.push({
 							embeddedDocumentUri: docs ? vscode_uri_1.URI.parse(document.uri) : void 0,
 							plugin: plugin[1],
 							list: completionList
@@ -5210,7 +5481,7 @@ var require_provideCompletionItems = /* @__PURE__ */ __commonJSMin(((exports) =>
 				}
 				else await worker(context.documents.get(uri, langaugeIdAndSnapshot.languageId, langaugeIdAndSnapshot.snapshot), position);
 			}
-			return combineCompletionList(lastResult.results.map((cacheData) => cacheData.list));
+			return combineCompletionList(currentResult.results.map((cacheData) => cacheData.list));
 			function sortServices(a, b) {
 				return (b.isAdditionalCompletion ? -1 : 1) - (a.isAdditionalCompletion ? -1 : 1);
 			}
@@ -6674,7 +6945,7 @@ var require_resolveCodeAction = /* @__PURE__ */ __commonJSMin(((exports) => {
 				item = await plugin[1].resolveCodeAction(item, token);
 				item = plugin[1].transformCodeAction?.(item) ?? (item.edit ? {
 					...item,
-					edit: (0, transform_1.transformWorkspaceEdit)(item.edit, context, "codeAction", { [data.uri]: data.version })
+					edit: (0, transform_1.transformWorkspaceEdit)(item.edit, context, "codeAction")
 				} : item);
 			}
 			delete item.data;
@@ -7154,16 +7425,27 @@ var require_resolveModuleName$1 = /* @__PURE__ */ __commonJSMin(((exports) => {
 		};
 		return (moduleName, containingFile, compilerOptions, cache, redirectedReference, resolutionMode) => {
 			const result = ts.resolveModuleName(moduleName, containingFile, compilerOptions, moduleResolutionHost, cache, redirectedReference, resolutionMode);
-			if (result.resolvedModule) {
-				const sourceFileInfo = toSourceFileInfo.get(result.resolvedModule.resolvedFileName);
+			const resolvedModule = result.resolvedModule;
+			if (resolvedModule) {
+				const sourceFileInfo = toSourceFileInfo.get(resolvedModule.resolvedFileName);
 				if (sourceFileInfo) {
-					result.resolvedModule.resolvedFileName = sourceFileInfo.sourceFileName;
-					result.resolvedModule.extension = sourceFileInfo.extension;
+					resolvedModule.resolvedFileName = sourceFileInfo.sourceFileName;
+					resolvedModule.extension = sourceFileInfo.extension;
+					if (!compilerOptions.preserveSymlinks && host.realpath && resolvedModule.isExternalLibraryImport && !resolvedModule.originalPath && !ts.isExternalModuleNameRelative(moduleName)) {
+						const realPath = host.realpath(sourceFileInfo.sourceFileName).replace(/\\/g, "/");
+						if (!isSamePath(realPath, sourceFileInfo.sourceFileName)) {
+							resolvedModule.originalPath = sourceFileInfo.sourceFileName;
+							resolvedModule.resolvedFileName = realPath;
+						}
+					}
 				}
 			}
 			toSourceFileInfo.clear();
 			return result;
 		};
+		function isSamePath(a, b) {
+			return (typeof host.useCaseSensitiveFileNames === "function" ? host.useCaseSensitiveFileNames() : host.useCaseSensitiveFileNames) ? a === b : a.toLowerCase() === b.toLowerCase();
+		}
 		function fileExists(fileName) {
 			if (host.fileExists(fileName)) return (getFileSize?.(fileName) ?? host.readFile(fileName)?.length ?? 0) < 4194304;
 			return false;
@@ -7248,22 +7530,30 @@ var require_decorateLanguageServiceHost = /* @__PURE__ */ __commonJSMin(((export
 		if (pluginExtensions.length) {
 			const resolveModuleName = (0, resolveModuleName_1.createResolveModuleName)(ts, ts.sys.getFileSize, languageServiceHost, language.plugins, (fileName) => language.scripts.get(fileName));
 			const moduleResolutionCache = languageServiceHost.getModuleResolutionCache?.();
+			const hasPluginExtension = (moduleName) => pluginExtensions.some((ext) => moduleName.endsWith(ext));
 			if (resolveModuleNameLiterals) languageServiceHost.resolveModuleNameLiterals = (moduleLiterals, containingFile, redirectedReference, options, containingSourceFile, ...rest) => {
 				const disposeFixup = (0, utils_1.fixupImpliedNodeFormatForFile)(ts, pluginExtensions, containingSourceFile, moduleResolutionCache?.getPackageJsonInfoCache(), languageServiceHost, options);
 				try {
-					if (moduleLiterals.every((name) => !pluginExtensions.some((ext) => name.text.endsWith(ext)))) return resolveModuleNameLiterals(moduleLiterals, containingFile, redirectedReference, options, containingSourceFile, ...rest);
+					const hostLiterals = moduleLiterals.filter((literal) => !hasPluginExtension(literal.text));
+					const hostResults = hostLiterals.length ? resolveModuleNameLiterals(hostLiterals, containingFile, redirectedReference, options, containingSourceFile, ...rest) : [];
+					const hostResultMap = new Map(hostLiterals.map((literal, i) => [literal, hostResults[i]]));
 					return moduleLiterals.map((moduleLiteral) => {
+						const hostResult = hostResultMap.get(moduleLiteral);
+						if (hostResult?.resolvedModule) return hostResult;
 						const mode = ts.getModeForUsageLocation(containingSourceFile, moduleLiteral, options);
-						return resolveModuleName(moduleLiteral.text, containingFile, options, moduleResolutionCache, redirectedReference, mode);
+						const result = resolveModuleName(moduleLiteral.text, containingFile, options, hostResult ? void 0 : moduleResolutionCache, redirectedReference, mode);
+						return hostResult && !result.resolvedModule ? hostResult : result;
 					});
 				} finally {
 					disposeFixup?.();
 				}
 			};
 			if (resolveModuleNames) languageServiceHost.resolveModuleNames = (moduleNames, containingFile, reusedNames, redirectedReference, options, containingSourceFile) => {
-				if (moduleNames.every((name) => !pluginExtensions.some((ext) => name.endsWith(ext)))) return resolveModuleNames(moduleNames, containingFile, reusedNames, redirectedReference, options, containingSourceFile);
+				const hostNames = moduleNames.filter((name) => !hasPluginExtension(name));
+				const hostResults = hostNames.length ? resolveModuleNames(hostNames, containingFile, reusedNames, redirectedReference, options, containingSourceFile) : [];
+				const hostResultMap = new Map(hostNames.map((name, i) => [name, hostResults[i]]));
 				return moduleNames.map((moduleName) => {
-					return resolveModuleName(moduleName, containingFile, options, moduleResolutionCache, redirectedReference).resolvedModule;
+					return hostResultMap.get(moduleName) ?? resolveModuleName(moduleName, containingFile, options, hostResultMap.has(moduleName) ? void 0 : moduleResolutionCache, redirectedReference).resolvedModule;
 				});
 			};
 		}
@@ -7411,18 +7701,19 @@ var require_transform$1 = /* @__PURE__ */ __commonJSMin(((exports) => {
 			sourceFile.text = sourceScript.snapshot.getText(0, sourceScript.snapshot.getLength()) + sourceFile.text.substring(sourceScript.snapshot.getLength());
 		}
 	}
-	function transformFileTextChanges(language, changes, fallbackToAnyMatch, filter) {
+	function transformFileTextChanges(language, changes, fallbackToAnyMatch, filter, allOrNothing = false) {
 		const changesPerFile = {};
 		const newFiles = /* @__PURE__ */ new Set();
 		for (const fileChanges of changes) {
 			const [_, source] = (0, utils_1.getServiceScript)(language, fileChanges.fileName);
-			if (source) fileChanges.textChanges.forEach((c) => {
+			if (source) for (const c of fileChanges.textChanges) {
 				const { fileName, textSpan } = transformSpan(language, fileChanges.fileName, c.span, fallbackToAnyMatch, filter) ?? {};
 				if (fileName && textSpan) (changesPerFile[fileName] ?? (changesPerFile[fileName] = [])).push({
 					...c,
 					span: textSpan
 				});
-			});
+				else if (allOrNothing) return;
+			}
 			else {
 				const list = changesPerFile[fileChanges.fileName] ?? (changesPerFile[fileChanges.fileName] = []);
 				fileChanges.textChanges.forEach((c) => {
@@ -7591,6 +7882,7 @@ var require_decorateProgram = /* @__PURE__ */ __commonJSMin(((exports) => {
 var require_proxyCreateProgram = /* @__PURE__ */ __commonJSMin(((exports) => {
 	Object.defineProperty(exports, "__esModule", { value: true });
 	exports.proxyCreateProgram = proxyCreateProgram;
+	exports.releaseRemovedProjects = releaseRemovedProjects;
 	var language_core_1 = require_language_core$1();
 	var common_1 = require_common$3();
 	var resolveModuleName_1 = require_resolveModuleName$1();
@@ -7608,23 +7900,24 @@ var require_proxyCreateProgram = /* @__PURE__ */ __commonJSMin(((exports) => {
 		for (const key of keysA) if (a[key] !== b[key]) return false;
 		return true;
 	};
+	var projectStateReleasers = /* @__PURE__ */ new WeakMap();
 	function proxyCreateProgram(ts, original, create) {
 		const sourceFileSnapshots = new language_core_1.FileMap(ts.sys.useCaseSensitiveFileNames);
 		const parsedSourceFiles = /* @__PURE__ */ new WeakMap();
-		let lastOptions;
-		let languagePlugins;
-		let language;
-		let moduleResolutionCache;
-		return new Proxy(original, { apply: (target, thisArg, args) => {
+		const states = /* @__PURE__ */ new Map();
+		let fileSetVersion = 0;
+		const proxy = new Proxy(original, { apply: (target, thisArg, args) => {
 			const options = args[0];
 			assert(!!options.host, "!!options.host");
-			if (!lastOptions || !languagePlugins || !language || !arrayEqual(options.rootNames, lastOptions.rootNames) || !objectEqual(options.options, lastOptions.options)) {
-				moduleResolutionCache = ts.createModuleResolutionCache(options.host.getCurrentDirectory(), options.host.getCanonicalFileName, options.options);
-				lastOptions = options;
+			const configFilePath = options.options.configFilePath;
+			const stateKey = typeof configFilePath === "string" ? options.host.getCanonicalFileName(configFilePath) : void 0;
+			let state = states.get(stateKey);
+			if (!state || !arrayEqual(options.rootNames, state.options.rootNames) || !objectEqual(options.options, state.options.options)) {
+				if (state) fileSetVersion++;
+				const moduleResolutionCache = createModuleResolutionCache(options.host, options.options);
 				const created = create(ts, options);
-				if (Array.isArray(created)) languagePlugins = created;
-				else languagePlugins = created.languagePlugins;
-				language = (0, language_core_1.createLanguage)([...languagePlugins, { getLanguageId: common_1.resolveFileLanguageId }], new language_core_1.FileMap(ts.sys.useCaseSensitiveFileNames), (fileName, includeFsFiles) => {
+				const languagePlugins = Array.isArray(created) ? created : created.languagePlugins;
+				const language = (0, language_core_1.createLanguage)([...languagePlugins, { getLanguageId: common_1.resolveFileLanguageId }], new language_core_1.FileMap(ts.sys.useCaseSensitiveFileNames), (fileName, includeFsFiles) => {
 					if (includeFsFiles && !sourceFileSnapshots.has(fileName)) {
 						const sourceFileText = originalHost.readFile(fileName);
 						if (sourceFileText !== void 0) sourceFileSnapshots.set(fileName, [void 0, {
@@ -7643,10 +7936,25 @@ var require_proxyCreateProgram = /* @__PURE__ */ __commonJSMin(((exports) => {
 					else language.scripts.delete(fileName);
 				});
 				if ("setup" in created) created.setup?.(language);
+				state = {
+					options,
+					languagePlugins,
+					language,
+					moduleResolutionCache,
+					fileSetVersion
+				};
+				states.set(stateKey, state);
+			} else if (state.fileSetVersion !== fileSetVersion) {
+				state.moduleResolutionCache = createModuleResolutionCache(options.host, options.options);
+				state.fileSetVersion = fileSetVersion;
 			}
+			const { languagePlugins, language, moduleResolutionCache } = state;
 			const originalHost = options.host;
 			const pluginExtensions = languagePlugins.map((plugin) => plugin.typescript?.extraFileExtensions.map(({ extension }) => `.${extension}`) ?? []).flat();
-			options.host = { ...originalHost };
+			options.host = {
+				...originalHost,
+				getSourceFileByPath: void 0
+			};
 			options.host.getSourceFile = (fileName, languageVersionOrOptions, onError, shouldCreateNewSourceFile) => {
 				const originalSourceFile = originalHost.getSourceFile(fileName, languageVersionOrOptions, onError, shouldCreateNewSourceFile);
 				if (!sourceFileSnapshots.has(fileName) || sourceFileSnapshots.get(fileName)?.[0] !== originalSourceFile) {
@@ -7688,10 +7996,11 @@ var require_proxyCreateProgram = /* @__PURE__ */ __commonJSMin(((exports) => {
 				const resolveModuleName = (0, resolveModuleName_1.createResolveModuleName)(ts, ts.sys.getFileSize, originalHost, language.plugins, (fileName) => language.scripts.get(fileName));
 				const resolveModuleNameLiterals = originalHost.resolveModuleNameLiterals;
 				const resolveModuleNames = originalHost.resolveModuleNames;
+				const hasResolveHiddenExtensions = languagePlugins.some((plugin) => plugin.typescript?.resolveHiddenExtensions);
 				options.host.resolveModuleNameLiterals = (moduleLiterals, containingFile, redirectedReference, compilerOptions, containingSourceFile, ...rest) => {
 					const disposeFixup = (0, utils_1.fixupImpliedNodeFormatForFile)(ts, pluginExtensions, containingSourceFile, moduleResolutionCache.getPackageJsonInfoCache(), originalHost, compilerOptions);
 					try {
-						if (resolveModuleNameLiterals && moduleLiterals.every((name) => !pluginExtensions.some((ext) => name.text.endsWith(ext)))) return resolveModuleNameLiterals(moduleLiterals, containingFile, redirectedReference, compilerOptions, containingSourceFile, ...rest);
+						if (resolveModuleNameLiterals && !hasResolveHiddenExtensions && moduleLiterals.every((name) => !pluginExtensions.some((ext) => name.text.endsWith(ext)))) return resolveModuleNameLiterals(moduleLiterals, containingFile, redirectedReference, compilerOptions, containingSourceFile, ...rest);
 						return moduleLiterals.map((moduleLiteral) => {
 							const mode = ts.getModeForUsageLocation(containingSourceFile, moduleLiteral, compilerOptions);
 							return resolveModuleName(moduleLiteral.text, containingFile, compilerOptions, moduleResolutionCache, redirectedReference, mode);
@@ -7701,7 +8010,7 @@ var require_proxyCreateProgram = /* @__PURE__ */ __commonJSMin(((exports) => {
 					}
 				};
 				options.host.resolveModuleNames = (moduleNames, containingFile, reusedNames, redirectedReference, compilerOptions, containingSourceFile) => {
-					if (resolveModuleNames && moduleNames.every((name) => !pluginExtensions.some((ext) => name.endsWith(ext)))) return resolveModuleNames(moduleNames, containingFile, reusedNames, redirectedReference, compilerOptions, containingSourceFile);
+					if (resolveModuleNames && !hasResolveHiddenExtensions && moduleNames.every((name) => !pluginExtensions.some((ext) => name.endsWith(ext)))) return resolveModuleNames(moduleNames, containingFile, reusedNames, redirectedReference, compilerOptions, containingSourceFile);
 					return moduleNames.map((moduleName) => {
 						return resolveModuleName(moduleName, containingFile, compilerOptions, moduleResolutionCache, redirectedReference, containingSourceFile?.impliedNodeFormat).resolvedModule;
 					});
@@ -7711,6 +8020,20 @@ var require_proxyCreateProgram = /* @__PURE__ */ __commonJSMin(((exports) => {
 			(0, decorateProgram_1.decorateProgram)(language, program);
 			return program;
 		} });
+		function createModuleResolutionCache(host, options) {
+			return ts.createModuleResolutionCache(host.getCurrentDirectory(), host.getCanonicalFileName, options);
+		}
+		projectStateReleasers.set(proxy, (isActiveProject) => {
+			for (const key of states.keys()) if (key !== void 0 && !isActiveProject(key)) states.delete(key);
+		});
+		return proxy;
+	}
+	/**
+	* Drops the state kept for projects that the solution builder no longer builds.
+	* `isActiveProject` receives the canonical path of a project's config file.
+	*/
+	function releaseRemovedProjects(createProgram, isActiveProject) {
+		projectStateReleasers.get(createProgram)?.(isActiveProject);
 	}
 	function assert(condition, message) {
 		if (!condition) {
@@ -7948,7 +8271,7 @@ var require_proxyLanguageService = /* @__PURE__ */ __commonJSMin(((exports) => {
 	function organizeImports(language, organizeImports) {
 		return (args, formatOptions, preferences) => {
 			const unresolved = organizeImports(args, formatOptions, preferences);
-			return (0, transform_1.transformFileTextChanges)(language, unresolved, false, language_core_1.isCodeActionsEnabled);
+			return (0, transform_1.transformFileTextChanges)(language, unresolved, false, language_core_1.isCodeActionsEnabled, true) ?? [];
 		};
 	}
 	function getQuickInfoAtPosition(language, getQuickInfoAtPosition) {
@@ -8085,15 +8408,18 @@ var require_proxyLanguageService = /* @__PURE__ */ __commonJSMin(((exports) => {
 				}, refactorName, actionName, preferences, interactiveRefactorArguments);
 			} else edits = getEditsForRefactor(fileName, formatOptions, positionOrRange, refactorName, actionName, preferences, interactiveRefactorArguments);
 			if (edits) {
-				edits.edits = (0, transform_1.transformFileTextChanges)(language, edits.edits, false, language_core_1.isCodeActionsEnabled);
-				return edits;
+				const transformed = (0, transform_1.transformFileTextChanges)(language, edits.edits, false, language_core_1.isCodeActionsEnabled, true);
+				if (transformed) {
+					edits.edits = transformed;
+					return edits;
+				}
 			}
 		};
 	}
 	function getCombinedCodeFix(language, getCombinedCodeFix) {
 		return (...args) => {
 			const codeActions = getCombinedCodeFix(...args);
-			codeActions.changes = (0, transform_1.transformFileTextChanges)(language, codeActions.changes, false, language_core_1.isCodeActionsEnabled);
+			codeActions.changes = (0, transform_1.transformFileTextChanges)(language, codeActions.changes, false, language_core_1.isCodeActionsEnabled, true) ?? [];
 			return codeActions;
 		};
 	}
@@ -8135,11 +8461,14 @@ var require_proxyLanguageService = /* @__PURE__ */ __commonJSMin(((exports) => {
 				const generateRange = (0, transform_1.toGeneratedRange)(language, serviceScript, sourceScript, start, end, language_core_1.isCodeActionsEnabled);
 				if (generateRange !== void 0) fixes = getCodeFixesAtPosition(targetScript.id, generateRange[0], generateRange[1], errorCodes, formatOptions, preferences);
 			} else fixes = getCodeFixesAtPosition(fileName, start, end, errorCodes, formatOptions, preferences);
-			fixes = fixes.map((fix) => {
-				fix.changes = (0, transform_1.transformFileTextChanges)(language, fix.changes, false, language_core_1.isCodeActionsEnabled);
-				return fix;
+			return fixes.filter((fix) => {
+				const changes = (0, transform_1.transformFileTextChanges)(language, fix.changes, false, language_core_1.isCodeActionsEnabled, true);
+				if (changes) {
+					fix.changes = changes;
+					return true;
+				}
+				return false;
 			});
-			return fixes;
 		};
 	}
 	function getEncodedSemanticClassifications(language, getEncodedSemanticClassifications) {
@@ -10719,8 +11048,6 @@ var require_codeFeatures = /* @__PURE__ */ __commonJSMin(((exports) => {
 		/** @internal */
 		format: { format: true },
 		/** @internal */
-		doNotReportTs2339AndTs2551: { verification: { shouldReport: (_source, code) => String(code) !== "2339" && String(code) !== "2551" } },
-		/** @internal */
 		doNotReportTs2353AndTs2561: { verification: { shouldReport: (_source, code) => String(code) !== "2353" && String(code) !== "2561" } },
 		/** @internal */
 		doNotReportTs6133: { verification: { shouldReport: (_source, code) => String(code) !== "6133" } }
@@ -10756,6 +11083,7 @@ var require_names = /* @__PURE__ */ __commonJSMin(((exports) => {
 		setup: "",
 		slots: "",
 		src: "",
+		template: "",
 		Emit: "",
 		EmitProps: "",
 		GlobalComponents: "",
@@ -10778,6 +11106,7 @@ var require_names = /* @__PURE__ */ __commonJSMin(((exports) => {
 		asFunctionalElement1: "",
 		asFunctionalSlot: "",
 		directiveBindingRestFields: "",
+		directiveHookArgsRest: "",
 		functionalComponentArgsRest: "",
 		nonNull: "",
 		omit: "",
@@ -10789,9 +11118,12 @@ var require_names = /* @__PURE__ */ __commonJSMin(((exports) => {
 		ConstructorOverloads: "",
 		Elements: "",
 		EmitsToProps: "",
+		EventArgs: "",
 		ExtractComponentContext: "",
 		ExtractComponentProps: "",
 		FunctionalComponent: "",
+		HandlerArgs: "",
+		HandlerParameters: "",
 		IsAny: "",
 		IsFunction: "",
 		NormalizeEmits: "",
@@ -16328,6 +16660,37 @@ var init_compiler_dom_esm_bundler = __esmMin((() => {
 		show: transformShow
 	};
 }));
+// node_modules/@vue/language-core/lib/codegen/utils/camelized.js
+var require_camelized = /* @__PURE__ */ __commonJSMin(((exports) => {
+	Object.defineProperty(exports, "__esModule", { value: true });
+	exports.generateCamelized = generateCamelized;
+	var shared_1 = (init_shared_esm_bundler(), __toCommonJS$1(shared_esm_bundler_exports));
+	function* generateCamelized(code, source, offset, features) {
+		const parts = code.split("-");
+		if (!features.__combineToken) features = {
+			...features,
+			__combineToken: Symbol()
+		};
+		for (let i = 0; i < parts.length; i++) {
+			const part = parts[i];
+			if (part !== "") {
+				if (i === 0) yield [
+					part,
+					source,
+					offset,
+					features
+				];
+				else yield [
+					(0, shared_1.capitalize)(part),
+					source,
+					offset,
+					features
+				];
+			}
+			offset += part.length + 1;
+		}
+	}
+}));
 // node_modules/@vue/language-core/lib/codegen/template/context.js
 var require_context$1 = /* @__PURE__ */ __commonJSMin(((exports, module, this$42) => {
 	var __createBinding = this$42 && this$42.__createBinding || (Object.create ? (function(o, m, k, k2) {
@@ -16376,8 +16739,10 @@ var require_context$1 = /* @__PURE__ */ __commonJSMin(((exports, module, this$42
 	var language_core_1 = require_language_core$1();
 	var CompilerDOM = __importStar((init_compiler_dom_esm_bundler(), __toCommonJS$1(compiler_dom_esm_bundler_exports)));
 	var codeFeatures_1 = require_codeFeatures();
+	var names_1 = require_names();
 	var utils_1 = require_utils$5();
 	var boundary_1 = require_boundary();
+	var camelized_1 = require_camelized();
 	var directiveCommentRE = /^<!--\s*@vue-(?<name>[-\w]+)\b(?<content>[\s\S]*)-->$/;
 	var reservedWords = /* @__PURE__ */ new Set([
 		"arguments",
@@ -16518,16 +16883,17 @@ var require_context$1 = /* @__PURE__ */ __commonJSMin(((exports, module, this$42
 			scopes.push(scope);
 			return scope;
 		}
+		/** Per name and source, the offsets of the accesses and their source text, which may be the hyphenated name. */
 		const contextAccesses = /* @__PURE__ */ new Map();
 		const dotValueAccesses = /* @__PURE__ */ new Set();
 		const accessLog = [];
-		function accessVariable(source, name, offset, dotValue = false) {
+		function accessVariable(source, name, offset, dotValue = false, sourceName = name) {
 			accessLog.push(name);
 			let map = contextAccesses.get(name);
 			if (!map) contextAccesses.set(name, map = /* @__PURE__ */ new Map());
 			let arr = map.get(source);
-			if (!arr) map.set(source, arr = /* @__PURE__ */ new Set());
-			if (offset !== void 0) arr.add(offset);
+			if (!arr) map.set(source, arr = /* @__PURE__ */ new Map());
+			if (offset !== void 0) arr.set(offset, sourceName);
 			if (dotValue) dotValueAccesses.add(name);
 		}
 		function* generateAutoImport() {
@@ -16536,13 +16902,8 @@ var require_context$1 = /* @__PURE__ */ __commonJSMin(((exports, module, this$42
 			yield `// @ts-ignore${utils_1.newLine}`;
 			yield `[`;
 			for (const [varName, map] of all) for (const [source, offsets] of map) {
-				if (!reservedWords.has(varName)) for (const offset of offsets) {
-					yield [
-						varName,
-						source,
-						offset,
-						codeFeatures_1.codeFeatures.importCompletionOnly
-					];
+				if (!reservedWords.has(varName)) for (const [offset, sourceName] of offsets) {
+					yield* (0, camelized_1.generateCamelized)(sourceName, source, offset, codeFeatures_1.codeFeatures.importCompletionOnly);
 					yield `,`;
 				}
 				offsets.clear();
@@ -16562,14 +16923,15 @@ var require_context$1 = /* @__PURE__ */ __commonJSMin(((exports, module, this$42
 			if (name === void 0) hoistVars.set(originalVar, name = `__VLS_${variableId++}`);
 			return name;
 		}
-		function* generateHoistVariables() {
+		function* generateHoistVariables(scriptLang) {
 			if (hoistVars.size) {
+				const isTs = (0, utils_1.isTsLang)(scriptLang);
 				yield `var `;
 				let first = true;
 				for (const [originalVar, hoistVar] of hoistVars) {
 					if (!first) yield `, `;
 					first = false;
-					yield `${hoistVar} = ${originalVar}!`;
+					yield isTs ? `${hoistVar} = ${originalVar}!` : `${hoistVar} = ${names_1.names.nonNull}(${originalVar})`;
 				}
 				yield utils_1.endOfLine;
 			}
@@ -16616,37 +16978,6 @@ var require_context$1 = /* @__PURE__ */ __commonJSMin(((exports, module, this$42
 		};
 	}
 }));
-// node_modules/@vue/language-core/lib/codegen/utils/camelized.js
-var require_camelized = /* @__PURE__ */ __commonJSMin(((exports) => {
-	Object.defineProperty(exports, "__esModule", { value: true });
-	exports.generateCamelized = generateCamelized;
-	var shared_1 = (init_shared_esm_bundler(), __toCommonJS$1(shared_esm_bundler_exports));
-	function* generateCamelized(code, source, offset, features) {
-		const parts = code.split("-");
-		if (!features.__combineToken) features = {
-			...features,
-			__combineToken: Symbol()
-		};
-		for (let i = 0; i < parts.length; i++) {
-			const part = parts[i];
-			if (part !== "") {
-				if (i === 0) yield [
-					part,
-					source,
-					offset,
-					features
-				];
-				else yield [
-					(0, shared_1.capitalize)(part),
-					source,
-					offset,
-					features
-				];
-			}
-			offset += part.length + 1;
-		}
-	}
-}));
 // node_modules/@vue/language-core/lib/codegen/utils/stringLiteralKey.js
 var require_stringLiteralKey = /* @__PURE__ */ __commonJSMin(((exports) => {
 	Object.defineProperty(exports, "__esModule", { value: true });
@@ -17046,13 +17377,82 @@ var require_interpolation = /* @__PURE__ */ __commonJSMin(((exports) => {
 	var bindingReferences_1 = require_bindingReferences();
 	function* generateInterpolation(options, ctx, block, features, code, start, prefix = "", suffix = "", inNarrowing = false) {
 		if (prefix) yield prefix;
+		const bodies = options.reassertBindings?.size && !utils_1.identifierRE.test(code) ? collectFunctionBodies(options.typescript, (0, utils_1.getTypeScriptAST)(options.typescript, block, prefix + code + suffix)).map((body) => ({
+			...body,
+			start: body.start - prefix.length,
+			end: body.end - prefix.length
+		})) : [];
+		const marks = [...bodies.map((body) => ({
+			offset: body.end,
+			body,
+			enter: false
+		})).reverse(), ...bodies.map((body) => ({
+			offset: body.start,
+			body,
+			enter: true
+		}))].sort((a, b) => a.offset - b.offset);
+		const frames = [];
+		let markIndex = 0;
+		function* write(codes) {
+			if (frames.length) frames[frames.length - 1].codes.push(...codes);
+			else yield* codes;
+		}
+		function* generateCodeUntil(from, end) {
+			while (markIndex < marks.length && marks[markIndex].offset <= end) {
+				const { offset, body, enter } = marks[markIndex++];
+				yield* write(generateNonIdentifierCode(code.slice(from, offset), block.name, start + from, features, from > 0));
+				from = offset;
+				if (enter) frames.push({
+					body,
+					codes: [],
+					reasserts: /* @__PURE__ */ new Set()
+				});
+				else yield* write(generateFunctionBody(frames.pop()));
+			}
+			yield* write(generateNonIdentifierCode(code.slice(from, end), block.name, start + from, features, from > 0));
+		}
+		function* generateFunctionBody({ body, codes, reasserts }) {
+			if (!reasserts.size) {
+				yield* codes;
+				return;
+			}
+			if (body.kind === "block") {
+				yield utils_1.newLine;
+				yield* generateReasserts(reasserts);
+				yield* codes;
+				return;
+			}
+			const verification = { verification: features.verification };
+			if (body.kind === "parameter") {
+				const boundary = yield* boundary_1.Boundary.start(block.name, start + body.start, start + body.end, verification);
+				yield `(() => {${utils_1.newLine}`;
+				yield* generateReasserts(reasserts);
+				yield `return (`;
+				yield* codes;
+				yield `)${utils_1.endOfLine}})()`;
+				yield boundary.end();
+			} else {
+				yield `{${utils_1.newLine}`;
+				yield* generateReasserts(reasserts);
+				const boundary = yield* boundary_1.Boundary.start(block.name, start + body.start, start + body.end, verification);
+				yield `return`;
+				yield boundary.end();
+				yield ` (`;
+				yield* codes;
+				yield `)${utils_1.endOfLine}}`;
+			}
+		}
+		function* generateReasserts(reasserts) {
+			for (const name of reasserts) yield `${names_1.names.withDotValue}(${name}, ${(0, utils_1.getRefBrandArgument)(options.vueCompilerOptions, options.scriptLang)})${utils_1.endOfLine}`;
+		}
 		let prevEnd = 0;
 		for (const [name, offset, isShorthand, isNarrowing, inTypeQuery, isNewOperand] of forEachIdentifiers(options.typescript, ctx, block, code, prefix, suffix, inNarrowing)) {
 			if (isShorthand) {
-				yield* generateNonIdentifierCode(code.slice(prevEnd, offset + name.length), block.name, start + prevEnd, features, prevEnd > 0);
-				yield `: `;
-			} else if (prevEnd < offset) yield* generateNonIdentifierCode(code.slice(prevEnd, offset), block.name, start + prevEnd, features, prevEnd > 0);
-			yield* generateIdentifier(options, ctx, [[
+				yield* generateCodeUntil(prevEnd, offset + name.length);
+				yield* write([`: `]);
+			} else yield* generateCodeUntil(prevEnd, offset);
+			if (frames.length && options.reassertBindings.has(name) && !options.setupConsts.has(name) && !options.setupRefs.has(name) && !(0, bindingReferences_1.shouldIdentifierSkipped)(ctx, name)) frames[frames.length - 1].reasserts.add(name);
+			yield* write(generateIdentifier(options, ctx, [[
 				name,
 				block.name,
 				start + offset,
@@ -17060,12 +17460,66 @@ var require_interpolation = /* @__PURE__ */ __commonJSMin(((exports) => {
 					...features,
 					__shorthandExpression: "js"
 				} : features
-			]], name, block.name, start + offset, start + offset + name.length, isNarrowing, inTypeQuery, isNewOperand);
+			]], name, block.name, start + offset, start + offset + name.length, isNarrowing, inTypeQuery, isNewOperand));
 			prevEnd = offset + name.length;
 		}
-		if (prevEnd < code.length) yield* generateNonIdentifierCode(code.slice(prevEnd), block.name, start + prevEnd, features, prevEnd > 0);
+		yield* generateCodeUntil(prevEnd, code.length);
 		if (suffix) yield suffix;
 	}
+	function collectFunctionBodies(ts, ast) {
+		const bodies = [];
+		const visitBinding = (name) => {
+			if (ts.isIdentifier(name)) return;
+			for (const element of name.elements) {
+				if (ts.isOmittedExpression(element)) continue;
+				if (element.propertyName && ts.isComputedPropertyName(element.propertyName)) pushParameterExpression(element.propertyName.expression);
+				visitBinding(element.name);
+				if (element.initializer) pushParameterExpression(element.initializer);
+			}
+		};
+		const pushParameterExpression = (node) => {
+			bodies.push({
+				...(0, shared_1.getStartEnd)(ts, node, ast),
+				kind: "parameter"
+			});
+			visit(node);
+		};
+		const visit = (node) => {
+			if ((ts.isArrowFunction(node) || ts.isFunctionExpression(node) || ts.isFunctionDeclaration(node) || ts.isMethodDeclaration(node) || ts.isGetAccessorDeclaration(node) || ts.isSetAccessorDeclaration(node) || ts.isConstructorDeclaration(node) || ts.isClassStaticBlockDeclaration(node)) && node.body) {
+				if (!ts.isClassStaticBlockDeclaration(node)) {
+					for (const modifier of node.modifiers ?? []) visit(modifier);
+					if (node.name) visit(node.name);
+					for (const typeParameter of node.typeParameters ?? []) visit(typeParameter);
+					for (const parameter of node.parameters) {
+						for (const modifier of parameter.modifiers ?? []) visit(modifier);
+						visitBinding(parameter.name);
+						if (parameter.type) visit(parameter.type);
+						if (parameter.initializer) pushParameterExpression(parameter.initializer);
+					}
+					if (node.type) visit(node.type);
+				}
+				const { start, end } = (0, shared_1.getStartEnd)(ts, node.body, ast);
+				if (ts.isBlock(node.body)) {
+					const statements = node.body.statements;
+					const prologue = statements.findIndex((statement) => !ts.isExpressionStatement(statement) || !ts.isStringLiteral(statement.expression));
+					if (prologue !== -1) bodies.push({
+						start: prologue ? statements[prologue - 1].end : start + 1,
+						end: end - 1,
+						kind: "block"
+					});
+				} else bodies.push({
+					start,
+					end,
+					kind: "expression"
+				});
+				visit(node.body);
+				return;
+			}
+			ts.forEachChild(node, visit);
+		};
+		ts.forEachChild(ast, visit);
+		return bodies;
+	}
 	/**
 	* Yield a code chunk, cutting the boundary character off as verification-only.
 	*
@@ -17701,8 +18155,11 @@ var require_utils$4 = /* @__PURE__ */ __commonJSMin(((exports) => {
 		const bindings = /* @__PURE__ */ new Map();
 		ts.forEachChild(ast, (node) => {
 			if (ts.isVariableStatement(node)) {
-				const flags = node.declarationList.flags & ts.NodeFlags.Const ? 0 : 1;
-				for (const decl of node.declarationList.declarations) for (const { start, end } of (0, collectBindings_1.collectBindingRanges)(ts, decl.name, ast)) bindings.set(ast.text.slice(start, end), flags);
+				const isConst = !!(node.declarationList.flags & ts.NodeFlags.Const);
+				for (const decl of node.declarationList.declarations) {
+					const flags = isConst ? 0 : 1;
+					for (const { start, end } of (0, collectBindings_1.collectBindingRanges)(ts, decl.name, ast)) bindings.set(ast.text.slice(start, end), flags);
+				}
 			} else if (ts.isFunctionDeclaration(node)) {
 				if (node.name && ts.isIdentifier(node.name)) bindings.set(_getNodeText(node.name), 2);
 			} else if (ts.isClassDeclaration(node)) {
@@ -17795,6 +18252,7 @@ var require_elementEvents = /* @__PURE__ */ __commonJSMin(((exports, module, thi
 	Object.defineProperty(exports, "__esModule", { value: true });
 	exports.generateElementEvents = generateElementEvents;
 	exports.generateEventArg = generateEventArg;
+	exports.getEventArgName = getEventArgName;
 	exports.generateEventExpression = generateEventExpression;
 	exports.generateModelEventExpression = generateModelEventExpression;
 	exports.isCompoundExpression = isCompoundExpression;
@@ -17854,18 +18312,18 @@ var require_elementEvents = /* @__PURE__ */ __commonJSMin(((exports, module, thi
 			if ((0, utils_2.isTsLang)(options.scriptLang)) yield `const ${eventVar}: ${eventType} = {${utils_2.newLine}`;
 			else yield `/** @type {${eventType}} */${utils_2.newLine}const ${eventVar} = {${utils_2.newLine}`;
 			for (const { prop, source, offset } of items) {
+				const argsType = `${names_1.names.EventArgs}<${eventType}, '${propName}'>`;
 				if (prop.name === "on") {
 					yield `/** @type {typeof ${emitsVar}.`;
 					yield* generateEventArg(options, source, offset, emitPrefix.slice(0, -1), codeFeatures_1.codeFeatures.navigation);
 					yield `} */${utils_2.newLine}`;
-				}
-				if (prop.name === "on") {
+					const emitArgName = getEventArgName(source, emitPrefix.slice(0, -1));
 					yield* generateEventArg(options, source, offset, propPrefix.slice(0, -1));
 					yield `: `;
-					yield* generateEventExpression(options, ctx, prop);
+					yield* generateEventExpression(options, ctx, prop, (0, utils_2.isTsLang)(options.scriptLang) ? argsType : utils_2.identifierRE.test(emitArgName) ? `${names_1.names.EventArgs}<typeof ${emitsVar}, '${emitArgName}'>` : `any[]`);
 				} else {
 					yield `'${propName}': `;
-					yield* generateModelEventExpression(options, ctx, prop);
+					yield* generateModelEventExpression(options, ctx, prop, argsType);
 				}
 				yield `,${utils_2.newLine}`;
 			}
@@ -17892,7 +18350,15 @@ var require_elementEvents = /* @__PURE__ */ __commonJSMin(((exports, module, thi
 			yield boundary.end();
 		}
 	}
-	function* generateEventExpression(options, ctx, prop) {
+	function getEventArgName(name, directive = "on") {
+		if (directive.length) name = (0, shared_1.capitalize)(name);
+		return directive + name.split("-").map((part, i) => i ? (0, shared_1.capitalize)(part) : part).join("");
+	}
+	function* generateEventParameter(options, argsType) {
+		if ((0, utils_2.isTsLang)(options.scriptLang)) yield `(...[$event]: ${argsType}) => {${utils_2.newLine}`;
+		else yield `(/** @type {${argsType}} */ ...[$event]) => {${utils_2.newLine}`;
+	}
+	function* generateEventExpression(options, ctx, prop, argsType) {
 		if (prop.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
 			const ast = (0, utils_2.getTypeScriptAST)(options.typescript, options.template, prop.exp.content);
 			const isCompound = isCompoundExpression(options.typescript, ast);
@@ -17901,10 +18367,8 @@ var require_elementEvents = /* @__PURE__ */ __commonJSMin(((exports, module, thi
 				const scope = ctx.scope();
 				scope.declare("$event");
 				const accessMark = ctx.accessLog.length;
-				const codes = [];
-				for (const code of interpolation) codes.push(code);
-				yield `// @ts-ignore${utils_2.newLine}`;
-				yield `(...[$event]) => {${utils_2.newLine}`;
+				const codes = [...interpolation];
+				yield* generateEventParameter(options, argsType);
 				yield `void $event${utils_2.endOfLine}`;
 				yield* generateReasserts(options, ctx, accessMark);
 				yield* ctx.generateConditionGuards();
@@ -17931,15 +18395,18 @@ var require_elementEvents = /* @__PURE__ */ __commonJSMin(((exports, module, thi
 			} else yield* interpolation;
 		} else yield `() => {}`;
 	}
-	function* generateModelEventExpression(options, ctx, prop) {
+	function* generateModelEventExpression(options, ctx, prop, argsType) {
 		if (prop.exp?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) {
 			const accessMark = ctx.accessLog.length;
 			const codes = [...(0, interpolation_1.generateInterpolation)(options, ctx, options.template, codeFeatures_1.codeFeatures.verification, prop.exp.content, prop.exp.loc.start.offset, void 0, void 0, true)];
-			yield `// @ts-ignore${utils_2.newLine}`;
-			yield `(...[$event]) => {${utils_2.newLine}`;
+			yield* generateEventParameter(options, argsType);
 			yield* generateReasserts(options, ctx, accessMark);
 			yield* ctx.generateConditionGuards();
+			const boundary = yield* boundary_1.Boundary.start("template", prop.exp.loc.start.offset, prop.exp.loc.end.offset, codeFeatures_1.codeFeatures.verification);
+			yield `(`;
 			yield* codes;
+			yield `)`;
+			yield boundary.end();
 			yield ` = $event${utils_2.endOfLine}`;
 			yield `}`;
 		} else yield `() => {}`;
@@ -18032,7 +18499,7 @@ var require_elementProps = /* @__PURE__ */ __commonJSMin(((exports, module, this
 	var elementEvents_1 = require_elementEvents();
 	var interpolation_1 = require_interpolation();
 	var objectProperty_1 = require_objectProperty();
-	function* generateElementProps(options, ctx, node, props, checkUnknownProps, failedPropExps) {
+	function* generateElementProps(options, ctx, node, props, checkUnknownProps, failedPropExps, attrsType) {
 		const isComponent = node.tagType === CompilerDOM.ElementTypes.COMPONENT;
 		for (const prop of props) if (prop.type === CompilerDOM.NodeTypes.DIRECTIVE && prop.name === "on") {
 			if (prop.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION && !prop.arg.loc.source.startsWith("[") && !prop.arg.loc.source.endsWith("]")) {
@@ -18040,7 +18507,7 @@ var require_elementProps = /* @__PURE__ */ __commonJSMin(((exports, module, this
 					yield `...{ `;
 					yield* (0, elementEvents_1.generateEventArg)(options, prop.arg.loc.source, prop.arg.loc.start.offset);
 					yield `: `;
-					yield* (0, elementEvents_1.generateEventExpression)(options, ctx, prop);
+					yield* (0, elementEvents_1.generateEventExpression)(options, ctx, prop, attrsType ? `${names_1.names.EventArgs}<${attrsType}, '${(0, elementEvents_1.getEventArgName)(prop.arg.loc.source)}'>` : `any[]`);
 					yield `},`;
 				} else yield `...{ '${(0, shared_1.camelize)("on-" + prop.arg.loc.source)}': ${(0, utils_1.asType)("any", options.scriptLang)} },`;
 				yield utils_1.newLine;
@@ -18257,25 +18724,30 @@ var require_elementDirectives = /* @__PURE__ */ __commonJSMin(((exports, module,
 	function* generateElementDirectives(options, ctx, node) {
 		for (const prop of node.props) {
 			if (prop.type !== CompilerDOM.NodeTypes.DIRECTIVE || prop.name === "slot" || prop.name === "on" || prop.name === "model" || prop.name === "bind") continue;
-			const boundary = yield* boundary_1.Boundary.start("template", prop.loc.start.offset, prop.loc.end.offset, codeFeatures_1.codeFeatures.verification);
 			if (options.isVapor && !(0, shared_1.isBuiltInDirective)(prop.name)) {
+				const boundary = yield* boundary_1.Boundary.start("template", prop.loc.start.offset, prop.loc.end.offset, codeFeatures_1.codeFeatures.verification);
 				yield* generateIdentifier(options, ctx, prop);
 				yield `(${names_1.names.nonNull}(null), `;
 				yield* generateValue(options, ctx, prop, false);
 				yield* generateArg(options, ctx, prop, false);
 				yield* generateModifiers(options, ctx, prop, "modifiers", false);
 				yield `)`;
+				yield boundary.end();
+				yield utils_1.endOfLine;
 			} else {
-				yield `${names_1.names.asFunctionalDirective}(`;
+				const hookVar = ctx.getInternalVariable();
+				yield `const ${hookVar} = ${names_1.names.asFunctionalDirective}(`;
 				yield* generateIdentifier(options, ctx, prop);
-				yield `, ${(0, utils_1.asType)(`import('${options.vueCompilerOptions.lib}').ObjectDirective`, options.scriptLang)})(${names_1.names.nonNull}(null), { ...${names_1.names.directiveBindingRestFields}, `;
+				yield `, ${(0, utils_1.asType)(`import('${options.vueCompilerOptions.lib}').ObjectDirective`, options.scriptLang)})${utils_1.endOfLine}`;
+				const boundary = yield* boundary_1.Boundary.start("template", prop.loc.start.offset, prop.loc.end.offset, codeFeatures_1.codeFeatures.verification);
+				yield `${hookVar}(${names_1.names.nonNull}(null), { ...${names_1.names.directiveBindingRestFields}, `;
 				yield* generateArg(options, ctx, prop);
 				yield* generateModifiers(options, ctx, prop);
 				yield* generateValue(options, ctx, prop);
-				yield `},${utils_1.newLine}${names_1.names.nonNull}(null), ${names_1.names.nonNull}(null))`;
+				yield `},${utils_1.newLine}...${names_1.names.directiveHookArgsRest}(${hookVar}))`;
+				yield boundary.end();
+				yield utils_1.endOfLine;
 			}
-			yield boundary.end();
-			yield utils_1.endOfLine;
 		}
 	}
 	function* generateIdentifier(options, ctx, prop) {
@@ -18288,7 +18760,7 @@ var require_elementDirectives = /* @__PURE__ */ __commonJSMin(((exports, module,
 			...codeFeatures_1.codeFeatures.withoutHighlightAndCompletion,
 			verification: options.vueCompilerOptions.checkUnknownDirectives && !(0, shared_1.isBuiltInDirective)(prop.name)
 		});
-		if (!(0, shared_1.isBuiltInDirective)(prop.name)) ctx.accessVariable("template", (0, shared_1.camelize)(rawName), prop.loc.start.offset);
+		if (!(0, shared_1.isBuiltInDirective)(prop.name)) ctx.accessVariable("template", (0, shared_1.camelize)(rawName), prop.loc.start.offset, false, rawName);
 		yield boundary.end();
 	}
 	function* generateArg(options, ctx, prop, asBindingProperty = true) {
@@ -18616,11 +19088,12 @@ var require_element = /* @__PURE__ */ __commonJSMin(((exports, module, this$35)
 				yield* (0, utils_1.generateTypedVar)("let", componentVar, options.scriptLang, function* () {
 					yield `${names_1.names.WithComponent}<'${tag}', ${names_1.names.LocalComponents}, ${names_1.names.GlobalComponents}`;
 					yield originalNames.has(options.componentName) ? `, typeof ${names_1.names.export}` : `, void`;
+					yield `, ${options.vueCompilerOptions.checkUnknownComponents}`;
 					for (const name of originalNames) yield `, '${name}'`;
 					yield `>[`;
 					yield* (0, stringLiteralKey_1.generateStringLiteralKey)(tag, startTagOffset, {
 						...codeFeatures_1.codeFeatures.semanticWithoutHighlight,
-						...options.vueCompilerOptions.checkUnknownComponents ? codeFeatures_1.codeFeatures.verification : codeFeatures_1.codeFeatures.doNotReportTs2339AndTs2551
+						...codeFeatures_1.codeFeatures.verification
 					});
 					yield `]`;
 				});
@@ -18628,11 +19101,9 @@ var require_element = /* @__PURE__ */ __commonJSMin(((exports, module, this$35)
 					yield `/** @ts-ignore @type {`;
 					for (const offset of [startTagOffset, endTagOffset]) {
 						if (offset === void 0) continue;
-						yield ` | typeof ${names_1.names.components}.`;
-						yield* (0, camelized_1.generateCamelized)(tag, "template", offset, codeFeatures_1.codeFeatures.navigation);
-						if (tag[0] !== tag[0].toUpperCase()) {
-							yield ` | typeof ${names_1.names.components}.`;
-							yield* (0, camelized_1.generateCamelized)((0, shared_1.capitalize)(tag), "template", offset, codeFeatures_1.codeFeatures.navigation);
+						for (const name of /* @__PURE__ */ new Set([tag, (0, shared_1.capitalize)(tag)])) {
+							yield ` | typeof ${options.setupBindings.has((0, shared_1.camelize)(name)) ? "" : `${names_1.names.components}.`}`;
+							yield* (0, camelized_1.generateCamelized)(name, "template", offset, codeFeatures_1.codeFeatures.navigation);
 						}
 						if (tag.includes("-")) {
 							yield ` | typeof ${names_1.names.components}[`;
@@ -18725,13 +19196,14 @@ var require_element = /* @__PURE__ */ __commonJSMin(((exports, module, this$35)
 		}
 		yield* (0, styleScopedClasses_1.generateStyleScopedClassReferences)(options, node);
 		const slotDir = node.props.find(CompilerDOM.isVSlot);
-		if (slotDir || node.children.length) yield* (0, vSlot_1.generateVSlot)(options, ctx, node, slotDir, getCtxVar());
-		if (isCtxVarUsed) yield* (0, utils_1.generateTypedVar)("var", ctxVar, options.scriptLang, function* () {
+		const hasSlots = !!slotDir || node.children.length > 0;
+		if (isCtxVarUsed || hasSlots) yield* (0, utils_1.generateTypedVar)("var", ctxVar, options.scriptLang, function* () {
 			yield `${names_1.names.ExtractComponentContext}<typeof ${componentVar}, typeof ${vnodeVar}>`;
 		});
 		if (isPropsVarUsed) yield* (0, utils_1.generateTypedVar)("var", propsVar, options.scriptLang, function* () {
 			yield `${names_1.names.ExtractComponentProps}<typeof ${componentVar}, typeof ${vnodeVar}>`;
 		});
+		if (hasSlots) yield* (0, vSlot_1.generateVSlot)(options, ctx, node, slotDir, ctxVar);
 		ctx.components.pop();
 	}
 	function* generateElement(options, ctx, node) {
@@ -18747,7 +19219,7 @@ var require_element = /* @__PURE__ */ __commonJSMin(((exports, module, this$35)
 		yield `)(`;
 		const boundary = yield* boundary_1.Boundary.start("template", startTagOffset, startTagOffset + node.tag.length, codeFeatures_1.codeFeatures.verification);
 		yield `{${utils_1.newLine}`;
-		yield* (0, elementProps_1.generateElementProps)(options, ctx, node, node.props, options.vueCompilerOptions.checkUnknownProps, failedPropExps);
+		yield* (0, elementProps_1.generateElementProps)(options, ctx, node, node.props, options.vueCompilerOptions.checkUnknownProps, failedPropExps, `typeof ${names_1.names.intrinsics}['${node.tag}']`);
 		yield `}`;
 		yield boundary.end();
 		yield `)${utils_1.endOfLine}`;
@@ -18771,7 +19243,7 @@ var require_element = /* @__PURE__ */ __commonJSMin(((exports, module, this$35)
 			yield `${options.vueCompilerOptions.checkUnknownProps ? names_1.names.asFunctionalElement0 : names_1.names.asFunctionalElement1}(${names_1.names.intrinsics}.template)(`;
 			const boundary = yield* boundary_1.Boundary.start("template", startTagOffset, startTagOffset + node.tag.length, codeFeatures_1.codeFeatures.verification);
 			yield `{${utils_1.newLine}`;
-			yield* (0, elementProps_1.generateElementProps)(options, ctx, node, node.props, options.vueCompilerOptions.checkUnknownProps, failedPropExps);
+			yield* (0, elementProps_1.generateElementProps)(options, ctx, node, node.props, options.vueCompilerOptions.checkUnknownProps, failedPropExps, `typeof ${names_1.names.intrinsics}.template`);
 			yield `}`;
 			yield boundary.end();
 			yield `)${utils_1.endOfLine}`;
@@ -18857,7 +19329,8 @@ var require_slotOutlet = /* @__PURE__ */ __commonJSMin(((exports, module, this$3
 			if (prop.name === "bind" && prop.arg?.type === CompilerDOM.NodeTypes.SIMPLE_EXPRESSION) return prop.arg.content === "name";
 		});
 		if (options.hasDefineSlots) {
-			yield `${names_1.names.asFunctionalSlot}(`;
+			const slotVar = ctx.getInternalVariable();
+			yield `const ${slotVar} = ${names_1.names.asFunctionalSlot}(`;
 			if (nameProp) {
 				let codes;
 				if (nameProp.type === CompilerDOM.NodeTypes.ATTRIBUTE && nameProp.value) {
@@ -18882,10 +19355,11 @@ var require_slotOutlet = /* @__PURE__ */ __commonJSMin(((exports, module, this$3
 				yield `]`;
 				yield boundary.end();
 			}
-			yield `)(`;
+			yield `)${utils_1.endOfLine}`;
+			yield `${slotVar}(`;
 			const boundary = yield* boundary_1.Boundary.start("template", startTagOffset, startTagEndOffset, codeFeatures_1.codeFeatures.verification);
 			yield `{${utils_1.newLine}`;
-			yield* (0, elementProps_1.generateElementProps)(options, ctx, node, node.props.filter((prop) => prop !== nameProp), true);
+			yield* (0, elementProps_1.generateElementProps)(options, ctx, node, node.props.filter((prop) => prop !== nameProp), true, void 0, `Parameters<typeof ${slotVar}>[0]`);
 			yield `}`;
 			yield boundary.end();
 			yield `)${utils_1.endOfLine}`;
@@ -19280,23 +19754,26 @@ var require_template$1 = /* @__PURE__ */ __commonJSMin(((exports) => {
 		if (vueCompilerOptions.inferTemplateDollarRefs) ctx.dollarVars.add("$refs");
 		if (vueCompilerOptions.inferTemplateDollarEl) ctx.dollarVars.add("$el");
 		if (template.ast) yield* (0, templateChild_1.generateTemplateChild)(options, ctx, template.ast);
-		yield* ctx.generateHoistVariables();
+		yield* ctx.generateHoistVariables(options.scriptLang);
 		yield* generateSlotsType(options, ctx);
 		yield* generateInheritedAttrsType(options, ctx);
 		yield* generateTemplateRefsType(options, ctx);
 		yield* generateRootElType(options, ctx);
-		if (ctx.dollarVars.size) yield* (0, utils_1.generateTypedVar)("var", names_1.names.dollars, options.scriptLang, function* () {
-			yield `{${utils_1.newLine}`;
-			if (ctx.dollarVars.has("$slots")) yield `$slots: ${ctx.generatedTypes.has(names_1.names.Slots) ? names_1.names.Slots : `{}`}${utils_1.endOfLine}`;
-			if (ctx.dollarVars.has("$attrs")) {
-				yield `$attrs: import('${vueCompilerOptions.lib}').ComponentPublicInstance['$attrs']`;
-				if (ctx.generatedTypes.has(names_1.names.InheritedAttrs)) yield ` & ${names_1.names.InheritedAttrs}`;
-				yield utils_1.endOfLine;
-			}
-			if (ctx.dollarVars.has("$refs")) yield `$refs: ${ctx.generatedTypes.has(names_1.names.TemplateRefs) ? names_1.names.TemplateRefs : `{}`}${utils_1.endOfLine}`;
-			if (ctx.dollarVars.has("$el")) yield `$el: ${ctx.generatedTypes.has(names_1.names.RootEl) ? names_1.names.RootEl : `any`}${utils_1.endOfLine}`;
-			yield `} & { [K in keyof import('${vueCompilerOptions.lib}').ComponentPublicInstance]: unknown }`;
-		});
+		if (ctx.dollarVars.size) {
+			ctx.generatedTypes.add(names_1.names.dollars);
+			yield* (0, utils_1.generateTypedVar)("var", names_1.names.dollars, options.scriptLang, function* () {
+				yield `{${utils_1.newLine}`;
+				if (ctx.dollarVars.has("$slots")) yield `$slots: ${ctx.generatedTypes.has(names_1.names.Slots) ? names_1.names.Slots : `{}`}${utils_1.endOfLine}`;
+				if (ctx.dollarVars.has("$attrs")) {
+					yield `$attrs: import('${vueCompilerOptions.lib}').ComponentPublicInstance['$attrs']`;
+					if (ctx.generatedTypes.has(names_1.names.InheritedAttrs)) yield ` & ${names_1.names.InheritedAttrs}`;
+					yield utils_1.endOfLine;
+				}
+				if (ctx.dollarVars.has("$refs")) yield `$refs: ${ctx.generatedTypes.has(names_1.names.TemplateRefs) ? names_1.names.TemplateRefs : `{}`}${utils_1.endOfLine}`;
+				if (ctx.dollarVars.has("$el")) yield `$el: ${ctx.generatedTypes.has(names_1.names.RootEl) ? names_1.names.RootEl : `any`}${utils_1.endOfLine}`;
+				yield `} & { [K in keyof import('${vueCompilerOptions.lib}').ComponentPublicInstance]: unknown }`;
+			});
+		}
 		yield* scope.end();
 	}
 	function* generateSlotsType(options, ctx) {
@@ -23767,8 +24244,9 @@ var require_scriptSetup$1 = /* @__PURE__ */ __commonJSMin(((exports) => {
 			yield utils_1.endOfLine;
 			propTypes.push(`import('${vueCompilerOptions.lib}').${vueCompilerOptions.target >= 3.3 ? `ExtractPublicPropTypes` : `ExtractPropTypes`}<typeof ${names_1.names.propsOption}>`);
 		}
-		if (scriptSetupRanges.defineEmits || scriptSetupRanges.defineModel.length) propTypes.push(names_1.names.EmitProps);
-		if (options.templateAndStyleTypes.has(names_1.names.InheritedAttrs)) propTypes.push(names_1.names.InheritedAttrs);
+		const hasEmitProps = scriptSetupRanges.defineEmits || scriptSetupRanges.defineModel.length;
+		if (hasEmitProps) propTypes.push(names_1.names.EmitProps);
+		if (options.templateAndStyleTypes.has(names_1.names.InheritedAttrs)) propTypes.push(hasEmitProps ? `Omit<${names_1.names.InheritedAttrs}, keyof ${names_1.names.EmitProps}>` : names_1.names.InheritedAttrs);
 		if (scriptSetupRanges.defineEmits) emitTypes.push(`typeof ${scriptSetupRanges.defineEmits.name ?? names_1.names.emit}`);
 		if (scriptSetupRanges.defineModel.length) emitTypes.push(`typeof ${names_1.names.modelEmit}`);
 		yield `return {} as {${utils_1.newLine}`;
@@ -23959,7 +24437,7 @@ var require_scriptSetup$1 = /* @__PURE__ */ __commonJSMin(((exports) => {
 			});
 			const toImport = usedMacros.filter(({ alias }) => !options.setupBindings.has(alias));
 			if (toImport.length) {
-				yield `const { `;
+				yield `${utils_1.newLine}const { `;
 				for (const { canonical, alias } of toImport) yield alias === canonical ? `${canonical}, ` : `${canonical}: ${alias}, `;
 				yield `} = `;
 				yield (0, utils_1.asType)(`typeof import('${options.vueCompilerOptions.lib}')`, options.scriptLang);
@@ -24105,11 +24583,34 @@ var require_template = /* @__PURE__ */ __commonJSMin(((exports) => {
 		yield* generateTemplateComponents(options);
 		yield* generateTemplateDirectives(options);
 		yield `void ${names_1.names.ctx}, ${names_1.names.components}, ${names_1.names.intrinsics}, ${names_1.names.directives}${utils_1.endOfLine}`;
-		for (const name of options.dotValueBindings) {
-			yield `// @ts-ignore${utils_1.newLine}`;
-			yield `${names_1.names.withDotValue}(${name}, ${(0, utils_1.getRefBrandArgument)(options.vueCompilerOptions, options.scriptLang)})${utils_1.endOfLine}`;
-		}
+		const exportedTypes = [
+			names_1.names.Slots,
+			names_1.names.InheritedAttrs,
+			names_1.names.TemplateRefs,
+			names_1.names.RootEl,
+			names_1.names.StyleModules
+		].filter((name) => options.templateAndStyleTypes.has(name) && !(name === names_1.names.Slots && options.scriptSetupRanges?.defineSlots));
+		yield `const ${names_1.names.template} = () => {${utils_1.newLine}`;
+		for (const name of options.dotValueBindings) yield `${names_1.names.withDotValue}(${name}, ${(0, utils_1.getRefBrandArgument)(options.vueCompilerOptions, options.scriptLang)})${utils_1.endOfLine}`;
 		if (options.templateAndStyleCodes.length) yield* options.templateAndStyleCodes;
+		yield `return {${utils_1.newLine}`;
+		for (const name of exportedTypes) yield `${name}: ${(0, utils_1.asType)(name, options.scriptLang)},${utils_1.newLine}`;
+		if (options.templateAndStyleTypes.has(names_1.names.dollars)) yield `${names_1.names.dollars},${utils_1.newLine}`;
+		yield `}${utils_1.endOfLine}`;
+		yield `}${utils_1.endOfLine}`;
+		const used = [names_1.names.template];
+		const returnType = `ReturnType<typeof ${names_1.names.template}>`;
+		for (const name of exportedTypes) yield* (0, utils_1.generateTypeAlias)(name, options.scriptLang, function* () {
+			yield `${returnType}['${name}']`;
+		});
+		if (exportedTypes.length) used.push((0, utils_1.asType)(`[${exportedTypes.join(`, `)}]`, options.scriptLang));
+		if (options.templateAndStyleTypes.has(names_1.names.dollars)) {
+			yield* (0, utils_1.generateTypedVar)("let", names_1.names.dollars, options.scriptLang, function* () {
+				yield `${returnType}['${names_1.names.dollars}']`;
+			});
+			used.push(names_1.names.dollars);
+		}
+		yield `void [${used.join(`, `)}]${utils_1.endOfLine}`;
 	}
 	function* generateTemplateCtx({ vueCompilerOptions, templateAndStyleTypes, scriptSetupRanges, fileName, scriptLang }, selfType) {
 		const exps = [];
@@ -24271,7 +24772,6 @@ var require_script = /* @__PURE__ */ __commonJSMin(((exports, module, this$24) =
 			yield* (0, template_1.generateTemplate)(options, names_1.names.src);
 		} else if (script && scriptRanges && scriptSetup && scriptSetupRanges) {
 			yield* (0, scriptSetup_1.generateScriptSetupImports)(scriptSetup, scriptSetupRanges);
-			yield* (0, scriptSetup_1.generateMacros)(options);
 			let selfType;
 			const { exportDefault } = scriptRanges;
 			if (exportDefault) yield* generateScriptWithExportDefault(ctx, script, scriptRanges, exportDefault, vueCompilerOptions, selfType = names_1.names.self, exportExpression);
@@ -24279,6 +24779,7 @@ var require_script = /* @__PURE__ */ __commonJSMin(((exports, module, this$24) =
 				yield* (0, utils_1.generateSfcBlockSection)(script, 0, script.content.length, codeFeatures_1.codeFeatures.all);
 				yield `export default ${exportExpression}${utils_1.endOfLine}`;
 			}
+			yield* (0, scriptSetup_1.generateMacros)(options);
 			yield* generateExportDeclareEqual(scriptSetup, names_1.names.export);
 			if (scriptSetup.generic) yield* (0, scriptSetup_1.generateGeneric)(options, ctx, scriptSetup, scriptSetupRanges, scriptSetup.generic, (0, scriptSetup_1.generateSetupFunction)(options, ctx, scriptSetup, scriptSetupRanges, (0, template_1.generateTemplate)(options, selfType)));
 			else {
@@ -24609,7 +25110,7 @@ var require_scriptSetupRanges = /* @__PURE__ */ __commonJSMin(((exports) => {
 	var collectBindings_1 = require_collectBindings();
 	var shared_1 = require_shared$1();
 	var utils_1 = require_utils$4();
-	var tsCheckRE = /^\/\/\s*@ts-(?:no)?check(?:$|\s)/;
+	var tsCheckRE = /^\/\/(?:\s*@ts-(?:no)?check(?:$|\s)|\/\s*<reference\s)/;
 	function parseScriptSetupRanges(ts, sourceFile, vueCompilerOptions) {
 		const defineModel = [];
 		let defineProps;
@@ -27250,7 +27751,7 @@ var init_main$1 = __esmMin((() => {
 		*/
 		function is(value) {
 			const candidate = value;
-			return Is$1.objectLiteral(candidate) && Is$1.string(candidate.label) && (Is$1.undefined(candidate.textEdit) || TextEdit$1.is(candidate)) && (Is$1.undefined(candidate.additionalTextEdits) || Is$1.typedArray(candidate.additionalTextEdits, TextEdit$1.is));
+			return Is$1.objectLiteral(candidate) && Is$1.string(candidate.label) && (Is$1.undefined(candidate.textEdit) || TextEdit$1.is(candidate.textEdit)) && (Is$1.undefined(candidate.additionalTextEdits) || Is$1.typedArray(candidate.additionalTextEdits, TextEdit$1.is));
 		}
 		ColorPresentation.is = is;
 	})(ColorPresentation$1 || (ColorPresentation$1 = {}));
@@ -27289,7 +27790,7 @@ var init_main$1 = __esmMin((() => {
 		*/
 		function is(value) {
 			const candidate = value;
-			return Is$1.objectLiteral(candidate) && Is$1.uinteger(candidate.startLine) && Is$1.uinteger(candidate.startLine) && (Is$1.undefined(candidate.startCharacter) || Is$1.uinteger(candidate.startCharacter)) && (Is$1.undefined(candidate.endCharacter) || Is$1.uinteger(candidate.endCharacter)) && (Is$1.undefined(candidate.kind) || Is$1.string(candidate.kind));
+			return Is$1.objectLiteral(candidate) && Is$1.uinteger(candidate.startLine) && Is$1.uinteger(candidate.endLine) && (Is$1.undefined(candidate.startCharacter) || Is$1.uinteger(candidate.startCharacter)) && (Is$1.undefined(candidate.endCharacter) || Is$1.uinteger(candidate.endCharacter)) && (Is$1.undefined(candidate.kind) || Is$1.string(candidate.kind));
 		}
 		FoldingRange.is = is;
 	})(FoldingRange$1 || (FoldingRange$1 = {}));
@@ -108470,7 +108971,7 @@ var init_ko$2 = __esmMin((() => {
 			"name": "Transition",
 			"description": {
 				"kind": "markdown",
-				"value": "\n**하나의** 요소 또는 컴포넌트에 애니메이션 전환 효과를 제공합니다.\n\n- **Props**\n\n  ```ts\n  interface TransitionProps {\n    /**\n     * 전환 CSS 클래스 이름을 자동으로 생성하는 데 사용됩니다.\n     * 예: `name: 'fade'`를 지정하면 `.fade-enter`,\n     * `.fade-enter-active` 등으로 자동 확장됩니다.\n     */\n    name?: string\n    /**\n     * CSS 전환 클래스를 적용할지 여부입니다.\n     * 기본값: true\n     */\n    css?: boolean\n    /**\n     * 전환 종료 타이밍을 결정하기 위해\n     * 대기할 전환 이벤트의 종류를 지정합니다.\n     * 기본 동작은 더 긴 지속 시간을 가진\n     * 타입을 자동 감지합니다.\n     */\n    type?: 'transition' | 'animation'\n    /**\n     * 전환의 명시적 지속 시간을 지정합니다.\n     * 기본 동작은 루트 전환 요소에서 첫 번째 `transitionend`\n     * 또는 `animationend` 이벤트를 대기합니다.\n     */\n    duration?: number | { enter: number; leave: number }\n    /**\n     * 나가기/들어오기 전환의 타이밍 시퀀스를 제어합니다.\n     * 기본 동작은 동시에 실행됩니다.\n     */\n    mode?: 'in-out' | 'out-in' | 'default'\n    /**\n     * 초기 렌더 시 전환을 적용할지 여부입니다.\n     * 기본값: false\n     */\n    appear?: boolean\n\n    /**\n     * 전환 클래스를 커스터마이즈하기 위한 props입니다.\n     * 템플릿에서는 케밥 케이스를 사용하세요. 예: enter-from-class=\"xxx\"\n     */\n    enterFromClass?: string\n    enterActiveClass?: string\n    enterToClass?: string\n    appearFromClass?: string\n    appearActiveClass?: string\n    appearToClass?: string\n    leaveFromClass?: string\n    leaveActiveClass?: string\n    leaveToClass?: string\n  }\n  ```\n\n- **이벤트**\n\n  - `@before-enter`\n  - `@before-leave`\n  - `@enter`\n  - `@leave`\n  - `@appear`\n  - `@after-enter`\n  - `@after-leave`\n  - `@after-appear`\n  - `@enter-cancelled`\n  - `@leave-cancelled` (`v-show`에서만)\n  - `@appear-cancelled`\n\n- **예시**\n\n  단순 요소:\n\n  ```html\n  <Transition>\n    <div v-if=\"ok\">토글된 내용</div>\n  </Transition>\n  ```\n\n  `key` 속성을 변경하여 전환 강제 적용:\n\n  ```html\n  <Transition>\n    <div :key=\"text\">{{ text }}</div>\n  </Transition>\n  ```\n\n  동적 컴포넌트, 전환 모드 + appear 시 애니메이션:\n\n  ```html\n  <Transition name=\"fade\" mode=\"out-in\" appear>\n    <component :is=\"view\"></component>\n  </Transition>\n  ```\n\n  전환 이벤트 리스닝:\n\n  ```html\n  <Transition @after-enter=\"onTransitionComplete\">\n    <div v-show=\"ok\">토글된 내용</div>\n  </Transition>\n  ```\n\n- **더 알아보기** [가이드 - Transition](https://ko.vuejs.org/guide/built-ins/transition.html)\n"
+				"value": "\n**하나의** 요소 또는 컴포넌트(component)에 애니메이션 전환 효과를 제공합니다.\n\n- **Props**\n\n  ```ts\n  interface TransitionProps {\n    /**\n     * 전환 CSS 클래스 이름을 자동으로 생성하는 데 사용됩니다.\n     * 예: `name: 'fade'`를 지정하면 `.fade-enter`,\n     * `.fade-enter-active` 등으로 자동 확장됩니다.\n     */\n    name?: string\n    /**\n     * CSS 전환 클래스를 적용할지 여부입니다.\n     * 기본값: true\n     */\n    css?: boolean\n    /**\n     * 전환 종료 타이밍을 결정하기 위해\n     * 대기할 전환 이벤트의 종류를 지정합니다.\n     * 기본 동작은 더 긴 지속 시간을 가진\n     * 타입을 자동 감지합니다.\n     */\n    type?: 'transition' | 'animation'\n    /**\n     * 전환의 명시적 지속 시간을 지정합니다.\n     * 기본 동작은 루트 전환 요소에서 첫 번째 `transitionend`\n     * 또는 `animationend` 이벤트를 대기합니다.\n     */\n    duration?: number | { enter: number; leave: number }\n    /**\n     * 나가기/들어오기 전환의 타이밍 시퀀스를 제어합니다.\n     * 기본 동작은 동시에 실행됩니다.\n     */\n    mode?: 'in-out' | 'out-in' | 'default'\n    /**\n     * 초기 렌더 시 전환을 적용할지 여부입니다.\n     * 기본값: false\n     */\n    appear?: boolean\n\n    /**\n     * 전환 클래스를 커스터마이즈하기 위한 props입니다.\n     * 템플릿에서는 케밥 케이스를 사용하세요. 예: enter-from-class=\"xxx\"\n     */\n    enterFromClass?: string\n    enterActiveClass?: string\n    enterToClass?: string\n    appearFromClass?: string\n    appearActiveClass?: string\n    appearToClass?: string\n    leaveFromClass?: string\n    leaveActiveClass?: string\n    leaveToClass?: string\n  }\n  ```\n\n- **이벤트**\n\n  - `@before-enter`\n  - `@before-leave`\n  - `@enter`\n  - `@leave`\n  - `@appear`\n  - `@after-enter`\n  - `@after-leave`\n  - `@after-appear`\n  - `@enter-cancelled`\n  - `@leave-cancelled` (`v-show`에서만)\n  - `@appear-cancelled`\n\n- **예시**\n\n  단순 요소:\n\n  ```html\n  <Transition>\n    <div v-if=\"ok\">토글된 내용</div>\n  </Transition>\n  ```\n\n  `key` 속성을 변경하여 전환 강제 적용:\n\n  ```html\n  <Transition>\n    <div :key=\"text\">{{ text }}</div>\n  </Transition>\n  ```\n\n  동적 컴포넌트, 전환 모드 + appear 시 애니메이션:\n\n  ```html\n  <Transition name=\"fade\" mode=\"out-in\" appear>\n    <component :is=\"view\"></component>\n  </Transition>\n  ```\n\n  전환 이벤트 리스닝:\n\n  ```html\n  <Transition @after-enter=\"onTransitionComplete\">\n    <div v-show=\"ok\">토글된 내용</div>\n  </Transition>\n  ```\n\n- **더 알아보기** [가이드 - Transition](https://ko.vuejs.org/guide/built-ins/transition.html)\n"
 			},
 			"attributes": [],
 			"references": "api/built-in-components.html#transition"
@@ -108479,7 +108980,7 @@ var init_ko$2 = __esmMin((() => {
 			"name": "TransitionGroup",
 			"description": {
 				"kind": "markdown",
-				"value": "\n목록 내 **여러** 요소 또는 컴포넌트에 전환 효과를 제공합니다.\n\n- **Props**\n\n  `<TransitionGroup>`은 `mode`를 제외한 `<Transition>`과 동일한 props를 받으며, 두 가지 추가 props가 있습니다:\n\n  ```ts\n  interface TransitionGroupProps extends Omit<TransitionProps, 'mode'> {\n    /**\n     * 정의하지 않으면 fragment로 렌더링됩니다.\n     */\n    tag?: string\n    /**\n     * 이동 전환 중 적용되는 CSS 클래스를 커스터마이즈합니다.\n     * 템플릿에서는 케밥 케이스를 사용하세요. 예: move-class=\"xxx\"\n     */\n    moveClass?: string\n  }\n  ```\n\n- **이벤트**\n\n  `<TransitionGroup>`은 `<Transition>`과 동일한 이벤트를 발생시킵니다.\n\n- **상세 설명**\n\n  기본적으로 `<TransitionGroup>`은 래퍼 DOM 요소를 렌더링하지 않지만, `tag` prop을 통해 정의할 수 있습니다.\n\n  `<transition-group>` 내의 모든 자식은 애니메이션이 제대로 동작하려면 [**고유한 key**](https://ko.vuejs.org/guide/essentials/list.html#maintaining-state-with-key)가 있어야 합니다.\n\n  `<TransitionGroup>`은 CSS transform을 통한 이동 전환을 지원합니다. 업데이트 후 자식의 화면 위치가 변경되면, 이동 CSS 클래스( `name` 속성에서 자동 생성되거나 `move-class` prop으로 지정됨)가 적용됩니다. 이동 클래스가 적용될 때 CSS `transform` 속성이 \"전환 가능\"하다면, [FLIP 기법](https://aerotwist.com/blog/flip-your-animations/)을 사용하여 부드럽게 목적지로 애니메이션됩니다.\n\n- **예시**\n\n  ```html\n  <TransitionGroup tag=\"ul\" name=\"slide\">\n    <li v-for=\"item in items\" :key=\"item.id\">\n      {{ item.text }}\n    </li>\n  </TransitionGroup>\n  ```\n\n- **더 알아보기** [가이드 - TransitionGroup](https://ko.vuejs.org/guide/built-ins/transition-group.html)\n"
+				"value": "\n목록 내 **여러** 요소 또는 컴포넌트에 전환 효과를 제공합니다.\n\n- **Props**\n\n  `<TransitionGroup>`은 `mode`를 제외하면 `<Transition>`과 동일한 props를 받으며, 두 가지 props를 추가로 받습니다:\n\n  ```ts\n  interface TransitionGroupProps extends Omit<TransitionProps, 'mode'> {\n    /**\n     * 정의하지 않으면 fragment로 렌더링됩니다.\n     */\n    tag?: string\n    /**\n     * 이동 전환 중 적용되는 CSS 클래스를 커스터마이즈합니다.\n     * 템플릿에서는 케밥 케이스를 사용하세요. 예: move-class=\"xxx\"\n     */\n    moveClass?: string\n  }\n  ```\n\n- **이벤트**\n\n  `<TransitionGroup>`은 `<Transition>`과 동일한 이벤트를 발생시킵니다.\n\n- **상세 설명**\n\n  기본적으로 `<TransitionGroup>`은 래퍼 DOM 요소를 렌더링(rendering)하지 않지만, `tag` prop으로 래퍼 요소를 렌더링하도록 지정할 수 있습니다.\n\n  애니메이션이 제대로 동작하려면 `<transition-group>` 내의 모든 자식에 [**고유한 key**](https://ko.vuejs.org/guide/essentials/list.html#maintaining-state-with-key)가 있어야 합니다.\n\n  `<TransitionGroup>`은 CSS transform을 통한 이동 전환을 지원합니다. 업데이트 후 자식의 화면 위치가 변경되면, 이동 CSS 클래스(`name` 속성에서 자동 생성되거나 `move-class` prop으로 지정됨)가 적용됩니다. 이동 클래스가 적용될 때 CSS `transform` 속성이 \"전환 가능\"하다면, [FLIP 기법](https://aerotwist.com/blog/flip-your-animations/)을 사용하여 목적지까지 부드럽게 이동하는 애니메이션이 적용됩니다.\n\n- **예시**\n\n  ```html\n  <TransitionGroup tag=\"ul\" name=\"slide\">\n    <li v-for=\"item in items\" :key=\"item.id\">\n      {{ item.text }}\n    </li>\n  </TransitionGroup>\n  ```\n\n- **더 알아보기** [가이드 - TransitionGroup](https://ko.vuejs.org/guide/built-ins/transition-group.html)\n"
 			},
 			"attributes": [],
 			"references": "api/built-in-components.html#transitiongroup"
@@ -108488,7 +108989,7 @@ var init_ko$2 = __esmMin((() => {
 			"name": "KeepAlive",
 			"description": {
 				"kind": "markdown",
-				"value": "\n내부에 감싼 동적으로 토글되는 컴포넌트를 캐시합니다.\n\n- **Props**\n\n  ```ts\n  interface KeepAliveProps {\n    /**\n     * 지정하면, `include`에 일치하는 이름의\n     * 컴포넌트만 캐시됩니다.\n     */\n    include?: MatchPattern\n    /**\n     * `exclude`에 일치하는 이름의\n     * 컴포넌트는 캐시되지 않습니다.\n     */\n    exclude?: MatchPattern\n    /**\n     * 캐시할 컴포넌트 인스턴스의 최대 개수입니다.\n     */\n    max?: number | string\n  }\n\n  type MatchPattern = string | RegExp | (string | RegExp)[]\n  ```\n\n- **상세 설명**\n\n  동적 컴포넌트를 감쌀 때, `<KeepAlive>`는 비활성 컴포넌트 인스턴스를 파괴하지 않고 캐시합니다.\n\n  한 번에 `<KeepAlive>`의 직접 자식으로는 하나의 활성 컴포넌트 인스턴스만 존재할 수 있습니다.\n\n  `<KeepAlive>` 내부에서 컴포넌트가 토글될 때, 해당 컴포넌트의 `activated` 및 `deactivated` 라이프사이클 훅이 호출됩니다. 이는 `mounted`와 `unmounted`의 대안으로, 이 둘은 호출되지 않습니다. 이 동작은 `<KeepAlive>`의 직접 자식뿐만 아니라 모든 하위 컴포넌트에도 적용됩니다.\n\n- **예시**\n\n  기본 사용법:\n\n  ```html\n  <KeepAlive>\n    <component :is=\"view\"></component>\n  </KeepAlive>\n  ```\n\n  `v-if` / `v-else` 분기와 함께 사용할 때는 한 번에 하나의 컴포넌트만 렌더링되어야 합니다:\n\n  ```html\n  <KeepAlive>\n    <comp-a v-if=\"a > 1\"></comp-a>\n    <comp-b v-else></comp-b>\n  </KeepAlive>\n  ```\n\n  `<Transition>`과 함께 사용:\n\n  ```html\n  <Transition>\n    <KeepAlive>\n      <component :is=\"view\"></component>\n    </KeepAlive>\n  </Transition>\n  ```\n\n  `include` / `exclude` 사용:\n\n  ```html\n  <!-- 콤마로 구분된 문자열 -->\n  <KeepAlive include=\"a,b\">\n    <component :is=\"view\"></component>\n  </KeepAlive>\n\n  <!-- 정규식 (v-bind 사용) -->\n  <KeepAlive :include=\"/a|b/\">\n    <component :is=\"view\"></component>\n  </KeepAlive>\n\n  <!-- 배열 (v-bind 사용) -->\n  <KeepAlive :include=\"['a', 'b']\">\n    <component :is=\"view\"></component>\n  </KeepAlive>\n  ```\n\n  `max`와 함께 사용:\n\n  ```html\n  <KeepAlive :max=\"10\">\n    <component :is=\"view\"></component>\n  </KeepAlive>\n  ```\n\n- **더 알아보기** [가이드 - KeepAlive](https://ko.vuejs.org/guide/built-ins/keep-alive.html)\n"
+				"value": "\n내부에 감싸인, 동적으로 토글되는 컴포넌트를 캐시합니다.\n\n- **Props**\n\n  ```ts\n  interface KeepAliveProps {\n    /**\n     * 지정하면, `include`에 일치하는 이름의\n     * 컴포넌트만 캐시됩니다.\n     */\n    include?: MatchPattern\n    /**\n     * `exclude`에 일치하는 이름의\n     * 컴포넌트는 캐시되지 않습니다.\n     */\n    exclude?: MatchPattern\n    /**\n     * 캐시할 컴포넌트 인스턴스의 최대 개수입니다.\n     */\n    max?: number | string\n  }\n\n  type MatchPattern = string | RegExp | (string | RegExp)[]\n  ```\n\n- **상세 설명**\n\n  동적 컴포넌트를 감쌀 때, `<KeepAlive>`는 비활성 컴포넌트 인스턴스(instance)를 파괴하지 않고 캐시합니다.\n\n  한 번에 `<KeepAlive>`의 직접 자식으로는 하나의 활성 컴포넌트 인스턴스만 존재할 수 있습니다.\n\n  `<KeepAlive>` 내부에서 컴포넌트가 토글될 때, 해당 컴포넌트의 `activated` 및 `deactivated` 라이프사이클(lifecycle) 훅(hook)이 호출됩니다. 이는 `mounted`와 `unmounted`의 대안으로, 이 두 훅은 호출되지 않습니다. 이 동작은 `<KeepAlive>`의 직접 자식뿐만 아니라 모든 하위 컴포넌트에도 적용됩니다.\n\n- **예시**\n\n  기본 사용법:\n\n  ```html\n  <KeepAlive>\n    <component :is=\"view\"></component>\n  </KeepAlive>\n  ```\n\n  `v-if` / `v-else` 분기와 함께 사용할 때는 한 번에 하나의 컴포넌트만 렌더링되어야 합니다:\n\n  ```html\n  <KeepAlive>\n    <comp-a v-if=\"a > 1\"></comp-a>\n    <comp-b v-else></comp-b>\n  </KeepAlive>\n  ```\n\n  `<Transition>`과 함께 사용:\n\n  ```html\n  <Transition>\n    <KeepAlive>\n      <component :is=\"view\"></component>\n    </KeepAlive>\n  </Transition>\n  ```\n\n  `include` / `exclude` 사용:\n\n  ```html\n  <!-- 콤마로 구분된 문자열 -->\n  <KeepAlive include=\"a,b\">\n    <component :is=\"view\"></component>\n  </KeepAlive>\n\n  <!-- 정규식 (v-bind 사용) -->\n  <KeepAlive :include=\"/a|b/\">\n    <component :is=\"view\"></component>\n  </KeepAlive>\n\n  <!-- 배열 (v-bind 사용) -->\n  <KeepAlive :include=\"['a', 'b']\">\n    <component :is=\"view\"></component>\n  </KeepAlive>\n  ```\n\n  `max`와 함께 사용:\n\n  ```html\n  <KeepAlive :max=\"10\">\n    <component :is=\"view\"></component>\n  </KeepAlive>\n  ```\n\n- **더 알아보기** [가이드 - KeepAlive](https://ko.vuejs.org/guide/built-ins/keep-alive.html)\n"
 			},
 			"attributes": [],
 			"references": "api/built-in-components.html#keepalive"
@@ -108497,7 +108998,7 @@ var init_ko$2 = __esmMin((() => {
 			"name": "Teleport",
 			"description": {
 				"kind": "markdown",
-				"value": "\n슬롯 콘텐츠를 DOM의 다른 위치에 렌더링합니다.\n\n- **Props**\n\n  ```ts\n  interface TeleportProps {\n    /**\n     * 필수. 대상 컨테이너를 지정합니다.\n     * 선택자 또는 실제 요소가 될 수 있습니다.\n     */\n    to: string | HTMLElement\n    /**\n     * `true`이면, 콘텐츠가 대상 컨테이너로 이동하지 않고\n     * 원래 위치에 남아 있습니다.\n     * 동적으로 변경할 수 있습니다.\n     */\n    disabled?: boolean\n    /**\n     * `true`이면, Teleport는\n     * 애플리케이션의 다른 부분이 마운트된 후\n     * 대상 해석을 지연합니다. (3.5+)\n     */\n    defer?: boolean\n  }\n  ```\n\n- **예시**\n\n  대상 컨테이너 지정:\n\n  ```html\n  <Teleport to=\"#some-id\" />\n  <Teleport to=\".some-class\" />\n  <Teleport to=\"[data-teleport]\" />\n  ```\n\n  조건부 비활성화:\n\n  ```html\n  <Teleport to=\"#popup\" :disabled=\"displayVideoInline\">\n    <video src=\"./my-movie.mp4\">\n  </Teleport>\n  ```\n\n  대상 해석 지연 <sup class=\"vt-badge\" data-text=\"3.5+\" />:\n\n  ```html\n  <Teleport defer to=\"#late-div\">...</Teleport>\n\n  <!-- 템플릿의 다른 위치에 -->\n  <div id=\"late-div\"></div>\n  ```\n\n- **더 알아보기** [가이드 - Teleport](https://ko.vuejs.org/guide/built-ins/teleport.html)\n"
+				"value": "\n슬롯(slot) 콘텐츠를 DOM의 다른 위치에 렌더링합니다.\n\n- **Props**\n\n  ```ts\n  interface TeleportProps {\n    /**\n     * 필수. 대상 컨테이너를 지정합니다.\n     * 선택자 또는 실제 요소가 될 수 있습니다.\n     */\n    to: string | HTMLElement\n    /**\n     * `true`이면, 콘텐츠가 대상 컨테이너로 이동하지 않고\n     * 원래 위치에 남아 있습니다.\n     * 동적으로 변경할 수 있습니다.\n     */\n    disabled?: boolean\n    /**\n     * `true`이면, Teleport는\n     * 애플리케이션의 다른 부분이 마운트된 후\n     * 대상 해석을 지연합니다. (3.5+)\n     */\n    defer?: boolean\n  }\n  ```\n\n- **예시**\n\n  대상 컨테이너 지정:\n\n  ```html\n  <Teleport to=\"#some-id\" />\n  <Teleport to=\".some-class\" />\n  <Teleport to=\"[data-teleport]\" />\n  ```\n\n  조건부 비활성화:\n\n  ```html\n  <Teleport to=\"#popup\" :disabled=\"displayVideoInline\">\n    <video src=\"./my-movie.mp4\">\n  </Teleport>\n  ```\n\n  대상 해석 지연 <sup class=\"vt-badge\" data-text=\"3.5+\" />:\n\n  ```html\n  <Teleport defer to=\"#late-div\">...</Teleport>\n\n  <!-- 템플릿의 다른 위치에 -->\n  <div id=\"late-div\"></div>\n  ```\n\n- **더 알아보기** [가이드 - Teleport](https://ko.vuejs.org/guide/built-ins/teleport.html)\n"
 			},
 			"attributes": [],
 			"references": "api/built-in-components.html#teleport"
@@ -108506,7 +109007,7 @@ var init_ko$2 = __esmMin((() => {
 			"name": "Suspense",
 			"description": {
 				"kind": "markdown",
-				"value": "\n컴포넌트 트리 내에서 중첩된 비동기 의존성을 조율하는 데 사용됩니다.\n\n- **Props**\n\n  ```ts\n  interface SuspenseProps {\n    timeout?: string | number\n    suspensible?: boolean\n  }\n  ```\n\n- **이벤트**\n\n  - `@resolve`\n  - `@pending`\n  - `@fallback`\n\n- **상세 설명**\n\n  `<Suspense>`는 두 개의 슬롯을 받습니다: `#default` 슬롯과 `#fallback` 슬롯. 기본 슬롯을 메모리에서 렌더링하는 동안 fallback 슬롯의 내용을 표시합니다.\n\n  기본 슬롯을 렌더링하는 동안 비동기 의존성([비동기 컴포넌트](https://ko.vuejs.org/guide/components/async.html) 및 [`async setup()`](https://ko.vuejs.org/guide/built-ins/suspense.html#async-setup)이 있는 컴포넌트를 만나면, 모든 의존성이 해결될 때까지 기본 슬롯을 표시하지 않습니다.\n\n  Suspense를 `suspensible`로 설정하면, 모든 비동기 의존성 처리가 부모 Suspense에 의해 처리됩니다. [구현 세부사항](https://github.com/vuejs/core/pull/6736) 참고\n\n- **더 알아보기** [가이드 - Suspense](https://ko.vuejs.org/guide/built-ins/suspense.html)\n"
+				"value": "\n컴포넌트 트리 내에서 중첩된 비동기 의존성을 조율하는 데 사용됩니다.\n\n- **Props**\n\n  ```ts\n  interface SuspenseProps {\n    timeout?: string | number\n    suspensible?: boolean\n  }\n  ```\n\n- **이벤트**\n\n  - `@resolve`\n  - `@pending`\n  - `@fallback`\n\n- **상세 설명**\n\n  `<Suspense>`는 `#default` 슬롯과 `#fallback` 슬롯, 두 개의 슬롯을 받습니다. 기본 슬롯을 메모리에서 렌더링하는 동안 fallback 슬롯의 내용을 표시합니다.\n\n  기본 슬롯을 렌더링하는 동안 비동기 의존성([비동기 컴포넌트](https://ko.vuejs.org/guide/components/async.html) 및 [`async setup()`](https://ko.vuejs.org/guide/built-ins/suspense.html#async-setup)이 있는 컴포넌트)을 만나면, 모든 의존성이 해결될 때까지 기본 슬롯을 표시하지 않습니다.\n\n  Suspense를 `suspensible`로 설정하면, 모든 비동기 의존성이 부모 Suspense에서 처리됩니다. [구현 세부사항](https://github.com/vuejs/core/pull/6736)을 참고하세요.\n\n- **더 알아보기** [가이드 - Suspense](https://ko.vuejs.org/guide/built-ins/suspense.html)\n"
 			},
 			"attributes": [],
 			"references": "api/built-in-components.html#suspense"
@@ -108515,7 +109016,7 @@ var init_ko$2 = __esmMin((() => {
 			"name": "component",
 			"description": {
 				"kind": "markdown",
-				"value": "\n동적 컴포넌트 또는 엘리먼트를 렌더링하기 위한 \"메타 컴포넌트\"입니다.\n\n- **Props**\n\n  ```ts\n  interface DynamicComponentProps {\n    is: string | Component\n  }\n  ```\n\n- **상세 설명**\n\n  실제로 렌더링할 컴포넌트는 `is` prop에 의해 결정됩니다.\n\n  - `is`가 문자열일 경우, HTML 태그 이름이거나 등록된 컴포넌트의 이름일 수 있습니다.\n\n  - 또는, `is`에 컴포넌트의 정의 자체를 직접 바인딩할 수도 있습니다.\n\n- **예시**\n\n  등록된 이름으로 컴포넌트 렌더링하기 (Options API):\n\n  ```vue\n  <script>\n  import Foo from './Foo.vue'\n  import Bar from './Bar.vue'\n\n  export default {\n    components: { Foo, Bar },\n    data() {\n      return {\n        view: 'Foo'\n      }\n    }\n  }\n  <\/script>\n\n  <template>\n    <component :is=\"view\" />\n  </template>\n  ```\n\n  컴포넌트 정의로 렌더링하기 (`<script setup>`을 사용하는 Composition API):\n\n  ```vue\n  <script setup>\n  import Foo from './Foo.vue'\n  import Bar from './Bar.vue'\n  <\/script>\n\n  <template>\n    <component :is=\"Math.random() > 0.5 ? Foo : Bar\" />\n  </template>\n  ```\n\n  HTML 엘리먼트 렌더링하기:\n\n  ```html\n  <component :is=\"href ? 'a' : 'span'\"></component>\n  ```\n\n  [내장 컴포넌트](./built-in-components)도 모두 `is`에 전달할 수 있지만, 이름으로 전달하려면 반드시 등록해야 합니다. 예를 들어:\n\n  ```vue\n  <script>\n  import { Transition, TransitionGroup } from 'vue'\n\n  export default {\n    components: {\n      Transition,\n      TransitionGroup\n    }\n  }\n  <\/script>\n\n  <template>\n    <component :is=\"isGroup ? 'TransitionGroup' : 'Transition'\">\n      ...\n    </component>\n  </template>\n  ```\n\n  컴포넌트 자체를 `is`에 전달하는 경우(예: `<script setup>`에서)는 등록이 필요하지 않습니다.\n\n  `<component>` 태그에 `v-model`을 사용할 경우, 템플릿 컴파일러는 이를 `modelValue` prop과 `update:modelValue` 이벤트 리스너로 확장합니다. 이는 다른 컴포넌트와 마찬가지입니다. 하지만, 이는 `<input>`이나 `<select>`와 같은 네이티브 HTML 엘리먼트와는 호환되지 않습니다. 따라서, 동적으로 생성된 네이티브 엘리먼트에 `v-model`을 사용하는 것은 동작하지 않습니다:\n\n  ```vue\n  <script setup>\n  import { ref } from 'vue'\n\n  const tag = ref('input')\n  const username = ref('')\n  <\/script>\n\n  <template>\n    <!-- 'input'이 네이티브 HTML 엘리먼트이므로 동작하지 않습니다 -->\n    <component :is=\"tag\" v-model=\"username\" />\n  </template>\n  ```\n\n  실제로 이와 같은 예외적인 경우는 드물며, 네이티브 폼 필드는 실제 애플리케이션에서 보통 컴포넌트로 감싸서 사용합니다. 만약 네이티브 엘리먼트를 직접 사용해야 한다면, `v-model`을 속성과 이벤트로 수동 분리하여 사용할 수 있습니다.\n\n- **관련 문서** [동적 컴포넌트](https://ko.vuejs.org/guide/essentials/component-basics.html#dynamic-components)\n"
+				"value": "\n동적 컴포넌트 또는 엘리먼트를 렌더링(rendering)하기 위한 \"메타 컴포넌트\"입니다.\n\n- **Props**\n\n  ```ts\n  interface DynamicComponentProps {\n    is: string | Component\n  }\n  ```\n\n- **상세 설명**\n\n  실제로 렌더링할 컴포넌트는 `is` prop에 따라 결정됩니다.\n\n  - `is`가 문자열일 경우, HTML 태그 이름이거나 등록된 컴포넌트의 이름일 수 있습니다.\n\n  - 또는, `is`에 컴포넌트의 정의 자체를 직접 바인딩(binding)할 수도 있습니다.\n\n- **예시**\n\n  등록된 이름으로 컴포넌트 렌더링하기 (옵션 API):\n\n  ```vue\n  <script>\n  import Foo from './Foo.vue'\n  import Bar from './Bar.vue'\n\n  export default {\n    components: { Foo, Bar },\n    data() {\n      return {\n        view: 'Foo'\n      }\n    }\n  }\n  <\/script>\n\n  <template>\n    <component :is=\"view\" />\n  </template>\n  ```\n\n  컴포넌트 정의로 렌더링하기 (`<script setup>`을 사용하는 컴포지션 API):\n\n  ```vue\n  <script setup>\n  import Foo from './Foo.vue'\n  import Bar from './Bar.vue'\n  <\/script>\n\n  <template>\n    <component :is=\"Math.random() > 0.5 ? Foo : Bar\" />\n  </template>\n  ```\n\n  HTML 엘리먼트 렌더링하기:\n\n  ```html\n  <component :is=\"href ? 'a' : 'span'\"></component>\n  ```\n\n  [내장 컴포넌트](./built-in-components)도 모두 `is`에 전달할 수 있지만, 이름으로 전달하려면 반드시 등록해야 합니다. 예를 들어:\n\n  ```vue\n  <script>\n  import { Transition, TransitionGroup } from 'vue'\n\n  export default {\n    components: {\n      Transition,\n      TransitionGroup\n    }\n  }\n  <\/script>\n\n  <template>\n    <component :is=\"isGroup ? 'TransitionGroup' : 'Transition'\">\n      ...\n    </component>\n  </template>\n  ```\n\n  컴포넌트 자체를 `is`에 전달하는 경우(예: `<script setup>`에서)는 등록이 필요하지 않습니다.\n\n  `<component>` 태그에 `v-model`을 사용할 경우, 템플릿 컴파일러는 이를 `modelValue` prop과 `update:modelValue` 이벤트 리스너(listener)로 확장합니다. 이는 다른 컴포넌트와 마찬가지입니다. 하지만 이 동작은 `<input>`이나 `<select>`와 같은 네이티브 HTML 엘리먼트와는 호환되지 않습니다. 따라서 동적으로 생성된 네이티브 엘리먼트에 `v-model`을 사용하는 것은 동작하지 않습니다:\n\n  ```vue\n  <script setup>\n  import { ref } from 'vue'\n\n  const tag = ref('input')\n  const username = ref('')\n  <\/script>\n\n  <template>\n    <!-- 'input'이 네이티브 HTML 엘리먼트이므로 동작하지 않습니다 -->\n    <component :is=\"tag\" v-model=\"username\" />\n  </template>\n  ```\n\n  이와 같은 예외적인 경우는 드물며, 실제 애플리케이션에서 네이티브 폼 필드는 보통 컴포넌트로 감싸서 사용합니다. 만약 네이티브 엘리먼트를 직접 사용해야 한다면, `v-model`을 속성과 이벤트로 수동 분리하여 사용할 수 있습니다.\n\n- **관련 문서** [동적 컴포넌트](https://ko.vuejs.org/guide/essentials/component-basics.html#dynamic-components)\n"
 			},
 			"attributes": [],
 			"references": "api/built-in-special-elements.html#component"
@@ -108524,7 +109025,7 @@ var init_ko$2 = __esmMin((() => {
 			"name": "slot",
 			"description": {
 				"kind": "markdown",
-				"value": "\n템플릿에서 슬롯 콘텐츠의 출력 위치를 나타냅니다.\n\n- **Props**\n\n  ```ts\n  interface SlotProps {\n    /**\n     * <slot>에 전달된 모든 prop은\n     * 스코프 슬롯의 인자로 전달됩니다\n     */\n    [key: string]: any\n    /**\n     * 슬롯 이름을 지정할 때 사용됩니다.\n     */\n    name?: string\n  }\n  ```\n\n- **상세 설명**\n\n  `<slot>` 엘리먼트는 `name` 속성을 사용하여 슬롯 이름을 지정할 수 있습니다. `name`이 지정되지 않으면 기본 슬롯이 렌더링됩니다. 슬롯 엘리먼트에 전달된 추가 속성들은 부모에서 정의된 스코프 슬롯에 슬롯 prop으로 전달됩니다.\n\n  해당 엘리먼트 자체는 일치하는 슬롯 콘텐츠로 대체됩니다.\n\n  Vue 템플릿의 `<slot>` 엘리먼트는 자바스크립트로 컴파일되므로, [네이티브 `<slot>` 엘리먼트](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot)와 혼동하지 마세요.\n\n- **관련 문서** [컴포넌트 - 슬롯](https://ko.vuejs.org/guide/components/slots.html)\n"
+				"value": "\n템플릿에서 슬롯(slot) 콘텐츠의 출력 위치를 나타냅니다.\n\n- **Props**\n\n  ```ts\n  interface SlotProps {\n    /**\n     * <slot>에 전달된 모든 prop은\n     * 스코프 슬롯의 인자로 전달됩니다\n     */\n    [key: string]: any\n    /**\n     * 슬롯 이름을 지정할 때 사용됩니다.\n     */\n    name?: string\n  }\n  ```\n\n- **상세 설명**\n\n  `<slot>` 엘리먼트는 `name` 속성을 사용하여 슬롯 이름을 지정할 수 있습니다. `name`이 지정되지 않으면 기본 슬롯이 렌더링됩니다. 슬롯 엘리먼트에 지정한 추가 속성들은 부모에서 정의된 스코프 슬롯(scoped slots)에 슬롯 prop으로 전달됩니다.\n\n  해당 엘리먼트 자체는 일치하는 슬롯 콘텐츠로 대체됩니다.\n\n  Vue 템플릿의 `<slot>` 엘리먼트는 JavaScript로 컴파일되므로, [네이티브 `<slot>` 엘리먼트](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot)와 혼동하지 마세요.\n\n- **관련 문서** [컴포넌트 - 슬롯](https://ko.vuejs.org/guide/components/slots.html)\n"
 			},
 			"attributes": [],
 			"references": "api/built-in-special-elements.html#slot"
@@ -108533,7 +109034,7 @@ var init_ko$2 = __esmMin((() => {
 			"name": "template",
 			"description": {
 				"kind": "markdown",
-				"value": "\n`<template>` 태그는 DOM에 엘리먼트를 렌더링하지 않고 내장 디렉티브를 사용하고 싶을 때 플레이스홀더로 사용됩니다.\n\n- **상세 설명**\n\n  `<template>`에 대한 특별한 처리는 다음 디렉티브 중 하나와 함께 사용될 때만 적용됩니다:\n\n  - `v-if`, `v-else-if`, 또는 `v-else`\n  - `v-for`\n  - `v-slot`\n\n  이들 디렉티브가 없으면 [네이티브 `<template>` 엘리먼트](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)로 렌더링됩니다.\n\n  `v-for`가 있는 `<template>`에는 [`key` 속성](https://ko.vuejs.org/api/built-in-special-attributes.html#key)을 사용할 수 있습니다. 그 외의 모든 속성과 디렉티브는 해당 엘리먼트가 없으면 의미가 없으므로 무시됩니다.\n\n  싱글 파일 컴포넌트는 전체 템플릿을 감싸기 위해 [최상위 `<template>` 태그](https://ko.vuejs.org/api/sfc-spec.html#language-blocks)를 사용합니다. 이 사용법은 위에서 설명한 `<template>`의 사용과는 별개입니다. 최상위 태그는 템플릿 자체의 일부가 아니며, 디렉티브와 같은 템플릿 문법을 지원하지 않습니다.\n\n- **관련 문서**\n  - [가이드 - `<template>`에서의 `v-if`](https://ko.vuejs.org/guide/essentials/conditional.html#v-if-on-template)\n  - [가이드 - `<template>`에서의 `v-for`](https://ko.vuejs.org/guide/essentials/list.html#v-for-on-template)\n  - [가이드 - 네임드 슬롯](https://ko.vuejs.org/guide/components/slots.html#named-slots)\n"
+				"value": "\n`<template>` 태그는 DOM에 엘리먼트를 렌더링하지 않으면서 내장 디렉티브를 사용하고 싶을 때 플레이스홀더 역할을 합니다.\n\n- **상세 설명**\n\n  `<template>`에 대한 특별한 처리는 다음 디렉티브(directive) 중 하나와 함께 사용될 때만 적용됩니다:\n\n  - `v-if`, `v-else-if`, 또는 `v-else`\n  - `v-for`\n  - `v-slot`\n\n  이들 디렉티브가 없으면 [네이티브 `<template>` 엘리먼트](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)로 렌더링됩니다.\n\n  `v-for`가 있는 `<template>`에는 [`key` 속성](https://ko.vuejs.org/api/built-in-special-attributes.html#key)을 사용할 수 있습니다. 그 외의 모든 속성과 디렉티브는, 대응하는 엘리먼트가 없으면 의미가 없으므로 무시됩니다.\n\n  싱글 파일 컴포넌트는 전체 템플릿을 감싸기 위해 [최상위 `<template>` 태그](https://ko.vuejs.org/api/sfc-spec.html#language-blocks)를 사용합니다. 이 사용법은 위에서 설명한 `<template>`의 사용과는 별개입니다. 최상위 태그는 템플릿 자체의 일부가 아니며, 디렉티브와 같은 템플릿 문법을 지원하지 않습니다.\n\n- **관련 문서**\n  - [가이드 - `<template>`에서의 `v-if`](https://ko.vuejs.org/guide/essentials/conditional.html#v-if-on-template)\n  - [가이드 - `<template>`에서의 `v-for`](https://ko.vuejs.org/guide/essentials/list.html#v-for-on-template)\n  - [가이드 - 명명된 슬롯](https://ko.vuejs.org/guide/components/slots.html#named-slots)\n"
 			},
 			"attributes": [],
 			"references": "api/built-in-special-elements.html#template"
@@ -108544,7 +109045,7 @@ var init_ko$2 = __esmMin((() => {
 			"name": "v-text",
 			"description": {
 				"kind": "markdown",
-				"value": "요소의 텍스트 콘텐츠를 업데이트합니다.\n\n- **기대값:** `string`\n\n- **세부사항**\n\n  `v-text`는 요소의 [textContent](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) 속성을 설정하여 동작하므로, 요소 내부의 기존 콘텐츠를 모두 덮어씁니다. `textContent`의 일부만 업데이트해야 한다면 [머스태시 보간법](https://ko.vuejs.org/guide/essentials/template-syntax.html#text-interpolation)을 대신 사용해야 합니다.\n\n- **예시**\n\n  ```html\n  <span v-text=\"msg\"></span>\n  <!-- 아래와 동일 -->\n  <span>{{msg}}</span>\n  ```\n\n- **참고** [템플릿 문법 - 텍스트 보간](https://ko.vuejs.org/guide/essentials/template-syntax.html#text-interpolation)"
+				"value": "요소의 텍스트 콘텐츠를 업데이트합니다.\n\n- **기대값:** `string`\n\n- **세부사항**\n\n  `v-text`는 요소의 [textContent](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) 속성을 설정하여 동작하므로, 요소 내부의 기존 콘텐츠를 모두 덮어씁니다. `textContent`의 일부만 업데이트해야 한다면 [이중 중괄호(mustache) 보간](https://ko.vuejs.org/guide/essentials/template-syntax.html#text-interpolation)을 대신 사용해야 합니다(예: <span v-pre>`<span>Keep this but update a {{dynamicPortion}}</span>`</span>).\n\n- **예시**\n\n  ```html\n  <span v-text=\"msg\"></span>\n  <!-- 아래와 동일 -->\n  <span>{{msg}}</span>\n  ```\n\n- **참고** [템플릿 문법 - 텍스트 보간(interpolation)](https://ko.vuejs.org/guide/essentials/template-syntax.html#text-interpolation)"
 			},
 			"references": "api/built-in-directives.html#v-text"
 		},
@@ -108552,7 +109053,7 @@ var init_ko$2 = __esmMin((() => {
 			"name": "v-html",
 			"description": {
 				"kind": "markdown",
-				"value": "요소의 [innerHTML](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML)을 업데이트합니다.\n\n- **기대값:** `string`\n\n- **세부사항**\n\n  `v-html`의 내용은 일반 HTML로 삽입되며, Vue 템플릿 문법은 처리되지 않습니다. `v-html`을 사용해 템플릿을 조합하려고 한다면, 대신 컴포넌트를 사용하는 방식으로 해결책을 다시 생각해보세요.\n\n  ::: warning 보안 주의\n  웹사이트에서 임의의 HTML을 동적으로 렌더링하는 것은 매우 위험할 수 있습니다. 이는 쉽게 [XSS 공격](https://en.wikipedia.org/wiki/Cross-site_scripting)으로 이어질 수 있기 때문입니다. 신뢰할 수 있는 콘텐츠에만 `v-html`을 사용하고, **절대** 사용자로부터 제공된 콘텐츠에는 사용하지 마세요.\n  :::\n\n  [싱글 파일 컴포넌트](https://ko.vuejs.org/guide/scaling-up/sfc.html)에서는, `scoped` 스타일이 `v-html` 내부의 콘텐츠에는 적용되지 않습니다. 이는 해당 HTML이 Vue의 템플릿 컴파일러에 의해 처리되지 않기 때문입니다. `v-html` 콘텐츠에 scoped CSS를 적용하려면 [CSS 모듈](./sfc-css-features#css-modules)이나 BEM과 같은 수동 스코핑 전략을 가진 추가적인 전역 `<style>` 요소를 사용할 수 있습니다.\n\n- **예시**\n\n  ```html\n  <div v-html=\"html\"></div>\n  ```\n\n- **참고** [템플릿 문법 - Raw HTML](https://ko.vuejs.org/guide/essentials/template-syntax.html#raw-html)"
+				"value": "요소의 [innerHTML](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML)을 업데이트합니다.\n\n- **기대값:** `string`\n\n- **세부사항**\n\n  `v-html`의 내용은 일반 HTML로 삽입되며, Vue 템플릿 문법은 처리되지 않습니다. `v-html`을 사용해 템플릿(template)을 조합하려고 한다면, 그 대신 컴포넌트(component)를 사용하는 방향으로 해결 방법을 다시 검토해 보세요.\n\n  ::: warning 보안 주의\n  웹사이트에서 임의의 HTML을 동적으로 렌더링(rendering)하는 것은 매우 위험할 수 있습니다. 이는 쉽게 [XSS 공격](https://en.wikipedia.org/wiki/Cross-site_scripting)으로 이어질 수 있기 때문입니다. 신뢰할 수 있는 콘텐츠에만 `v-html`을 사용하고, 사용자가 제공한 콘텐츠에는 **절대** 사용하지 마세요.\n  :::\n\n  [싱글 파일 컴포넌트](https://ko.vuejs.org/guide/scaling-up/sfc.html)에서는, `scoped` 스타일이 `v-html` 내부의 콘텐츠에는 적용되지 않습니다. 이는 해당 HTML이 Vue의 템플릿 컴파일러에 의해 처리되지 않기 때문입니다. `v-html` 콘텐츠에 scoped CSS를 적용하려면 [CSS 모듈](./sfc-css-features#css-modules)을 사용하거나, BEM처럼 수동 스코핑 전략을 적용한 별도의 전역 `<style>` 요소를 사용할 수 있습니다.\n\n- **예시**\n\n  ```html\n  <div v-html=\"html\"></div>\n  ```\n\n- **참고** [템플릿 문법 - Raw HTML](https://ko.vuejs.org/guide/essentials/template-syntax.html#raw-html)"
 			},
 			"references": "api/built-in-directives.html#v-html"
 		},
@@ -108560,7 +109061,7 @@ var init_ko$2 = __esmMin((() => {
 			"name": "v-show",
 			"description": {
 				"kind": "markdown",
-				"value": "표현식 값의 참/거짓에 따라 요소의 표시 여부를 토글합니다.\n\n- **기대값:** `any`\n\n- **세부사항**\n\n  `v-show`는 인라인 스타일을 통해 `display` CSS 속성을 설정하여 동작하며, 요소가 보일 때 초기 `display` 값을 최대한 존중합니다. 또한 조건이 변경될 때 트랜지션을 트리거합니다.\n\n- **참고** [조건부 렌더링 - v-show](https://ko.vuejs.org/guide/essentials/conditional.html#v-show)"
+				"value": "표현식 값의 참/거짓에 따라 요소의 표시 여부를 토글합니다.\n\n- **기대값:** `any`\n\n- **세부사항**\n\n  `v-show`는 인라인 스타일을 통해 `display` CSS 속성을 설정하여 동작하며, 요소가 보일 때 초기 `display` 값을 최대한 존중합니다. 또한 조건이 변경될 때 트랜지션(transition)을 트리거합니다.\n\n- **참고** [조건부 렌더링 - v-show](https://ko.vuejs.org/guide/essentials/conditional.html#v-show)"
 			},
 			"references": "api/built-in-directives.html#v-show"
 		},
@@ -108568,7 +109069,7 @@ var init_ko$2 = __esmMin((() => {
 			"name": "v-if",
 			"description": {
 				"kind": "markdown",
-				"value": "표현식 값의 참/거짓에 따라 요소 또는 템플릿 조각을 조건부로 렌더링합니다.\n\n- **기대값:** `any`\n\n- **세부사항**\n\n  `v-if` 요소가 토글될 때, 해당 요소와 그 안의 디렉티브/컴포넌트는 파괴되고 다시 생성됩니다. 초기 조건이 거짓이라면 내부 콘텐츠는 전혀 렌더링되지 않습니다.\n\n  `<template>`에 사용할 수 있어, 텍스트만 포함하거나 여러 요소를 포함하는 조건부 블록을 나타낼 수 있습니다.\n\n  이 디렉티브는 조건이 변경될 때 트랜지션을 트리거합니다.\n\n  함께 사용할 때, `v-if`가 `v-for`보다 우선순위가 높습니다. 이 두 디렉티브를 하나의 요소에 함께 사용하는 것은 권장하지 않습니다. 자세한 내용은 [리스트 렌더링 가이드](https://ko.vuejs.org/guide/essentials/list.html#v-for-with-v-if)를 참고하세요.\n\n- **참고** [조건부 렌더링 - v-if](https://ko.vuejs.org/guide/essentials/conditional.html#v-if)"
+				"value": "표현식 값의 참/거짓에 따라 요소 또는 템플릿 조각을 조건부로 렌더링합니다.\n\n- **기대값:** `any`\n\n- **세부사항**\n\n  `v-if` 요소가 토글될 때, 해당 요소와 그 안의 디렉티브/컴포넌트는 파괴되고 다시 생성됩니다. 초기 조건이 거짓이라면 내부 콘텐츠는 전혀 렌더링되지 않습니다.\n\n  `<template>`에 사용하여, 텍스트만 포함하거나 여러 요소를 포함하는 조건부 블록을 나타낼 수 있습니다.\n\n  이 디렉티브(directive)는 조건이 변경될 때 트랜지션을 트리거합니다.\n\n  `v-for`와 함께 사용할 때는 `v-if`가 더 높은 우선순위를 가집니다. 이 두 디렉티브를 하나의 요소에 함께 사용하는 것은 권장하지 않습니다. 자세한 내용은 [리스트 렌더링 가이드](https://ko.vuejs.org/guide/essentials/list.html#v-for-with-v-if)를 참고하세요.\n\n- **참고** [조건부 렌더링 - v-if](https://ko.vuejs.org/guide/essentials/conditional.html#v-if)"
 			},
 			"references": "api/built-in-directives.html#v-if"
 		},
@@ -108577,7 +109078,7 @@ var init_ko$2 = __esmMin((() => {
 			"valueSet": "v",
 			"description": {
 				"kind": "markdown",
-				"value": "`v-if` 또는 `v-if` / `v-else-if` 체인의 \"else 블록\"을 나타냅니다.\n\n- **표현식 없음**\n\n- **세부사항**\n\n  - 제한: 이전 형제 요소에 `v-if` 또는 `v-else-if`가 있어야 합니다.\n\n  - `<template>`에 사용할 수 있어, 텍스트만 포함하거나 여러 요소를 포함하는 조건부 블록을 나타낼 수 있습니다.\n\n- **예시**\n\n  ```html\n  <div v-if=\"Math.random() > 0.5\">\n    Now you see me\n  </div>\n  <div v-else>\n    Now you don't\n  </div>\n  ```\n\n- **참고** [조건부 렌더링 - v-else](https://ko.vuejs.org/guide/essentials/conditional.html#v-else)"
+				"value": "`v-if` 또는 `v-if` / `v-else-if` 체인의 \"else 블록\"을 나타냅니다.\n\n- **표현식 없음**\n\n- **세부사항**\n\n  - 제한: 이전 형제 요소에 `v-if` 또는 `v-else-if`가 있어야 합니다.\n\n  - `<template>`에 사용하여, 텍스트만 포함하거나 여러 요소를 포함하는 조건부 블록을 나타낼 수 있습니다.\n\n- **예시**\n\n  ```html\n  <div v-if=\"Math.random() > 0.5\">\n    Now you see me\n  </div>\n  <div v-else>\n    Now you don't\n  </div>\n  ```\n\n- **참고** [조건부 렌더링 - v-else](https://ko.vuejs.org/guide/essentials/conditional.html#v-else)"
 			},
 			"references": "api/built-in-directives.html#v-else"
 		},
@@ -108585,7 +109086,7 @@ var init_ko$2 = __esmMin((() => {
 			"name": "v-else-if",
 			"description": {
 				"kind": "markdown",
-				"value": "`v-if`의 \"else if 블록\"을 나타냅니다. 체이닝이 가능합니다.\n\n- **기대값:** `any`\n\n- **세부사항**\n\n  - 제한: 이전 형제 요소에 `v-if` 또는 `v-else-if`가 있어야 합니다.\n\n  - `<template>`에 사용할 수 있어, 텍스트만 포함하거나 여러 요소를 포함하는 조건부 블록을 나타낼 수 있습니다.\n\n- **예시**\n\n  ```html\n  <div v-if=\"type === 'A'\">\n    A\n  </div>\n  <div v-else-if=\"type === 'B'\">\n    B\n  </div>\n  <div v-else-if=\"type === 'C'\">\n    C\n  </div>\n  <div v-else>\n    Not A/B/C\n  </div>\n  ```\n\n- **참고** [조건부 렌더링 - v-else-if](https://ko.vuejs.org/guide/essentials/conditional.html#v-else-if)"
+				"value": "`v-if`의 \"else if 블록\"을 나타냅니다. 체이닝이 가능합니다.\n\n- **기대값:** `any`\n\n- **세부사항**\n\n  - 제한: 이전 형제 요소에 `v-if` 또는 `v-else-if`가 있어야 합니다.\n\n  - `<template>`에 사용하여, 텍스트만 포함하거나 여러 요소를 포함하는 조건부 블록을 나타낼 수 있습니다.\n\n- **예시**\n\n  ```html\n  <div v-if=\"type === 'A'\">\n    A\n  </div>\n  <div v-else-if=\"type === 'B'\">\n    B\n  </div>\n  <div v-else-if=\"type === 'C'\">\n    C\n  </div>\n  <div v-else>\n    Not A/B/C\n  </div>\n  ```\n\n- **참고** [조건부 렌더링 - v-else-if](https://ko.vuejs.org/guide/essentials/conditional.html#v-else-if)"
 			},
 			"references": "api/built-in-directives.html#v-else-if"
 		},
@@ -108593,7 +109094,7 @@ var init_ko$2 = __esmMin((() => {
 			"name": "v-for",
 			"description": {
 				"kind": "markdown",
-				"value": "소스 데이터를 기반으로 요소 또는 템플릿 블록을 여러 번 렌더링합니다.\n\n- **기대값:** `Array | Object | number | string | Iterable`\n\n- **세부사항**\n\n  디렉티브의 값은 현재 반복 중인 요소에 대한 별칭을 제공하기 위해 `alias in expression`이라는 특수 문법을 사용해야 합니다:\n\n  ```html\n  <div v-for=\"item in items\">\n    {{ item.text }}\n  </div>\n  ```\n\n  또는, 인덱스(또는 객체에서 사용할 경우 키)에 대한 별칭도 지정할 수 있습니다:\n\n  ```html\n  <div v-for=\"(item, index) in items\"></div>\n  <div v-for=\"(value, key) in object\"></div>\n  <div v-for=\"(value, name, index) in object\"></div>\n  ```\n\n  `v-for`의 기본 동작은 요소를 제자리에서 패치하려고 시도하며, 이동시키지 않습니다. 요소의 순서를 강제로 재정렬하려면 `key` 특수 속성으로 정렬 힌트를 제공해야 합니다:\n\n  ```html\n  <div v-for=\"item in items\" :key=\"item.id\">\n    {{ item.text }}\n  </div>\n  ```\n\n  `v-for`는 [이터러블 프로토콜](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol)을 구현한 값(네이티브 `Map` 및 `Set` 포함)에도 사용할 수 있습니다.\n\n- **참고**\n  - [리스트 렌더링](https://ko.vuejs.org/guide/essentials/list.html)"
+				"value": "소스 데이터를 기반으로 요소 또는 템플릿 블록을 여러 번 렌더링합니다.\n\n- **기대값:** `Array | Object | number | string | Iterable`\n\n- **세부사항**\n\n  디렉티브의 값은 현재 반복 중인 요소에 대한 별칭을 제공하기 위해 `alias in expression`이라는 특수 문법을 사용해야 합니다:\n\n  ```html\n  <div v-for=\"item in items\">\n    {{ item.text }}\n  </div>\n  ```\n\n  또는, 인덱스(또는 객체에서 사용할 경우 키)에 대한 별칭도 지정할 수 있습니다:\n\n  ```html\n  <div v-for=\"(item, index) in items\"></div>\n  <div v-for=\"(value, key) in object\"></div>\n  <div v-for=\"(value, name, index) in object\"></div>\n  ```\n\n  `v-for`는 기본적으로 요소를 이동시키지 않고 제자리에서 패치하려고 시도합니다. 요소의 순서를 강제로 재정렬하려면 `key` 특수 속성으로 정렬 힌트를 제공해야 합니다:\n\n  ```html\n  <div v-for=\"item in items\" :key=\"item.id\">\n    {{ item.text }}\n  </div>\n  ```\n\n  `v-for`는 [이터러블 프로토콜](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol)을 구현한 값(네이티브 `Map` 및 `Set` 포함)에도 사용할 수 있습니다.\n\n- **참고**\n  - [리스트 렌더링](https://ko.vuejs.org/guide/essentials/list.html)"
 			},
 			"references": "api/built-in-directives.html#v-for"
 		},
@@ -108601,7 +109102,7 @@ var init_ko$2 = __esmMin((() => {
 			"name": "v-on",
 			"description": {
 				"kind": "markdown",
-				"value": "요소에 이벤트 리스너를 연결합니다.\n\n- **축약형:** `@`\n\n- **기대값:** `Function | 인라인 문장 | Object (인자 없이)`\n\n- **인자:** `event` (Object 문법 사용 시 선택)\n\n- **수식어**\n\n  - `.stop` - `event.stopPropagation()` 호출\n  - `.prevent` - `event.preventDefault()` 호출\n  - `.capture` - 캡처 모드로 이벤트 리스너 추가\n  - `.self` - 이벤트가 이 요소에서 발생한 경우에만 핸들러 트리거\n  - `.{keyAlias}` - 특정 키에서만 핸들러 트리거\n  - `.once` - 핸들러를 최대 한 번만 트리거\n  - `.left` - 마우스 왼쪽 버튼 이벤트에서만 핸들러 트리거\n  - `.right` - 마우스 오른쪽 버튼 이벤트에서만 핸들러 트리거\n  - `.middle` - 마우스 가운데 버튼 이벤트에서만 핸들러 트리거\n  - `.passive` - `{ passive: true }`로 DOM 이벤트 연결\n\n- **세부사항**\n\n  이벤트 타입은 인자로 표시됩니다. 표현식은 메서드 이름, 인라인 문장, 또는 수식어가 있을 경우 생략할 수 있습니다.\n\n  일반 요소에 사용하면 [**네이티브 DOM 이벤트**](https://developer.mozilla.org/en-US/docs/Web/Events)만 리스닝합니다. 커스텀 엘리먼트 컴포넌트에 사용하면 해당 자식 컴포넌트에서 발생한 **커스텀 이벤트**를 리스닝합니다.\n\n  네이티브 DOM 이벤트를 리스닝할 때, 메서드는 네이티브 이벤트를 유일한 인자로 받습니다. 인라인 문장을 사용할 경우, 특별한 `$event` 속성에 접근할 수 있습니다: `v-on:click=\"handle('ok', $event)\"`.\n\n  `v-on`은 인자 없이 이벤트/리스너 쌍의 객체에 바인딩하는 것도 지원합니다. 객체 문법을 사용할 때는 수식어를 지원하지 않습니다.\n\n- **예시**\n\n  ```html\n  <!-- 메서드 핸들러 -->\n  <button v-on:click=\"doThis\"></button>\n\n  <!-- 동적 이벤트 -->\n  <button v-on:[event]=\"doThis\"></button>\n\n  <!-- 인라인 문장 -->\n  <button v-on:click=\"doThat('hello', $event)\"></button>\n\n  <!-- 축약형 -->\n  <button @click=\"doThis\"></button>\n\n  <!-- 축약형 동적 이벤트 -->\n  <button @[event]=\"doThis\"></button>\n\n  <!-- 이벤트 전파 중지 -->\n  <button @click.stop=\"doThis\"></button>\n\n  <!-- 기본 동작 방지 -->\n  <button @click.prevent=\"doThis\"></button>\n\n  <!-- 표현식 없이 기본 동작 방지 -->\n  <form @submit.prevent></form>\n\n  <!-- 수식어 체이닝 -->\n  <button @click.stop.prevent=\"doThis\"></button>\n\n  <!-- keyAlias를 사용한 키 수식어 -->\n  <input @keyup.enter=\"onEnter\" />\n\n  <!-- 클릭 이벤트가 최대 한 번만 트리거됨 -->\n  <button v-on:click.once=\"doThis\"></button>\n\n  <!-- 객체 문법 -->\n  <button v-on=\"{ mousedown: doThis, mouseup: doThat }\"></button>\n  ```\n\n  자식 컴포넌트에서 커스텀 이벤트를 리스닝(자식에서 \"my-event\"가 emit될 때 핸들러가 호출됨):\n\n  ```html\n  <MyComponent @my-event=\"handleThis\" />\n\n  <!-- 인라인 문장 -->\n  <MyComponent @my-event=\"handleThis(123, $event)\" />\n  ```\n\n- **참고**\n  - [이벤트 핸들링](https://ko.vuejs.org/guide/essentials/event-handling.html)\n  - [컴포넌트 - 커스텀 이벤트](https://ko.vuejs.org/guide/essentials/component-basics.html#listening-to-events)"
+				"value": "요소에 이벤트 리스너(listener)를 연결합니다.\n\n- **축약형:** `@`\n\n- **기대값:** `Function | 인라인 문장 | Object (인자 없이)`\n\n- **인자:** `event` (Object 문법 사용 시 선택)\n\n- **수식어**\n\n  - `.stop` - `event.stopPropagation()` 호출\n  - `.prevent` - `event.preventDefault()` 호출\n  - `.capture` - 캡처 모드로 이벤트 리스너 추가\n  - `.self` - 이벤트가 이 요소에서 발생한 경우에만 핸들러 트리거\n  - `.{keyAlias}` - 특정 키에서만 핸들러 트리거\n  - `.once` - 핸들러를 최대 한 번만 트리거\n  - `.left` - 마우스 왼쪽 버튼 이벤트에서만 핸들러 트리거\n  - `.right` - 마우스 오른쪽 버튼 이벤트에서만 핸들러 트리거\n  - `.middle` - 마우스 가운데 버튼 이벤트에서만 핸들러 트리거\n  - `.passive` - `{ passive: true }`로 DOM 이벤트 연결\n\n- **세부사항**\n\n  이벤트 타입은 인자로 표시됩니다. 표현식은 메서드 이름이나 인라인 문장일 수 있으며, 수식어(modifiers)가 있으면 생략할 수도 있습니다.\n\n  일반 요소에 사용하면 [**네이티브 DOM 이벤트**](https://developer.mozilla.org/en-US/docs/Web/Events)만 리스닝합니다. 커스텀 엘리먼트 컴포넌트에 사용하면 해당 자식 컴포넌트에서 발생한 **커스텀 이벤트**를 리스닝합니다.\n\n  네이티브 DOM 이벤트를 리스닝할 때, 메서드는 네이티브 이벤트를 유일한 인자로 받습니다. 인라인 문장을 사용할 경우, 특별한 `$event` 속성에 접근할 수 있습니다: `v-on:click=\"handle('ok', $event)\"`.\n\n  `v-on`은 인자 없이 이벤트/리스너 쌍의 객체에 바인딩(binding)하는 것도 지원합니다. 객체 문법을 사용할 때는 수식어를 지원하지 않습니다.\n\n- **예시**\n\n  ```html\n  <!-- 메서드 핸들러 -->\n  <button v-on:click=\"doThis\"></button>\n\n  <!-- 동적 이벤트 -->\n  <button v-on:[event]=\"doThis\"></button>\n\n  <!-- 인라인 문장 -->\n  <button v-on:click=\"doThat('hello', $event)\"></button>\n\n  <!-- 축약형 -->\n  <button @click=\"doThis\"></button>\n\n  <!-- 축약형 동적 이벤트 -->\n  <button @[event]=\"doThis\"></button>\n\n  <!-- 이벤트 전파 중지 -->\n  <button @click.stop=\"doThis\"></button>\n\n  <!-- 기본 동작 방지 -->\n  <button @click.prevent=\"doThis\"></button>\n\n  <!-- 표현식 없이 기본 동작 방지 -->\n  <form @submit.prevent></form>\n\n  <!-- 수식어 체이닝 -->\n  <button @click.stop.prevent=\"doThis\"></button>\n\n  <!-- keyAlias를 사용한 키 수식어 -->\n  <input @keyup.enter=\"onEnter\" />\n\n  <!-- 클릭 이벤트가 최대 한 번만 트리거됨 -->\n  <button v-on:click.once=\"doThis\"></button>\n\n  <!-- 객체 문법 -->\n  <button v-on=\"{ mousedown: doThis, mouseup: doThat }\"></button>\n  ```\n\n  자식 컴포넌트에서 커스텀 이벤트를 리스닝(자식에서 \"my-event\"가 emit될 때 핸들러가 호출됨):\n\n  ```html\n  <MyComponent @my-event=\"handleThis\" />\n\n  <!-- 인라인 문장 -->\n  <MyComponent @my-event=\"handleThis(123, $event)\" />\n  ```\n\n- **참고**\n  - [이벤트 핸들링](https://ko.vuejs.org/guide/essentials/event-handling.html)\n  - [컴포넌트 - 커스텀 이벤트](https://ko.vuejs.org/guide/essentials/component-basics.html#listening-to-events)"
 			},
 			"references": "api/built-in-directives.html#v-on"
 		},
@@ -108609,7 +109110,7 @@ var init_ko$2 = __esmMin((() => {
 			"name": "v-bind",
 			"description": {
 				"kind": "markdown",
-				"value": "하나 이상의 속성 또는 컴포넌트 prop을 표현식에 동적으로 바인딩합니다.\n\n- **축약형:**\n  - `:` 또는 `.` (`.prop` 수식어 사용 시)\n  - 값 생략(속성과 바인딩 값의 이름이 같을 때, 3.4+ 필요)\n\n- **기대값:** `any (인자 사용 시) | Object (인자 없이)`\n\n- **인자:** `attrOrProp (선택)`\n\n- **수식어**\n\n  - `.camel` - 케밥 케이스 속성명을 camelCase로 변환\n  - `.prop` - 바인딩을 DOM 속성으로 강제 설정 (3.2+)\n  - `.attr` - 바인딩을 DOM 속성으로 강제 설정 (3.2+)\n\n- **사용법**\n\n  `class` 또는 `style` 속성에 바인딩할 때, `v-bind`는 Array 또는 Object와 같은 추가 값 타입을 지원합니다. 자세한 내용은 아래 가이드 섹션을 참고하세요.\n\n  요소에 바인딩을 설정할 때, Vue는 기본적으로 `in` 연산자 체크를 통해 해당 키가 속성으로 정의되어 있는지 확인합니다. 속성이 정의되어 있으면, Vue는 값을 속성이 아닌 DOM 속성으로 설정합니다. 대부분의 경우 이 방식이 잘 동작하지만, `.prop` 또는 `.attr` 수식어를 명시적으로 사용하여 이 동작을 오버라이드할 수 있습니다. 특히 [커스텀 엘리먼트 작업 시](https://ko.vuejs.org/guide/extras/web-components.html#passing-dom-properties) 필요할 수 있습니다.\n\n  컴포넌트 prop 바인딩에 사용할 때, prop은 자식 컴포넌트에서 올바르게 선언되어 있어야 합니다.\n\n  인자 없이 사용할 경우, 속성명-값 쌍을 포함하는 객체를 바인딩할 수 있습니다.\n\n- **예시**\n\n  ```html\n  <!-- 속성 바인딩 -->\n  <img v-bind:src=\"imageSrc\" />\n\n  <!-- 동적 속성명 -->\n  <button v-bind:[key]=\"value\"></button>\n\n  <!-- 축약형 -->\n  <img :src=\"imageSrc\" />\n\n  <!-- 동일 이름 축약형 (3.4+), :src=\"src\"로 확장됨 -->\n  <img :src />\n\n  <!-- 축약형 동적 속성명 -->\n  <button :[key]=\"value\"></button>\n\n  <!-- 인라인 문자열 연결 -->\n  <img :src=\"'/path/to/images/' + fileName\" />\n\n  <!-- 클래스 바인딩 -->\n  <div :class=\"{ red: isRed }\"></div>\n  <div :class=\"[classA, classB]\"></div>\n  <div :class=\"[classA, { classB: isB, classC: isC }]\"></div>\n\n  <!-- 스타일 바인딩 -->\n  <div :style=\"{ fontSize: size + 'px' }\"></div>\n  <div :style=\"[styleObjectA, styleObjectB]\"></div>\n\n  <!-- 속성 객체 바인딩 -->\n  <div v-bind=\"{ id: someProp, 'other-attr': otherProp }\"></div>\n\n  <!-- prop 바인딩. \"prop\"은 자식 컴포넌트에서 선언되어야 함 -->\n  <MyComponent :prop=\"someThing\" />\n\n  <!-- 부모와 자식 컴포넌트에서 공통된 prop 전달 -->\n  <MyComponent v-bind=\"$props\" />\n\n  <!-- XLink -->\n  <svg><a :xlink:special=\"foo\"></a></svg>\n  ```\n\n  `.prop` 수식어는 전용 축약형 `.`도 있습니다:\n\n  ```html\n  <div :someProperty.prop=\"someObject\"></div>\n\n  <!-- 아래와 동일 -->\n  <div .someProperty=\"someObject\"></div>\n  ```\n\n  `.camel` 수식어는 in-DOM 템플릿에서 `v-bind` 속성명을 camelCase로 변환할 수 있습니다. 예: SVG `viewBox` 속성\n\n  ```html\n  <svg :view-box.camel=\"viewBox\"></svg>\n  ```\n\n  `.camel`은 문자열 템플릿을 사용하거나, 빌드 단계에서 템플릿을 미리 컴파일하는 경우 필요하지 않습니다.\n\n- **참고**\n  - [클래스 및 스타일 바인딩](https://ko.vuejs.org/guide/essentials/class-and-style.html)\n  - [컴포넌트 - Prop 전달 세부사항](https://ko.vuejs.org/guide/components/props.html#prop-passing-details)"
+				"value": "하나 이상의 속성 또는 컴포넌트 prop을 표현식에 동적으로 바인딩합니다.\n\n- **축약형:**\n  - `:` 또는 `.` (`.prop` 수식어 사용 시)\n  - 값 생략(속성과 바인딩 값의 이름이 같을 때, 3.4+ 필요)\n\n- **기대값:** `any (인자 사용 시) | Object (인자 없이)`\n\n- **인자:** `attrOrProp (선택)`\n\n- **수식어**\n\n  - `.camel` - 케밥 케이스 속성명을 camelCase로 변환\n  - `.prop` - 바인딩을 DOM 속성(property)으로 강제 설정 (3.2+)\n  - `.attr` - 바인딩을 DOM 속성(attribute)으로 강제 설정 (3.2+)\n\n- **사용법**\n\n  `class` 또는 `style` 속성에 바인딩할 때, `v-bind`는 Array 또는 Object와 같은 추가 값 타입을 지원합니다. 자세한 내용은 아래 가이드 섹션을 참고하세요.\n\n  요소에 바인딩을 설정할 때, Vue는 기본적으로 `in` 연산자 체크를 통해 해당 키가 속성(property)으로 정의되어 있는지 확인합니다. 속성이 정의되어 있으면, Vue는 값을 HTML 속성(attribute)이 아닌 DOM 속성(property)으로 설정합니다. 대부분의 경우 이 방식이 잘 동작하지만, `.prop` 또는 `.attr` 수식어를 명시적으로 사용하여 이 동작을 오버라이드할 수 있습니다. 특히 [커스텀 엘리먼트 작업 시](https://ko.vuejs.org/guide/extras/web-components.html#passing-dom-properties) 필요할 수 있습니다.\n\n  컴포넌트 prop 바인딩에 사용할 때, prop은 자식 컴포넌트에서 올바르게 선언되어 있어야 합니다.\n\n  인자 없이 사용할 경우, 속성명-값 쌍을 포함하는 객체를 바인딩할 수 있습니다.\n\n- **예시**\n\n  ```html\n  <!-- 속성 바인딩 -->\n  <img v-bind:src=\"imageSrc\" />\n\n  <!-- 동적 속성명 -->\n  <button v-bind:[key]=\"value\"></button>\n\n  <!-- 축약형 -->\n  <img :src=\"imageSrc\" />\n\n  <!-- 동일 이름 축약형 (3.4+), :src=\"src\"로 확장됨 -->\n  <img :src />\n\n  <!-- 축약형 동적 속성명 -->\n  <button :[key]=\"value\"></button>\n\n  <!-- 인라인 문자열 연결 -->\n  <img :src=\"'/path/to/images/' + fileName\" />\n\n  <!-- 클래스 바인딩 -->\n  <div :class=\"{ red: isRed }\"></div>\n  <div :class=\"[classA, classB]\"></div>\n  <div :class=\"[classA, { classB: isB, classC: isC }]\"></div>\n\n  <!-- 스타일 바인딩 -->\n  <div :style=\"{ fontSize: size + 'px' }\"></div>\n  <div :style=\"[styleObjectA, styleObjectB]\"></div>\n\n  <!-- 속성 객체 바인딩 -->\n  <div v-bind=\"{ id: someProp, 'other-attr': otherProp }\"></div>\n\n  <!-- prop 바인딩. \"prop\"은 자식 컴포넌트에서 선언되어야 함 -->\n  <MyComponent :prop=\"someThing\" />\n\n  <!-- 부모와 자식 컴포넌트에서 공통된 prop 전달 -->\n  <MyComponent v-bind=\"$props\" />\n\n  <!-- XLink -->\n  <svg><a :xlink:special=\"foo\"></a></svg>\n  ```\n\n  `.prop` 수식어에는 전용 축약형 `.`도 있습니다:\n\n  ```html\n  <div :someProperty.prop=\"someObject\"></div>\n\n  <!-- 아래와 동일 -->\n  <div .someProperty=\"someObject\"></div>\n  ```\n\n  `.camel` 수식어는 in-DOM 템플릿에서 `v-bind` 속성명을 camelCase로 변환할 수 있습니다. 예: SVG `viewBox` 속성\n\n  ```html\n  <svg :view-box.camel=\"viewBox\"></svg>\n  ```\n\n  `.camel`은 문자열 템플릿을 사용하거나, 빌드 단계에서 템플릿을 미리 컴파일하는 경우 필요하지 않습니다.\n\n- **참고**\n  - [클래스 및 스타일 바인딩](https://ko.vuejs.org/guide/essentials/class-and-style.html)\n  - [컴포넌트 - Prop 전달 세부사항](https://ko.vuejs.org/guide/components/props.html#prop-passing-details)"
 			},
 			"references": "api/built-in-directives.html#v-bind"
 		},
@@ -108625,7 +109126,7 @@ var init_ko$2 = __esmMin((() => {
 			"name": "v-slot",
 			"description": {
 				"kind": "markdown",
-				"value": "props를 받을 것으로 예상되는 명명된 슬롯 또는 스코프 슬롯을 나타냅니다.\n\n- **축약형:** `#`\n\n- **기대값:** 함수 인자 위치에서 유효한 JavaScript 표현식(구조 분해 지원 포함). 선택 사항 - 슬롯에 props가 전달될 것으로 예상될 때만 필요.\n\n- **인자:** 슬롯 이름(선택, 기본값은 `default`)\n\n- **제한:**\n\n  - `<template>`\n  - [컴포넌트](https://ko.vuejs.org/guide/components/slots.html#scoped-slots) (props가 있는 단일 기본 슬롯의 경우)\n\n- **예시**\n\n  ```html\n  <!-- 명명된 슬롯 -->\n  <BaseLayout>\n    <template v-slot:header>\n      Header content\n    </template>\n\n    <template v-slot:default>\n      Default slot content\n    </template>\n\n    <template v-slot:footer>\n      Footer content\n    </template>\n  </BaseLayout>\n\n  <!-- props를 받는 명명된 슬롯 -->\n  <InfiniteScroll>\n    <template v-slot:item=\"slotProps\">\n      <div class=\"item\">\n        {{ slotProps.item.text }}\n      </div>\n    </template>\n  </InfiniteScroll>\n\n  <!-- 구조 분해와 함께 props를 받는 기본 슬롯 -->\n  <Mouse v-slot=\"{ x, y }\">\n    Mouse position: {{ x }}, {{ y }}\n  </Mouse>\n  ```\n\n- **참고**\n  - [컴포넌트 - 슬롯](https://ko.vuejs.org/guide/components/slots.html)"
+				"value": "props를 받을 것으로 예상되는 명명된 슬롯(named slots) 또는 스코프 슬롯(scoped slots)을 나타냅니다.\n\n- **축약형:** `#`\n\n- **기대값:** 함수 인자 위치에서 유효한 JavaScript 표현식(구조 분해 지원 포함). 선택 사항 - 슬롯에 props가 전달될 것으로 예상될 때만 필요.\n\n- **인자:** 슬롯 이름(선택, 기본값은 `default`)\n\n- **제한:**\n\n  - `<template>`\n  - [컴포넌트](https://ko.vuejs.org/guide/components/slots.html#scoped-slots) (props가 있는 단일 기본 슬롯의 경우)\n\n- **예시**\n\n  ```html\n  <!-- 명명된 슬롯 -->\n  <BaseLayout>\n    <template v-slot:header>\n      Header content\n    </template>\n\n    <template v-slot:default>\n      Default slot content\n    </template>\n\n    <template v-slot:footer>\n      Footer content\n    </template>\n  </BaseLayout>\n\n  <!-- props를 받는 명명된 슬롯 -->\n  <InfiniteScroll>\n    <template v-slot:item=\"slotProps\">\n      <div class=\"item\">\n        {{ slotProps.item.text }}\n      </div>\n    </template>\n  </InfiniteScroll>\n\n  <!-- 구조 분해와 함께 props를 받는 기본 슬롯 -->\n  <Mouse v-slot=\"{ x, y }\">\n    Mouse position: {{ x }}, {{ y }}\n  </Mouse>\n  ```\n\n- **참고**\n  - [컴포넌트 - 슬롯](https://ko.vuejs.org/guide/components/slots.html)"
 			},
 			"references": "api/built-in-directives.html#v-slot"
 		},
@@ -108634,7 +109135,7 @@ var init_ko$2 = __esmMin((() => {
 			"valueSet": "v",
 			"description": {
 				"kind": "markdown",
-				"value": "이 요소와 모든 자식에 대한 컴파일을 건너뜁니다.\n\n- **표현식 없음**\n\n- **세부사항**\n\n  `v-pre`가 있는 요소 내부에서는 모든 Vue 템플릿 문법이 그대로 보존되어 렌더링됩니다. 가장 일반적인 사용 사례는 원시 머스태시 태그를 표시하는 것입니다.\n\n- **예시**\n\n  ```html\n  <span v-pre>{{ this will not be compiled }}</span>\n  ```"
+				"value": "이 요소와 모든 자식에 대한 컴파일을 건너뜁니다.\n\n- **표현식 없음**\n\n- **세부사항**\n\n  `v-pre`가 있는 요소 내부에서는 모든 Vue 템플릿 문법이 그대로 보존되어 렌더링됩니다. 가장 일반적인 사용 사례는 원시 이중 중괄호 태그를 표시하는 것입니다.\n\n- **예시**\n\n  ```html\n  <span v-pre>{{ this will not be compiled }}</span>\n  ```"
 			},
 			"references": "api/built-in-directives.html#v-pre"
 		},
@@ -108643,7 +109144,7 @@ var init_ko$2 = __esmMin((() => {
 			"valueSet": "v",
 			"description": {
 				"kind": "markdown",
-				"value": "요소와 컴포넌트를 한 번만 렌더링하고, 이후 업데이트를 건너뜁니다.\n\n- **표현식 없음**\n\n- **세부사항**\n\n  이후 다시 렌더링될 때, 해당 요소/컴포넌트와 모든 자식은 정적 콘텐츠로 간주되어 건너뜁니다. 이는 업데이트 성능을 최적화하는 데 사용할 수 있습니다.\n\n  ```html\n  <!-- 단일 요소 -->\n  <span v-once>This will never change: {{msg}}</span>\n  <!-- 자식이 있는 요소 -->\n  <div v-once>\n    <h1>Comment</h1>\n    <p>{{msg}}</p>\n  </div>\n  <!-- 컴포넌트 -->\n  <MyComponent v-once :comment=\"msg\"></MyComponent>\n  <!-- `v-for` 디렉티브 -->\n  <ul>\n    <li v-for=\"i in list\" v-once>{{i}}</li>\n  </ul>\n  ```\n\n  3.2부터는 [`v-memo`](#v-memo)를 사용해 무효화 조건과 함께 템플릿의 일부를 메모이즈할 수도 있습니다.\n\n- **참고**\n  - [데이터 바인딩 문법 - 보간](https://ko.vuejs.org/guide/essentials/template-syntax.html#text-interpolation)\n  - [v-memo](#v-memo)"
+				"value": "요소와 컴포넌트를 한 번만 렌더링하고, 이후 업데이트를 건너뜁니다.\n\n- **표현식 없음**\n\n- **세부사항**\n\n  이후 다시 렌더링될 때, 해당 요소/컴포넌트와 모든 자식은 정적 콘텐츠로 간주되어 건너뛰게 됩니다. 이는 업데이트 성능을 최적화하는 데 사용할 수 있습니다.\n\n  ```html\n  <!-- 단일 요소 -->\n  <span v-once>This will never change: {{msg}}</span>\n  <!-- 자식이 있는 요소 -->\n  <div v-once>\n    <h1>Comment</h1>\n    <p>{{msg}}</p>\n  </div>\n  <!-- 컴포넌트 -->\n  <MyComponent v-once :comment=\"msg\"></MyComponent>\n  <!-- `v-for` 디렉티브 -->\n  <ul>\n    <li v-for=\"i in list\" v-once>{{i}}</li>\n  </ul>\n  ```\n\n  3.2부터는 [`v-memo`](#v-memo)를 사용해 무효화 조건과 함께 템플릿의 일부를 메모이즈할 수도 있습니다.\n\n- **참고**\n  - [데이터 바인딩 문법 - 보간](https://ko.vuejs.org/guide/essentials/template-syntax.html#text-interpolation)\n  - [v-memo](#v-memo)"
 			},
 			"references": "api/built-in-directives.html#v-once"
 		},
@@ -108651,7 +109152,7 @@ var init_ko$2 = __esmMin((() => {
 			"name": "v-memo",
 			"description": {
 				"kind": "markdown",
-				"value": "- 3.2+에서만 지원\n\n- **기대값:** `any[]`\n\n- **세부사항**\n\n  템플릿의 서브 트리를 메모이즈합니다. 요소와 컴포넌트 모두에 사용할 수 있습니다. 디렉티브는 메모이제이션을 위해 비교할 고정 길이의 의존성 값 배열을 기대합니다. 배열의 모든 값이 마지막 렌더와 동일하다면, 전체 서브 트리에 대한 업데이트가 건너뜁니다. 예를 들어:\n\n  ```html\n  <div v-memo=\"[valueA, valueB]\">\n    ...\n  </div>\n  ```\n\n  컴포넌트가 다시 렌더링될 때, `valueA`와 `valueB`가 모두 동일하다면 이 `<div>`와 그 자식에 대한 모든 업데이트가 건너뜁니다. 실제로, 메모이즈된 서브 트리의 복사본을 재사용할 수 있으므로 Virtual DOM VNode 생성조차도 건너뜁니다.\n\n  메모이제이션 배열을 올바르게 지정하는 것이 중요합니다. 그렇지 않으면 실제로 적용되어야 할 업데이트를 건너뛸 수 있습니다. 의존성 배열이 비어있는 `v-memo=\"[]\"`는 기능적으로 `v-once`와 동일합니다.\n\n  **`v-for`와 함께 사용하기**\n\n  `v-memo`는 성능이 중요한 시나리오에서 마이크로 최적화를 위해 제공되며, 거의 필요하지 않습니다. 가장 일반적인 활용 사례는 대용량 `v-for` 리스트(길이 > 1000)를 렌더링할 때입니다:\n\n  ```html\n  <div v-for=\"item in list\" :key=\"item.id\" v-memo=\"[item.id === selected]\">\n    <p>ID: {{ item.id }} - selected: {{ item.id === selected }}</p>\n    <p>...more child nodes</p>\n  </div>\n  ```\n\n  컴포넌트의 `selected` 상태가 변경될 때, 대부분의 항목이 동일하더라도 많은 VNode가 생성됩니다. 여기서 `v-memo` 사용은 \"이 항목이 선택됨/해제됨으로 변경된 경우에만 업데이트하라\"는 의미입니다. 영향을 받지 않은 항목은 이전 VNode를 재사용하여 diffing을 완전히 건너뜁니다. 이때, Vue가 항목의 `:key`에서 자동으로 추론하므로 memo 의존성 배열에 `item.id`를 포함할 필요는 없습니다.\n\n  :::warning\n  `v-memo`를 `v-for`와 함께 사용할 때는 반드시 같은 요소에 사용해야 합니다. **`v-memo`는 `v-for` 내부에서는 동작하지 않습니다.**\n  :::\n\n  `v-memo`는 자식 컴포넌트 업데이트 체크가 비최적화된 특정 엣지 케이스에서 원치 않는 업데이트를 수동으로 방지하는 데도 사용할 수 있습니다. 하지만, 필요한 업데이트가 건너뛰어지지 않도록 올바른 의존성 배열을 지정하는 것은 개발자의 책임입니다.\n\n- **참고**\n  - [v-once](#v-once)"
+				"value": "- 3.2+에서만 지원\n\n- **기대값:** `any[]`\n\n- **세부사항**\n\n  템플릿의 서브 트리를 메모이즈합니다. 요소와 컴포넌트 모두에 사용할 수 있습니다. 디렉티브는 메모이제이션(memoization)을 위해 비교할 고정 길이의 의존성 값 배열을 받습니다. 배열의 모든 값이 마지막 렌더와 동일하다면, 전체 서브 트리에 대한 업데이트를 건너뜁니다. 예를 들어:\n\n  ```html\n  <div v-memo=\"[valueA, valueB]\">\n    ...\n  </div>\n  ```\n\n  컴포넌트가 다시 렌더링될 때, `valueA`와 `valueB`가 모두 동일하다면 이 `<div>`와 그 자식에 대한 모든 업데이트를 건너뜁니다. 실제로, 메모이즈된 서브 트리의 복사본을 재사용할 수 있으므로 Virtual DOM VNode 생성조차도 건너뜁니다.\n\n  메모이제이션 배열을 올바르게 지정하는 것이 중요합니다. 그렇지 않으면 실제로 적용되어야 할 업데이트를 건너뛸 수 있습니다. 의존성 배열이 비어있는 `v-memo=\"[]\"`는 기능적으로 `v-once`와 동일합니다.\n\n  **`v-for`와 함께 사용하기**\n\n  `v-memo`는 성능이 중요한 시나리오에서 마이크로 최적화를 위해 제공되며, 거의 필요하지 않습니다. 가장 일반적인 활용 사례는 대용량 `v-for` 리스트(길이 > 1000)를 렌더링할 때입니다:\n\n  ```html\n  <div v-for=\"item in list\" :key=\"item.id\" v-memo=\"[item.id === selected]\">\n    <p>ID: {{ item.id }} - selected: {{ item.id === selected }}</p>\n    <p>...more child nodes</p>\n  </div>\n  ```\n\n  컴포넌트의 `selected` 상태가 변경될 때, 대부분의 항목이 동일하더라도 많은 VNode가 생성됩니다. 여기서 `v-memo` 사용은 \"이 항목이 선택됨/해제됨으로 변경된 경우에만 업데이트하라\"는 의미입니다. 영향을 받지 않은 항목은 이전 VNode를 재사용하여 diffing을 완전히 건너뜁니다. 이때, Vue가 항목의 `:key`에서 이를 자동으로 추론하므로 memo 의존성 배열에 `item.id`를 포함할 필요는 없습니다.\n\n  :::warning\n  `v-memo`를 `v-for`와 함께 사용할 때는 반드시 같은 요소에 사용해야 합니다. **`v-memo`는 `v-for` 내부에서는 동작하지 않습니다.**\n  :::\n\n  `v-memo`는 자식 컴포넌트 업데이트 체크가 비최적화된 특정 엣지 케이스에서 원치 않는 업데이트를 수동으로 방지하는 데도 사용할 수 있습니다. 하지만, 필요한 업데이트가 건너뛰어지지 않도록 올바른 의존성 배열을 지정하는 것은 개발자의 책임입니다.\n\n- **참고**\n  - [v-once](#v-once)"
 			},
 			"references": "api/built-in-directives.html#v-memo"
 		},
@@ -108660,7 +109161,7 @@ var init_ko$2 = __esmMin((() => {
 			"valueSet": "v",
 			"description": {
 				"kind": "markdown",
-				"value": "컴파일되지 않은 템플릿을 준비될 때까지 숨기는 데 사용됩니다.\n\n- **표현식 없음**\n\n- **세부사항**\n\n  **이 디렉티브는 빌드 단계가 없는 환경에서만 필요합니다.**\n\n  in-DOM 템플릿을 사용할 때, \"컴파일되지 않은 템플릿의 깜빡임\"이 발생할 수 있습니다. 즉, 마운트된 컴포넌트가 렌더링된 콘텐츠로 교체되기 전까지 사용자가 원시 머스태시 태그를 볼 수 있습니다.\n\n  `v-cloak`는 관련 컴포넌트 인스턴스가 마운트될 때까지 요소에 남아 있습니다. `[v-cloak] { display: none }`과 같은 CSS 규칙과 결합하여, 컴포넌트가 준비될 때까지 원시 템플릿을 숨기는 데 사용할 수 있습니다.\n\n- **예시**\n\n  ```css\n  [v-cloak] {\n    display: none;\n  }\n  ```\n\n  ```html\n  <div v-cloak>\n    {{ message }}\n  </div>\n  ```\n\n  컴파일이 완료될 때까지 `<div>`는 보이지 않습니다."
+				"value": "컴파일되지 않은 템플릿이 준비되기 전까지 화면에서 숨기는 데 사용됩니다.\n\n- **표현식 없음**\n\n- **세부사항**\n\n  **이 디렉티브는 빌드 단계가 없는 환경에서만 필요합니다.**\n\n  in-DOM 템플릿을 사용할 때, \"컴파일되지 않은 템플릿의 깜빡임\"이 발생할 수 있습니다. 즉, 마운트(mount)된 컴포넌트가 렌더링된 콘텐츠로 교체되기 전까지 사용자가 원시 이중 중괄호 태그를 볼 수 있습니다.\n\n  `v-cloak`는 관련 컴포넌트 인스턴스(instance)가 마운트될 때까지 요소에 남아 있습니다. `[v-cloak] { display: none }`과 같은 CSS 규칙과 결합하여, 컴포넌트가 준비될 때까지 원시 템플릿을 숨기는 데 사용할 수 있습니다.\n\n- **예시**\n\n  ```css\n  [v-cloak] {\n    display: none;\n  }\n  ```\n\n  ```html\n  <div v-cloak>\n    {{ message }}\n  </div>\n  ```\n\n  컴파일이 완료될 때까지 `<div>`는 보이지 않습니다."
 			},
 			"references": "api/built-in-directives.html#v-cloak"
 		},
@@ -108668,7 +109169,7 @@ var init_ko$2 = __esmMin((() => {
 			"name": "key",
 			"description": {
 				"kind": "markdown",
-				"value": "`key` 특수 속성은 주로 Vue의 가상 DOM 알고리즘이 새로운 노드 목록과 이전 노드 목록을 비교(diffing)할 때 vnode를 식별하는 힌트로 사용됩니다.\n\n- **기대값:** `number | string | symbol`\n\n- **세부사항**\n\n  key가 없으면, Vue는 요소의 이동을 최소화하고 같은 타입의 요소를 최대한 제자리에서 패치/재사용하려는 알고리즘을 사용합니다. key가 있으면, key의 순서 변경에 따라 요소를 재정렬하고, 더 이상 존재하지 않는 key를 가진 요소는 항상 제거/파괴됩니다.\n\n  동일한 공통 부모를 가진 자식들은 **고유한 key**를 가져야 합니다. 중복된 key는 렌더링 오류를 일으킵니다.\n\n  가장 일반적인 사용 사례는 `v-for`와 결합하는 것입니다:\n\n  ```html\n  <ul>\n    <li v-for=\"item in items\" :key=\"item.id\">...</li>\n  </ul>\n  ```\n\n  또한 요소/컴포넌트의 재사용 대신 교체를 강제로 할 때 사용할 수 있습니다. 이는 다음과 같은 경우에 유용할 수 있습니다:\n\n  - 컴포넌트의 라이프사이클 훅을 제대로 트리거하고 싶을 때\n  - 트랜지션을 트리거하고 싶을 때\n\n  예를 들어:\n\n  ```html\n  <transition>\n    <span :key=\"text\">{{ text }}</span>\n  </transition>\n  ```\n\n  `text`가 변경되면, `<span>`은 항상 패치되는 대신 교체되어 트랜지션이 트리거됩니다.\n\n- **관련 문서** [가이드 - 리스트 렌더링 - `key`로 상태 유지하기](https://ko.vuejs.org/guide/essentials/list.html#maintaining-state-with-key)"
+				"value": "`key` 특수 속성은 주로 Vue의 가상 DOM 알고리즘이 새로운 노드 목록과 이전 노드 목록을 비교(diffing)할 때 vnode를 식별하는 힌트로 사용됩니다.\n\n- **기대값:** `number | string | symbol`\n\n- **세부사항**\n\n  key가 없으면, Vue는 요소의 이동을 최소화하고 같은 타입의 요소를 최대한 제자리에서 패치/재사용하려는 알고리즘을 사용합니다. key가 있으면, key의 순서 변경에 따라 요소가 재정렬되고, 더 이상 존재하지 않는 key를 가진 요소는 항상 제거/파괴됩니다.\n\n  같은 부모를 둔 자식들은 **고유한 key**를 가져야 합니다. 중복된 key는 렌더링(rendering) 오류를 일으킵니다.\n\n  가장 일반적인 사용 사례는 `v-for`와 결합하는 것입니다:\n\n  ```html\n  <ul>\n    <li v-for=\"item in items\" :key=\"item.id\">...</li>\n  </ul>\n  ```\n\n  또한 요소/컴포넌트(component)를 재사용하는 대신 교체하도록 강제할 때도 사용할 수 있습니다. 이는 다음과 같은 경우에 유용할 수 있습니다:\n\n  - 컴포넌트의 라이프사이클(lifecycle) 훅(hook)을 제대로 트리거하고 싶을 때\n  - 트랜지션(transition)을 트리거하고 싶을 때\n\n  예를 들어:\n\n  ```html\n  <transition>\n    <span :key=\"text\">{{ text }}</span>\n  </transition>\n  ```\n\n  `text`가 변경되면, `<span>`은 패치되는 대신 항상 교체되므로 트랜지션이 트리거됩니다.\n\n- **관련 문서** [가이드 - 리스트 렌더링 - `key`로 상태 유지하기](https://ko.vuejs.org/guide/essentials/list.html#maintaining-state-with-key)"
 			},
 			"references": "api/built-in-special-attributes.html#key"
 		},
@@ -108676,7 +109177,7 @@ var init_ko$2 = __esmMin((() => {
 			"name": "ref",
 			"description": {
 				"kind": "markdown",
-				"value": "[템플릿 ref](https://ko.vuejs.org/guide/essentials/template-refs.html)를 나타냅니다.\n\n- **기대값:** `string | Function`\n\n- **세부사항**\n\n  `ref`는 요소나 자식 컴포넌트에 대한 참조를 등록하는 데 사용됩니다.\n\n  옵션 API에서는 참조가 컴포넌트의 `this.$refs` 객체에 등록됩니다:\n\n  ```html\n  <!-- this.$refs.p로 저장됨 -->\n  <p ref=\"p\">hello</p>\n  ```\n\n  컴포지션 API에서는 참조가 동일한 이름의 ref에 저장됩니다:\n\n  ```vue\n  <script setup>\n  import { useTemplateRef } from 'vue'\n\n  const pRef = useTemplateRef('p')\n  <\/script>\n\n  <template>\n    <p ref=\"p\">hello</p>\n  </template>\n  ```\n\n  일반 DOM 요소에 사용하면 참조는 해당 요소가 되고, 자식 컴포넌트에 사용하면 참조는 자식 컴포넌트 인스턴스가 됩니다.\n\n  또는 `ref`는 함수 값을 받아 참조를 어디에 저장할지 완전히 제어할 수 있습니다:\n\n  ```html\n  <ChildComponent :ref=\"(el) => child = el\" />\n  ```\n\n  ref 등록 타이밍에 대한 중요한 참고 사항: ref 자체는 렌더 함수의 결과로 생성되기 때문에, 컴포넌트가 마운트될 때까지 참조에 접근해서는 안 됩니다.\n\n  `this.$refs`는 반응형이 아니므로, 데이터 바인딩을 위해 템플릿에서 사용하려고 해서는 안 됩니다.\n\n- **관련 문서**\n  - [가이드 - 템플릿 ref](https://ko.vuejs.org/guide/essentials/template-refs.html)\n  - [가이드 - 템플릿 ref 타입 지정](https://ko.vuejs.org/guide/typescript/composition-api.html#typing-template-refs) <sup class=\"vt-badge ts\" />\n  - [가이드 - 컴포넌트 템플릿 ref 타입 지정](https://ko.vuejs.org/guide/typescript/composition-api.html#typing-component-template-refs) <sup class=\"vt-badge ts\" />"
+				"value": "[템플릿(template) ref](https://ko.vuejs.org/guide/essentials/template-refs.html)를 나타냅니다.\n\n- **기대값:** `string | Function`\n\n- **세부사항**\n\n  `ref`는 요소나 자식 컴포넌트에 대한 참조를 등록하는 데 사용됩니다.\n\n  옵션 API에서는 참조가 컴포넌트의 `this.$refs` 객체에 등록됩니다:\n\n  ```html\n  <!-- this.$refs.p로 저장됨 -->\n  <p ref=\"p\">hello</p>\n  ```\n\n  컴포지션 API에서는 참조가 동일한 이름의 ref에 저장됩니다:\n\n  ```vue\n  <script setup>\n  import { useTemplateRef } from 'vue'\n\n  const pRef = useTemplateRef('p')\n  <\/script>\n\n  <template>\n    <p ref=\"p\">hello</p>\n  </template>\n  ```\n\n  일반 DOM 요소에 사용하면 참조는 해당 요소가 되고, 자식 컴포넌트에 사용하면 참조는 자식 컴포넌트 인스턴스(instance)가 됩니다.\n\n  또는 `ref`에 함수 값을 전달하여, 참조를 어디에 저장할지 완전히 제어할 수도 있습니다:\n\n  ```html\n  <ChildComponent :ref=\"(el) => child = el\" />\n  ```\n\n  ref 등록 타이밍에 대한 중요한 참고 사항: ref 자체는 렌더 함수의 결과로 생성되기 때문에, 컴포넌트가 마운트(mount)될 때까지 참조에 접근해서는 안 됩니다.\n\n  `this.$refs`는 반응형이 아니므로, 데이터 바인딩(binding)을 위해 템플릿에서 사용하려고 해서는 안 됩니다.\n\n- **관련 문서**\n  - [가이드 - 템플릿 ref](https://ko.vuejs.org/guide/essentials/template-refs.html)\n  - [가이드 - 템플릿 ref 타입 지정](https://ko.vuejs.org/guide/typescript/composition-api.html#typing-template-refs) <sup class=\"vt-badge ts\" />\n  - [가이드 - 컴포넌트 템플릿 ref 타입 지정](https://ko.vuejs.org/guide/typescript/composition-api.html#typing-component-template-refs) <sup class=\"vt-badge ts\" />"
 			},
 			"references": "api/built-in-special-attributes.html#ref"
 		},
@@ -108684,7 +109185,7 @@ var init_ko$2 = __esmMin((() => {
 			"name": "is",
 			"description": {
 				"kind": "markdown",
-				"value": "[동적 컴포넌트](https://ko.vuejs.org/guide/essentials/component-basics.html#dynamic-components) 바인딩에 사용됩니다.\n\n- **기대값:** `string | Component`\n\n- **네이티브 요소에서의 사용**\n \n  - 3.1+에서만 지원됩니다\n\n  `is` 속성이 네이티브 HTML 요소에 사용되면, [커스터마이즈드 내장 요소](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-customized-builtin-example)로 해석되며, 이는 웹 플랫폼의 네이티브 기능입니다.\n\n  하지만 [in-DOM 템플릿 파싱 주의사항](https://ko.vuejs.org/guide/essentials/component-basics.html#in-dom-template-parsing-caveats)에서 설명한 것처럼, 네이티브 요소를 Vue 컴포넌트로 대체해야 할 필요가 있을 수 있습니다. 이 경우 `is` 속성 값 앞에 `vue:`를 붙이면 Vue가 해당 요소를 Vue 컴포넌트로 렌더링합니다:\n\n  ```html\n  <table>\n    <tr is=\"vue:my-row-component\"></tr>\n  </table>\n  ```\n\n- **관련 문서**\n\n  - [내장 특수 요소 - `<component>`](https://ko.vuejs.org/api/built-in-special-elements.html#component)\n  - [동적 컴포넌트](https://ko.vuejs.org/guide/essentials/component-basics.html#dynamic-components)"
+				"value": "[동적 컴포넌트](https://ko.vuejs.org/guide/essentials/component-basics.html#dynamic-components) 바인딩에 사용됩니다.\n\n- **기대값:** `string | Component`\n\n- **네이티브 요소에서의 사용**\n \n  - 3.1+에서만 지원됩니다\n\n  `is` 속성이 네이티브 HTML 요소에 사용되면, [커스터마이즈드 내장 요소](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-customized-builtin-example)로 해석되며, 이는 웹 플랫폼의 네이티브 기능입니다.\n\n  하지만 [in-DOM 템플릿 파싱 주의사항](https://ko.vuejs.org/guide/essentials/component-basics.html#in-dom-template-parsing-caveats)에서 설명한 것처럼, 네이티브 요소를 Vue 컴포넌트로 대체할 필요가 있을 수 있습니다. 이 경우 `is` 속성 값 앞에 `vue:`를 붙이면 Vue가 해당 요소를 Vue 컴포넌트로 렌더링합니다:\n\n  ```html\n  <table>\n    <tr is=\"vue:my-row-component\"></tr>\n  </table>\n  ```\n\n- **관련 문서**\n\n  - [내장 특수 요소 - `<component>`](https://ko.vuejs.org/api/built-in-special-elements.html#component)\n  - [동적 컴포넌트](https://ko.vuejs.org/guide/essentials/component-basics.html#dynamic-components)"
 			},
 			"references": "api/built-in-special-attributes.html#is"
 		},
@@ -108692,7 +109193,7 @@ var init_ko$2 = __esmMin((() => {
 			"name": "data-allow-mismatch",
 			"description": {
 				"kind": "markdown",
-				"value": "[하이드레이션 불일치](https://ko.vuejs.org/guide/scaling-up/ssr.html#hydration-mismatch) 경고를 억제하는 데 사용할 수 있는 특수 속성입니다.\n\n- **예시**\n\n  ```html\n  <div data-allow-mismatch=\"text\">{{ data.toLocaleString() }}</div>\n  ```\n\n  값은 허용되는 불일치 유형을 특정 타입으로 제한할 수 있습니다. 허용되는 값은 다음과 같습니다:\n\n  - `text`\n  - `children` (직접 자식에 대한 불일치만 허용)\n  - `class`\n  - `style`\n  - `attribute`\n\n  값을 제공하지 않으면 모든 유형의 불일치가 허용됩니다.\n"
+				"value": "[하이드레이션(hydration) 불일치](https://ko.vuejs.org/guide/scaling-up/ssr.html#hydration-mismatch) 경고를 억제하는 데 사용할 수 있는 특수 속성입니다.\n\n- **예시**\n\n  ```html\n  <div data-allow-mismatch=\"text\">{{ data.toLocaleString() }}</div>\n  ```\n\n  값을 지정하면 허용할 불일치를 특정 유형으로 제한할 수 있습니다. 사용 가능한 값은 다음과 같습니다:\n\n  - `text`\n  - `children` (직접 자식에 대한 불일치만 허용)\n  - `class`\n  - `style`\n  - `attribute`\n\n  값을 제공하지 않으면 모든 유형의 불일치가 허용됩니다.\n"
 			},
 			"references": "api/ssr.html#data-allow-mismatch"
 		}
@@ -108958,7 +109459,7 @@ var init_zh_cn$2 = __esmMin((() => {
 			"name": "Transition",
 			"description": {
 				"kind": "markdown",
-				"value": "\n为**单个**元素或组件提供动画过渡效果。\n\n- **Props**\n\n  ```ts\n  interface TransitionProps {\n    /**\n     * 用于自动生成过渡 CSS class 名。\n     * 例如 `name: 'fade'` 将自动扩展为 `.fade-enter`、\n     * `.fade-enter-active` 等。\n     */\n    name?: string\n    /**\n     * 是否应用 CSS 过渡 class。\n     * 默认：true\n     */\n    css?: boolean\n    /**\n     * 指定要等待的过渡事件类型\n     * 来确定过渡结束的时间。\n     * 默认情况下会自动检测\n     * 持续时间较长的类型。\n     */\n    type?: 'transition' | 'animation'\n    /**\n     * 显式指定过渡的持续时间。\n     * 默认情况下是等待过渡效果的根元素的第一个 `transitionend`\n     * 或`animationend`事件。\n     */\n    duration?: number | { enter: number; leave: number }\n    /**\n     * 控制离开/进入过渡的时序。\n     * 默认情况下是同时的。\n     */\n    mode?: 'in-out' | 'out-in' | 'default'\n    /**\n     * 是否对初始渲染使用过渡。\n     * 默认：false\n     */\n    appear?: boolean\n\n    /**\n     * 用于自定义过渡 class 的 prop。\n     * 在模板中使用短横线命名，例如：enter-from-class=\"xxx\"\n     */\n    enterFromClass?: string\n    enterActiveClass?: string\n    enterToClass?: string\n    appearFromClass?: string\n    appearActiveClass?: string\n    appearToClass?: string\n    leaveFromClass?: string\n    leaveActiveClass?: string\n    leaveToClass?: string\n  }\n  ```\n\n- **事件**\n\n  - `@before-enter`\n  - `@before-leave`\n  - `@enter`\n  - `@leave`\n  - `@appear`\n  - `@after-enter`\n  - `@after-leave`\n  - `@after-appear`\n  - `@enter-cancelled`\n  - `@leave-cancelled` (`v-show` only)\n  - `@appear-cancelled`\n\n- **示例**\n\n  简单元素：\n\n  ```html\n  <Transition>\n    <div v-if=\"ok\">toggled content</div>\n  </Transition>\n  ```\n\n  通过改变 `key` 属性来强制过度执行：\n\n  ```html\n  <Transition>\n    <div :key=\"text\">{{ text }}</div>\n  </Transition>\n  ```\n\n  动态组件，初始渲染时带有过渡模式 + 动画出现：\n\n  ```html\n  <Transition name=\"fade\" mode=\"out-in\" appear>\n    <component :is=\"view\"></component>\n  </Transition>\n  ```\n\n  监听过渡事件：\n\n  ```html\n  <Transition @after-enter=\"onTransitionComplete\">\n    <div v-show=\"ok\">toggled content</div>\n  </Transition>\n  ```\n\n- **参考**[指南 - `<Transition>`](https://cn.vuejs.org/guide/built-ins/transition.html)\n"
+				"value": "\n为**单个**元素或组件提供动画过渡效果。\n\n- **Props**\n\n  ```ts\n  interface TransitionProps {\n    /**\n     * 用于自动生成过渡 CSS class 名。\n     * 例如 `name: 'fade'` 将自动扩展为 `.fade-enter`、\n     * `.fade-enter-active` 等。\n     */\n    name?: string\n    /**\n     * 是否应用 CSS 过渡 class。\n     * 默认：true\n     */\n    css?: boolean\n    /**\n     * 指定要等待的过渡事件类型\n     * 来确定过渡结束的时间。\n     * 默认情况下会自动检测\n     * 持续时间较长的类型。\n     */\n    type?: 'transition' | 'animation'\n    /**\n     * 显式指定过渡的持续时间。\n     * 默认情况下是等待过渡效果的根元素的第一个 `transitionend`\n     * 或`animationend`事件。\n     */\n    duration?: number | { enter: number; leave: number }\n    /**\n     * 控制离开/进入过渡的时序。\n     * 默认情况下是同时的。\n     */\n    mode?: 'in-out' | 'out-in' | 'default'\n    /**\n     * 是否对初始渲染使用过渡。\n     * 默认：false\n     */\n    appear?: boolean\n\n    /**\n     * 用于自定义过渡 class 的 prop。\n     * 在模板中使用短横线命名，例如：enter-from-class=\"xxx\"\n     */\n    enterFromClass?: string\n    enterActiveClass?: string\n    enterToClass?: string\n    appearFromClass?: string\n    appearActiveClass?: string\n    appearToClass?: string\n    leaveFromClass?: string\n    leaveActiveClass?: string\n    leaveToClass?: string\n  }\n  ```\n\n- **事件**\n\n  - `@before-enter`\n  - `@before-leave`\n  - `@enter`\n  - `@leave`\n  - `@appear`\n  - `@after-enter`\n  - `@after-leave`\n  - `@after-appear`\n  - `@enter-cancelled`\n  - `@leave-cancelled` (`v-show` only)\n  - `@appear-cancelled`\n\n- **示例**\n\n  简单元素：\n\n  ```html\n  <Transition>\n    <div v-if=\"ok\">toggled content</div>\n  </Transition>\n  ```\n\n  通过改变 `key` 属性来强制过渡执行：\n\n  ```html\n  <Transition>\n    <div :key=\"text\">{{ text }}</div>\n  </Transition>\n  ```\n\n  动态组件，初始渲染时带有过渡模式 + 动画出现：\n\n  ```html\n  <Transition name=\"fade\" mode=\"out-in\" appear>\n    <component :is=\"view\"></component>\n  </Transition>\n  ```\n\n  监听过渡事件：\n\n  ```html\n  <Transition @after-enter=\"onTransitionComplete\">\n    <div v-show=\"ok\">toggled content</div>\n  </Transition>\n  ```\n\n- **参考**[指南 - `<Transition>`](https://cn.vuejs.org/guide/built-ins/transition.html)\n"
 			},
 			"attributes": [],
 			"references": "api/built-in-components.html#transition"
@@ -109032,7 +109533,7 @@ var init_zh_cn$2 = __esmMin((() => {
 			"name": "v-text",
 			"description": {
 				"kind": "markdown",
-				"value": "更新元素的文本内容。\n\n- **期望的绑定值类型：**`string`\n\n- **详细信息**\n\n  `v-text` 通过设置元素的 [textContent](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) 属性来工作，因此它将覆盖元素中所有现有的内容。如果你需要更新 `textContent` 的部分，应该使用 [mustache interpolations](https://cn.vuejs.org/guide/essentials/template-syntax.html#text-interpolation) 代替。\n\n- **示例**\n\n  ```html\n  <span v-text=\"msg\"></span>\n  <!-- 等同于 -->\n  <span>{{msg}}</span>\n  ```\n\n- **参考**[模板语法 - 文本插值](https://cn.vuejs.org/guide/essentials/template-syntax.html#text-interpolation)"
+				"value": "更新元素的文本内容。\n\n- **期望的绑定值类型：**`string`\n\n- **详细信息**\n\n  `v-text` 通过设置元素的 [textContent](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) 属性来工作，因此它将覆盖元素中所有现有的内容。如果你只需要更新 `textContent` 的一部分，应该使用 [mustache interpolations](https://cn.vuejs.org/guide/essentials/template-syntax.html#text-interpolation) 代替 (即 <span v-pre>`<span>保留此部分，但更新 {{dynamicPortion}}</span>`</span>)。\n\n- **示例**\n\n  ```html\n  <span v-text=\"msg\"></span>\n  <!-- 等同于 -->\n  <span>{{msg}}</span>\n  ```\n\n- **参考**[模板语法 - 文本插值](https://cn.vuejs.org/guide/essentials/template-syntax.html#text-interpolation)"
 			},
 			"references": "api/built-in-directives.html#v-text"
 		},
@@ -109040,7 +109541,7 @@ var init_zh_cn$2 = __esmMin((() => {
 			"name": "v-html",
 			"description": {
 				"kind": "markdown",
-				"value": "更新元素的 [innerHTML](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML)。\n\n- **期望的绑定值类型：**`string`\n\n- **详细信息**\n\n `v-html` 的内容直接作为普通 HTML 插入—— Vue 模板语法是不会被解析的。如果你发现自己正打算用 `v-html` 来编写模板，不如重新想想怎么使用组件来代替。\n\n ::: warning 安全说明\n 在你的站点上动态渲染任意的 HTML 是非常危险的，因为它很容易导致 [XSS 攻击](https://en.wikipedia.org/wiki/Cross-site_scripting)。请只对可信内容使用 HTML 插值，**绝不要**将用户提供的内容作为插值\n  :::\n\n 在[单文件组件](https://cn.vuejs.org/guide/scaling-up/sfc.html)，`scoped` 样式将不会作用于 `v-html` 里的内容，因为 HTML 内容不会被 Vue 的模板编译器解析。如果你想让 `v-html` 的内容也支持 scoped CSS，你可以使用 [CSS modules](./sfc-css-features#css-modules) 或使用一个额外的全局 `<style>` 元素，手动设置类似 BEM 的作用域策略。\n\n- **示例**\n\n  ```html\n  <div v-html=\"html\"></div>\n  ```\n\n- **参考**[模板语法 - 原始 HTML](https://cn.vuejs.org/guide/essentials/template-syntax.html#raw-html)"
+				"value": "更新元素的 [innerHTML](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML)。\n\n- **期望的绑定值类型：**`string`\n\n- **详细信息**\n\n `v-html` 的内容直接作为普通 HTML 插入—— Vue 模板语法是不会被解析的。如果你发现自己正打算用 `v-html` 来编写模板，不如重新想想怎么使用组件来代替。\n\n ::: warning 安全说明\n 在你的站点上动态渲染任意的 HTML 是非常危险的，因为它很容易导致 [XSS 攻击](https://en.wikipedia.org/wiki/Cross-site_scripting)。请只对可信内容使用 HTML 插值，**绝不要**将用户提供的内容作为插值。\n  :::\n\n 在[单文件组件](https://cn.vuejs.org/guide/scaling-up/sfc.html)，`scoped` 样式将不会作用于 `v-html` 里的内容，因为 HTML 内容不会被 Vue 的模板编译器解析。如果你想让 `v-html` 的内容也支持 scoped CSS，你可以使用 [CSS modules](./sfc-css-features#css-modules) 或使用一个额外的全局 `<style>` 元素，手动设置类似 BEM 的作用域策略。\n\n- **示例**\n\n  ```html\n  <div v-html=\"html\"></div>\n  ```\n\n- **参考**[模板语法 - 原始 HTML](https://cn.vuejs.org/guide/essentials/template-syntax.html#raw-html)"
 			},
 			"references": "api/built-in-directives.html#v-html"
 		},
@@ -109233,7 +109734,7 @@ var init_zh_hk$2 = __esmMin((() => {
 			"name": "Teleport",
 			"description": {
 				"kind": "markdown",
-				"value": "\n将其插槽内容渲染到 DOM 中的另一个位置。\n\n- **Props**\n\n  ```ts\n  interface TeleportProps {\n    /**\n     * 必填项。指定目标容器。\n     * 可以是选择器或实际元素。\n     */\n    to: string | HTMLElement\n    /**\n     * 当值为 `true` 时，内容将保留在其原始位置\n     * 而不是移动到目标容器中。\n     * 可以动态更改。\n     */\n    disabled?: boolean\n  }\n  ```\n\n- **示例**\n\n  指定目标容器：\n\n  ```html\n  <Teleport to=\"#some-id\" />\n  <Teleport to=\".some-class\" />\n  <Teleport to=\"[data-teleport]\" />\n  ```\n\n  有条件地禁用：\n\n  ```html\n  <Teleport to=\"#popup\" :disabled=\"displayVideoInline\">\n    <video src=\"./my-movie.mp4\">\n  </Teleport>\n  ```\n\n- **参考**[指南 - Teleport](https://zh-hk.vuejs.org/guide/built-ins/teleport.html)\n"
+				"value": "\n将其插槽内容渲染到 DOM 中的另一个位置。\n\n- **Props**\n\n  ```ts\n  interface TeleportProps {\n    /**\n     * 必填项。指定目标容器。\n     * 可以是选择器或实际元素。\n     */\n    to: string | HTMLElement\n    /**\n     * 当值为 `true` 时，内容将保留在其原始位置\n     * 而不是移动到目标容器中。\n     * 可以动态更改。\n     */\n    disabled?: boolean\n    /**\n     * When `true`, the Teleport will defer until other\n     * parts of the application have been mounted before\n     * resolving its target. (3.5+)\n     */\n    defer?: boolean\n  }\n  ```\n\n- **示例**\n\n  指定目标容器：\n\n  ```html\n  <Teleport to=\"#some-id\" />\n  <Teleport to=\".some-class\" />\n  <Teleport to=\"[data-teleport]\" />\n  ```\n\n  有条件地禁用：\n\n  ```html\n  <Teleport to=\"#popup\" :disabled=\"displayVideoInline\">\n    <video src=\"./my-movie.mp4\">\n  </Teleport>\n  ```\n\n  Defer target resolution <sup class=\"vt-badge\" data-text=\"3.5+\" />:\n\n  ```html\n  <Teleport defer to=\"#late-div\">...</Teleport>\n\n  <!-- somewhere later in the template -->\n  <div id=\"late-div\"></div>\n  ```\n\n- **参考**[指南 - Teleport](https://zh-hk.vuejs.org/guide/built-ins/teleport.html)\n"
 			},
 			"attributes": [],
 			"references": "api/built-in-components.html#teleport"
@@ -109280,7 +109781,7 @@ var init_zh_hk$2 = __esmMin((() => {
 			"name": "v-text",
 			"description": {
 				"kind": "markdown",
-				"value": "更新元素的文本内容。\n\n- **期望的绑定值类型：**`string`\n\n- **详细信息**\n\n  `v-text` 通过设置元素的 [textContent](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) 属性来工作，因此它将覆盖元素中所有现有的内容。如果你需要更新 `textContent` 的部分，应该使用 [mustache interpolations](https://zh-hk.vuejs.org/guide/essentials/template-syntax.html#text-interpolation) 代替。\n\n- **示例**\n\n  ```html\n  <span v-text=\"msg\"></span>\n  <!-- 等同于 -->\n  <span>{{msg}}</span>\n  ```\n\n- **参考**[模板语法 - 文本插值](https://zh-hk.vuejs.org/guide/essentials/template-syntax.html#text-interpolation)"
+				"value": "更新元素的文本内容。\n\n- **期望的绑定值类型：**`string`\n\n- **详细信息**\n\n  `v-text` 通过设置元素的 [textContent](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) 属性来工作，因此它将覆盖元素中所有现有的内容。如果你只需要更新 `textContent` 的一部分，应该使用 [mustache 插值](https://zh-hk.vuejs.org/guide/essentials/template-syntax.html#text-interpolation) 代替 (例如 <span v-pre>`<span>Keep this but update a {{dynamicPortion}}</span>`</span>)。\n\n- **示例**\n\n  ```html\n  <span v-text=\"msg\"></span>\n  <!-- 等同于 -->\n  <span>{{msg}}</span>\n  ```\n\n- **参考**[模板语法 - 文本插值](https://zh-hk.vuejs.org/guide/essentials/template-syntax.html#text-interpolation)"
 			},
 			"references": "api/built-in-directives.html#v-text"
 		},
@@ -109345,7 +109846,7 @@ var init_zh_hk$2 = __esmMin((() => {
 			"name": "v-bind",
 			"description": {
 				"kind": "markdown",
-				"value": "动态的绑定一个或多个 attribute，也可以是组件的 prop。\n\n- **缩写：**\n  - `:` 或者 `.` (当使用 `.prop` 修饰符)\n  - 值可以省略 (当 attribute 和绑定的值同名时) <sup class=\"vt-badge\">3.4+</sup>\n\n- **期望：**`any (带参数) | Object (不带参数)`\n\n- **参数：**`attrOrProp (可选的)`\n\n- **修饰符**\n\n  - `.camel` - 将短横线命名的 attribute 转变为驼峰式命名。\n  - `.prop` - 强制绑定为 DOM property。<sup class=\"vt-badge\">3.2+</sup>\n  - `.attr` - 强制绑定为 DOM attribute。<sup class=\"vt-badge\">3.2+</sup>\n\n- **用途**\n\n  当用于绑定 `class` 或 `style` attribute，`v-bind` 支持额外的值类型如数组或对象。详见下方的指南链接。\n\n  在处理绑定时，Vue 默认会利用 `in` 操作符来检查该元素上是否定义了和绑定的 key 同名的 DOM property。如果存在同名的 property，则 Vue 会将它作为 DOM property 赋值，而不是作为 attribute 设置。这个行为在大多数情况都符合期望的绑定值类型，但是你也可以显式用 `.prop` 和 `.attr` 修饰符来强制绑定方式。有时这是必要的，特别是在和[自定义元素](https://zh-hk.vuejs.org/guide/extras/web-components.html#passing-dom-properties)打交道时。\n\n  当用于组件 props 绑定时，所绑定的 props 必须在子组件中已被正确声明。\n\n  当不带参数使用时，可以用于绑定一个包含了多个 attribute 名称-绑定值对的对象。\n\n- **示例**\n\n  ```html\n  <!-- 绑定 attribute -->\n  <img v-bind:src=\"imageSrc\" />\n\n  <!-- 动态 attribute 名 -->\n  <button v-bind:[key]=\"value\"></button>\n\n  <!-- 缩写 -->\n  <img :src=\"imageSrc\" />\n\n  <!-- 缩写形式的动态 attribute 名 (3.4+)，扩展为 :src=\"src\" -->\n  <img :src />\n\n  <!-- 动态 attribute 名的缩写 -->\n  <button :[key]=\"value\"></button>\n\n  <!-- 内联字符串拼接 -->\n  <img :src=\"'/path/to/images/' + fileName\" />\n\n  <!-- class 绑定 -->\n  <div :class=\"{ red: isRed }\"></div>\n  <div :class=\"[classA, classB]\"></div>\n  <div :class=\"[classA, { classB: isB, classC: isC }]\"></div>\n\n  <!-- style 绑定 -->\n  <div :style=\"{ fontSize: size + 'px' }\"></div>\n  <div :style=\"[styleObjectA, styleObjectB]\"></div>\n\n  <!-- 绑定对象形式的 attribute -->\n  <div v-bind=\"{ id: someProp, 'other-attr': otherProp }\"></div>\n\n  <!-- prop 绑定。“prop” 必须在子组件中已声明。 -->\n  <MyComponent :prop=\"someThing\" />\n\n  <!-- 传递子父组件共有的 prop -->\n  <MyComponent v-bind=\"$props\" />\n\n  <!-- XLink -->\n  <svg><a :xlink:special=\"foo\"></a></svg>\n  ```\n\n  `.prop` 修饰符也有专门的缩写，`.`：\n\n  ```html\n  <div :someProperty.prop=\"someObject\"></div>\n\n  <!-- 等同于 -->\n  <div .someProperty=\"someObject\"></div>\n  ```\n\n  当在 DOM 内模板使用 `.camel` 修饰符，可以驼峰化 `v-bind` attribute 的名称，例如 SVG `viewBox` attribute：\n\n  ```html\n  <svg :view-box.camel=\"viewBox\"></svg>\n  ```\n\n  如果使用字符串模板或使用构建步骤预编译模板，则不需要 `.camel`。\n\n- **参考**\n  - [Class 与 Style 绑定](https://zh-hk.vuejs.org/guide/essentials/class-and-style.html)\n  - [组件 -  Prop 传递细节](https://zh-hk.vuejs.org/guide/components/props.html#prop-passing-details)"
+				"value": "动态的绑定一个或多个 attribute，也可以是组件的 prop。\n\n- **缩写：**\n  - `:` 或者 `.` (当使用 `.prop` 修饰符)\n  - 值可以省略 (当 attribute 和绑定的值同名时, requires 3.4+)\n\n- **期望：**`any (带参数) | Object (不带参数)`\n\n- **参数：**`attrOrProp (可选的)`\n\n- **修饰符**\n\n  - `.camel` - 將 kebab-case attribute 名稱轉換為 camelCase。\n  - `.prop` - 強制將綁定設置為 DOM property (3.2+)。\n  - `.attr` - 強制將綁定設置為 DOM attribute (3.2+)。\n\n- **用途**\n\n  当用于绑定 `class` 或 `style` attribute，`v-bind` 支持额外的值类型如数组或对象。详见下方的指南链接。\n\n  在处理绑定时，Vue 默认会利用 `in` 操作符来检查该元素上是否定义了和绑定的 key 同名的 DOM property。如果存在同名的 property，则 Vue 会将它作为 DOM property 赋值，而不是作为 attribute 设置。这个行为在大多数情况都符合期望的绑定值类型，但是你也可以显式用 `.prop` 和 `.attr` 修饰符来强制绑定方式。有时这是必要的，特别是在和[自定义元素](https://zh-hk.vuejs.org/guide/extras/web-components.html#passing-dom-properties)打交道时。\n\n  当用于组件 props 绑定时，所绑定的 props 必须在子组件中已被正确声明。\n\n  当不带参数使用时，可以用于绑定一个包含了多个 attribute 名称-绑定值对的对象。\n\n- **示例**\n\n  ```html\n  <!-- 绑定 attribute -->\n  <img v-bind:src=\"imageSrc\" />\n\n  <!-- 动态 attribute 名 -->\n  <button v-bind:[key]=\"value\"></button>\n\n  <!-- 缩写 -->\n  <img :src=\"imageSrc\" />\n\n  <!-- 缩写形式的动态 attribute 名 (3.4+)，扩展为 :src=\"src\" -->\n  <img :src />\n\n  <!-- 动态 attribute 名的缩写 -->\n  <button :[key]=\"value\"></button>\n\n  <!-- 内联字符串拼接 -->\n  <img :src=\"'/path/to/images/' + fileName\" />\n\n  <!-- class 绑定 -->\n  <div :class=\"{ red: isRed }\"></div>\n  <div :class=\"[classA, classB]\"></div>\n  <div :class=\"[classA, { classB: isB, classC: isC }]\"></div>\n\n  <!-- style 绑定 -->\n  <div :style=\"{ fontSize: size + 'px' }\"></div>\n  <div :style=\"[styleObjectA, styleObjectB]\"></div>\n\n  <!-- 绑定对象形式的 attribute -->\n  <div v-bind=\"{ id: someProp, 'other-attr': otherProp }\"></div>\n\n  <!-- prop 绑定。“prop” 必须在子组件中已声明。 -->\n  <MyComponent :prop=\"someThing\" />\n\n  <!-- 传递子父组件共有的 prop -->\n  <MyComponent v-bind=\"$props\" />\n\n  <!-- XLink -->\n  <svg><a :xlink:special=\"foo\"></a></svg>\n  ```\n\n  `.prop` 修饰符也有专门的缩写，`.`：\n\n  ```html\n  <div :someProperty.prop=\"someObject\"></div>\n\n  <!-- 等同于 -->\n  <div .someProperty=\"someObject\"></div>\n  ```\n\n  当在 DOM 内模板使用 `.camel` 修饰符，可以驼峰化 `v-bind` attribute 的名称，例如 SVG `viewBox` attribute：\n\n  ```html\n  <svg :view-box.camel=\"viewBox\"></svg>\n  ```\n\n  如果使用字符串模板或使用构建步骤预编译模板，则不需要 `.camel`。\n\n- **参考**\n  - [Class 与 Style 绑定](https://zh-hk.vuejs.org/guide/essentials/class-and-style.html)\n  - [组件 -  Prop 传递细节](https://zh-hk.vuejs.org/guide/components/props.html#prop-passing-details)"
 			},
 			"references": "api/built-in-directives.html#v-bind"
 		},
@@ -109387,7 +109888,7 @@ var init_zh_hk$2 = __esmMin((() => {
 			"name": "v-memo",
 			"description": {
 				"kind": "markdown",
-				"value": "- **期望的绑定值类型：**`any[]`\n\n- **详细信息**\n\n  缓存一个模板的子树。在元素和组件上都可以使用。为了实现缓存，该指令需要传入一个固定长度的依赖值数组进行比较。如果数组里的每个值都与最后一次的渲染相同，那么整个子树的更新将被跳过。举例来说：\n\n  ```html\n  <div v-memo=\"[valueA, valueB]\">\n    ...\n  </div>\n  ```\n\n  当组件重新渲染，如果 `valueA` 和 `valueB` 都保持不变，这个 `<div>` 及其子项的所有更新都将被跳过。实际上，甚至虚拟 DOM 的 vnode 创建也将被跳过，因为缓存的子树副本可以被重新使用。\n\n  正确指定缓存数组很重要，否则应该生效的更新可能被跳过。`v-memo` 传入空依赖数组 (`v-memo=\"[]\"`) 将与 `v-once` 效果相同。\n\n  **与 `v-for` 一起使用**\n\n  `v-memo` 仅用于性能至上场景中的微小优化，应该很少需要。最常见的情况可能是有助于渲染海量 `v-for` 列表 (长度超过 1000 的情况)：\n\n  ```html\n  <div v-for=\"item in list\" :key=\"item.id\" v-memo=\"[item.id === selected]\">\n    <p>ID: {{ item.id }} - selected: {{ item.id === selected }}</p>\n    <p>...more child nodes</p>\n  </div>\n  ```\n\n  当组件的 `selected` 状态改变，默认会重新创建大量的 vnode，尽管绝大部分都跟之前是一模一样的。`v-memo` 用在这里本质上是在说“只有当该项的被选中状态改变时才需要更新”。这使得每个选中状态没有变的项能完全重用之前的 vnode 并跳过差异比较。注意这里 memo 依赖数组中并不需要包含 `item.id`，因为 Vue 也会根据 item 的 `:key` 进行判断。\n\n  :::warning 警告\n  当搭配 `v-for` 使用 `v-memo`，确保两者都绑定在同一个元素上。**`v-memo` 不能用在 `v-for` 内部。**\n  :::\n\n  `v-memo` 也能被用于在一些默认优化失败的边际情况下，手动避免子组件出现不需要的更新。但是一样的，开发者需要负责指定正确的依赖数组以免跳过必要的更新。\n\n- **参考**\n  - [v-once](#v-once)"
+				"value": "- Only supported in 3.2+\n\n- **期望的绑定值类型：**`any[]`\n\n- **详细信息**\n\n  缓存一个模板的子树。在元素和组件上都可以使用。为了实现缓存，该指令需要传入一个固定长度的依赖值数组进行比较。如果数组里的每个值都与最后一次的渲染相同，那么整个子树的更新将被跳过。举例来说：\n\n  ```html\n  <div v-memo=\"[valueA, valueB]\">\n    ...\n  </div>\n  ```\n\n  当组件重新渲染，如果 `valueA` 和 `valueB` 都保持不变，这个 `<div>` 及其子项的所有更新都将被跳过。实际上，甚至虚拟 DOM 的 vnode 创建也将被跳过，因为缓存的子树副本可以被重新使用。\n\n  正确指定缓存数组很重要，否则应该生效的更新可能被跳过。`v-memo` 传入空依赖数组 (`v-memo=\"[]\"`) 将与 `v-once` 效果相同。\n\n  **与 `v-for` 一起使用**\n\n  `v-memo` 仅用于性能至上场景中的微小优化，应该很少需要。最常见的情况可能是有助于渲染海量 `v-for` 列表 (长度超过 1000 的情况)：\n\n  ```html\n  <div v-for=\"item in list\" :key=\"item.id\" v-memo=\"[item.id === selected]\">\n    <p>ID: {{ item.id }} - selected: {{ item.id === selected }}</p>\n    <p>...more child nodes</p>\n  </div>\n  ```\n\n  当组件的 `selected` 状态改变，默认会重新创建大量的 vnode，尽管绝大部分都跟之前是一模一样的。`v-memo` 用在这里本质上是在说“只有当该项的被选中状态改变时才需要更新”。这使得每个选中状态没有变的项能完全重用之前的 vnode 并跳过差异比较。注意这里 memo 依赖数组中并不需要包含 `item.id`，因为 Vue 也会根据 item 的 `:key` 进行判断。\n\n  :::warning 警告\n  当搭配 `v-for` 使用 `v-memo`，确保两者都绑定在同一个元素上。**`v-memo` 不能用在 `v-for` 内部。**\n  :::\n\n  `v-memo` 也能被用于在一些默认优化失败的边际情况下，手动避免子组件出现不需要的更新。但是一样的，开发者需要负责指定正确的依赖数组以免跳过必要的更新。\n\n- **参考**\n  - [v-once](#v-once)"
 			},
 			"references": "api/built-in-directives.html#v-memo"
 		},
@@ -109404,7 +109905,7 @@ var init_zh_hk$2 = __esmMin((() => {
 			"name": "key",
 			"description": {
 				"kind": "markdown",
-				"value": "`key` 这个特殊的 attribute 主要作为 Vue 的虚拟 DOM 算法提示，在比较新旧节点列表时用于识别 vnode。\n\n- **预期**：`number | string | symbol`\n\n- **详细信息**\n\n  在没有 key 的情况下，Vue 将使用一种最小化元素移动的算法，并尽可能地就地更新/复用相同类型的元素。如果传了 key，则将根据 key 的变化顺序来重新排列元素，并且将始终移除/销毁 key 已经不存在的元素。\n\n  同一个父元素下的子元素必须具有**唯一的 key**。重复的 key 将会导致渲染异常。\n\n  最常见的用例是与 `v-for` 结合：\n\n  ```html\n  <ul>\n    <li v-for=\"item in items\" :key=\"item.id\">...</li>\n  </ul>\n  ```\n\n  也可以用于强制替换一个元素/组件而不是复用它。当你想这么做时它可能会很有用：\n\n  - 在适当的时候触发组件的生命周期钩子\n  - 触发过渡\n\n  举例来说：\n\n  ```html\n  <transition>\n    <span :key=\"text\">{{ text }}</span>\n  </transition>\n  ```\n\n  当 `text` 变化时，`<span>` 总是会被替换而不是更新，因此 transition 将会被触发。\n\n- **参考**[指南 - 列表渲染 - 通过 `key` 管理状态](https://zh-hk.vuejs.org/guide/essentials/list.html#maintaining-state-with-key)"
+				"value": "The `key` special attribute is primarily used as a hint for Vue's virtual DOM algorithm to identify vnodes when diffing the new list of nodes against the old list.\n\n- **Expects:** `number | string | symbol`\n\n- **Details**\n\n  Without keys, Vue uses an algorithm that minimizes element movement and tries to patch/reuse elements of the same type in-place as much as possible. With keys, it will reorder elements based on the order change of keys, and elements with keys that are no longer present will always be removed / destroyed.\n\n  Children of the same common parent must have **unique keys**. Duplicate keys will cause render errors.\n\n  The most common use case is combined with `v-for`:\n\n  ```html\n  <ul>\n    <li v-for=\"item in items\" :key=\"item.id\">...</li>\n  </ul>\n  ```\n\n  It can also be used to force replacement of an element/component instead of reusing it. This can be useful when you want to:\n\n  - Properly trigger lifecycle hooks of a component\n  - Trigger transitions\n\n  For example:\n\n  ```html\n  <transition>\n    <span :key=\"text\">{{ text }}</span>\n  </transition>\n  ```\n\n  When `text` changes, the `<span>` will always be replaced instead of patched, so a transition will be triggered.\n\n- **See also** [Guide - List Rendering - Maintaining State with `key`](https://zh-hk.vuejs.org/guide/essentials/list.html#maintaining-state-with-key)"
 			},
 			"references": "api/built-in-special-attributes.html#key"
 		},
@@ -109412,7 +109913,7 @@ var init_zh_hk$2 = __esmMin((() => {
 			"name": "ref",
 			"description": {
 				"kind": "markdown",
-				"value": "用于注册[模板引用](https://zh-hk.vuejs.org/guide/essentials/template-refs.html)。\n\n- **预期**：`string | Function`\n\n- **详细信息**\n\n  `ref` 用于注册元素或子组件的引用。\n\n  使用选项式 API，引用将被注册在组件的 `this.$refs` 对象里：\n\n  ```html\n  <!-- 存储为 this.$refs.p -->\n  <p ref=\"p\">hello</p>\n  ```\n\n  使用组合式 API，引用将存储在与名字匹配的 ref 里：\n\n  ```vue\n  <script setup>\n  import { ref } from 'vue'\n\n  const p = ref()\n  <\/script>\n\n  <template>\n    <p ref=\"p\">hello</p>\n  </template>\n  ```\n\n  如果用于普通 DOM 元素，引用将是元素本身；如果用于子组件，引用将是子组件的实例。\n\n  或者 `ref` 可以接收一个函数值，用于对存储引用位置的完全控制：\n\n  ```html\n  <ChildComponent :ref=\"(el) => child = el\" />\n  ```\n\n  关于 ref 注册时机的重要说明：因为 ref 本身是作为渲染函数的结果来创建的，必须等待组件挂载后才能对它进行访问。\n\n  `this.$refs` 也是非响应式的，因此你不应该尝试在模板中使用它来进行数据绑定。\n\n- **参考**\n  - [指南 - 模板引用](https://zh-hk.vuejs.org/guide/essentials/template-refs.html)\n  - [指南 - 为模板引用标注类型](https://zh-hk.vuejs.org/guide/typescript/composition-api.html#typing-template-refs) <sup class=\"vt-badge ts\" />\n  - [指南 - 为组件模板引用标注类型](https://zh-hk.vuejs.org/guide/typescript/composition-api.html#typing-component-template-refs) <sup class=\"vt-badge ts\" />"
+				"value": "Denotes a [template ref](https://zh-hk.vuejs.org/guide/essentials/template-refs.html).\n\n- **Expects:** `string | Function`\n\n- **Details**\n\n  `ref` is used to register a reference to an element or a child component.\n\n  In Options API, the reference will be registered under the component's `this.$refs` object:\n\n  ```html\n  <!-- stored as this.$refs.p -->\n  <p ref=\"p\">hello</p>\n  ```\n\n  In Composition API, the reference will be stored in a ref with matching name:\n\n  ```vue\n  <script setup>\n  import { useTemplateRef } from 'vue'\n\n  const pRef = useTemplateRef('p')\n  <\/script>\n\n  <template>\n    <p ref=\"p\">hello</p>\n  </template>\n  ```\n\n  If used on a plain DOM element, the reference will be that element; if used on a child component, the reference will be the child component instance.\n\n  Alternatively `ref` can accept a function value which provides full control over where to store the reference:\n\n  ```html\n  <ChildComponent :ref=\"(el) => child = el\" />\n  ```\n\n  An important note about the ref registration timing: because the refs themselves are created as a result of the render function, you must wait until the component is mounted before accessing them.\n\n  `this.$refs` is also non-reactive, therefore you should not attempt to use it in templates for data-binding.\n\n- **See also**\n  - [Guide - Template Refs](https://zh-hk.vuejs.org/guide/essentials/template-refs.html)\n  - [Guide - Typing Template Refs](https://zh-hk.vuejs.org/guide/typescript/composition-api.html#typing-template-refs) <sup class=\"vt-badge ts\" />\n  - [Guide - Typing Component Template Refs](https://zh-hk.vuejs.org/guide/typescript/composition-api.html#typing-component-template-refs) <sup class=\"vt-badge ts\" />"
 			},
 			"references": "api/built-in-special-attributes.html#ref"
 		},
@@ -109420,9 +109921,17 @@ var init_zh_hk$2 = __esmMin((() => {
 			"name": "is",
 			"description": {
 				"kind": "markdown",
-				"value": "用于绑定[动态组件](https://zh-hk.vuejs.org/guide/essentials/component-basics.html#dynamic-components)。\n\n- **预期**：`string | Component`\n\n- **用于原生元素** <sup class=\"vt-badge\">3.1+</sup>\n\n  当 `is` attribute 用于原生 HTML 元素时，它将被当作 [Customized built-in element](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-customized-builtin-example)，其为原生 web 平台的特性。\n\n  但是，在这种用例中，你可能需要 Vue 用其组件来替换原生元素，如 [DOM 内模板解析注意事项](https://zh-hk.vuejs.org/guide/essentials/component-basics.html#in-dom-template-parsing-caveats)所述。你可以在 `is` attribute 的值中加上 `vue:` 前缀，这样 Vue 就会把该元素渲染为 Vue 组件：\n\n  ```html\n  <table>\n    <tr is=\"vue:my-row-component\"></tr>\n  </table>\n  ```\n\n- **参考**\n\n  - [内置特殊元素 - `<component>`](https://zh-hk.vuejs.org/api/built-in-special-elements.html#component)\n  - [动态组件](https://zh-hk.vuejs.org/guide/essentials/component-basics.html#dynamic-components)"
+				"value": "Used for binding [dynamic components](https://zh-hk.vuejs.org/guide/essentials/component-basics.html#dynamic-components).\n\n- **Expects:** `string | Component`\n\n- **Usage on native elements**\n \n  - Only supported in 3.1+\n\n  When the `is` attribute is used on a native HTML element, it will be interpreted as a [Customized built-in element](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-customized-builtin-example), which is a native web platform feature.\n\n  There is, however, a use case where you may need Vue to replace a native element with a Vue component, as explained in [in-DOM Template Parsing Caveats](https://zh-hk.vuejs.org/guide/essentials/component-basics.html#in-dom-template-parsing-caveats). You can prefix the value of the `is` attribute with `vue:` so that Vue will render the element as a Vue component instead:\n\n  ```html\n  <table>\n    <tr is=\"vue:my-row-component\"></tr>\n  </table>\n  ```\n\n- **See also**\n\n  - [Built-in Special Element - `<component>`](https://zh-hk.vuejs.org/api/built-in-special-elements.html#component)\n  - [Dynamic Components](https://zh-hk.vuejs.org/guide/essentials/component-basics.html#dynamic-components)"
 			},
 			"references": "api/built-in-special-attributes.html#is"
+		},
+		{
+			"name": "data-allow-mismatch",
+			"description": {
+				"kind": "markdown",
+				"value": "一個特殊的 attribute，可用於抑制 [激活不匹配](https://zh-hk.vuejs.org/guide/scaling-up/ssr.html#hydration-mismatch) 警告。\n\n- **示例**\n\n  ```html\n  <div data-allow-mismatch=\"text\">{{ data.toLocaleString() }}</div>\n  ```\n\n  該值可以將允許的不匹配限制在特定的類型。允許的值有：\n\n  - `text`\n  - `children`（僅允許直接子節點存在不匹配）\n  - `class`\n  - `style`\n  - `attribute`\n\n  如果沒有提供值，所有類型的不匹配都會被允許。\n"
+			},
+			"references": "api/ssr.html#data-allow-mismatch"
 		}
 	];
 	zh_hk_default$2 = {
@@ -109961,7 +110470,7 @@ var init_ru$2 = __esmMin((() => {
 			"name": "Teleport",
 			"description": {
 				"kind": "markdown",
-				"value": "\nПеремещает содержимое своего слота в другую часть DOM.\n\n- **Входные параметры**\n\n  ```ts\n  interface TeleportProps {\n    /**\n     * Обязательный. Задаёт целевой контейнер.\n     * Может быть селектором или непосредственно элементом.\n     */\n    to: string | HTMLElement\n    /**\n     * Если `true`, содержимое останется на своем первоначальном\n     * месте, вместо перемещения в целевой контейнер.\n     * Может изменяться динамически.\n     */\n    disabled?: boolean\n    /**\n     * Если `true`, Teleport отложит разрешение целевого контейнера\n     * до тех пор, пока остальные части приложения не будут смонтированы. (3.5+)\n     */\n    defer?: boolean\n  }\n  ```\n\n- **Пример**\n\n  Указание целевого контейнера:\n\n  ```html\n  <Teleport to=\"#some-id\" />\n  <Teleport to=\".some-class\" />\n  <Teleport to=\"[data-teleport]\" />\n  ```\n\n  Перемещение по условию:\n\n  ```html\n  <Teleport to=\"#popup\" :disabled=\"displayVideoInline\">\n    <video src=\"./my-movie.mp4\">\n  </Teleport>\n  ```\n\n  Defer target resolution <sup class=\"vt-badge\" data-text=\"3.5+\" />:\n\n  ```html\n  <Teleport defer to=\"#late-div\">...</Teleport>\n\n  <!-- somewhere later in the template -->\n  <div id=\"late-div\"></div>\n  ```\n\n- **См. также** [Руководство — Teleport](https://ru.vuejs.org/guide/built-ins/teleport.html)\n"
+				"value": "\nПеремещает содержимое своего слота в другую часть DOM.\n\n- **Входные параметры**\n\n  ```ts\n  interface TeleportProps {\n    /**\n     * Обязательный. Задаёт целевой контейнер.\n     * Может быть селектором или непосредственно элементом.\n     */\n    to: string | HTMLElement\n    /**\n     * Если `true`, содержимое останется на своем первоначальном\n     * месте, вместо перемещения в целевой контейнер.\n     * Может изменяться динамически.\n     */\n    disabled?: boolean\n    /**\n     * Если `true`, Teleport отложит разрешение целевого контейнера\n     * до тех пор, пока остальные части приложения не будут смонтированы. (3.5+)\n     */\n    defer?: boolean\n  }\n  ```\n\n- **Пример**\n\n  Указание целевого контейнера:\n\n  ```html\n  <Teleport to=\"#some-id\" />\n  <Teleport to=\".some-class\" />\n  <Teleport to=\"[data-teleport]\" />\n  ```\n\n  Перемещение по условию:\n\n  ```html\n  <Teleport to=\"#popup\" :disabled=\"displayVideoInline\">\n    <video src=\"./my-movie.mp4\">\n  </Teleport>\n  ```\n\n  Использование с `defer` <sup class=\"vt-badge\" data-text=\"3.5+\" />:\n  Атрибут `defer` говорит фреймворку не пытаться найти DOM-узел `#late-div` прямо в момент рендера самого `<Teleport>`.\n  Поиск откладывается до того момента, пока не отрисуется весь текущий шаблон.\n  Без этого атрибута код бы сломался, так как в момент монтирования Телепорта целевого `div`,\n  находящегося ниже по коду, еще не существует в DOM-дереве.\n\n  ```html\n  <Teleport defer to=\"#late-div\">...</Teleport>\n\n  <!-- где-то дальше в шаблоне -->\n  <div id=\"late-div\"></div>\n  ```\n\n- **См. также** [Руководство — Teleport](https://ru.vuejs.org/guide/built-ins/teleport.html)\n"
 			},
 			"attributes": [],
 			"references": "api/built-in-components.html#teleport"
@@ -110016,7 +110525,7 @@ var init_ru$2 = __esmMin((() => {
 			"name": "v-html",
 			"description": {
 				"kind": "markdown",
-				"value": "Обновление свойства [innerHTML](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) элемента.\n\n- **Ожидает:** `string`\n\n- **Подробности**\n\n  Содержимое `v-html` вставляется как обычный HTML - синтаксис шаблонов Vue не обрабатывается. Если вы пытаетесь составить шаблоны с помощью `v-html`, попробуйте переосмыслить решение, используя вместо этого компоненты.\n\n  :::warning Примечание о безопасности\n  Динамический рендеринг произвольного HTML на вашем сайте может быть очень опасен, поскольку легко может привести к [XSS-атакам](https://en.wikipedia.org/wiki/Cross-site_scripting). Используйте `v-html` только для доверенного содержимого и **никогда** для содержимого, предоставляемого пользователем.\n  :::\n\n  В [однофайловых компонентах](https://ru.vuejs.org/guide/scaling-up/sfc.html) стили `scoped` не будут применяться к содержимому внутри `v-html`, поскольку этот HTML не обрабатывается компилятором шаблонов Vue. Если вы хотите использовать на содержимом `v-html` скопированный CSS, то вместо этого можно использовать [CSS модули](./sfc-css-features.html#css-modules) или дополнительный глобальный элемент `<style>` с ручной стратегией области применения, например BEM.\n\n\n- **Пример**\n\n  ```html\n  <div v-html=\"html\"></div>\n  ```\n\n- **См. также** [Синтаксис шаблонов - Сырой HTML](https://ru.vuejs.org/guide/essentials/template-syntax.html#raw-html)"
+				"value": "Обновление свойства [innerHTML](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) элемента.\n\n- **Ожидает:** `string`\n\n- **Подробности**\n\n  Содержимое `v-html` вставляется как обычный HTML — синтаксис шаблонов Vue не обрабатывается. Если вы пытаетесь составить шаблоны с помощью `v-html`, попробуйте переосмыслить решение, используя вместо этого компоненты.\n\n  :::warning Примечание о безопасности\n  Динамический рендеринг произвольного HTML на вашем сайте может быть очень опасен, поскольку легко может привести к [XSS-атакам](https://en.wikipedia.org/wiki/Cross-site_scripting). Используйте `v-html` только для доверенного содержимого и **никогда** для содержимого, предоставляемого пользователем.\n  :::\n\n  В [однофайловых компонентах](https://ru.vuejs.org/guide/scaling-up/sfc.html) стили `scoped` не будут применяться к содержимому внутри `v-html`, поскольку этот HTML не обрабатывается компилятором шаблонов Vue. Если вы хотите использовать на содержимом `v-html` скопированный CSS, то вместо этого можно использовать [CSS модули](./sfc-css-features.html#css-modules) или дополнительный глобальный элемент `<style>` с ручной стратегией области применения, например BEM.\n\n\n- **Пример**\n\n  ```html\n  <div v-html=\"html\"></div>\n  ```\n\n- **См. также** [Синтаксис шаблонов - Сырой HTML](https://ru.vuejs.org/guide/essentials/template-syntax.html#raw-html)"
 			},
 			"references": "api/built-in-directives.html#v-html"
 		},
@@ -110065,7 +110574,7 @@ var init_ru$2 = __esmMin((() => {
 			"name": "v-on",
 			"description": {
 				"kind": "markdown",
-				"value": "Прикрепление к элементу обработчика событий.\n\n- **Сокращённая запись:** `@`\n\n- **Ожидает:** `Function | Inline Statement | Object (без аргументов)`\n\n- **Аргумент:** `event` (необязательно, если используется синтаксис Object)\n\n- **Модификаторы**\n\n  - `.stop` - вызывает `event.stopPropagation()`.\n  - `.prevent` - вызывает `event.preventDefault()`.\n  - `.capture` - добавить обработчик событий в capture режиме.\n  - `.self` - запускать обработчик только в том случае, если событие было отправлено именно от этого элемента.\n  - `.{keyAlias}` - запускать обработчик только по определенным клавишам.\n  - `.once` - обработчик сработает только один раз.\n  - `.left` - обработчик срабатывания только для событий левой кнопки мыши.\n  - `.right` - обработчик срабатывания только для событий правой кнопки мыши.\n  - `.middle` - обработчик срабатывания только для событий средней кнопки мыши.\n  - `.passive` - добавляет обработчик DOM события с параметром `{ passive: true }`.\n\n- **Подробности**\n\n  Тип события обозначается аргументом. Выражение может быть именем метода, строковым оператором или опущено, если присутствуют модификаторы.\n\n  При использовании на обычном элементе он прослушивает только [**нативные DOM события**](https://developer.mozilla.org/en-US/docs/Web/Events). При использовании на компоненте он прослушивает **пользовательские события**, генерируемые в дочернем компоненте.\n\n  При прослушивании нативных DOM событий метод получает нативное событие в качестве единственного аргумента. При использовании inline-выражения, выражение имеет доступ к специальному свойству `$event`: `v-on:click=\"handle('ok', $event)\"`.\n\n  `v-on` также поддерживает привязку к объекту пар событие/слушатель без аргумента. Обратите внимание, что при использовании синтаксиса объекта он не поддерживает никаких модификаторов.\n\n- **Пример**\n\n  ```html\n  <!-- метод в качестве обработчика  -->\n  <button v-on:click=\"doThis\"></button>\n\n  <!-- динамическое событие -->\n  <button v-on:[event]=\"doThis\"></button>\n\n  <!-- inline-выражение -->\n  <button v-on:click=\"doThat('hello', $event)\"></button>\n\n  <!-- сокращённая запись -->\n  <button @click=\"doThis\"></button>\n\n  <!-- окращённая запись динамического события -->\n  <button @[event]=\"doThis\"></button>\n\n  <!-- stop propagation -->\n  <button @click.stop=\"doThis\"></button>\n\n  <!-- prevent default -->\n  <button @click.prevent=\"doThis\"></button>\n\n  <!-- prevent default без выражения -->\n  <form @submit.prevent></form>\n\n  <!-- цепочка из модификаторов -->\n  <button @click.stop.prevent=\"doThis\"></button>\n\n  <!-- модификатор клавиши с использованием keyAlias -->\n  <input @keyup.enter=\"onEnter\" />\n\n  <!-- обработчик события будет вызван не больше одного раза -->\n  <button v-on:click.once=\"doThis\"></button>\n\n  <!-- объектный синтаксис -->\n  <button v-on=\"{ mousedown: doThis, mouseup: doThat }\"></button>\n  ```\n\n  Отслеживание пользовательских событий на дочернем компоненте (обработчик вызывается, когда в дочернем компоненте будет сгенерировано событие \"my-event\"):\n\n  ```html\n  <MyComponent @my-event=\"handleThis\" />\n\n  <!-- inline statement -->\n  <MyComponent @my-event=\"handleThis(123, $event)\" />\n  ```\n\n- **См. также**\n  - [Обработка событий](https://ru.vuejs.org/guide/essentials/event-handling.html)\n  - [Компоненты - Прослушивание событий](https://ru.vuejs.org/guide/essentials/component-basics.html#listening-to-events)"
+				"value": "Прикрепление к элементу обработчика событий.\n\n- **Сокращённая запись:** `@`\n\n- **Ожидает:** `Function | Inline Statement | Object (без аргументов)`\n\n- **Аргумент:** `event` (необязательно, если используется синтаксис Object)\n\n- **Модификаторы**\n\n  - `.stop` — вызывает `event.stopPropagation()`.\n  - `.prevent` — вызывает `event.preventDefault()`.\n  - `.capture` — добавить обработчик событий в capture режиме.\n  - `.self` — запускать обработчик только в том случае, если событие было отправлено именно от этого элемента.\n  - `.{keyAlias}` — запускать обработчик только по определенным клавишам.\n  - `.once` — обработчик сработает только один раз.\n  - `.left` — обработчик срабатывания только для событий левой кнопки мыши.\n  - `.right` — обработчик срабатывания только для событий правой кнопки мыши.\n  - `.middle` — обработчик срабатывания только для событий средней кнопки мыши.\n  - `.passive` — добавляет обработчик DOM события с параметром `{ passive: true }`.\n\n- **Подробности**\n\n  Тип события обозначается аргументом. Выражение может быть именем метода, строковым оператором или опущено, если присутствуют модификаторы.\n\n  При использовании на обычном элементе он прослушивает только [**нативные DOM события**](https://developer.mozilla.org/en-US/docs/Web/Events). При использовании на компоненте он прослушивает **пользовательские события**, генерируемые в дочернем компоненте.\n\n  При прослушивании нативных DOM событий метод получает нативное событие в качестве единственного аргумента. При использовании inline-выражения, выражение имеет доступ к специальному свойству `$event`: `v-on:click=\"handle('ok', $event)\"`.\n\n  `v-on` также поддерживает привязку к объекту пар событие/слушатель без аргумента. Обратите внимание, что при использовании синтаксиса объекта он не поддерживает никаких модификаторов.\n\n- **Пример**\n\n  ```html\n  <!-- метод в качестве обработчика  -->\n  <button v-on:click=\"doThis\"></button>\n\n  <!-- динамическое событие -->\n  <button v-on:[event]=\"doThis\"></button>\n\n  <!-- inline-выражение -->\n  <button v-on:click=\"doThat('hello', $event)\"></button>\n\n  <!-- сокращённая запись -->\n  <button @click=\"doThis\"></button>\n\n  <!-- окращённая запись динамического события -->\n  <button @[event]=\"doThis\"></button>\n\n  <!-- stop propagation -->\n  <button @click.stop=\"doThis\"></button>\n\n  <!-- prevent default -->\n  <button @click.prevent=\"doThis\"></button>\n\n  <!-- prevent default без выражения -->\n  <form @submit.prevent></form>\n\n  <!-- цепочка из модификаторов -->\n  <button @click.stop.prevent=\"doThis\"></button>\n\n  <!-- модификатор клавиши с использованием keyAlias -->\n  <input @keyup.enter=\"onEnter\" />\n\n  <!-- обработчик события будет вызван не больше одного раза -->\n  <button v-on:click.once=\"doThis\"></button>\n\n  <!-- объектный синтаксис -->\n  <button v-on=\"{ mousedown: doThis, mouseup: doThat }\"></button>\n  ```\n\n  Отслеживание пользовательских событий на дочернем компоненте (обработчик вызывается, когда в дочернем компоненте будет сгенерировано событие \"my-event\"):\n\n  ```html\n  <MyComponent @my-event=\"handleThis\" />\n\n  <!-- inline statement -->\n  <MyComponent @my-event=\"handleThis(123, $event)\" />\n  ```\n\n- **См. также**\n  - [Обработка событий](https://ru.vuejs.org/guide/essentials/event-handling.html)\n  - [Компоненты - Прослушивание событий](https://ru.vuejs.org/guide/essentials/component-basics.html#listening-to-events)"
 			},
 			"references": "api/built-in-directives.html#v-on"
 		},
@@ -110073,7 +110582,7 @@ var init_ru$2 = __esmMin((() => {
 			"name": "v-bind",
 			"description": {
 				"kind": "markdown",
-				"value": "Динамически привязывает один или несколько атрибутов или входных параметров компонента к выражению.\n\n- **Сокращённая запись**\n  - `:` или `.` (при использовании модификатора `.prop`)\n  - Пропуск значения (когда атрибут и связанное значение имеют одинаковое имя) requires 3.4+\n\n- **Ожидает:** `any (если указан аргумент) | Object (без аргумента)`\n\n- **Аргумент:** `attrOrProp (опционально)`\n\n- **Модификаторы**\n\n  - `.camel` - преобразование имён атрибутов из kebab-case в camelCase.\n  - `.prop` - принудительно установить привязку в качестве свойства DOM (3.2+).\n  - `.attr` - принудительно установить привязку в качестве атрибута DOM (3.2+).\n\n- **Применение**\n\n  При использовании для привязки атрибутов `class` или `style`, `v-bind` поддерживает дополнительные типы значений, такие как Array или Objects. Более подробная информация приведена в разделе руководства по ссылкам ниже.\n\n  Устанавливая привязку к элементу, Vue по умолчанию проверяет, имеет ли элемент ключ, определенный как свойство, используя проверку оператора `in`. Если свойство определено, то Vue установит значение как свойство DOM, а не как атрибут. В большинстве случаев это должно работать, но вы можете переопределить это поведение, явно используя модификаторы `.prop` или `.attr`. Иногда это необходимо, особенно при [работе с пользовательскими элементами](https://ru.vuejs.org/guide/extras/web-components.html#passing-dom-properties).\n\n  При привязке входных параметров к дочернему компоненту необходимо также объявлять их внутри него.\n\n  При использовании без аргумента можно привязать объект из пар имя-значение.\n\n- **Пример**\n\n  ```html\n  <!-- привязка атрибута -->\n  <img v-bind:src=\"imageSrc\" />\n\n  <!-- динамическое название атрибута -->\n  <button v-bind:[key]=\"value\"></button>\n\n  <!-- сокращённая запись -->\n  <img :src=\"imageSrc\" />\n\n  <!-- сокращение при одинаковом названии (3.4+), расширяется до :src=\"src\" -->\n  <img :src />\n\n  <!-- сокращённая запись при динамическом названии атрибута -->\n  <button :[key]=\"value\"></button>\n\n  <!-- инлайн-выражение с конкатенацией строк -->\n  <img :src=\"'/path/to/images/' + fileName\" />\n\n  <!-- привязка классов -->\n  <div :class=\"{ red: isRed }\"></div>\n  <div :class=\"[classA, classB]\"></div>\n  <div :class=\"[classA, { classB: isB, classC: isC }]\"></div>\n\n  <!-- привязка стилей -->\n  <div :style=\"{ fontSize: size + 'px' }\"></div>\n  <div :style=\"[styleObjectA, styleObjectB]\"></div>\n\n  <!-- привязка объекта с атрибутами -->\n  <div v-bind=\"{ id: someProp, 'other-attr': otherProp }\"></div>\n\n  <!-- привязка входного параметра. \"prop\" должен быть объявлен в my-component. -->\n  <MyComponent :prop=\"someThing\" />\n\n  <!-- передача всех входных параметров родительского компонента в дочерний -->\n  <MyComponent v-bind=\"$props\" />\n\n  <!-- XLink -->\n  <svg><a :xlink:special=\"foo\"></a></svg>\n  ```\n\n  Модификатор `.prop` также имеет сокращённую запись `.`:\n\n  ```html\n  <div :someProperty.prop=\"someObject\"></div>\n\n  <!-- эквивалент -->\n  <div .someProperty=\"someObject\"></div>\n  ```\n\n  Модификатор `.camel` позволяет приводить имя атрибута `v-bind` в camelCase при использовании DOM-шаблонов, например для атрибута SVG `viewBox`:\n\n  ```html\n  <svg :view-box.camel=\"viewBox\"></svg>\n  ```\n\n  Модификатор `.camel` не нужен, если вы используете строковые шаблоны или предварительно компилируете шаблон на этапе сборки.\n\n- **См. также**\n  - [Работа с классами и стилями](https://ru.vuejs.org/guide/essentials/class-and-style.html)\n  - [Компоненты - Детали передачи входных параметров](https://ru.vuejs.org/guide/components/props.html#prop-passing-details)"
+				"value": "Динамически привязывает один или несколько атрибутов или входных параметров компонента к выражению.\n\n- **Сокращённая запись**\n  - `:` или `.` (при использовании модификатора `.prop`)\n  - Пропуск значения (когда атрибут и связанное значение имеют одинаковое имя) requires 3.4+\n\n- **Ожидает:** `any (если указан аргумент) | Object (без аргумента)`\n\n- **Аргумент:** `attrOrProp (опционально)`\n\n- **Модификаторы**\n\n  - `.camel` — преобразование имён атрибутов из kebab-case в camelCase.\n  - `.prop` — принудительно установить привязку в качестве свойства DOM (3.2+).\n  - `.attr` — принудительно установить привязку в качестве атрибута DOM (3.2+).\n\n- **Применение**\n\n  При использовании для привязки атрибутов `class` или `style`, `v-bind` поддерживает дополнительные типы значений, такие как Array или Objects. Более подробная информация приведена в разделе руководства по ссылкам ниже.\n\n  Устанавливая привязку к элементу, Vue по умолчанию проверяет, имеет ли элемент ключ, определенный как свойство, используя проверку оператора `in`. Если свойство определено, то Vue установит значение как свойство DOM, а не как атрибут. В большинстве случаев это должно работать, но вы можете переопределить это поведение, явно используя модификаторы `.prop` или `.attr`. Иногда это необходимо, особенно при [работе с пользовательскими элементами](https://ru.vuejs.org/guide/extras/web-components.html#passing-dom-properties).\n\n  При привязке входных параметров к дочернему компоненту необходимо также объявлять их внутри него.\n\n  При использовании без аргумента можно привязать объект из пар имя-значение.\n\n- **Пример**\n\n  ```html\n  <!-- привязка атрибута -->\n  <img v-bind:src=\"imageSrc\" />\n\n  <!-- динамическое название атрибута -->\n  <button v-bind:[key]=\"value\"></button>\n\n  <!-- сокращённая запись -->\n  <img :src=\"imageSrc\" />\n\n  <!-- сокращение при одинаковом названии (3.4+), расширяется до :src=\"src\" -->\n  <img :src />\n\n  <!-- сокращённая запись при динамическом названии атрибута -->\n  <button :[key]=\"value\"></button>\n\n  <!-- инлайн-выражение с конкатенацией строк -->\n  <img :src=\"'/path/to/images/' + fileName\" />\n\n  <!-- привязка классов -->\n  <div :class=\"{ red: isRed }\"></div>\n  <div :class=\"[classA, classB]\"></div>\n  <div :class=\"[classA, { classB: isB, classC: isC }]\"></div>\n\n  <!-- привязка стилей -->\n  <div :style=\"{ fontSize: size + 'px' }\"></div>\n  <div :style=\"[styleObjectA, styleObjectB]\"></div>\n\n  <!-- привязка объекта с атрибутами -->\n  <div v-bind=\"{ id: someProp, 'other-attr': otherProp }\"></div>\n\n  <!-- привязка входного параметра. \"prop\" должен быть объявлен в my-component. -->\n  <MyComponent :prop=\"someThing\" />\n\n  <!-- передача всех входных параметров родительского компонента в дочерний -->\n  <MyComponent v-bind=\"$props\" />\n\n  <!-- XLink -->\n  <svg><a :xlink:special=\"foo\"></a></svg>\n  ```\n\n  Модификатор `.prop` также имеет сокращённую запись `.`:\n\n  ```html\n  <div :someProperty.prop=\"someObject\"></div>\n\n  <!-- эквивалент -->\n  <div .someProperty=\"someObject\"></div>\n  ```\n\n  Модификатор `.camel` позволяет приводить имя атрибута `v-bind` в camelCase при использовании DOM-шаблонов, например для атрибута SVG `viewBox`:\n\n  ```html\n  <svg :view-box.camel=\"viewBox\"></svg>\n  ```\n\n  Модификатор `.camel` не нужен, если вы используете строковые шаблоны или предварительно компилируете шаблон на этапе сборки.\n\n- **См. также**\n  - [Работа с классами и стилями](https://ru.vuejs.org/guide/essentials/class-and-style.html)\n  - [Компоненты - Детали передачи входных параметров](https://ru.vuejs.org/guide/components/props.html#prop-passing-details)"
 			},
 			"references": "api/built-in-directives.html#v-bind"
 		},
@@ -110081,7 +110590,7 @@ var init_ru$2 = __esmMin((() => {
 			"name": "v-model",
 			"description": {
 				"kind": "markdown",
-				"value": "Создает двустороннее связывание с элементом ввода формы или с компонентом.\n\n- **Ожидает:** варьируется в зависимости от элемента формы или работы компонента\n\n- **Использование ограничено**\n\n  - `<input>`\n  - `<select>`\n  - `<textarea>`\n  - компоненты\n\n- **Модификаторы**\n\n  - [`.lazy`](https://ru.vuejs.org/guide/essentials/forms.html#lazy) - отслеживание события `change` вместо `input`\n  - [`.number`](https://ru.vuejs.org/guide/essentials/forms.html#number) - приведение корректной строки со значением к числу\n  - [`.trim`](https://ru.vuejs.org/guide/essentials/forms.html#trim) - удаление пробелов в начале и в конце строки\n\n- **См. также**\n\n  - [Работа с формами](https://ru.vuejs.org/guide/essentials/forms.html)\n  - [События компонентов - Использование вместе с `v-model`](https://ru.vuejs.org/guide/components/events.html#usage-with-v-model)"
+				"value": "Создает двустороннее связывание с элементом ввода формы или с компонентом.\n\n- **Ожидает:** варьируется в зависимости от элемента формы или работы компонента\n\n- **Использование ограничено**\n\n  - `<input>`\n  - `<select>`\n  - `<textarea>`\n  - компоненты\n\n- **Модификаторы**\n\n  - [`.lazy`](https://ru.vuejs.org/guide/essentials/forms.html#lazy) — отслеживание события `change` вместо `input`\n  - [`.number`](https://ru.vuejs.org/guide/essentials/forms.html#number) — приведение корректной строки со значением к числу\n  - [`.trim`](https://ru.vuejs.org/guide/essentials/forms.html#trim) — удаление пробелов в начале и в конце строки\n\n- **См. также**\n\n  - [Работа с формами](https://ru.vuejs.org/guide/essentials/forms.html)\n  - [События компонентов - Использование вместе с `v-model`](https://ru.vuejs.org/guide/components/events.html#usage-with-v-model)"
 			},
 			"references": "api/built-in-directives.html#v-model"
 		},
@@ -110089,7 +110598,7 @@ var init_ru$2 = __esmMin((() => {
 			"name": "v-slot",
 			"description": {
 				"kind": "markdown",
-				"value": "Обозначение именованного слота или слота, который получает входные параметры.\n\n- **Сокращённая запись:** `#`\n\n- **Ожидает:** JavaScript-выражение, допустимое в позиции аргумента функции, включая поддержку деструктуризации. Необязательный - нужен только в том случае, если ожидается передача входного параметра в слот.\n\n- **Аргумент:** название слота (опционально, по умолчанию `default`)\n\n- **Использование ограничено:**\n\n  - `<template>`\n  - [компонентами](https://ru.vuejs.org/guide/components/slots.html#scoped-slots) (для единственного слота по умолчанию с входными параметрами)\n\n\n- **Пример**\n\n  ```html\n  <!-- Именованный слот -->\n  <BaseLayout>\n    <template v-slot:header>\n     Содержимое для заголовка\n    </template>\n\n    <template v-slot:default>\n      Содержимое для слота по умолчанию\n    </template>\n\n    <template v-slot:footer>\n      Содержимое для подвала\n    </template>\n  </BaseLayout>\n\n  <!-- Именованный слот с входными параметрами -->\n  <InfiniteScroll>\n    <template v-slot:item=\"slotProps\">\n      <div class=\"item\">\n        {{ slotProps.item.text }}\n      </div>\n    </template>\n  </InfiniteScroll>\n\n  <!-- Слот по умолчанию с входными параметрами и деструктуризацией -->\n  <Mouse v-slot=\"{ x, y }\">\n    Mouse position: {{ x }}, {{ y }}\n  </Mouse>\n  ```\n\n- **См. также**\n  - [Компоненты - Слоты](https://ru.vuejs.org/guide/components/slots.html)"
+				"value": "Обозначение именованного слота или слота, который получает входные параметры.\n\n- **Сокращённая запись:** `#`\n\n- **Ожидает:** JavaScript-выражение, допустимое в позиции аргумента функции, включая поддержку деструктуризации. Необязательный — нужен только в том случае, если ожидается передача входного параметра в слот.\n\n- **Аргумент:** название слота (опционально, по умолчанию `default`)\n\n- **Использование ограничено:**\n\n  - `<template>`\n  - [компонентами](https://ru.vuejs.org/guide/components/slots.html#scoped-slots) (для единственного слота по умолчанию с входными параметрами)\n\n\n- **Пример**\n\n  ```html\n  <!-- Именованный слот -->\n  <BaseLayout>\n    <template v-slot:header>\n     Содержимое для заголовка\n    </template>\n\n    <template v-slot:default>\n      Содержимое для слота по умолчанию\n    </template>\n\n    <template v-slot:footer>\n      Содержимое для подвала\n    </template>\n  </BaseLayout>\n\n  <!-- Именованный слот с входными параметрами -->\n  <InfiniteScroll>\n    <template v-slot:item=\"slotProps\">\n      <div class=\"item\">\n        {{ slotProps.item.text }}\n      </div>\n    </template>\n  </InfiniteScroll>\n\n  <!-- Слот по умолчанию с входными параметрами и деструктуризацией -->\n  <Mouse v-slot=\"{ x, y }\">\n    Mouse position: {{ x }}, {{ y }}\n  </Mouse>\n  ```\n\n- **См. также**\n  - [Компоненты - Слоты](https://ru.vuejs.org/guide/components/slots.html)"
 			},
 			"references": "api/built-in-directives.html#v-slot"
 		},
@@ -110098,7 +110607,7 @@ var init_ru$2 = __esmMin((() => {
 			"valueSet": "v",
 			"description": {
 				"kind": "markdown",
-				"value": "Пропускает компиляцию для элемента и всех его потомков.\n\n- **Не ожидает выражения**\n\n- **Подробности**\n\n  Внутри элемента с `v-pre` весь синтаксис шаблона Vue будет сохранен и отображён как есть. Наиболее распространённый вариант использования этого элемента - отображение тегов фигурных скобок.\n\n- **Пример**\n\n  ```html\n  <span v-pre>{{ это не будет скомпилировано  }}</span>\n  ```"
+				"value": "Пропускает компиляцию для элемента и всех его потомков.\n\n- **Не ожидает выражения**\n\n- **Подробности**\n\n  Внутри элемента с `v-pre` весь синтаксис шаблона Vue будет сохранен и отображён как есть. Наиболее распространённый вариант использования этого элемента — отображение тегов фигурных скобок.\n\n- **Пример**\n\n  ```html\n  <span v-pre>{{ это не будет скомпилировано  }}</span>\n  ```"
 			},
 			"references": "api/built-in-directives.html#v-pre"
 		},
@@ -110786,21 +111295,21 @@ var init_ko$1 = __esmMin((() => {
 				"name": "src",
 				"description": {
 					"kind": "markdown",
-					"value": "`*.vue` 컴포넌트를 여러 파일로 분리하고 싶다면, `src` 속성을 사용하여 언어 블록에 외부 파일을 임포트할 수 있습니다:\n\n```vue\n<template src=\"./template.html\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"><\/script>\n```\n\n`src` 임포트는 webpack 모듈 요청과 동일한 경로 해상 규칙을 따르므로 주의하세요:\n\n- 상대 경로는 `./`로 시작해야 합니다.\n- npm 의존성에서 리소스를 임포트할 수 있습니다:\n\n```vue\n<!-- 설치된 \"todomvc-app-css\" npm 패키지에서 파일 임포트 -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\n`src` 임포트는 커스텀 블록에도 사용할 수 있습니다. 예:\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```\n\n:::warning 참고\n`src`에서 별칭을 사용할 때는 `~`로 시작하지 마세요. 그 뒤의 모든 것은 모듈 요청으로 해석됩니다. 즉, node 모듈 내부의 에셋을 참조할 수 있습니다:\n```vue\n<img src=\"~some-npm-package/foo.png\">\n```\n:::"
+					"value": "`*.vue` 컴포넌트를 여러 파일로 분리하고 싶다면, `src` 속성을 사용하여 언어 블록에 외부 파일을 임포트할 수 있습니다:\n\n```vue\n<template src=\"./template.html\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"><\/script>\n```\n\n`src` 임포트는 webpack 모듈 요청과 동일한 경로 해석 규칙을 따르므로 주의하세요:\n\n- 상대 경로는 `./`로 시작해야 합니다.\n- npm 의존성에서 리소스를 임포트할 수 있습니다:\n\n```vue\n<!-- 설치된 \"todomvc-app-css\" npm 패키지에서 파일 임포트 -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\n`src` 임포트는 커스텀 블록에도 사용할 수 있습니다. 예:\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```\n\n:::warning 참고\n`src`에서 별칭을 사용할 때는 `~`로 시작하지 마세요. 그 뒤의 모든 것은 모듈 요청으로 해석됩니다. 즉, node 모듈 내부의 에셋을 참조할 수 있습니다:\n```vue\n<img src=\"~some-npm-package/foo.png\">\n```\n:::"
 				},
 				"references": "api/sfc-spec.html#src-imports"
 			}, {
 				"name": "lang",
 				"description": {
 					"kind": "markdown",
-					"value": "블록은 `lang` 속성을 사용하여 프리프로세서 언어를 선언할 수 있습니다. 가장 일반적인 예는 `<script>` 블록에서 TypeScript를 사용하는 경우입니다:\n\n```html\n<script lang=\"ts\">\n  // TypeScript 사용\n<\/script>\n```\n\n`lang`는 모든 블록에 적용할 수 있습니다. 예를 들어, [Sass](https://sass-lang.com/)를 사용하는 `<style>`과 [Pug](https://pugjs.org/api/getting-started.html)를 사용하는 `<template>`을 사용할 수 있습니다:\n\n```html\n<template lang=\"pug\">\np {{ msg }}\n</template>\n\n<style lang=\"scss\">\n  $primary-color: #333;\n  body {\n    color: $primary-color;\n  }\n</style>\n```\n\n다양한 프리프로세서와의 통합은 도구 체인에 따라 다를 수 있습니다. 예시는 각 문서를 참고하세요:\n\n- [Vite](https://vitejs.dev/guide/features.html#css-pre-processors)\n- [Vue CLI](https://cli.vuejs.org/guide/css.html#pre-processors)\n- [webpack + vue-loader](https://vue-loader.vuejs.org/guide/pre-processors.html#using-pre-processors)"
+					"value": "블록은 `lang` 속성을 사용하여 프리프로세서 언어를 선언할 수 있습니다. 가장 일반적인 예는 `<script>` 블록에서 TypeScript를 사용하는 경우입니다:\n\n```html\n<script lang=\"ts\">\n  // TypeScript 사용\n<\/script>\n```\n\n`lang`은 모든 블록에 적용할 수 있습니다. 예를 들어, `<style>`에는 [Sass](https://sass-lang.com/)를, `<template>`에는 [Pug](https://pugjs.org/api/getting-started.html)를 사용할 수 있습니다:\n\n```html\n<template lang=\"pug\">\np {{ msg }}\n</template>\n\n<style lang=\"scss\">\n  $primary-color: #333;\n  body {\n    color: $primary-color;\n  }\n</style>\n```\n\n다양한 프리프로세서와의 통합은 도구 체인에 따라 다를 수 있습니다. 예시는 각 문서를 참고하세요:\n\n- [Vite](https://vite.dev/guide/features.html#css-pre-processors)\n- [Vue CLI](https://cli.vuejs.org/guide/css.html#pre-processors)\n- [webpack + vue-loader](https://vue-loader.vuejs.org/guide/pre-processors.html#using-pre-processors)"
 				},
 				"values": [{ "name": "html" }, { "name": "pug" }],
 				"references": "api/sfc-spec.html#pre-processors"
 			}],
 			"description": {
 				"kind": "markdown",
-				"value": "\n- 각 `*.vue` 파일에는 최상위 `<template>` 블록이 최대 한 개만 포함될 수 있습니다.\n\n- 내용은 추출되어 `@vue/compiler-dom`에 전달되고, JavaScript 렌더 함수로 사전 컴파일되어 내보내는 컴포넌트의 `render` 옵션에 연결됩니다.\n"
+				"value": "\n- 각 `*.vue` 파일에는 최상위 `<template>` 블록이 최대 한 개만 포함될 수 있습니다.\n\n- 내용은 추출되어 `@vue/compiler-dom`에 전달되고, JavaScript 렌더 함수로 사전 컴파일되어 내보내지는 컴포넌트의 `render` 옵션에 연결됩니다.\n"
 			},
 			"references": "api/sfc-spec.html#template"
 		},
@@ -110811,7 +111320,7 @@ var init_ko$1 = __esmMin((() => {
 					"name": "src",
 					"description": {
 						"kind": "markdown",
-						"value": "`*.vue` 컴포넌트를 여러 파일로 분리하고 싶다면, `src` 속성을 사용하여 언어 블록에 외부 파일을 임포트할 수 있습니다:\n\n```vue\n<template src=\"./template.html\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"><\/script>\n```\n\n`src` 임포트는 webpack 모듈 요청과 동일한 경로 해상 규칙을 따르므로 주의하세요:\n\n- 상대 경로는 `./`로 시작해야 합니다.\n- npm 의존성에서 리소스를 임포트할 수 있습니다:\n\n```vue\n<!-- 설치된 \"todomvc-app-css\" npm 패키지에서 파일 임포트 -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\n`src` 임포트는 커스텀 블록에도 사용할 수 있습니다. 예:\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```\n\n:::warning 참고\n`src`에서 별칭을 사용할 때는 `~`로 시작하지 마세요. 그 뒤의 모든 것은 모듈 요청으로 해석됩니다. 즉, node 모듈 내부의 에셋을 참조할 수 있습니다:\n```vue\n<img src=\"~some-npm-package/foo.png\">\n```\n:::"
+						"value": "`*.vue` 컴포넌트를 여러 파일로 분리하고 싶다면, `src` 속성을 사용하여 언어 블록에 외부 파일을 임포트할 수 있습니다:\n\n```vue\n<template src=\"./template.html\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"><\/script>\n```\n\n`src` 임포트는 webpack 모듈 요청과 동일한 경로 해석 규칙을 따르므로 주의하세요:\n\n- 상대 경로는 `./`로 시작해야 합니다.\n- npm 의존성에서 리소스를 임포트할 수 있습니다:\n\n```vue\n<!-- 설치된 \"todomvc-app-css\" npm 패키지에서 파일 임포트 -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\n`src` 임포트는 커스텀 블록에도 사용할 수 있습니다. 예:\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```\n\n:::warning 참고\n`src`에서 별칭을 사용할 때는 `~`로 시작하지 마세요. 그 뒤의 모든 것은 모듈 요청으로 해석됩니다. 즉, node 모듈 내부의 에셋을 참조할 수 있습니다:\n```vue\n<img src=\"~some-npm-package/foo.png\">\n```\n:::"
 					},
 					"references": "api/sfc-spec.html#src-imports"
 				},
@@ -110819,7 +111328,7 @@ var init_ko$1 = __esmMin((() => {
 					"name": "lang",
 					"description": {
 						"kind": "markdown",
-						"value": "블록은 `lang` 속성을 사용하여 프리프로세서 언어를 선언할 수 있습니다. 가장 일반적인 예는 `<script>` 블록에서 TypeScript를 사용하는 경우입니다:\n\n```html\n<script lang=\"ts\">\n  // TypeScript 사용\n<\/script>\n```\n\n`lang`는 모든 블록에 적용할 수 있습니다. 예를 들어, [Sass](https://sass-lang.com/)를 사용하는 `<style>`과 [Pug](https://pugjs.org/api/getting-started.html)를 사용하는 `<template>`을 사용할 수 있습니다:\n\n```html\n<template lang=\"pug\">\np {{ msg }}\n</template>\n\n<style lang=\"scss\">\n  $primary-color: #333;\n  body {\n    color: $primary-color;\n  }\n</style>\n```\n\n다양한 프리프로세서와의 통합은 도구 체인에 따라 다를 수 있습니다. 예시는 각 문서를 참고하세요:\n\n- [Vite](https://vitejs.dev/guide/features.html#css-pre-processors)\n- [Vue CLI](https://cli.vuejs.org/guide/css.html#pre-processors)\n- [webpack + vue-loader](https://vue-loader.vuejs.org/guide/pre-processors.html#using-pre-processors)"
+						"value": "블록은 `lang` 속성을 사용하여 프리프로세서 언어를 선언할 수 있습니다. 가장 일반적인 예는 `<script>` 블록에서 TypeScript를 사용하는 경우입니다:\n\n```html\n<script lang=\"ts\">\n  // TypeScript 사용\n<\/script>\n```\n\n`lang`은 모든 블록에 적용할 수 있습니다. 예를 들어, `<style>`에는 [Sass](https://sass-lang.com/)를, `<template>`에는 [Pug](https://pugjs.org/api/getting-started.html)를 사용할 수 있습니다:\n\n```html\n<template lang=\"pug\">\np {{ msg }}\n</template>\n\n<style lang=\"scss\">\n  $primary-color: #333;\n  body {\n    color: $primary-color;\n  }\n</style>\n```\n\n다양한 프리프로세서와의 통합은 도구 체인에 따라 다를 수 있습니다. 예시는 각 문서를 참고하세요:\n\n- [Vite](https://vite.dev/guide/features.html#css-pre-processors)\n- [Vue CLI](https://cli.vuejs.org/guide/css.html#pre-processors)\n- [webpack + vue-loader](https://vue-loader.vuejs.org/guide/pre-processors.html#using-pre-processors)"
 					},
 					"values": [
 						{ "name": "ts" },
@@ -110835,7 +111344,7 @@ var init_ko$1 = __esmMin((() => {
 					"valueSet": "v",
 					"description": {
 						"kind": "markdown",
-						"value": "\n- 각 `*.vue` 파일에는 `<script setup>` 블록이 최대 한 개만 포함될 수 있습니다(일반 `<script>`는 제외).\n\n- 이 스크립트는 사전 처리되어 컴포넌트의 `setup()` 함수로 사용되며, 즉 **컴포넌트의 각 인스턴스마다 실행**됩니다. `<script setup>`의 최상위 바인딩은 템플릿에 자동으로 노출됩니다. 자세한 내용은 [`<script setup>` 전용 문서](https://ko.vuejs.org/api/sfc-script-setup.html)를 참고하세요.\n"
+						"value": "\n- 각 `*.vue` 파일에는 `<script setup>` 블록이 최대 한 개만 포함될 수 있습니다(일반 `<script>`는 제외).\n\n- 이 스크립트는 사전 처리되어 컴포넌트의 `setup()` 함수로 사용됩니다. 즉, **컴포넌트의 각 인스턴스(instance)마다 실행**됩니다. `<script setup>`의 최상위 바인딩(binding)은 템플릿에 자동으로 노출됩니다. 자세한 내용은 [`<script setup>` 전용 문서](https://ko.vuejs.org/api/sfc-script-setup.html)를 참고하세요.\n"
 					},
 					"references": "api/sfc-spec.html#script-setup"
 				}
@@ -110851,7 +111360,7 @@ var init_ko$1 = __esmMin((() => {
 			"attributes": [],
 			"description": {
 				"kind": "markdown",
-				"value": "\n- 각 `*.vue` 파일에는 `<script setup>` 블록이 최대 한 개만 포함될 수 있습니다(일반 `<script>`는 제외).\n\n- 이 스크립트는 사전 처리되어 컴포넌트의 `setup()` 함수로 사용되며, 즉 **컴포넌트의 각 인스턴스마다 실행**됩니다. `<script setup>`의 최상위 바인딩은 템플릿에 자동으로 노출됩니다. 자세한 내용은 [`<script setup>` 전용 문서](https://ko.vuejs.org/api/sfc-script-setup.html)를 참고하세요.\n"
+				"value": "\n- 각 `*.vue` 파일에는 `<script setup>` 블록이 최대 한 개만 포함될 수 있습니다(일반 `<script>`는 제외).\n\n- 이 스크립트는 사전 처리되어 컴포넌트의 `setup()` 함수로 사용됩니다. 즉, **컴포넌트의 각 인스턴스(instance)마다 실행**됩니다. `<script setup>`의 최상위 바인딩(binding)은 템플릿에 자동으로 노출됩니다. 자세한 내용은 [`<script setup>` 전용 문서](https://ko.vuejs.org/api/sfc-script-setup.html)를 참고하세요.\n"
 			},
 			"references": "api/sfc-spec.html#script-setup"
 		},
@@ -110862,7 +111371,7 @@ var init_ko$1 = __esmMin((() => {
 					"name": "src",
 					"description": {
 						"kind": "markdown",
-						"value": "`*.vue` 컴포넌트를 여러 파일로 분리하고 싶다면, `src` 속성을 사용하여 언어 블록에 외부 파일을 임포트할 수 있습니다:\n\n```vue\n<template src=\"./template.html\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"><\/script>\n```\n\n`src` 임포트는 webpack 모듈 요청과 동일한 경로 해상 규칙을 따르므로 주의하세요:\n\n- 상대 경로는 `./`로 시작해야 합니다.\n- npm 의존성에서 리소스를 임포트할 수 있습니다:\n\n```vue\n<!-- 설치된 \"todomvc-app-css\" npm 패키지에서 파일 임포트 -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\n`src` 임포트는 커스텀 블록에도 사용할 수 있습니다. 예:\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```\n\n:::warning 참고\n`src`에서 별칭을 사용할 때는 `~`로 시작하지 마세요. 그 뒤의 모든 것은 모듈 요청으로 해석됩니다. 즉, node 모듈 내부의 에셋을 참조할 수 있습니다:\n```vue\n<img src=\"~some-npm-package/foo.png\">\n```\n:::"
+						"value": "`*.vue` 컴포넌트를 여러 파일로 분리하고 싶다면, `src` 속성을 사용하여 언어 블록에 외부 파일을 임포트할 수 있습니다:\n\n```vue\n<template src=\"./template.html\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"><\/script>\n```\n\n`src` 임포트는 webpack 모듈 요청과 동일한 경로 해석 규칙을 따르므로 주의하세요:\n\n- 상대 경로는 `./`로 시작해야 합니다.\n- npm 의존성에서 리소스를 임포트할 수 있습니다:\n\n```vue\n<!-- 설치된 \"todomvc-app-css\" npm 패키지에서 파일 임포트 -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\n`src` 임포트는 커스텀 블록에도 사용할 수 있습니다. 예:\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```\n\n:::warning 참고\n`src`에서 별칭을 사용할 때는 `~`로 시작하지 마세요. 그 뒤의 모든 것은 모듈 요청으로 해석됩니다. 즉, node 모듈 내부의 에셋을 참조할 수 있습니다:\n```vue\n<img src=\"~some-npm-package/foo.png\">\n```\n:::"
 					},
 					"references": "api/sfc-spec.html#src-imports"
 				},
@@ -110870,7 +111379,7 @@ var init_ko$1 = __esmMin((() => {
 					"name": "lang",
 					"description": {
 						"kind": "markdown",
-						"value": "블록은 `lang` 속성을 사용하여 프리프로세서 언어를 선언할 수 있습니다. 가장 일반적인 예는 `<script>` 블록에서 TypeScript를 사용하는 경우입니다:\n\n```html\n<script lang=\"ts\">\n  // TypeScript 사용\n<\/script>\n```\n\n`lang`는 모든 블록에 적용할 수 있습니다. 예를 들어, [Sass](https://sass-lang.com/)를 사용하는 `<style>`과 [Pug](https://pugjs.org/api/getting-started.html)를 사용하는 `<template>`을 사용할 수 있습니다:\n\n```html\n<template lang=\"pug\">\np {{ msg }}\n</template>\n\n<style lang=\"scss\">\n  $primary-color: #333;\n  body {\n    color: $primary-color;\n  }\n</style>\n```\n\n다양한 프리프로세서와의 통합은 도구 체인에 따라 다를 수 있습니다. 예시는 각 문서를 참고하세요:\n\n- [Vite](https://vitejs.dev/guide/features.html#css-pre-processors)\n- [Vue CLI](https://cli.vuejs.org/guide/css.html#pre-processors)\n- [webpack + vue-loader](https://vue-loader.vuejs.org/guide/pre-processors.html#using-pre-processors)"
+						"value": "블록은 `lang` 속성을 사용하여 프리프로세서 언어를 선언할 수 있습니다. 가장 일반적인 예는 `<script>` 블록에서 TypeScript를 사용하는 경우입니다:\n\n```html\n<script lang=\"ts\">\n  // TypeScript 사용\n<\/script>\n```\n\n`lang`은 모든 블록에 적용할 수 있습니다. 예를 들어, `<style>`에는 [Sass](https://sass-lang.com/)를, `<template>`에는 [Pug](https://pugjs.org/api/getting-started.html)를 사용할 수 있습니다:\n\n```html\n<template lang=\"pug\">\np {{ msg }}\n</template>\n\n<style lang=\"scss\">\n  $primary-color: #333;\n  body {\n    color: $primary-color;\n  }\n</style>\n```\n\n다양한 프리프로세서와의 통합은 도구 체인에 따라 다를 수 있습니다. 예시는 각 문서를 참고하세요:\n\n- [Vite](https://vite.dev/guide/features.html#css-pre-processors)\n- [Vue CLI](https://cli.vuejs.org/guide/css.html#pre-processors)\n- [webpack + vue-loader](https://vue-loader.vuejs.org/guide/pre-processors.html#using-pre-processors)"
 					},
 					"values": [
 						{ "name": "css" },
@@ -110887,7 +111396,7 @@ var init_ko$1 = __esmMin((() => {
 					"valueSet": "v",
 					"description": {
 						"kind": "markdown",
-						"value": "`<style>` 태그에 `scoped` 속성이 있으면, 해당 CSS는 현재 컴포넌트의 요소에만 적용됩니다. 이는 Shadow DOM에서 볼 수 있는 스타일 캡슐화와 유사합니다. 몇 가지 주의사항이 있지만, 별도의 폴리필이 필요하지 않습니다. PostCSS를 사용하여 다음과 같이 변환함으로써 구현됩니다:\n\n```vue\n<style scoped>\n.example {\n  color: red;\n}\n</style>\n\n<template>\n  <div class=\"example\">hi</div>\n</template>\n```\n\n다음과 같이 변환됩니다:\n\n```vue\n<style>\n.example[data-v-f3f3eg9] {\n  color: red;\n}\n</style>\n\n<template>\n  <div class=\"example\" data-v-f3f3eg9>hi</div>\n</template>\n```\n\n### 자식 컴포넌트 루트 요소 \n\n`scoped`를 사용하면, 부모 컴포넌트의 스타일이 자식 컴포넌트로 누출되지 않습니다. 하지만, 자식 컴포넌트의 루트 노드는 부모의 scoped CSS와 자식의 scoped CSS 모두의 영향을 받습니다. 이는 부모가 레이아웃 목적으로 자식의 루트 요소를 스타일링할 수 있도록 의도된 동작입니다.\n\n### 딥 셀렉터 \n\n`scoped` 스타일에서 셀렉터가 \"딥\"하게, 즉 자식 컴포넌트에까지 영향을 미치게 하려면 `:deep()` 의사 클래스(pseudo-class)를 사용할 수 있습니다:\n\n```vue\n<style scoped>\n.a :deep(.b) {\n  /* ... */\n}\n</style>\n```\n\n위 코드는 다음과 같이 컴파일됩니다:\n\n```css\n.a[data-v-f3f3eg9] .b {\n  /* ... */\n}\n```\n\n:::tip\n`v-html`로 생성된 DOM 콘텐츠는 scoped 스타일의 영향을 받지 않지만, 딥 셀렉터를 사용하여 여전히 스타일링할 수 있습니다.\n:::\n\n### 슬롯 셀렉터 \n\n기본적으로, scoped 스타일은 `<slot/>`으로 렌더링된 콘텐츠에 영향을 주지 않습니다. 이는 해당 콘텐츠가 전달한 부모 컴포넌트의 소유로 간주되기 때문입니다. 슬롯 콘텐츠를 명시적으로 타겟팅하려면 `:slotted` 의사 클래스를 사용하세요:\n\n```vue\n<style scoped>\n:slotted(div) {\n  color: red;\n}\n</style>\n```\n\n### 글로벌 셀렉터 \n\n단일 규칙만 전역적으로 적용하고 싶다면, 별도의 `<style>`을 만들지 않고 `:global` 의사 클래스를 사용할 수 있습니다(아래 참고):\n\n```vue\n<style scoped>\n:global(.red) {\n  color: red;\n}\n</style>\n```\n\n### 로컬 및 글로벌 스타일 혼합 \n\n동일한 컴포넌트 내에서 scoped 스타일과 non-scoped 스타일을 모두 포함할 수도 있습니다:\n\n```vue\n<style>\n/* 글로벌 스타일 */\n</style>\n\n<style scoped>\n/* 로컬 스타일 */\n</style>\n```\n\n### Scoped 스타일 팁 \n\n- **Scoped 스타일이 클래스의 필요성을 없애지는 않습니다.** 브라우저가 다양한 CSS 셀렉터를 렌더링하는 방식 때문에, `p { color: red }`와 같은 셀렉터는 scoped(즉, 속성 셀렉터와 결합될 때)일 때 훨씬 느려집니다. 대신 `.example { color: red }`와 같이 클래스나 id를 사용하면 성능 저하를 사실상 없앨 수 있습니다.\n\n- **재귀 컴포넌트에서 자손 셀렉터를 사용할 때 주의하세요!** `.a .b`와 같은 셀렉터가 있는 CSS 규칙에서, `.a`에 해당하는 요소가 재귀 자식 컴포넌트를 포함하면, 해당 자식 컴포넌트 내의 모든 `.b`가 이 규칙에 의해 매칭됩니다."
+						"value": "`<style>` 태그에 `scoped` 속성이 있으면, 해당 CSS는 현재 컴포넌트(component)의 요소에만 적용됩니다. 이는 Shadow DOM에서 볼 수 있는 스타일 캡슐화와 유사합니다. 몇 가지 주의사항이 있지만, 별도의 폴리필(polyfill)이 필요하지 않습니다. 이 기능은 PostCSS를 사용해 다음 코드를 변환하는 방식으로 구현됩니다:\n\n```vue\n<style scoped>\n.example {\n  color: red;\n}\n</style>\n\n<template>\n  <div class=\"example\">hi</div>\n</template>\n```\n\n위 코드는 다음과 같이 변환됩니다:\n\n```vue\n<style>\n.example[data-v-f3f3eg9] {\n  color: red;\n}\n</style>\n\n<template>\n  <div class=\"example\" data-v-f3f3eg9>hi</div>\n</template>\n```\n\n### 자식 컴포넌트 루트 요소 \n\n`scoped`를 사용하면, 부모 컴포넌트의 스타일이 자식 컴포넌트로 누출되지 않습니다. 하지만, 자식 컴포넌트의 루트 노드는 부모의 scoped CSS와 자식의 scoped CSS 모두의 영향을 받습니다. 이는 부모가 레이아웃 목적으로 자식의 루트 요소를 스타일링할 수 있도록 의도된 동작입니다.\n\n### 딥 셀렉터 \n\n`scoped` 스타일에서 셀렉터가 \"딥\"하게, 즉 자식 컴포넌트에까지 영향을 미치게 하려면 `:deep()` 의사 클래스(pseudo-class)를 사용할 수 있습니다:\n\n```vue\n<style scoped>\n.a :deep(.b) {\n  /* ... */\n}\n</style>\n```\n\n위 코드는 다음과 같이 컴파일됩니다:\n\n```css\n.a[data-v-f3f3eg9] .b {\n  /* ... */\n}\n```\n\n:::tip\n`v-html`로 생성된 DOM 콘텐츠는 scoped 스타일의 영향을 받지 않지만, 딥 셀렉터를 사용하여 여전히 스타일링할 수 있습니다.\n:::\n\n### 슬롯 셀렉터 \n\n기본적으로, scoped 스타일은 `<slot/>`으로 렌더링(rendering)된 콘텐츠에 영향을 주지 않습니다. 슬롯 콘텐츠는 그것을 전달한 부모 컴포넌트의 소유로 간주되기 때문입니다. 슬롯(slot) 콘텐츠를 명시적으로 타겟팅하려면 `:slotted` 의사 클래스를 사용하세요:\n\n```vue\n<style scoped>\n:slotted(div) {\n  color: red;\n}\n</style>\n```\n\n### 글로벌 셀렉터 \n\n단일 규칙만 전역적으로 적용하고 싶다면, 별도의 `<style>`을 만들지 않고 `:global` 의사 클래스를 사용할 수 있습니다(아래 참고):\n\n```vue\n<style scoped>\n:global(.red) {\n  color: red;\n}\n</style>\n```\n\n### 로컬 및 글로벌 스타일 혼합 \n\n동일한 컴포넌트 내에서 scoped 스타일과 non-scoped 스타일을 모두 포함할 수도 있습니다:\n\n```vue\n<style>\n/* 글로벌 스타일 */\n</style>\n\n<style scoped>\n/* 로컬 스타일 */\n</style>\n```\n\n### Scoped 스타일 팁 \n\n- **Scoped 스타일이 클래스의 필요성을 없애지는 않습니다.** 브라우저가 다양한 CSS 셀렉터를 렌더링하는 방식 때문에, `p { color: red }`와 같은 셀렉터는 scoped 상태(즉, 속성 셀렉터와 결합된 상태)에서 훨씬 느려집니다. 대신 `.example { color: red }`와 같이 클래스나 id를 사용하면 성능 저하를 사실상 없앨 수 있습니다.\n\n- **재귀 컴포넌트에서 자손 셀렉터를 사용할 때 주의하세요!** `.a .b`와 같은 셀렉터가 있는 CSS 규칙에서, `.a`에 해당하는 요소가 재귀 자식 컴포넌트를 포함하면, 해당 자식 컴포넌트 내의 모든 `.b`가 이 규칙에 의해 매칭됩니다."
 					},
 					"references": "api/sfc-css-features.html#scoped-css"
 				},
@@ -110896,7 +111405,7 @@ var init_ko$1 = __esmMin((() => {
 					"valueSet": "v",
 					"description": {
 						"kind": "markdown",
-						"value": "`<style module>` 태그는 [CSS Modules](https://github.com/css-modules/css-modules)로 컴파일되며, 결과 CSS 클래스가 `$style` 키 아래의 객체로 컴포넌트에 노출됩니다:\n\n```vue\n<template>\n  <p :class=\"$style.red\">This should be red</p>\n</template>\n\n<style module>\n.red {\n  color: red;\n}\n</style>\n```\n\n결과 클래스는 충돌을 방지하기 위해 해시 처리되어, CSS가 현재 컴포넌트에만 적용되는 것과 동일한 효과를 얻습니다.\n\n[CSS Modules 명세](https://github.com/css-modules/css-modules)에서 [글로벌 예외](https://github.com/css-modules/css-modules/blob/master/docs/composition.md#exceptions) 및 [컴포지션](https://github.com/css-modules/css-modules/blob/master/docs/composition.md#composition) 등 자세한 내용을 참고하세요.\n\n### 커스텀 주입 이름 \n\n`module` 속성에 값을 지정하여 주입된 클래스 객체의 프로퍼티 키를 커스터마이즈할 수 있습니다:\n\n```vue\n<template>\n  <p :class=\"classes.red\">red</p>\n</template>\n\n<style module=\"classes\">\n.red {\n  color: red;\n}\n</style>\n```\n\n### Composition API와 함께 사용하기 \n\n주입된 클래스는 `setup()` 및 `<script setup>`에서 `useCssModule` API를 통해 접근할 수 있습니다. 커스텀 주입 이름이 있는 `<style module>` 블록의 경우, `useCssModule`의 첫 번째 인자로 일치하는 `module` 속성 값을 전달합니다:\n\n```js\nimport { useCssModule } from 'vue'\n\n// setup() 범위 내에서...\n// 기본값, <style module>의 클래스를 반환\nuseCssModule()\n\n// 이름 지정, <style module=\"classes\">의 클래스를 반환\nuseCssModule('classes')\n```\n\n- **예시**\n\n```vue\n<script setup lang=\"ts\">\nimport { useCssModule } from 'vue'\n\nconst classes = useCssModule()\n<\/script>\n\n<template>\n  <p :class=\"classes.red\">red</p>\n</template>\n\n<style module>\n.red {\n  color: red;\n}\n</style>\n```"
+						"value": "`<style module>` 태그는 [CSS Modules](https://github.com/css-modules/css-modules)로 컴파일되며, 결과 CSS 클래스가 `$style` 키 아래의 객체로 컴포넌트에 노출됩니다:\n\n```vue\n<template>\n  <p :class=\"$style.red\">This should be red</p>\n</template>\n\n<style module>\n.red {\n  color: red;\n}\n</style>\n```\n\n결과 클래스는 충돌을 방지하기 위해 해시 처리되어, CSS가 현재 컴포넌트에만 적용되는 것과 동일한 효과를 얻습니다.\n\n[CSS Modules 명세](https://github.com/css-modules/css-modules)에서 [글로벌 예외](https://github.com/css-modules/css-modules/blob/master/docs/composition.md#exceptions) 및 [컴포지션](https://github.com/css-modules/css-modules/blob/master/docs/composition.md#composition) 등 자세한 내용을 참고하세요.\n\n### 커스텀 주입 이름 \n\n`module` 속성에 값을 지정하여 주입된 클래스 객체의 프로퍼티(property) 키를 커스터마이즈할 수 있습니다:\n\n```vue\n<template>\n  <p :class=\"classes.red\">red</p>\n</template>\n\n<style module=\"classes\">\n.red {\n  color: red;\n}\n</style>\n```\n\n### Composition API와 함께 사용하기 \n\n주입된 클래스는 `setup()` 및 `<script setup>`에서 `useCssModule` API를 통해 접근할 수 있습니다. 커스텀 주입 이름이 있는 `<style module>` 블록의 경우, `useCssModule`의 첫 번째 인자로 일치하는 `module` 속성 값을 전달합니다:\n\n```js\nimport { useCssModule } from 'vue'\n\n// setup() 범위 내에서...\n// 기본값, <style module>의 클래스를 반환\nuseCssModule()\n\n// 이름 지정, <style module=\"classes\">의 클래스를 반환\nuseCssModule('classes')\n```\n\n- **예시**\n\n```vue\n<script setup lang=\"ts\">\nimport { useCssModule } from 'vue'\n\nconst classes = useCssModule()\n<\/script>\n\n<template>\n  <p :class=\"classes.red\">red</p>\n</template>\n\n<style module>\n.red {\n  color: red;\n}\n</style>\n```"
 					},
 					"references": "api/sfc-css-features.html#css-modules"
 				}
@@ -110913,7 +111422,7 @@ var init_ko$1 = __esmMin((() => {
 				"name": "src",
 				"description": {
 					"kind": "markdown",
-					"value": "`*.vue` 컴포넌트를 여러 파일로 분리하고 싶다면, `src` 속성을 사용하여 언어 블록에 외부 파일을 임포트할 수 있습니다:\n\n```vue\n<template src=\"./template.html\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"><\/script>\n```\n\n`src` 임포트는 webpack 모듈 요청과 동일한 경로 해상 규칙을 따르므로 주의하세요:\n\n- 상대 경로는 `./`로 시작해야 합니다.\n- npm 의존성에서 리소스를 임포트할 수 있습니다:\n\n```vue\n<!-- 설치된 \"todomvc-app-css\" npm 패키지에서 파일 임포트 -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\n`src` 임포트는 커스텀 블록에도 사용할 수 있습니다. 예:\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```\n\n:::warning 참고\n`src`에서 별칭을 사용할 때는 `~`로 시작하지 마세요. 그 뒤의 모든 것은 모듈 요청으로 해석됩니다. 즉, node 모듈 내부의 에셋을 참조할 수 있습니다:\n```vue\n<img src=\"~some-npm-package/foo.png\">\n```\n:::"
+					"value": "`*.vue` 컴포넌트를 여러 파일로 분리하고 싶다면, `src` 속성을 사용하여 언어 블록에 외부 파일을 임포트할 수 있습니다:\n\n```vue\n<template src=\"./template.html\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"><\/script>\n```\n\n`src` 임포트는 webpack 모듈 요청과 동일한 경로 해석 규칙을 따르므로 주의하세요:\n\n- 상대 경로는 `./`로 시작해야 합니다.\n- npm 의존성에서 리소스를 임포트할 수 있습니다:\n\n```vue\n<!-- 설치된 \"todomvc-app-css\" npm 패키지에서 파일 임포트 -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\n`src` 임포트는 커스텀 블록에도 사용할 수 있습니다. 예:\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```\n\n:::warning 참고\n`src`에서 별칭을 사용할 때는 `~`로 시작하지 마세요. 그 뒤의 모든 것은 모듈 요청으로 해석됩니다. 즉, node 모듈 내부의 에셋을 참조할 수 있습니다:\n```vue\n<img src=\"~some-npm-package/foo.png\">\n```\n:::"
 				},
 				"references": "api/sfc-spec.html#src-imports"
 			}],
@@ -110928,7 +111437,7 @@ var init_ko$1 = __esmMin((() => {
 		"name": "lang",
 		"description": {
 			"kind": "markdown",
-			"value": "블록은 `lang` 속성을 사용하여 프리프로세서 언어를 선언할 수 있습니다. 가장 일반적인 예는 `<script>` 블록에서 TypeScript를 사용하는 경우입니다:\n\n```html\n<script lang=\"ts\">\n  // TypeScript 사용\n<\/script>\n```\n\n`lang`는 모든 블록에 적용할 수 있습니다. 예를 들어, [Sass](https://sass-lang.com/)를 사용하는 `<style>`과 [Pug](https://pugjs.org/api/getting-started.html)를 사용하는 `<template>`을 사용할 수 있습니다:\n\n```html\n<template lang=\"pug\">\np {{ msg }}\n</template>\n\n<style lang=\"scss\">\n  $primary-color: #333;\n  body {\n    color: $primary-color;\n  }\n</style>\n```\n\n다양한 프리프로세서와의 통합은 도구 체인에 따라 다를 수 있습니다. 예시는 각 문서를 참고하세요:\n\n- [Vite](https://vitejs.dev/guide/features.html#css-pre-processors)\n- [Vue CLI](https://cli.vuejs.org/guide/css.html#pre-processors)\n- [webpack + vue-loader](https://vue-loader.vuejs.org/guide/pre-processors.html#using-pre-processors)"
+			"value": "블록은 `lang` 속성을 사용하여 프리프로세서 언어를 선언할 수 있습니다. 가장 일반적인 예는 `<script>` 블록에서 TypeScript를 사용하는 경우입니다:\n\n```html\n<script lang=\"ts\">\n  // TypeScript 사용\n<\/script>\n```\n\n`lang`은 모든 블록에 적용할 수 있습니다. 예를 들어, `<style>`에는 [Sass](https://sass-lang.com/)를, `<template>`에는 [Pug](https://pugjs.org/api/getting-started.html)를 사용할 수 있습니다:\n\n```html\n<template lang=\"pug\">\np {{ msg }}\n</template>\n\n<style lang=\"scss\">\n  $primary-color: #333;\n  body {\n    color: $primary-color;\n  }\n</style>\n```\n\n다양한 프리프로세서와의 통합은 도구 체인에 따라 다를 수 있습니다. 예시는 각 문서를 참고하세요:\n\n- [Vite](https://vite.dev/guide/features.html#css-pre-processors)\n- [Vue CLI](https://cli.vuejs.org/guide/css.html#pre-processors)\n- [webpack + vue-loader](https://vue-loader.vuejs.org/guide/pre-processors.html#using-pre-processors)"
 		},
 		"values": [],
 		"references": "api/sfc-spec.html#pre-processors"
@@ -110936,7 +111445,7 @@ var init_ko$1 = __esmMin((() => {
 		"name": "src",
 		"description": {
 			"kind": "markdown",
-			"value": "`*.vue` 컴포넌트를 여러 파일로 분리하고 싶다면, `src` 속성을 사용하여 언어 블록에 외부 파일을 임포트할 수 있습니다:\n\n```vue\n<template src=\"./template.html\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"><\/script>\n```\n\n`src` 임포트는 webpack 모듈 요청과 동일한 경로 해상 규칙을 따르므로 주의하세요:\n\n- 상대 경로는 `./`로 시작해야 합니다.\n- npm 의존성에서 리소스를 임포트할 수 있습니다:\n\n```vue\n<!-- 설치된 \"todomvc-app-css\" npm 패키지에서 파일 임포트 -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\n`src` 임포트는 커스텀 블록에도 사용할 수 있습니다. 예:\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```\n\n:::warning 참고\n`src`에서 별칭을 사용할 때는 `~`로 시작하지 마세요. 그 뒤의 모든 것은 모듈 요청으로 해석됩니다. 즉, node 모듈 내부의 에셋을 참조할 수 있습니다:\n```vue\n<img src=\"~some-npm-package/foo.png\">\n```\n:::"
+			"value": "`*.vue` 컴포넌트를 여러 파일로 분리하고 싶다면, `src` 속성을 사용하여 언어 블록에 외부 파일을 임포트할 수 있습니다:\n\n```vue\n<template src=\"./template.html\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"><\/script>\n```\n\n`src` 임포트는 webpack 모듈 요청과 동일한 경로 해석 규칙을 따르므로 주의하세요:\n\n- 상대 경로는 `./`로 시작해야 합니다.\n- npm 의존성에서 리소스를 임포트할 수 있습니다:\n\n```vue\n<!-- 설치된 \"todomvc-app-css\" npm 패키지에서 파일 임포트 -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\n`src` 임포트는 커스텀 블록에도 사용할 수 있습니다. 예:\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```\n\n:::warning 참고\n`src`에서 별칭을 사용할 때는 `~`로 시작하지 마세요. 그 뒤의 모든 것은 모듈 요청으로 해석됩니다. 즉, node 모듈 내부의 에셋을 참조할 수 있습니다:\n```vue\n<img src=\"~some-npm-package/foo.png\">\n```\n:::"
 		},
 		"references": "api/sfc-spec.html#src-imports"
 	}];
@@ -111140,14 +111649,14 @@ var init_zh_cn$1 = __esmMin((() => {
 				"name": "src",
 				"description": {
 					"kind": "markdown",
-					"value": "如果你更喜欢将 `*.vue` 组件分散到多个文件中，可以为一个语块使用 `src` 这个 attribute 来导入一个外部文件：\n\n```vue\n<template src=\"./template.html\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"><\/script>\n```\n\n请注意 `src` 导入和 JS 模块导入遵循相同的路径解析规则，这意味着：\n\n- 相对路径需要以 `./` 开头\n- 你也可以从 npm 依赖中导入资源\n\n```vue\n<!-- 从所安装的 \"todomvc-app-css\" npm 包中导入一个文件 -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\n`src` 导入对自定义语块也同样适用：\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```\n\n:::warning 注意\n在 `src` 中使用别名时，不要以 `~` 开头，后面的任何内容都会被解释为模块请求。这意味着你可以引用 node 模块中的资源：\n```vue\n<img src=\"~some-npm-package/foo.png\">\n```\n:::"
+					"value": "如果你更喜欢将 `*.vue` 组件分散到多个文件中，可以为一个语块使用 `src` 这个 attribute 来导入一个外部文件：\n\n```vue\n<template src=\"./template.html\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"><\/script>\n```\n\n请注意 `src` 导入和 JS 模块导入遵循相同的路径解析规则，这意味着：\n\n- 相对路径需要以 `./` 开头\n- 你也可以从 npm 依赖中导入资源\n\n```vue\n<!-- 从所安装的 \"todomvc-app-css\" npm 包中导入一个文件 -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\n`src` 导入对自定义语块也同样适用：\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```\n\n:::warning 注意\n在 `src` 中使用别名时，不要以 `~` 开头，后面的任何内容都会被解释为模块请求。这意味着你可以引用 node 模块中的资源：\n\n```vue\n<img src=\"~some-npm-package/foo.png\">\n```\n\n:::"
 				},
 				"references": "api/sfc-spec.html#src-imports"
 			}, {
 				"name": "lang",
 				"description": {
 					"kind": "markdown",
-					"value": "代码块可以使用 `lang` 这个 attribute 来声明预处理器语言，最常见的用例就是在 `<script>` 中使用 TypeScript：\n\n```html\n<script lang=\"ts\">\n  // use TypeScript\n<\/script>\n```\n\n`lang` 在任意块上都能使用，比如我们可以在 `<style>` 标签中使用 [Sass](https://sass-lang.com/) 或是 `<template>` 中使用 [Pug](https://pugjs.org/api/getting-started.html)：\n\n```html\n<template lang=\"pug\">\np {{ msg }}\n</template>\n\n<style lang=\"scss\">\n  $primary-color: #333;\n  body {\n    color: $primary-color;\n  }\n</style>\n```\n\n注意对不同预处理器的集成会根据你所使用的工具链而有所不同，具体细节请查看相应的工具链文档来确认：\n\n- [Vite](https://cn.vitejs.dev/guide/features.html#css-pre-processors)\n- [Vue CLI](https://cli.vuejs.org/zh/guide/css.html#%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8)\n- [webpack + vue-loader](https://vue-loader.vuejs.org/zh/guide/pre-processors.html#%E4%BD%BF%E7%94%A8%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8)"
+					"value": "代码块可以使用 `lang` 这个 attribute 来声明预处理器语言，最常见的用例就是在 `<script>` 中使用 TypeScript：\n\n```html\n<script lang=\"ts\">\n  // use TypeScript\n<\/script>\n```\n\n`lang` 在任意块上都能使用，比如我们可以在 `<style>` 标签中使用 [Sass](https://sass-lang.com/) 或是 `<template>` 中使用 [Pug](https://pugjs.org/api/getting-started.html)：\n\n```html\n<template lang=\"pug\">\np {{ msg }}\n</template>\n\n<style lang=\"scss\">\n  $primary-color: #333;\n  body {\n    color: $primary-color;\n  }\n</style>\n```\n\n注意对不同预处理器的集成会根据你所使用的工具链而有所不同，具体细节请查看相应的工具链文档来确认：\n\n- [Vite](https://cn.vite.dev/guide/features.html#css-pre-processors)\n- [Vue CLI](https://cli.vuejs.org/zh/guide/css.html#%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8)\n- [webpack + vue-loader](https://vue-loader.vuejs.org/zh/guide/pre-processors.html#%E4%BD%BF%E7%94%A8%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8)"
 				},
 				"values": [{ "name": "html" }, { "name": "pug" }],
 				"references": "api/sfc-spec.html#pre-processors"
@@ -111165,7 +111674,7 @@ var init_zh_cn$1 = __esmMin((() => {
 					"name": "src",
 					"description": {
 						"kind": "markdown",
-						"value": "如果你更喜欢将 `*.vue` 组件分散到多个文件中，可以为一个语块使用 `src` 这个 attribute 来导入一个外部文件：\n\n```vue\n<template src=\"./template.html\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"><\/script>\n```\n\n请注意 `src` 导入和 JS 模块导入遵循相同的路径解析规则，这意味着：\n\n- 相对路径需要以 `./` 开头\n- 你也可以从 npm 依赖中导入资源\n\n```vue\n<!-- 从所安装的 \"todomvc-app-css\" npm 包中导入一个文件 -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\n`src` 导入对自定义语块也同样适用：\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```\n\n:::warning 注意\n在 `src` 中使用别名时，不要以 `~` 开头，后面的任何内容都会被解释为模块请求。这意味着你可以引用 node 模块中的资源：\n```vue\n<img src=\"~some-npm-package/foo.png\">\n```\n:::"
+						"value": "如果你更喜欢将 `*.vue` 组件分散到多个文件中，可以为一个语块使用 `src` 这个 attribute 来导入一个外部文件：\n\n```vue\n<template src=\"./template.html\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"><\/script>\n```\n\n请注意 `src` 导入和 JS 模块导入遵循相同的路径解析规则，这意味着：\n\n- 相对路径需要以 `./` 开头\n- 你也可以从 npm 依赖中导入资源\n\n```vue\n<!-- 从所安装的 \"todomvc-app-css\" npm 包中导入一个文件 -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\n`src` 导入对自定义语块也同样适用：\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```\n\n:::warning 注意\n在 `src` 中使用别名时，不要以 `~` 开头，后面的任何内容都会被解释为模块请求。这意味着你可以引用 node 模块中的资源：\n\n```vue\n<img src=\"~some-npm-package/foo.png\">\n```\n\n:::"
 					},
 					"references": "api/sfc-spec.html#src-imports"
 				},
@@ -111173,7 +111682,7 @@ var init_zh_cn$1 = __esmMin((() => {
 					"name": "lang",
 					"description": {
 						"kind": "markdown",
-						"value": "代码块可以使用 `lang` 这个 attribute 来声明预处理器语言，最常见的用例就是在 `<script>` 中使用 TypeScript：\n\n```html\n<script lang=\"ts\">\n  // use TypeScript\n<\/script>\n```\n\n`lang` 在任意块上都能使用，比如我们可以在 `<style>` 标签中使用 [Sass](https://sass-lang.com/) 或是 `<template>` 中使用 [Pug](https://pugjs.org/api/getting-started.html)：\n\n```html\n<template lang=\"pug\">\np {{ msg }}\n</template>\n\n<style lang=\"scss\">\n  $primary-color: #333;\n  body {\n    color: $primary-color;\n  }\n</style>\n```\n\n注意对不同预处理器的集成会根据你所使用的工具链而有所不同，具体细节请查看相应的工具链文档来确认：\n\n- [Vite](https://cn.vitejs.dev/guide/features.html#css-pre-processors)\n- [Vue CLI](https://cli.vuejs.org/zh/guide/css.html#%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8)\n- [webpack + vue-loader](https://vue-loader.vuejs.org/zh/guide/pre-processors.html#%E4%BD%BF%E7%94%A8%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8)"
+						"value": "代码块可以使用 `lang` 这个 attribute 来声明预处理器语言，最常见的用例就是在 `<script>` 中使用 TypeScript：\n\n```html\n<script lang=\"ts\">\n  // use TypeScript\n<\/script>\n```\n\n`lang` 在任意块上都能使用，比如我们可以在 `<style>` 标签中使用 [Sass](https://sass-lang.com/) 或是 `<template>` 中使用 [Pug](https://pugjs.org/api/getting-started.html)：\n\n```html\n<template lang=\"pug\">\np {{ msg }}\n</template>\n\n<style lang=\"scss\">\n  $primary-color: #333;\n  body {\n    color: $primary-color;\n  }\n</style>\n```\n\n注意对不同预处理器的集成会根据你所使用的工具链而有所不同，具体细节请查看相应的工具链文档来确认：\n\n- [Vite](https://cn.vite.dev/guide/features.html#css-pre-processors)\n- [Vue CLI](https://cli.vuejs.org/zh/guide/css.html#%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8)\n- [webpack + vue-loader](https://vue-loader.vuejs.org/zh/guide/pre-processors.html#%E4%BD%BF%E7%94%A8%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8)"
 					},
 					"values": [
 						{ "name": "ts" },
@@ -111216,7 +111725,7 @@ var init_zh_cn$1 = __esmMin((() => {
 					"name": "src",
 					"description": {
 						"kind": "markdown",
-						"value": "如果你更喜欢将 `*.vue` 组件分散到多个文件中，可以为一个语块使用 `src` 这个 attribute 来导入一个外部文件：\n\n```vue\n<template src=\"./template.html\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"><\/script>\n```\n\n请注意 `src` 导入和 JS 模块导入遵循相同的路径解析规则，这意味着：\n\n- 相对路径需要以 `./` 开头\n- 你也可以从 npm 依赖中导入资源\n\n```vue\n<!-- 从所安装的 \"todomvc-app-css\" npm 包中导入一个文件 -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\n`src` 导入对自定义语块也同样适用：\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```\n\n:::warning 注意\n在 `src` 中使用别名时，不要以 `~` 开头，后面的任何内容都会被解释为模块请求。这意味着你可以引用 node 模块中的资源：\n```vue\n<img src=\"~some-npm-package/foo.png\">\n```\n:::"
+						"value": "如果你更喜欢将 `*.vue` 组件分散到多个文件中，可以为一个语块使用 `src` 这个 attribute 来导入一个外部文件：\n\n```vue\n<template src=\"./template.html\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"><\/script>\n```\n\n请注意 `src` 导入和 JS 模块导入遵循相同的路径解析规则，这意味着：\n\n- 相对路径需要以 `./` 开头\n- 你也可以从 npm 依赖中导入资源\n\n```vue\n<!-- 从所安装的 \"todomvc-app-css\" npm 包中导入一个文件 -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\n`src` 导入对自定义语块也同样适用：\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```\n\n:::warning 注意\n在 `src` 中使用别名时，不要以 `~` 开头，后面的任何内容都会被解释为模块请求。这意味着你可以引用 node 模块中的资源：\n\n```vue\n<img src=\"~some-npm-package/foo.png\">\n```\n\n:::"
 					},
 					"references": "api/sfc-spec.html#src-imports"
 				},
@@ -111224,7 +111733,7 @@ var init_zh_cn$1 = __esmMin((() => {
 					"name": "lang",
 					"description": {
 						"kind": "markdown",
-						"value": "代码块可以使用 `lang` 这个 attribute 来声明预处理器语言，最常见的用例就是在 `<script>` 中使用 TypeScript：\n\n```html\n<script lang=\"ts\">\n  // use TypeScript\n<\/script>\n```\n\n`lang` 在任意块上都能使用，比如我们可以在 `<style>` 标签中使用 [Sass](https://sass-lang.com/) 或是 `<template>` 中使用 [Pug](https://pugjs.org/api/getting-started.html)：\n\n```html\n<template lang=\"pug\">\np {{ msg }}\n</template>\n\n<style lang=\"scss\">\n  $primary-color: #333;\n  body {\n    color: $primary-color;\n  }\n</style>\n```\n\n注意对不同预处理器的集成会根据你所使用的工具链而有所不同，具体细节请查看相应的工具链文档来确认：\n\n- [Vite](https://cn.vitejs.dev/guide/features.html#css-pre-processors)\n- [Vue CLI](https://cli.vuejs.org/zh/guide/css.html#%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8)\n- [webpack + vue-loader](https://vue-loader.vuejs.org/zh/guide/pre-processors.html#%E4%BD%BF%E7%94%A8%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8)"
+						"value": "代码块可以使用 `lang` 这个 attribute 来声明预处理器语言，最常见的用例就是在 `<script>` 中使用 TypeScript：\n\n```html\n<script lang=\"ts\">\n  // use TypeScript\n<\/script>\n```\n\n`lang` 在任意块上都能使用，比如我们可以在 `<style>` 标签中使用 [Sass](https://sass-lang.com/) 或是 `<template>` 中使用 [Pug](https://pugjs.org/api/getting-started.html)：\n\n```html\n<template lang=\"pug\">\np {{ msg }}\n</template>\n\n<style lang=\"scss\">\n  $primary-color: #333;\n  body {\n    color: $primary-color;\n  }\n</style>\n```\n\n注意对不同预处理器的集成会根据你所使用的工具链而有所不同，具体细节请查看相应的工具链文档来确认：\n\n- [Vite](https://cn.vite.dev/guide/features.html#css-pre-processors)\n- [Vue CLI](https://cli.vuejs.org/zh/guide/css.html#%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8)\n- [webpack + vue-loader](https://vue-loader.vuejs.org/zh/guide/pre-processors.html#%E4%BD%BF%E7%94%A8%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8)"
 					},
 					"values": [
 						{ "name": "css" },
@@ -111267,7 +111776,7 @@ var init_zh_cn$1 = __esmMin((() => {
 				"name": "src",
 				"description": {
 					"kind": "markdown",
-					"value": "如果你更喜欢将 `*.vue` 组件分散到多个文件中，可以为一个语块使用 `src` 这个 attribute 来导入一个外部文件：\n\n```vue\n<template src=\"./template.html\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"><\/script>\n```\n\n请注意 `src` 导入和 JS 模块导入遵循相同的路径解析规则，这意味着：\n\n- 相对路径需要以 `./` 开头\n- 你也可以从 npm 依赖中导入资源\n\n```vue\n<!-- 从所安装的 \"todomvc-app-css\" npm 包中导入一个文件 -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\n`src` 导入对自定义语块也同样适用：\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```\n\n:::warning 注意\n在 `src` 中使用别名时，不要以 `~` 开头，后面的任何内容都会被解释为模块请求。这意味着你可以引用 node 模块中的资源：\n```vue\n<img src=\"~some-npm-package/foo.png\">\n```\n:::"
+					"value": "如果你更喜欢将 `*.vue` 组件分散到多个文件中，可以为一个语块使用 `src` 这个 attribute 来导入一个外部文件：\n\n```vue\n<template src=\"./template.html\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"><\/script>\n```\n\n请注意 `src` 导入和 JS 模块导入遵循相同的路径解析规则，这意味着：\n\n- 相对路径需要以 `./` 开头\n- 你也可以从 npm 依赖中导入资源\n\n```vue\n<!-- 从所安装的 \"todomvc-app-css\" npm 包中导入一个文件 -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\n`src` 导入对自定义语块也同样适用：\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```\n\n:::warning 注意\n在 `src` 中使用别名时，不要以 `~` 开头，后面的任何内容都会被解释为模块请求。这意味着你可以引用 node 模块中的资源：\n\n```vue\n<img src=\"~some-npm-package/foo.png\">\n```\n\n:::"
 				},
 				"references": "api/sfc-spec.html#src-imports"
 			}],
@@ -111282,7 +111791,7 @@ var init_zh_cn$1 = __esmMin((() => {
 		"name": "lang",
 		"description": {
 			"kind": "markdown",
-			"value": "代码块可以使用 `lang` 这个 attribute 来声明预处理器语言，最常见的用例就是在 `<script>` 中使用 TypeScript：\n\n```html\n<script lang=\"ts\">\n  // use TypeScript\n<\/script>\n```\n\n`lang` 在任意块上都能使用，比如我们可以在 `<style>` 标签中使用 [Sass](https://sass-lang.com/) 或是 `<template>` 中使用 [Pug](https://pugjs.org/api/getting-started.html)：\n\n```html\n<template lang=\"pug\">\np {{ msg }}\n</template>\n\n<style lang=\"scss\">\n  $primary-color: #333;\n  body {\n    color: $primary-color;\n  }\n</style>\n```\n\n注意对不同预处理器的集成会根据你所使用的工具链而有所不同，具体细节请查看相应的工具链文档来确认：\n\n- [Vite](https://cn.vitejs.dev/guide/features.html#css-pre-processors)\n- [Vue CLI](https://cli.vuejs.org/zh/guide/css.html#%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8)\n- [webpack + vue-loader](https://vue-loader.vuejs.org/zh/guide/pre-processors.html#%E4%BD%BF%E7%94%A8%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8)"
+			"value": "代码块可以使用 `lang` 这个 attribute 来声明预处理器语言，最常见的用例就是在 `<script>` 中使用 TypeScript：\n\n```html\n<script lang=\"ts\">\n  // use TypeScript\n<\/script>\n```\n\n`lang` 在任意块上都能使用，比如我们可以在 `<style>` 标签中使用 [Sass](https://sass-lang.com/) 或是 `<template>` 中使用 [Pug](https://pugjs.org/api/getting-started.html)：\n\n```html\n<template lang=\"pug\">\np {{ msg }}\n</template>\n\n<style lang=\"scss\">\n  $primary-color: #333;\n  body {\n    color: $primary-color;\n  }\n</style>\n```\n\n注意对不同预处理器的集成会根据你所使用的工具链而有所不同，具体细节请查看相应的工具链文档来确认：\n\n- [Vite](https://cn.vite.dev/guide/features.html#css-pre-processors)\n- [Vue CLI](https://cli.vuejs.org/zh/guide/css.html#%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8)\n- [webpack + vue-loader](https://vue-loader.vuejs.org/zh/guide/pre-processors.html#%E4%BD%BF%E7%94%A8%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8)"
 		},
 		"values": [],
 		"references": "api/sfc-spec.html#pre-processors"
@@ -111290,7 +111799,7 @@ var init_zh_cn$1 = __esmMin((() => {
 		"name": "src",
 		"description": {
 			"kind": "markdown",
-			"value": "如果你更喜欢将 `*.vue` 组件分散到多个文件中，可以为一个语块使用 `src` 这个 attribute 来导入一个外部文件：\n\n```vue\n<template src=\"./template.html\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"><\/script>\n```\n\n请注意 `src` 导入和 JS 模块导入遵循相同的路径解析规则，这意味着：\n\n- 相对路径需要以 `./` 开头\n- 你也可以从 npm 依赖中导入资源\n\n```vue\n<!-- 从所安装的 \"todomvc-app-css\" npm 包中导入一个文件 -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\n`src` 导入对自定义语块也同样适用：\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```\n\n:::warning 注意\n在 `src` 中使用别名时，不要以 `~` 开头，后面的任何内容都会被解释为模块请求。这意味着你可以引用 node 模块中的资源：\n```vue\n<img src=\"~some-npm-package/foo.png\">\n```\n:::"
+			"value": "如果你更喜欢将 `*.vue` 组件分散到多个文件中，可以为一个语块使用 `src` 这个 attribute 来导入一个外部文件：\n\n```vue\n<template src=\"./template.html\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"><\/script>\n```\n\n请注意 `src` 导入和 JS 模块导入遵循相同的路径解析规则，这意味着：\n\n- 相对路径需要以 `./` 开头\n- 你也可以从 npm 依赖中导入资源\n\n```vue\n<!-- 从所安装的 \"todomvc-app-css\" npm 包中导入一个文件 -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\n`src` 导入对自定义语块也同样适用：\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```\n\n:::warning 注意\n在 `src` 中使用别名时，不要以 `~` 开头，后面的任何内容都会被解释为模块请求。这意味着你可以引用 node 模块中的资源：\n\n```vue\n<img src=\"~some-npm-package/foo.png\">\n```\n\n:::"
 		},
 		"references": "api/sfc-spec.html#src-imports"
 	}];
@@ -111317,14 +111826,14 @@ var init_zh_hk$1 = __esmMin((() => {
 				"name": "src",
 				"description": {
 					"kind": "markdown",
-					"value": "如果你更喜欢将 `*.vue` 组件分散到多个文件中，可以为一个语块使用 `src` 这个 attribute 来导入一个外部文件：\n\n```vue\n<template src=\"./template.html\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"><\/script>\n```\n\n请注意 `src` 导入和 JS 模块导入遵循相同的路径解析规则，这意味着：\n\n- 相对路径需要以 `./` 开头\n- 你也可以从 npm 依赖中导入资源\n\n```vue\n<!-- 从所安装的 \"todomvc-app-css\" npm 包中导入一个文件 -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\n`src` 导入对自定义语块也同样适用：\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```"
+					"value": "如果你更喜欢将 `*.vue` 组件分散到多个文件中，可以为一个语块使用 `src` 这个 attribute 来导入一个外部文件：\n\n```vue\n<template src=\"./template.html\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"><\/script>\n```\n\n请注意 `src` 导入和 JS 模块导入遵循相同的路径解析规则，这意味着：\n\n- 相对路径需要以 `./` 开头\n- 你也可以从 npm 依赖中导入资源\n\n```vue\n<!-- 从所安装的 \"todomvc-app-css\" npm 包中导入一个文件 -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\n`src` 导入对自定义语块也同样适用：\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```\n\n:::warning 注意\n在 `src` 中使用別名時，不要以 `~` 開頭，否則 `~` 後面的內容會被當作模塊請求來解析。這意味著你可以引用 node modules 中的資源：\n```vue\n<img src=\"~some-npm-package/foo.png\">\n```\n:::"
 				},
 				"references": "api/sfc-spec.html#src-imports"
 			}, {
 				"name": "lang",
 				"description": {
 					"kind": "markdown",
-					"value": "代码块可以使用 `lang` 这个 attribute 来声明预处理器语言，最常见的用例就是在 `<script>` 中使用 TypeScript：\n\n```html\n<script lang=\"ts\">\n  // use TypeScript\n<\/script>\n```\n\n`lang` 在任意块上都能使用，比如我们可以在 `<style>` 标签中使用 [Sass](https://sass-lang.com/) 或是 `<template>` 中使用 [Pug](https://pugjs.org/api/getting-started.html)：\n\n```html\n<template lang=\"pug\">\np {{ msg }}\n</template>\n\n<style lang=\"scss\">\n  $primary-color: #333;\n  body {\n    color: $primary-color;\n  }\n</style>\n```\n\n注意对不同预处理器的集成会根据你所使用的工具链而有所不同，具体细节请查看相应的工具链文档来确认：\n\n- [Vite](https://cn.vitejs.dev/guide/features.html#css-pre-processors)\n- [Vue CLI](https://cli.vuejs.org/zh/guide/css.html#%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8)\n- [webpack + vue-loader](https://vue-loader.vuejs.org/zh/guide/pre-processors.html#%E4%BD%BF%E7%94%A8%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8)"
+					"value": "代码块可以使用 `lang` 这个 attribute 来声明预处理器语言，最常见的用例就是在 `<script>` 中使用 TypeScript：\n\n```html\n<script lang=\"ts\">\n  // use TypeScript\n<\/script>\n```\n\n`lang` 在任意块上都能使用，比如我们可以在 `<style>` 标签中使用 [Sass](https://sass-lang.com/) 或是 `<template>` 中使用 [Pug](https://pugjs.org/api/getting-started.html)：\n\n```html\n<template lang=\"pug\">\np {{ msg }}\n</template>\n\n<style lang=\"scss\">\n  $primary-color: #333;\n  body {\n    color: $primary-color;\n  }\n</style>\n```\n\n注意对不同预处理器的集成会根据你所使用的工具链而有所不同，具体细节请查看相应的工具链文档来确认：\n\n- [Vite](https://vite.dev/guide/features.html#css-pre-processors)\n- [Vue CLI](https://cli.vuejs.org/guide/css.html#pre-processors)\n- [webpack + vue-loader](https://vue-loader.vuejs.org/guide/pre-processors.html#using-pre-processors)"
 				},
 				"values": [{ "name": "html" }, { "name": "pug" }],
 				"references": "api/sfc-spec.html#pre-processors"
@@ -111342,7 +111851,7 @@ var init_zh_hk$1 = __esmMin((() => {
 					"name": "src",
 					"description": {
 						"kind": "markdown",
-						"value": "如果你更喜欢将 `*.vue` 组件分散到多个文件中，可以为一个语块使用 `src` 这个 attribute 来导入一个外部文件：\n\n```vue\n<template src=\"./template.html\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"><\/script>\n```\n\n请注意 `src` 导入和 JS 模块导入遵循相同的路径解析规则，这意味着：\n\n- 相对路径需要以 `./` 开头\n- 你也可以从 npm 依赖中导入资源\n\n```vue\n<!-- 从所安装的 \"todomvc-app-css\" npm 包中导入一个文件 -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\n`src` 导入对自定义语块也同样适用：\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```"
+						"value": "如果你更喜欢将 `*.vue` 组件分散到多个文件中，可以为一个语块使用 `src` 这个 attribute 来导入一个外部文件：\n\n```vue\n<template src=\"./template.html\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"><\/script>\n```\n\n请注意 `src` 导入和 JS 模块导入遵循相同的路径解析规则，这意味着：\n\n- 相对路径需要以 `./` 开头\n- 你也可以从 npm 依赖中导入资源\n\n```vue\n<!-- 从所安装的 \"todomvc-app-css\" npm 包中导入一个文件 -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\n`src` 导入对自定义语块也同样适用：\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```\n\n:::warning 注意\n在 `src` 中使用別名時，不要以 `~` 開頭，否則 `~` 後面的內容會被當作模塊請求來解析。這意味著你可以引用 node modules 中的資源：\n```vue\n<img src=\"~some-npm-package/foo.png\">\n```\n:::"
 					},
 					"references": "api/sfc-spec.html#src-imports"
 				},
@@ -111350,7 +111859,7 @@ var init_zh_hk$1 = __esmMin((() => {
 					"name": "lang",
 					"description": {
 						"kind": "markdown",
-						"value": "代码块可以使用 `lang` 这个 attribute 来声明预处理器语言，最常见的用例就是在 `<script>` 中使用 TypeScript：\n\n```html\n<script lang=\"ts\">\n  // use TypeScript\n<\/script>\n```\n\n`lang` 在任意块上都能使用，比如我们可以在 `<style>` 标签中使用 [Sass](https://sass-lang.com/) 或是 `<template>` 中使用 [Pug](https://pugjs.org/api/getting-started.html)：\n\n```html\n<template lang=\"pug\">\np {{ msg }}\n</template>\n\n<style lang=\"scss\">\n  $primary-color: #333;\n  body {\n    color: $primary-color;\n  }\n</style>\n```\n\n注意对不同预处理器的集成会根据你所使用的工具链而有所不同，具体细节请查看相应的工具链文档来确认：\n\n- [Vite](https://cn.vitejs.dev/guide/features.html#css-pre-processors)\n- [Vue CLI](https://cli.vuejs.org/zh/guide/css.html#%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8)\n- [webpack + vue-loader](https://vue-loader.vuejs.org/zh/guide/pre-processors.html#%E4%BD%BF%E7%94%A8%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8)"
+						"value": "代码块可以使用 `lang` 这个 attribute 来声明预处理器语言，最常见的用例就是在 `<script>` 中使用 TypeScript：\n\n```html\n<script lang=\"ts\">\n  // use TypeScript\n<\/script>\n```\n\n`lang` 在任意块上都能使用，比如我们可以在 `<style>` 标签中使用 [Sass](https://sass-lang.com/) 或是 `<template>` 中使用 [Pug](https://pugjs.org/api/getting-started.html)：\n\n```html\n<template lang=\"pug\">\np {{ msg }}\n</template>\n\n<style lang=\"scss\">\n  $primary-color: #333;\n  body {\n    color: $primary-color;\n  }\n</style>\n```\n\n注意对不同预处理器的集成会根据你所使用的工具链而有所不同，具体细节请查看相应的工具链文档来确认：\n\n- [Vite](https://vite.dev/guide/features.html#css-pre-processors)\n- [Vue CLI](https://cli.vuejs.org/guide/css.html#pre-processors)\n- [webpack + vue-loader](https://vue-loader.vuejs.org/guide/pre-processors.html#using-pre-processors)"
 					},
 					"values": [
 						{ "name": "ts" },
@@ -111393,7 +111902,7 @@ var init_zh_hk$1 = __esmMin((() => {
 					"name": "src",
 					"description": {
 						"kind": "markdown",
-						"value": "如果你更喜欢将 `*.vue` 组件分散到多个文件中，可以为一个语块使用 `src` 这个 attribute 来导入一个外部文件：\n\n```vue\n<template src=\"./template.html\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"><\/script>\n```\n\n请注意 `src` 导入和 JS 模块导入遵循相同的路径解析规则，这意味着：\n\n- 相对路径需要以 `./` 开头\n- 你也可以从 npm 依赖中导入资源\n\n```vue\n<!-- 从所安装的 \"todomvc-app-css\" npm 包中导入一个文件 -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\n`src` 导入对自定义语块也同样适用：\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```"
+						"value": "如果你更喜欢将 `*.vue` 组件分散到多个文件中，可以为一个语块使用 `src` 这个 attribute 来导入一个外部文件：\n\n```vue\n<template src=\"./template.html\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"><\/script>\n```\n\n请注意 `src` 导入和 JS 模块导入遵循相同的路径解析规则，这意味着：\n\n- 相对路径需要以 `./` 开头\n- 你也可以从 npm 依赖中导入资源\n\n```vue\n<!-- 从所安装的 \"todomvc-app-css\" npm 包中导入一个文件 -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\n`src` 导入对自定义语块也同样适用：\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```\n\n:::warning 注意\n在 `src` 中使用別名時，不要以 `~` 開頭，否則 `~` 後面的內容會被當作模塊請求來解析。這意味著你可以引用 node modules 中的資源：\n```vue\n<img src=\"~some-npm-package/foo.png\">\n```\n:::"
 					},
 					"references": "api/sfc-spec.html#src-imports"
 				},
@@ -111401,7 +111910,7 @@ var init_zh_hk$1 = __esmMin((() => {
 					"name": "lang",
 					"description": {
 						"kind": "markdown",
-						"value": "代码块可以使用 `lang` 这个 attribute 来声明预处理器语言，最常见的用例就是在 `<script>` 中使用 TypeScript：\n\n```html\n<script lang=\"ts\">\n  // use TypeScript\n<\/script>\n```\n\n`lang` 在任意块上都能使用，比如我们可以在 `<style>` 标签中使用 [Sass](https://sass-lang.com/) 或是 `<template>` 中使用 [Pug](https://pugjs.org/api/getting-started.html)：\n\n```html\n<template lang=\"pug\">\np {{ msg }}\n</template>\n\n<style lang=\"scss\">\n  $primary-color: #333;\n  body {\n    color: $primary-color;\n  }\n</style>\n```\n\n注意对不同预处理器的集成会根据你所使用的工具链而有所不同，具体细节请查看相应的工具链文档来确认：\n\n- [Vite](https://cn.vitejs.dev/guide/features.html#css-pre-processors)\n- [Vue CLI](https://cli.vuejs.org/zh/guide/css.html#%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8)\n- [webpack + vue-loader](https://vue-loader.vuejs.org/zh/guide/pre-processors.html#%E4%BD%BF%E7%94%A8%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8)"
+						"value": "代码块可以使用 `lang` 这个 attribute 来声明预处理器语言，最常见的用例就是在 `<script>` 中使用 TypeScript：\n\n```html\n<script lang=\"ts\">\n  // use TypeScript\n<\/script>\n```\n\n`lang` 在任意块上都能使用，比如我们可以在 `<style>` 标签中使用 [Sass](https://sass-lang.com/) 或是 `<template>` 中使用 [Pug](https://pugjs.org/api/getting-started.html)：\n\n```html\n<template lang=\"pug\">\np {{ msg }}\n</template>\n\n<style lang=\"scss\">\n  $primary-color: #333;\n  body {\n    color: $primary-color;\n  }\n</style>\n```\n\n注意对不同预处理器的集成会根据你所使用的工具链而有所不同，具体细节请查看相应的工具链文档来确认：\n\n- [Vite](https://vite.dev/guide/features.html#css-pre-processors)\n- [Vue CLI](https://cli.vuejs.org/guide/css.html#pre-processors)\n- [webpack + vue-loader](https://vue-loader.vuejs.org/guide/pre-processors.html#using-pre-processors)"
 					},
 					"values": [
 						{ "name": "css" },
@@ -111427,7 +111936,7 @@ var init_zh_hk$1 = __esmMin((() => {
 					"valueSet": "v",
 					"description": {
 						"kind": "markdown",
-						"value": "一个 `<style module>` 标签会被编译为 [CSS Modules](https://github.com/css-modules/css-modules) 并且将生成的 CSS class 作为 `$style` 对象暴露给组件：\n\n```vue\n<template>\n  <p :class=\"$style.red\">This should be red</p>\n</template>\n\n<style module>\n.red {\n  color: red;\n}\n</style>\n```\n\n得出的 class 将被哈希化以避免冲突，实现了同样的将 CSS 仅作用于当前组件的效果。\n\n参考 [CSS Modules spec](https://github.com/css-modules/css-modules) 以查看更多详情，例如 [global exceptions](https://github.com/css-modules/css-modules/blob/master/docs/composition.md#exceptions) 和 [composition](https://github.com/css-modules/css-modules/blob/master/docs/composition.md#composition)。\n\n### 自定义注入名称 \n\n你可以通过给 `module` attribute 一个值来自定义注入 class 对象的属性名：\n\n```vue\n<template>\n  <p :class=\"classes.red\">red</p>\n</template>\n\n<style module=\"classes\">\n.red {\n  color: red;\n}\n</style>\n```\n\n### 与组合式 API 一同使用 \n\n可以通过 `useCssModule` API 在 `setup()` 和 `<script setup>` 中访问注入的 class。对于使用了自定义注入名称的 `<style module>` 块，`useCssModule` 接收一个匹配的 `module` attribute 值作为第一个参数：\n\n```js\nimport { useCssModule } from 'vue'\n\n// 在 setup() 作用域中...\n// 默认情况下, 返回 <style module> 的 class\nuseCssModule()\n\n// 具名情况下, 返回 <style module=\"classes\"> 的 class\nuseCssModule('classes')\n```"
+						"value": "一个 `<style module>` 标签会被编译为 [CSS Modules](https://github.com/css-modules/css-modules) 并且将生成的 CSS class 作为 `$style` 对象暴露给组件：\n\n```vue\n<template>\n  <p :class=\"$style.red\">This should be red</p>\n</template>\n\n<style module>\n.red {\n  color: red;\n}\n</style>\n```\n\n得出的 class 将被哈希化以避免冲突，实现了同样的将 CSS 仅作用于当前组件的效果。\n\n参考 [CSS Modules spec](https://github.com/css-modules/css-modules) 以查看更多详情，例如 [global exceptions](https://github.com/css-modules/css-modules/blob/master/docs/composition.md#exceptions) 和 [composition](https://github.com/css-modules/css-modules/blob/master/docs/composition.md#composition)。\n\n### 自定义注入名称 \n\n你可以通过给 `module` attribute 一个值来自定义注入 class 对象的属性名：\n\n```vue\n<template>\n  <p :class=\"classes.red\">red</p>\n</template>\n\n<style module=\"classes\">\n.red {\n  color: red;\n}\n</style>\n```\n\n### 与组合式 API 一同使用 \n\n可以通过 `useCssModule` API 在 `setup()` 和 `<script setup>` 中访问注入的 class。对于使用了自定义注入名称的 `<style module>` 块，`useCssModule` 接收一个匹配的 `module` attribute 值作为第一个参数：\n\n```js\nimport { useCssModule } from 'vue'\n\n// 在 setup() 作用域中...\n// 默认情况下, 返回 <style module> 的 class\nuseCssModule()\n\n// 具名情况下, 返回 <style module=\"classes\"> 的 class\nuseCssModule('classes')\n```\n\n- **Example**\n\n```vue\n<script setup lang=\"ts\">\nimport { useCssModule } from 'vue'\n\nconst classes = useCssModule()\n<\/script>\n\n<template>\n  <p :class=\"classes.red\">red</p>\n</template>\n\n<style module>\n.red {\n  color: red;\n}\n</style>\n```\n\n- **Example**\n\n```vue\n<script setup lang=\"ts\">\nimport { useCssModule } from 'vue'\n\nconst classes = useCssModule()\n<\/script>\n\n<template>\n  <p :class=\"classes.red\">red</p>\n</template>\n\n<style module>\n.red {\n  color: red;\n}\n</style>\n```"
 					},
 					"references": "api/sfc-css-features.html#css-modules"
 				}
@@ -111444,13 +111953,13 @@ var init_zh_hk$1 = __esmMin((() => {
 				"name": "src",
 				"description": {
 					"kind": "markdown",
-					"value": "如果你更喜欢将 `*.vue` 组件分散到多个文件中，可以为一个语块使用 `src` 这个 attribute 来导入一个外部文件：\n\n```vue\n<template src=\"./template.html\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"><\/script>\n```\n\n请注意 `src` 导入和 JS 模块导入遵循相同的路径解析规则，这意味着：\n\n- 相对路径需要以 `./` 开头\n- 你也可以从 npm 依赖中导入资源\n\n```vue\n<!-- 从所安装的 \"todomvc-app-css\" npm 包中导入一个文件 -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\n`src` 导入对自定义语块也同样适用：\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```"
+					"value": "如果你更喜欢将 `*.vue` 组件分散到多个文件中，可以为一个语块使用 `src` 这个 attribute 来导入一个外部文件：\n\n```vue\n<template src=\"./template.html\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"><\/script>\n```\n\n请注意 `src` 导入和 JS 模块导入遵循相同的路径解析规则，这意味着：\n\n- 相对路径需要以 `./` 开头\n- 你也可以从 npm 依赖中导入资源\n\n```vue\n<!-- 从所安装的 \"todomvc-app-css\" npm 包中导入一个文件 -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\n`src` 导入对自定义语块也同样适用：\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```\n\n:::warning 注意\n在 `src` 中使用別名時，不要以 `~` 開頭，否則 `~` 後面的內容會被當作模塊請求來解析。這意味著你可以引用 node modules 中的資源：\n```vue\n<img src=\"~some-npm-package/foo.png\">\n```\n:::"
 				},
 				"references": "api/sfc-spec.html#src-imports"
 			}],
 			"description": {
 				"kind": "markdown",
-				"value": "\n在一个 `*.vue` 文件中可以为任何项目特定需求使用额外的自定义块。举例来说，一个用作写文档的 `<docs>` 块。这里是一些自定义块的真实用例：\n\n- [Gridsome：`<page-query>`](https://gridsome.org/docs/querying-data/)\n- [vite-plugin-vue-gql：`<gql>`](https://github.com/wheatjs/vite-plugin-vue-gql)\n- [vue-i18n：`<i18n>`](https://github.com/intlify/bundle-tools/tree/main/packages/vite-plugin-vue-i18n#i18n-custom-block)\n\n自定义块的处理需要依赖工具链。如果你想要在构建中集成你的自定义语块，请参见 [SFC 自定义块集成工具链指南](https://zh-hk.vuejs.org/guide/scaling-up/tooling.html#sfc-custom-block-integrations)获取更多细节。\n"
+				"value": "\n在一个 `*.vue` 文件中可以为任何项目特定需求使用额外的自定义块。举例来说，一个用作写文档的 `<docs>` 块。这里是一些自定义块的真实用例：\n\n- [Gridsome：`<page-query>`](https://gridsome.org/docs/querying-data/)\n- [vite-plugin-vue-gql：`<gql>`](https://github.com/wheatjs/vite-plugin-vue-gql)\n- [vue-i18n：`<i18n>`](https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n#i18n-custom-block)\n\n自定义块的处理需要依赖工具链。如果你想要在构建中集成你的自定义语块，请参见 [SFC 自定义块集成工具链指南](https://zh-hk.vuejs.org/guide/scaling-up/tooling.html#sfc-custom-block-integrations)获取更多细节。\n"
 			},
 			"references": "api/sfc-spec.html#自定义块"
 		}
@@ -111459,7 +111968,7 @@ var init_zh_hk$1 = __esmMin((() => {
 		"name": "lang",
 		"description": {
 			"kind": "markdown",
-			"value": "代码块可以使用 `lang` 这个 attribute 来声明预处理器语言，最常见的用例就是在 `<script>` 中使用 TypeScript：\n\n```html\n<script lang=\"ts\">\n  // use TypeScript\n<\/script>\n```\n\n`lang` 在任意块上都能使用，比如我们可以在 `<style>` 标签中使用 [Sass](https://sass-lang.com/) 或是 `<template>` 中使用 [Pug](https://pugjs.org/api/getting-started.html)：\n\n```html\n<template lang=\"pug\">\np {{ msg }}\n</template>\n\n<style lang=\"scss\">\n  $primary-color: #333;\n  body {\n    color: $primary-color;\n  }\n</style>\n```\n\n注意对不同预处理器的集成会根据你所使用的工具链而有所不同，具体细节请查看相应的工具链文档来确认：\n\n- [Vite](https://cn.vitejs.dev/guide/features.html#css-pre-processors)\n- [Vue CLI](https://cli.vuejs.org/zh/guide/css.html#%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8)\n- [webpack + vue-loader](https://vue-loader.vuejs.org/zh/guide/pre-processors.html#%E4%BD%BF%E7%94%A8%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8)"
+			"value": "代码块可以使用 `lang` 这个 attribute 来声明预处理器语言，最常见的用例就是在 `<script>` 中使用 TypeScript：\n\n```html\n<script lang=\"ts\">\n  // use TypeScript\n<\/script>\n```\n\n`lang` 在任意块上都能使用，比如我们可以在 `<style>` 标签中使用 [Sass](https://sass-lang.com/) 或是 `<template>` 中使用 [Pug](https://pugjs.org/api/getting-started.html)：\n\n```html\n<template lang=\"pug\">\np {{ msg }}\n</template>\n\n<style lang=\"scss\">\n  $primary-color: #333;\n  body {\n    color: $primary-color;\n  }\n</style>\n```\n\n注意对不同预处理器的集成会根据你所使用的工具链而有所不同，具体细节请查看相应的工具链文档来确认：\n\n- [Vite](https://vite.dev/guide/features.html#css-pre-processors)\n- [Vue CLI](https://cli.vuejs.org/guide/css.html#pre-processors)\n- [webpack + vue-loader](https://vue-loader.vuejs.org/guide/pre-processors.html#using-pre-processors)"
 		},
 		"values": [],
 		"references": "api/sfc-spec.html#pre-processors"
@@ -111467,7 +111976,7 @@ var init_zh_hk$1 = __esmMin((() => {
 		"name": "src",
 		"description": {
 			"kind": "markdown",
-			"value": "如果你更喜欢将 `*.vue` 组件分散到多个文件中，可以为一个语块使用 `src` 这个 attribute 来导入一个外部文件：\n\n```vue\n<template src=\"./template.html\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"><\/script>\n```\n\n请注意 `src` 导入和 JS 模块导入遵循相同的路径解析规则，这意味着：\n\n- 相对路径需要以 `./` 开头\n- 你也可以从 npm 依赖中导入资源\n\n```vue\n<!-- 从所安装的 \"todomvc-app-css\" npm 包中导入一个文件 -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\n`src` 导入对自定义语块也同样适用：\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```"
+			"value": "如果你更喜欢将 `*.vue` 组件分散到多个文件中，可以为一个语块使用 `src` 这个 attribute 来导入一个外部文件：\n\n```vue\n<template src=\"./template.html\"></template>\n<style src=\"./style.css\"></style>\n<script src=\"./script.js\"><\/script>\n```\n\n请注意 `src` 导入和 JS 模块导入遵循相同的路径解析规则，这意味着：\n\n- 相对路径需要以 `./` 开头\n- 你也可以从 npm 依赖中导入资源\n\n```vue\n<!-- 从所安装的 \"todomvc-app-css\" npm 包中导入一个文件 -->\n<style src=\"todomvc-app-css/index.css\" />\n```\n\n`src` 导入对自定义语块也同样适用：\n\n```vue\n<unit-test src=\"./unit-test.js\">\n</unit-test>\n```\n\n:::warning 注意\n在 `src` 中使用別名時，不要以 `~` 開頭，否則 `~` 後面的內容會被當作模塊請求來解析。這意味著你可以引用 node modules 中的資源：\n```vue\n<img src=\"~some-npm-package/foo.png\">\n```\n:::"
 		},
 		"references": "api/sfc-spec.html#src-imports"
 	}];
@@ -112279,7 +112788,7 @@ var init_ko = __esmMin((() => {
 			"name": "lazy",
 			"description": {
 				"kind": "markdown",
-				"value": "기본적으로, `v-model`은 각 `input` 이벤트 후에 입력과 데이터를 동기화합니다([위에서 언급한 IME 조합 제외](#vmodel-ime-tip)). 대신 `change` 이벤트 후에 동기화하려면 `lazy` 수식어를 추가할 수 있습니다:\n\n```html\n<!-- \"input\" 대신 \"change\" 후에 동기화됨 -->\n<input v-model.lazy=\"msg\" />\n```"
+				"value": "기본적으로, `v-model`은 각 `input` 이벤트 후에 입력과 데이터를 동기화합니다([위에서 언급한 IME 조합 제외](#vmodel-ime-tip)). 대신 `change` 이벤트 후에 동기화하려면 `lazy` 수식어(modifier)를 추가할 수 있습니다:\n\n```html\n<!-- \"input\" 대신 \"change\" 후에 동기화됨 -->\n<input v-model.lazy=\"msg\" />\n```"
 			},
 			"references": "guide/essentials/forms.html#lazy"
 		},
@@ -112407,7 +112916,7 @@ var init_zh_hk = __esmMin((() => {
 			"name": "number",
 			"description": {
 				"kind": "markdown",
-				"value": "如果你想讓用戶輸入自動轉換為數字，你可以在 `v-model` 後添加 `.number` 修飾符來管理輸入：\n\n```html\n<input v-model.number=\"age\" />\n```\n\n如果該值無法被 `parseFloat()` 處理，那麼將返回原始值。\n\n`number` 修飾符會在輸入框有 `type=\"number\"` 時自動啟用。"
+				"value": "如果你想讓用戶輸入自動轉換為數字，你可以在 `v-model` 後添加 `.number` 修飾符來管理輸入：\n\n```html\n<input v-model.number=\"age\" />\n```\n\nIf the value cannot be parsed with `parseFloat()`, then the original (string) value is used instead. In particular, if the input is empty (for instance after the user clearing the input field), an empty string is returned. This behavior differs from the [DOM property `valueAsNumber`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#valueasnumber). \n\n`number` 修飾符會在輸入框有 `type=\"number\"` 時自動啟用。"
 			},
 			"references": "guide/essentials/forms.html#number"
 		},
@@ -116598,7 +117107,8 @@ var require_vue_template = /* @__PURE__ */ __commonJSMin(((exports, module, this
 					}
 				}
 				async function getCustomData() {
-					const paths = await context.env.getConfiguration?.("html.customData") ?? [];
+					const raw = await context.env.getConfiguration?.("html.customData");
+					const paths = Array.isArray(raw) ? raw.filter(Boolean) : [];
 					const customData = [];
 					for (const path of paths) for (const workspaceFolder of context.env.workspaceFolders) {
 						const uri = vscode_uri_1.Utils.resolvePath(workspaceFolder, path);
@@ -272468,11 +272978,11 @@ var require_connection$1 = /* @__PURE__ */ __commonJSMin(((exports, module, this
 				} catch (error) {
 					logger.error(`Processing message queue failed: ${error.toString()}`);
 				} finally {
-					if (result instanceof Promise) result.then(() => {
+					if (result instanceof Promise) result.then(() => {}).catch((error) => {
+						logger.error(`Processing message queue failed: ${error.toString()}`);
+					}).finally(() => {
 						inFlight--;
 						triggerMessageQueue();
-					}).catch((error) => {
-						logger.error(`Processing message queue failed: ${error.toString()}`);
 					});
 					else inFlight--;
 					triggerMessageQueue();