@verbb/plugin-kit-web 2.0.23 → 2.0.24

package/dist-loader/components/tiptap/tiptap-input.js

@@ -1,8 +1,276 @@
-import { a as e, c as customElement, m as i, o as r, p as b, s as n } from "../../chunks/lit-s6aadvWG.js";
-import { c as __decorate, i as PkFormAssociatedElement, n as formControlStyles } from "../../chunks/pk-base-Om6X9ab5.js";
-import { t as MirrorValidator } from "../../chunks/mirror-validator-9X0wdFnh.js";
-import { A as Editor } from "../../chunks/tiptap-BhYH5Dva.js";
-import { C as contentToValue, E as valueToContent, M as createTiptapInputExtensions, T as flattenVariableOptions, i as createVariableTagDomNodeView, n as tiptapInputProseMirrorStyles, w as dedupeVariableOptions } from "../../chunks/tiptap.styles-BckAim0_.js";
+import { a as e, c as customElement, m as i, o as r, p as b, s as n } from "../../chunks/lit-B6nFKgbW.js";
+import { c as __decorate, i as PkFormAssociatedElement, n as formControlStyles } from "../../chunks/pk-base-BGegy7-X.js";
+import { t as MirrorValidator } from "../../chunks/mirror-validator-BkZlEv1Z.js";
+import { t as Editor } from "../../chunks/tiptap-uppXgD5k.js";
+import { i as createVariableTagDomNodeView, n as tiptapInputProseMirrorStyles, s as createTiptapInputExtensions } from "../../chunks/tiptap.styles-CyqI_Wrl.js";
+//#region ../plugin-kit-tiptap-core/dist/serialization/input.js
+var TRANSFORMER_ID_PREFIX = "transform=";
+function parseTokenMetadata(tokenValue) {
+	const match = tokenValue.match(/^\{([^}]*)\}$/);
+	if (!match) return { tokenWithoutDefault: tokenValue };
+	let body = match[1] ?? "";
+	let defaultIfEmpty;
+	if (body.includes("|")) {
+		const split = body.split("|");
+		body = split.shift() ?? "";
+		defaultIfEmpty = split.join("|").trim() || void 0;
+	}
+	const segments = body.split(";").map((part) => {
+		return part.trim();
+	}).filter(Boolean);
+	const cleanSegments = [];
+	let transformerId;
+	let transformerParams;
+	const referenceParams = {};
+	let isTransformerParam = false;
+	segments.forEach((segment) => {
+		if (segment.startsWith(TRANSFORMER_ID_PREFIX)) {
+			transformerId = decodeURIComponent(segment.slice(10)).trim() || void 0;
+			isTransformerParam = true;
+			return;
+		}
+		if (segment.includes("=")) {
+			const [keyRaw, ...valueParts] = segment.split("=");
+			const key = (keyRaw ?? "").trim().toLowerCase();
+			if (!key) return;
+			const value = decodeURIComponent(valueParts.join("=").trim());
+			if (isTransformerParam) {
+				if (!transformerParams) transformerParams = {};
+				transformerParams[key] = value;
+				return;
+			}
+			referenceParams[key] = value;
+			cleanSegments.push(`${key}=${encodeURIComponent(value)}`);
+			return;
+		}
+		cleanSegments.push(segment);
+	});
+	return {
+		tokenWithoutDefault: `{${cleanSegments.join(";")}}`,
+		defaultIfEmpty,
+		transformerId,
+		transformerParams,
+		referenceParams
+	};
+}
+function isVariableLikeToken(tokenValue) {
+	return /^\{[a-zA-Z][a-zA-Z0-9_]*(?::[^}]*)?\}$/.test(tokenValue);
+}
+/** Craft field UIDs — never surface these as chip labels. */
+var FIELD_UID_PATTERN = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+function isLikelyFieldUid(value) {
+	return FIELD_UID_PATTERN.test(String(value || "").trim());
+}
+function toTitleWords(value) {
+	return value.replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/[_-]+/g, " ").trim().replace(/\s+/g, " ").replace(/\b\w/g, (char) => {
+		return char.toUpperCase();
+	});
+}
+/**
+* Label when no variable option matched. Prefer a clear "unknown" prompt over
+* title-casing UIDs (e.g. "7aff44ed Bca7…"), which looks broken rather than fixable.
+*/
+function buildFallbackLabelForUnknownToken(tokenWithoutDefault) {
+	if (tokenWithoutDefault.match(/^\{field:([^}]+)\}$/)) return "Unknown field";
+	const [target = "", identifier = "", selector = ""] = tokenWithoutDefault.replace(/^\{|\}$/g, "").split(":");
+	const reference = String(selector || identifier || target).split(";")[0]?.trim() ?? "";
+	if (isLikelyFieldUid(reference) || isLikelyFieldUid(identifier)) return "Unknown variable";
+	if (target) return toTitleWords(reference) || "Unknown variable";
+	return "Unknown variable";
+}
+function serializeTokenMetadata(baseToken, metadata) {
+	const baseMatch = baseToken.match(/^\{([^}]*)\}$/);
+	if (!baseMatch) return baseToken;
+	const parts = [baseMatch[1]];
+	const transformerId = metadata.transformerId?.trim();
+	const params = metadata.transformerParams && typeof metadata.transformerParams === "object" ? Object.entries(metadata.transformerParams) : [];
+	if (transformerId) {
+		parts.push(`${TRANSFORMER_ID_PREFIX}${encodeURIComponent(transformerId)}`);
+		params.forEach(([key, value]) => {
+			const normalizedKey = String(key ?? "").trim();
+			if (!normalizedKey || normalizedKey === "transform") return;
+			const normalizedValue = value == null ? "" : String(value);
+			parts.push(`${normalizedKey}=${encodeURIComponent(normalizedValue)}`);
+		});
+	}
+	const tokenBody = parts.filter(Boolean).join(";");
+	const defaultIfEmpty = metadata.defaultIfEmpty?.trim();
+	return defaultIfEmpty ? `{${tokenBody}|${defaultIfEmpty}}` : `{${tokenBody}}`;
+}
+function dedupeVariableOptions(items) {
+	const deduped = [];
+	const seen = /* @__PURE__ */ new Set();
+	items.forEach((item) => {
+		const key = String(item?.value ?? "") || `__label:${String(item?.label ?? "")}`;
+		if (seen.has(key)) return;
+		seen.add(key);
+		deduped.push(item);
+	});
+	return deduped;
+}
+function flattenVariableOptions(items) {
+	const flat = [];
+	const visit = (nodes) => {
+		nodes.forEach((node) => {
+			flat.push(node);
+			if (Array.isArray(node.children) && node.children.length > 0) visit(node.children);
+		});
+	};
+	visit(items);
+	return flat;
+}
+/**
+* Build VariableTag attributes from base and selected variable options.
+* Optional defaultIfEmpty is used when the resolved value is empty (e.g. "Guest" for {user:firstName|Guest}).
+*/
+function buildVariableTagAttrs(baseVariable, selectedVariable = baseVariable, options = {}) {
+	const selectedLabel = options.label ?? selectedVariable?.label ?? baseVariable?.label ?? "";
+	const value = options.value ?? selectedVariable?.value ?? baseVariable?.value ?? "";
+	const defaultIfEmpty = options.defaultIfEmpty?.trim();
+	const attrs = {
+		label: selectedLabel,
+		value,
+		openOnInsert: options.openOnInsert ?? false
+	};
+	if (defaultIfEmpty) attrs.default = defaultIfEmpty;
+	if (options.transformerId?.trim()) attrs.transformerId = options.transformerId.trim();
+	if (options.transformerParams && typeof options.transformerParams === "object") attrs.transformerParams = options.transformerParams;
+	return attrs;
+}
+/**
+* Strip optional inline default from token for lookup: {user:firstName|Guest} -> {user:firstName}.
+* Returns [tokenWithoutDefault, defaultText].
+*/
+function parseTokenWithDefault(tokenValue) {
+	const parsed = parseTokenMetadata(tokenValue);
+	return [parsed.tokenWithoutDefault, parsed.defaultIfEmpty];
+}
+function getReferenceBaseToken(tokenValue) {
+	const [tokenWithoutDefault] = parseTokenWithDefault(tokenValue);
+	const match = tokenWithoutDefault.match(/^\{([^}]*)\}$/);
+	if (!match) return tokenWithoutDefault;
+	const body = match[1].split(";")[0]?.trim() ?? "";
+	return body ? `{${body}}` : tokenWithoutDefault;
+}
+function variableValuesMatchReference(tokenValue, optionValue) {
+	if (!tokenValue || !optionValue) return false;
+	if (tokenValue === optionValue) return true;
+	return getReferenceBaseToken(tokenValue) === getReferenceBaseToken(optionValue);
+}
+function resolveVariableTagLabel(tokenValue, option) {
+	const { tokenWithoutDefault } = parseTokenMetadata(String(tokenValue || ""));
+	if (option?.label) return option.label;
+	return buildFallbackLabelForUnknownToken(tokenWithoutDefault);
+}
+function findMatchingVariableOption(items, tokenWithoutDefault) {
+	let fallbackMatch = null;
+	for (const item of items) {
+		const children = Array.isArray(item.children) ? item.children : [];
+		const itemValue = String(item.value ?? "");
+		if (itemValue === tokenWithoutDefault) return item;
+		if (children.length) {
+			const childMatch = findMatchingVariableOption(children, tokenWithoutDefault);
+			if (childMatch?.value === tokenWithoutDefault) return childMatch;
+			if (childMatch && !fallbackMatch) fallbackMatch = childMatch;
+		}
+		if (variableValuesMatchReference(tokenWithoutDefault, itemValue)) {
+			if (!fallbackMatch) fallbackMatch = item;
+		}
+	}
+	return fallbackMatch;
+}
+/**
+* Resolve variable tag attrs from a token string (e.g. '{form:name}' or '{user:firstName|Guest}').
+*/
+function resolveVariableTagByValue(tokenValue, topLevelVariables, allVariables) {
+	const { tokenWithoutDefault, defaultIfEmpty, transformerId, transformerParams } = parseTokenMetadata(tokenValue);
+	const resolvedValue = tokenWithoutDefault;
+	const topLevelMatch = findMatchingVariableOption(topLevelVariables, tokenWithoutDefault);
+	if (topLevelMatch) return buildVariableTagAttrs(topLevelMatch, topLevelMatch, {
+		defaultIfEmpty,
+		transformerId,
+		transformerParams,
+		label: resolveVariableTagLabel(resolvedValue, topLevelMatch),
+		value: resolvedValue
+	});
+	const fallback = findMatchingVariableOption(allVariables, tokenWithoutDefault);
+	if (fallback) return buildVariableTagAttrs(fallback, fallback, {
+		defaultIfEmpty,
+		transformerId,
+		transformerParams,
+		label: resolveVariableTagLabel(resolvedValue, fallback),
+		value: resolvedValue
+	});
+	if (isVariableLikeToken(tokenWithoutDefault)) return {
+		label: resolveVariableTagLabel(tokenWithoutDefault, null),
+		value: tokenWithoutDefault,
+		openOnInsert: false,
+		unresolved: true,
+		...defaultIfEmpty ? { default: defaultIfEmpty } : {},
+		...transformerId ? { transformerId } : {},
+		...transformerParams ? { transformerParams } : {}
+	};
+	return null;
+}
+/**
+* Convert string value with {token} placeholders to Tiptap doc content.
+*/
+function valueToContent(value, topLevelVariables, allVariables, trailingCursorText = "​") {
+	if (!value) return null;
+	const content = value.split(/({.*?})/).flatMap((param) => {
+		if (param.includes("{")) {
+			const variable = resolveVariableTagByValue(param, topLevelVariables, allVariables);
+			if (variable) return [{
+				type: "variableTag",
+				attrs: variable
+			}];
+		}
+		if (!param) return [];
+		return [{
+			type: "text",
+			text: param
+		}];
+	});
+	if (trailingCursorText && content.length && content[content.length - 1].type === "variableTag") content.push({
+		type: "text",
+		text: trailingCursorText
+	});
+	return {
+		type: "doc",
+		content
+	};
+}
+/**
+* Convert Tiptap content to string value.
+* Content is typically editor.getJSON().content (array of block/inline nodes).
+*/
+function contentToValue(content) {
+	if (!content) return "";
+	const items = Array.isArray(content) ? content : [];
+	let result = "";
+	const visit = (nodes) => {
+		nodes.forEach((node) => {
+			if (!node || typeof node !== "object") return;
+			const n = node;
+			if (n.type === "paragraph" && Array.isArray(n.content)) visit(n.content);
+			else if (n.type === "text") result += (n.text ?? "").replace(/[\u200B\u2060]/g, "");
+			else if (n.type === "variableTag") {
+				const val = n.attrs?.value ?? "";
+				const def = n.attrs?.default?.trim();
+				const transformerId = n.attrs?.transformerId?.trim();
+				const transformerParams = n.attrs?.transformerParams;
+				result += serializeTokenMetadata(val, {
+					defaultIfEmpty: def,
+					transformerId,
+					transformerParams
+				});
+			}
+		});
+	};
+	visit(items);
+	return result.replace(/[\r\n]+/g, " ");
+}
+//#endregion
 //#region src/components/tiptap/pk-tiptap-input.styles.ts
 var pkTiptapInputStyles = i`
     @layer pk-component {

package/dist-loader/components/toggle/toggle.js

@@ -1,6 +1,6 @@
-import { c as customElement, f as A, m as i, p as b, s as n } from "../../chunks/lit-s6aadvWG.js";
-import { c as __decorate, l as PkElement } from "../../chunks/pk-base-Om6X9ab5.js";
-import { i as buttonGroupIndentStyles, n as buttonGroupCornerRadiusStyles, r as buttonGroupCornerRoleStyles, t as buttonGroupBorderJoinStyles } from "../../chunks/button-group-item.styles-CXLuiMeZ.js";
+import { c as customElement, f as A, m as i, p as b, s as n } from "../../chunks/lit-B6nFKgbW.js";
+import { c as __decorate, l as PkElement } from "../../chunks/pk-base-BGegy7-X.js";
+import { i as buttonGroupIndentStyles, n as buttonGroupCornerRadiusStyles, r as buttonGroupCornerRoleStyles, t as buttonGroupBorderJoinStyles } from "../../chunks/button-group-item.styles-BQbvE3sC.js";
 //#region src/components/toggle/pk-toggle.styles.ts
 var pkToggleStyles = [
 	buttonGroupCornerRoleStyles(),

package/dist-loader/components/toggle-group/toggle-group.js

@@ -1,5 +1,5 @@
-import { c as customElement, m as i, o as r, p as b, s as n } from "../../chunks/lit-s6aadvWG.js";
-import { c as __decorate, l as PkElement } from "../../chunks/pk-base-Om6X9ab5.js";
+import { c as customElement, m as i, o as r, p as b, s as n } from "../../chunks/lit-B6nFKgbW.js";
+import { c as __decorate, l as PkElement } from "../../chunks/pk-base-BGegy7-X.js";
 //#region src/components/toggle-group/pk-toggle-group.styles.ts
 var pkToggleGroupStyles = i`
     @layer pk-component {
@@ -132,8 +132,10 @@ var PkToggleGroup = class PkToggleGroup extends PkElement {
 			if (!itemValue) continue;
 			const selected = this.value.includes(itemValue);
 			item.setAttribute("aria-pressed", selected ? "true" : "false");
-			if (item.tagName === "PK-TOGGLE") if (selected) item.setAttribute("pressed", "");
-			else item.removeAttribute("pressed");
+			if (item.tagName === "PK-TOGGLE") {
+				if (selected) item.setAttribute("pressed", "");
+				else item.removeAttribute("pressed");
+			}
 		}
 	}
 	render() {

package/dist-loader/components/tooltip/tooltip.js

@@ -1,2 +1,2 @@
-import { t as PkTooltip } from "../../chunks/pk-tooltip-CqwQfOPV.js";
+import { t as PkTooltip } from "../../chunks/pk-tooltip-DStkplzy.js";
 export { PkTooltip };

package/dist-loader/plugin-kit.loader.js

@@ -1,4 +1,4 @@
-import { a as getScrollLockDepth, i as forceClearScrollLock, l as getDismissibleStackSnapshot } from "./chunks/pk-a11y-CjB4-U-R.js";
+import { a as getScrollLockDepth, i as forceClearScrollLock, l as getDismissibleStackSnapshot } from "./chunks/pk-a11y-mGj0G5AE.js";
 //#region src/component-registry.ts
 /**
 * Canonical tag → loader module path mapping for the autoloader.
@@ -63,6 +63,7 @@ var COMPONENT_MODULE_PATHS = {
 	"pk-connect-oauth": "components/connect/connect-oauth.js",
 	"pk-editable-table": "components/editable-table/editable-table.js"
 };
+Object.keys(COMPONENT_MODULE_PATHS);
 /** Vite loader-build entries: output key → source module. */
 var LOADER_COMPONENT_ENTRIES = {
 	"components/alert/alert": "src/components/alert/pk-alert.ts",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@verbb/plugin-kit-web",
-    "version": "2.0.23",
+    "version": "2.0.24",
     "repository": {
         "url": "git+https://github.com/verbb/plugin-kit.git"
     },
@@ -1067,25 +1067,25 @@
     },
     "peerDependencies": {
         "@floating-ui/dom": "^1.7.3",
-        "@verbb/plugin-kit-core": "^2.0.23",
-        "@verbb/plugin-kit-icons": "^2.0.23",
+        "@verbb/plugin-kit-core": "^2.0.24",
+        "@verbb/plugin-kit-icons": "^2.0.24",
         "lit": "^3.3.0"
     },
     "license": "MIT",
     "dependencies": {
         "@floating-ui/dom": "^1.7.3",
-        "@tiptap/core": "3.22.4",
-        "@verbb/plugin-kit-codemirror-core": "2.0.23",
-        "@verbb/plugin-kit-core": "^2.0.23",
-        "@verbb/plugin-kit-icons": "^2.0.23",
-        "@verbb/plugin-kit-tiptap-core": "^2.0.23",
+        "@tiptap/core": "3.31.4",
+        "@verbb/plugin-kit-codemirror-core": "2.0.24",
+        "@verbb/plugin-kit-core": "^2.0.24",
+        "@verbb/plugin-kit-icons": "^2.0.24",
+        "@verbb/plugin-kit-tiptap-core": "^2.0.24",
         "composed-offset-position": "^0.0.6",
         "lit": "^3.3.0"
     },
     "devDependencies": {
         "@custom-elements-manifest/analyzer": "^0.11.0",
         "typescript": "^6.0.3",
-        "vite": "^8.0.10",
+        "vite": "^8.3.3",
         "vite-plugin-dts": "^4.5.4"
     },
     "engines": {

package/dist/chunks/pk-alert-Cjxl6CY_.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"pk-alert-Cjxl6CY_.js","names":[],"sources":["../../src/events/pk-dismiss.ts","../../src/components/alert/pk-alert.styles.ts","../../src/components/alert/pk-alert.ts"],"sourcesContent":["/** Emitted before a dismissible component hides itself. Prevent to keep it visible. */\nexport class PkDismissEvent extends Event {\n    constructor() {\n        super('pk-dismiss', { bubbles: true, cancelable: true, composed: true });\n    }\n}\n\ndeclare global {\n    interface GlobalEventHandlersEventMap {\n        'pk-dismiss': PkDismissEvent;\n    }\n}\n","import { css } from 'lit';\n\nexport const pkAlertStyles = css`\n    @layer pk-component {\n        :host {\n            display: block;\n            width: 100%;\n            color: var(--pk-alert-color);\n            font-family: var(--pk-font-family);\n            font-size: var(--_pk-alert-font-size);\n            line-height: var(--pk-line-height);\n            --pk-alert-accent: var(--pk-color-sky-600);\n            --pk-alert-background: var(--pk-color-sky-50);\n            --pk-alert-border: var(--pk-color-sky-300);\n            --pk-alert-color: var(--pk-color-sky-800);\n            --_pk-alert-font-size: var(--pk-font-size-sm);\n            --_pk-alert-padding: 0.625rem 0.75rem;\n            --_pk-alert-radius: var(--pk-radius-md);\n            --_pk-alert-gap: 0.5rem;\n            --_pk-alert-icon-size: 1.125rem;\n            --_pk-alert-title-size: var(--pk-font-size-base);\n            --_pk-alert-dismiss-size: 1.5rem;\n            --_pk-alert-dismiss-padding: 0.375rem;\n            --_pk-alert-dismiss-margin: -0.125rem -0.1875rem -0.125rem 0;\n            --_pk-alert-section-margin-top: 0.625rem;\n            --_pk-alert-details-padding-top: 0.5rem;\n            --_pk-alert-details-content-margin-top: 0.625rem;\n            --_pk-alert-details-pre-padding: 0.625rem;\n            --_pk-alert-details-pre-radius: var(--pk-radius-md);\n            --_pk-alert-details-pre-font-size: 0.6875rem;\n            --_pk-alert-copy-button-size: var(--pk-btn-height-xs);\n            --_pk-alert-copy-icon-size: var(--pk-btn-icon-size-xs);\n            --_pk-alert-copy-inset: 0.375rem;\n            --_pk-alert-copy-radius: var(--pk-radius-md);\n            --_pk-alert-copy-status-size: 0.6875rem;\n            --_pk-alert-action-height: var(--pk-btn-height-sm);\n            --_pk-alert-action-font: var(--pk-btn-font-sm);\n            --_pk-alert-action-padding-inline: var(--pk-btn-padding-inline-sm);\n            --_pk-alert-action-icon-size: var(--pk-btn-icon-size-sm);\n            --_pk-alert-action-icon-gap: var(--pk-btn-icon-gap-sm);\n            --_pk-alert-action-caret-size: var(--pk-btn-caret-size-sm);\n            --_pk-alert-action-radius: var(--pk-btn-radius-sm);\n        }\n\n        :host([hidden]) {\n            display: none;\n        }\n\n        :host([size='sm']) {\n            --_pk-alert-font-size: var(--pk-btn-font-xs);\n            --_pk-alert-padding: 0.5rem 0.625rem;\n            --_pk-alert-radius: var(--pk-radius-sm);\n            --_pk-alert-gap: 0.4375rem;\n            --_pk-alert-icon-size: 1rem;\n            --_pk-alert-title-size: var(--pk-font-size-sm);\n            --_pk-alert-dismiss-size: 1.375rem;\n            --_pk-alert-dismiss-padding: 0.3125rem;\n            --_pk-alert-dismiss-margin: -0.125rem -0.125rem -0.125rem 0;\n            --_pk-alert-section-margin-top: 0.5rem;\n            --_pk-alert-details-padding-top: 0.375rem;\n            --_pk-alert-details-content-margin-top: 0.5rem;\n            --_pk-alert-details-pre-padding: 0.5rem;\n            --_pk-alert-details-pre-radius: var(--pk-radius-sm);\n            --_pk-alert-details-pre-font-size: 0.6875rem;\n            --_pk-alert-copy-button-size: var(--pk-btn-height-xxs);\n            --_pk-alert-copy-icon-size: var(--pk-btn-icon-size-xxs);\n            --_pk-alert-copy-inset: 0.3125rem;\n            --_pk-alert-copy-radius: var(--pk-radius-sm);\n            --_pk-alert-copy-status-size: 0.6875rem;\n            --_pk-alert-action-height: var(--pk-btn-height-xs);\n            --_pk-alert-action-font: var(--pk-btn-font-xs);\n            --_pk-alert-action-padding-inline: var(--pk-btn-padding-inline-xs);\n            --_pk-alert-action-icon-size: var(--pk-btn-icon-size-xs);\n            --_pk-alert-action-icon-gap: var(--pk-btn-icon-gap-xs);\n            --_pk-alert-action-caret-size: var(--pk-btn-caret-size-xs);\n            --_pk-alert-action-radius: var(--pk-btn-radius-xs);\n        }\n\n        :host([size='lg']) {\n            --_pk-alert-font-size: var(--pk-font-size-base);\n            --_pk-alert-padding: 0.875rem 1rem;\n            --_pk-alert-radius: var(--pk-radius-lg);\n            --_pk-alert-gap: 0.75rem;\n            --_pk-alert-icon-size: 1.375rem;\n            --_pk-alert-title-size: 0.9375rem;\n            --_pk-alert-dismiss-size: 1.75rem;\n            --_pk-alert-dismiss-padding: 0.4375rem;\n            --_pk-alert-dismiss-margin: -0.1875rem -0.25rem -0.1875rem 0;\n            --_pk-alert-section-margin-top: 0.75rem;\n            --_pk-alert-details-padding-top: 0.625rem;\n            --_pk-alert-details-content-margin-top: 0.75rem;\n            --_pk-alert-details-pre-padding: 0.75rem;\n            --_pk-alert-details-pre-radius: var(--pk-radius-lg);\n            --_pk-alert-details-pre-font-size: 0.75rem;\n            --_pk-alert-copy-button-size: var(--pk-btn-height-sm);\n            --_pk-alert-copy-icon-size: var(--pk-btn-icon-size-sm);\n            --_pk-alert-copy-inset: 0.5rem;\n            --_pk-alert-copy-radius: var(--pk-radius-lg);\n            --_pk-alert-copy-status-size: 0.75rem;\n            --_pk-alert-action-height: 2.125rem;\n            --_pk-alert-action-font: var(--pk-font-size-base);\n            --_pk-alert-action-padding-inline: 9px;\n            --_pk-alert-action-icon-size: 14px;\n            --_pk-alert-action-icon-gap: 6px;\n            --_pk-alert-action-caret-size: 12px;\n            --_pk-alert-action-radius: var(--pk-radius-lg);\n        }\n\n        .alert {\n            box-sizing: border-box;\n            width: 100%;\n            padding: var(--pk-alert-padding, var(--_pk-alert-padding));\n            border: 1px solid var(--pk-alert-border);\n            border-inline-start: 4px solid var(--pk-alert-accent);\n            border-radius: var(--pk-alert-radius, var(--_pk-alert-radius));\n            background: var(--pk-alert-background);\n        }\n\n        :host([variant='success']) {\n            --pk-alert-accent: var(--pk-color-teal-600);\n            --pk-alert-background: var(--pk-color-teal-50);\n            --pk-alert-border: var(--pk-color-teal-400);\n            --pk-alert-color: var(--pk-color-teal-800);\n        }\n\n        :host([variant='neutral']) {\n            --pk-alert-accent: var(--pk-color-gray-600);\n            --pk-alert-background: var(--pk-color-gray-50);\n            --pk-alert-border: var(--pk-color-gray-300);\n            --pk-alert-color: var(--pk-color-gray-800);\n        }\n\n        :host([variant='warning']) {\n            --pk-alert-accent: var(--pk-color-amber-600);\n            --pk-alert-background: var(--pk-color-amber-50);\n            --pk-alert-border: var(--pk-color-amber-300);\n            --pk-alert-color: var(--pk-color-amber-800);\n        }\n\n        :host([variant='error']) {\n            --pk-alert-accent: var(--pk-color-red-600);\n            --pk-alert-background: var(--pk-color-red-50);\n            --pk-alert-border: var(--pk-color-red-300);\n            --pk-alert-color: var(--pk-color-red-800);\n        }\n\n        :host([appearance='filled-outlined']) .alert {\n            border-inline-start-width: 1px;\n            border-inline-start-color: var(--pk-alert-border);\n        }\n\n        :host([appearance='filled']) .alert {\n            border-color: transparent;\n            border-inline-start-width: 1px;\n        }\n\n        :host([appearance='outlined']) .alert {\n            border-color: var(--pk-alert-accent);\n            border-inline-start-width: 1px;\n            background: transparent;\n        }\n\n        :host([appearance='plain']) .alert {\n            border-color: transparent;\n            border-inline-start-width: 1px;\n            background: transparent;\n        }\n\n        .notice {\n            display: flex;\n            align-items: flex-start;\n            gap: var(--_pk-alert-gap);\n            min-width: 0;\n        }\n\n        .icon {\n            display: inline-flex;\n            flex: 0 0 auto;\n            align-items: center;\n            justify-content: center;\n            width: var(--_pk-alert-icon-size);\n            height: var(--_pk-alert-icon-size);\n            margin-top: 0.0625rem;\n            color: var(--pk-alert-accent);\n        }\n\n        .icon svg,\n        .dismiss svg {\n            display: block;\n            width: 100%;\n            height: 100%;\n            fill: currentColor;\n        }\n\n        .content {\n            min-width: 0;\n            flex: 1 1 auto;\n        }\n\n        .title {\n            display: block;\n            margin: 0 0 0.125rem;\n            color: var(--pk-alert-title-color, var(--pk-alert-accent));\n            font-size: var(--pk-alert-title-size, var(--_pk-alert-title-size));\n            font-weight: 700;\n            line-height: 1.4;\n        }\n\n        .body {\n            color: var(\n                --pk-alert-body-color,\n                var(--pk-alert-title-color, var(--pk-alert-accent))\n            );\n        }\n\n        .body ::slotted(*) {\n            /* Host document styles outrank normal shadow rules for slotted elements. */\n            margin-block: 0 !important;\n        }\n\n        .dismiss {\n            display: inline-flex;\n            flex: 0 0 auto;\n            align-items: center;\n            justify-content: center;\n            width: var(--_pk-alert-dismiss-size);\n            height: var(--_pk-alert-dismiss-size);\n            margin: var(--_pk-alert-dismiss-margin);\n            padding: var(--_pk-alert-dismiss-padding);\n            border: 0;\n            border-radius: var(--pk-radius-md);\n            background: transparent;\n            color: var(--pk-alert-accent);\n            cursor: pointer;\n        }\n\n        .dismiss:hover {\n            background: color-mix(\n                in srgb,\n                var(--pk-alert-accent) 10%,\n                transparent\n            );\n        }\n\n        .dismiss:focus-visible,\n        .copy:focus-visible,\n        summary:focus-visible {\n            outline: none;\n            box-shadow: var(--pk-shadow-focus);\n        }\n\n        .actions,\n        .details {\n            margin-inline-start: calc(var(--_pk-alert-icon-size) + var(--_pk-alert-gap));\n        }\n\n        :host([hide-icon]) .actions,\n        :host([hide-icon]) .details {\n            margin-inline-start: 0;\n        }\n\n        .actions {\n            margin-top: var(--_pk-alert-section-margin-top);\n        }\n\n        .actions slot::slotted(pk-button) {\n            --pk-btn-height-default: var(--_pk-alert-action-height);\n            --pk-btn-font-default: var(--_pk-alert-action-font);\n            --pk-btn-padding-inline-default: var(--_pk-alert-action-padding-inline);\n            --pk-btn-icon-size-default: var(--_pk-alert-action-icon-size);\n            --pk-btn-icon-gap-default: var(--_pk-alert-action-icon-gap);\n            --pk-btn-caret-size-default: var(--_pk-alert-action-caret-size);\n            --pk-btn-radius-default: var(--_pk-alert-action-radius);\n        }\n\n        .details {\n            margin-top: var(--_pk-alert-section-margin-top);\n            padding-top: var(--_pk-alert-details-padding-top);\n            border-top: 1px solid var(--pk-alert-border);\n            color: var(--pk-color-gray-800);\n        }\n\n        summary {\n            width: fit-content;\n            border-radius: var(--pk-radius-sm);\n            font-weight: 600;\n            cursor: pointer;\n        }\n\n        .details-content {\n            position: relative;\n            margin-top: var(--_pk-alert-details-content-margin-top);\n        }\n\n        .details-scroll {\n            min-width: 0;\n        }\n\n        .details-content ::slotted(pre) {\n            box-sizing: border-box;\n            max-height: var(--pk-alert-details-max-height, 16rem);\n            margin: 0;\n            padding: var(--_pk-alert-details-pre-padding);\n            overflow: auto;\n            border: 1px solid var(--pk-color-gray-200);\n            border-radius: var(--_pk-alert-details-pre-radius);\n            background: var(--pk-color-white);\n            color: var(--pk-color-gray-800);\n            /* Keep host pre resets from changing diagnostic typography. */\n            font:\n                var(--_pk-alert-details-pre-font-size)/1.5 ui-monospace,\n                SFMono-Regular,\n                Consolas,\n                'Liberation Mono',\n                monospace !important;\n            overflow-wrap: anywhere;\n            user-select: text;\n            white-space: pre-wrap;\n        }\n\n        :host([copyable]) .details-content ::slotted(pre) {\n            max-height: none;\n            padding-inline-end: calc(\n                var(--_pk-alert-details-pre-padding) + var(--_pk-alert-copy-button-size) +\n                    var(--_pk-alert-copy-inset)\n            );\n            overflow: visible;\n            border: 0;\n            border-radius: 0;\n            background: transparent;\n        }\n\n        :host([copyable]) .details-content {\n            overflow: hidden;\n            border: 1px solid var(--pk-color-gray-200);\n            border-radius: var(--_pk-alert-details-pre-radius);\n            background: var(--pk-color-white);\n        }\n\n        :host([copyable]) .details-scroll {\n            position: relative;\n            max-height: var(--pk-alert-details-max-height, 16rem);\n            overflow: auto;\n        }\n\n        .copy-overlay {\n            position: sticky;\n            z-index: 1;\n            top: 0;\n            display: flex;\n            justify-content: flex-end;\n            height: 0;\n            pointer-events: none;\n        }\n\n        .copy {\n            flex: none;\n            margin-block-start: var(--_pk-alert-copy-inset);\n            margin-inline-end: var(--_pk-alert-copy-inset);\n            pointer-events: auto;\n            --pk-btn-height-default: var(--_pk-alert-copy-button-size);\n            --pk-btn-icon-size-default: var(--_pk-alert-copy-icon-size);\n            --pk-btn-radius-default: var(--_pk-alert-copy-radius);\n            --pk-copy-button-background: var(--pk-color-white);\n            --pk-copy-button-border-color: transparent;\n            --pk-copy-button-hover-border-color: transparent;\n            --pk-copy-button-color: var(--pk-color-gray-300);\n            --pk-copy-button-hover-color: var(--pk-color-gray-500);\n            --pk-copy-button-hover-background: color-mix(\n                in srgb,\n                var(--pk-color-gray-300) 6%,\n                var(--pk-color-white)\n            );\n        }\n\n        .copy-status {\n            display: block;\n            margin-top: 0.375rem;\n            color: var(--pk-color-red-700);\n            font-size: var(--_pk-alert-copy-status-size);\n        }\n\n        .copy-status:not([data-error]) {\n            position: absolute;\n            width: 1px;\n            height: 1px;\n            margin: -1px;\n            padding: 0;\n            overflow: hidden;\n            clip: rect(0, 0, 0, 0);\n            white-space: nowrap;\n            border: 0;\n        }\n\n        @media (max-width: 480px) {\n            .actions,\n            .details {\n                margin-inline-start: 0;\n            }\n        }\n    }\n`;\n","import { html, nothing } from 'lit';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { customElement, property, query, state } from '../../decorators.js';\n\nimport { PkElement } from '../../base/pk-element.js';\nimport { PkCopyErrorEvent, PkCopyEvent } from '../../events/pk-copy.js';\nimport { PkDismissEvent } from '../../events/pk-dismiss.js';\nimport {\n    circleCheck,\n    circleExclamation,\n    circleInfo,\n    renderIconHtml,\n    triangleExclamation,\n    xmark,\n} from '../../icons/index.js';\nimport { HasSlotController } from '../../internal/has-slot.js';\nimport { copyToClipboard } from '../../utils/copy-to-clipboard.js';\nimport type { PkCopyButton } from '../copy-button/pk-copy-button.js';\nimport '../copy-button/pk-copy-button.js';\nimport { pkAlertStyles } from './pk-alert.styles.js';\n\nexport type PkAlertVariant = 'neutral' | 'info' | 'success' | 'warning' | 'error';\nexport type PkAlertAppearance =\n    | 'accent'\n    | 'filled-outlined'\n    | 'filled'\n    | 'outlined'\n    | 'plain';\nexport type PkAlertAnnouncement = 'off' | 'polite' | 'assertive';\nexport type PkAlertSize = 'sm' | 'default' | 'lg';\n\nconst COPY_STATUS_RESET_MS = 3000;\n\nconst defaultIcons = {\n    neutral: circleInfo,\n    info: circleInfo,\n    success: circleCheck,\n    warning: triangleExclamation,\n    error: circleExclamation,\n};\n\n/**\n * Semantic notice for feedback, warnings and recoverable failures.\n *\n * @slot title - Alert heading. Takes precedence over the `heading` property.\n * @slot icon - Custom icon. The component supplies a variant icon by default.\n * @slot - Alert message or other primary content.\n * @slot actions - Optional primary alert actions.\n * @slot details - Optional content inside the collapsible details region.\n *\n * @event pk-dismiss - Emitted before a dismissible alert hides. Prevent to keep it visible.\n * @event pk-copy - Emitted when the details are copied successfully.\n * @event pk-copy-error - Emitted when the details cannot be copied.\n *\n * @csspart base - Alert container.\n * @csspart notice - Icon, content and dismiss-button row.\n * @csspart icon - Icon wrapper.\n * @csspart content - Heading and message wrapper.\n * @csspart title - Alert heading.\n * @csspart body - Default content wrapper.\n * @csspart dismiss-button - Dismiss button.\n * @csspart actions - Alert actions wrapper.\n * @csspart details - Collapsible details element.\n * @csspart details-summary - Details disclosure label.\n * @csspart details-content - Details content wrapper.\n * @csspart copy-button - Copy-details button.\n * @csspart copy-status - Copy result status.\n *\n * @cssproperty --pk-alert-accent - Accent, title and icon colour.\n * @cssproperty --pk-alert-background - Alert background.\n * @cssproperty --pk-alert-border - Alert and divider border colour.\n * @cssproperty --pk-alert-color - Alert host colour.\n * @cssproperty --pk-alert-body-color - Primary content colour.\n * @cssproperty --pk-alert-title-color - Heading colour.\n * @cssproperty --pk-alert-title-size - Heading font size.\n * @cssproperty --pk-alert-padding - Alert inner padding.\n * @cssproperty --pk-alert-radius - Alert corner radius.\n * @cssproperty --pk-alert-details-max-height - Maximum height of diagnostic details.\n *\n * @dependency pk-copy-button - Compact copy-details action.\n */\n@customElement('pk-alert')\nexport class PkAlert extends PkElement {\n    static override styles = pkAlertStyles;\n\n    private readonly hasSlotController = new HasSlotController(\n        this,\n        'title',\n        'icon',\n        'actions',\n        'details',\n    );\n\n    @property({ reflect: true })\n    variant: PkAlertVariant = 'info';\n\n    /** Overall density, including typography, icons, spacing, details, and actions. */\n    @property({ reflect: true })\n    size: PkAlertSize = 'default';\n\n    /** Visual treatment, independent from the alert's semantic variant. */\n    @property({ reflect: true })\n    appearance: PkAlertAppearance = 'accent';\n\n    @property()\n    heading = '';\n\n    @property({ type: Boolean, attribute: 'hide-icon', reflect: true })\n    hideIcon = false;\n\n    @property({ type: Boolean, reflect: true })\n    dismissible = false;\n\n    @property({ reflect: true })\n    announce: PkAlertAnnouncement = 'off';\n\n    @property({ attribute: 'details-label' })\n    detailsLabel = 'Details';\n\n    @property({ type: Boolean, attribute: 'details-open', reflect: true })\n    detailsOpen = false;\n\n    @property({ type: Boolean, reflect: true })\n    copyable = false;\n\n    @property({ attribute: 'copy-label' })\n    copyLabel = 'Copy details';\n\n    @property({ attribute: 'copied-label' })\n    copiedLabel = 'Details copied.';\n\n    @property({ attribute: 'copy-error-label' })\n    copyErrorLabel = 'Copy failed. Select the details and copy them manually.';\n\n    @property({ attribute: 'dismiss-label' })\n    dismissLabel = 'Dismiss';\n\n    @query('slot[name=\"details\"]')\n    private detailsSlot!: HTMLSlotElement;\n\n    @query('pk-copy-button.copy')\n    private copyButton?: PkCopyButton;\n\n    @state()\n    private copyStatus = '';\n\n    @state()\n    private copyFailed = false;\n\n    private copyStatusResetTimer?: number;\n\n    override disconnectedCallback(): void {\n        window.clearTimeout(this.copyStatusResetTimer);\n        super.disconnectedCallback();\n    }\n\n    private hasTitle(): boolean {\n        return Boolean(this.heading) || this.hasSlotController.test('title');\n    }\n\n    private hasDetails(): boolean {\n        return this.hasSlotController.test('details');\n    }\n\n    private get detailsValue(): string {\n        return (this.detailsSlot?.assignedNodes({ flatten: true }) ?? [])\n            .map((node) => node.textContent ?? '')\n            .join('')\n            .trim();\n    }\n\n    private resetCopyStatusLater(): void {\n        window.clearTimeout(this.copyStatusResetTimer);\n        this.copyStatusResetTimer = window.setTimeout(() => {\n            this.copyStatus = '';\n            this.copyFailed = false;\n        }, COPY_STATUS_RESET_MS);\n    }\n\n    private showCopySuccess(): void {\n        this.copyFailed = false;\n        this.copyStatus = this.copiedLabel;\n        this.resetCopyStatusLater();\n    }\n\n    private showCopyError(): void {\n        this.copyFailed = true;\n        this.copyStatus = this.copyErrorLabel;\n        this.resetCopyStatusLater();\n    }\n\n    private handleCopySuccess(): void {\n        this.showCopySuccess();\n    }\n\n    private handleCopyError(): void {\n        this.showCopyError();\n        this.selectDetails();\n    }\n\n    private selectDetails(): void {\n        const nodes = this.detailsSlot?.assignedNodes({ flatten: true }) ?? [];\n        const first = nodes[0];\n        const last = nodes[nodes.length - 1];\n\n        if (!first || !last) {\n            return;\n        }\n\n        this.detailsOpen = true;\n\n        const range = document.createRange();\n        range.setStartBefore(first);\n        range.setEndAfter(last);\n\n        const selection = window.getSelection();\n        selection?.removeAllRanges();\n        selection?.addRange(range);\n    }\n\n    /** Copy the plain text assigned to the details slot. */\n    async copyDetails(): Promise<void> {\n        const value = this.detailsValue;\n\n        if (!value) {\n            this.showCopyError();\n            this.dispatchEvent(new PkCopyErrorEvent());\n            return;\n        }\n\n        if (this.copyButton) {\n            this.copyButton.value = value;\n            await this.copyButton.copy();\n            return;\n        }\n\n        try {\n            await copyToClipboard(value);\n            this.showCopySuccess();\n            const copyEvent = new PkCopyEvent(value);\n            this.dispatchEvent(copyEvent);\n        } catch {\n            this.showCopyError();\n            this.selectDetails();\n            this.dispatchEvent(new PkCopyErrorEvent());\n        }\n    }\n\n    /** Request dismissal and hide the alert unless the event is prevented. */\n    dismiss(): void {\n        if (this.dispatchEvent(new PkDismissEvent())) {\n            this.hidden = true;\n        }\n    }\n\n    /** Show an alert hidden by `dismiss()`. */\n    show(): void {\n        this.hidden = false;\n    }\n\n    private handleDetailsToggle(event: Event): void {\n        this.detailsOpen = (event.currentTarget as HTMLDetailsElement).open;\n    }\n\n    private renderIcon() {\n        if (this.hideIcon) {\n            return nothing;\n        }\n\n        const icon = this.hasSlotController.test('icon')\n            ? html`<slot name=\"icon\"></slot>`\n            : unsafeSVG(renderIconHtml(defaultIcons[this.variant] ?? defaultIcons.info));\n\n        return html`<span part=\"icon\" class=\"icon\" aria-hidden=\"true\">${icon}</span>`;\n    }\n\n    override render() {\n        const role = this.announce === 'assertive'\n            ? 'alert'\n            : this.announce === 'polite'\n                ? 'status'\n                : nothing;\n        const live = this.announce === 'off' ? nothing : this.announce;\n        const hasActions = this.hasSlotController.test('actions');\n        const hasDetails = this.hasDetails();\n\n        return html`\n            <div\n                part=\"base\"\n                class=\"alert\"\n                role=${role}\n                aria-live=${live}\n                aria-atomic=${this.announce === 'off' ? nothing : 'true'}\n            >\n                <div part=\"notice\" class=\"notice\">\n                    ${this.renderIcon()}\n\n                    <div part=\"content\" class=\"content\">\n                        ${this.hasTitle()\n                            ? html`\n                                <strong part=\"title\" class=\"title\">\n                                    ${this.hasSlotController.test('title')\n                                        ? html`<slot name=\"title\"></slot>`\n                                        : this.heading}\n                                </strong>\n                            `\n                            : nothing}\n\n                        <div part=\"body\" class=\"body\"><slot></slot></div>\n                    </div>\n\n                    ${this.dismissible\n                        ? html`\n                            <button\n                                part=\"dismiss-button\"\n                                class=\"dismiss\"\n                                type=\"button\"\n                                aria-label=${this.dismissLabel}\n                                @click=${this.dismiss}\n                            >\n                                ${unsafeSVG(renderIconHtml(xmark))}\n                            </button>\n                        `\n                        : nothing}\n                </div>\n\n                ${hasActions\n                    ? html`<div part=\"actions\" class=\"actions\"><slot name=\"actions\"></slot></div>`\n                    : nothing}\n\n                ${hasDetails\n                    ? html`\n                        <details\n                            part=\"details\"\n                            class=\"details\"\n                            ?open=${this.detailsOpen}\n                            @toggle=${this.handleDetailsToggle}\n                        >\n                            <summary part=\"details-summary\">${this.detailsLabel}</summary>\n                            <div part=\"details-content\" class=\"details-content\">\n                                <div class=\"details-scroll\">\n                                    ${this.copyable\n                                        ? html`\n                                            <div class=\"copy-overlay\">\n                                                <pk-copy-button\n                                                    part=\"copy-button\"\n                                                    class=\"copy\"\n                                                    variant=\"transparent\"\n                                                    aria-label=${this.copyLabel}\n                                                    .copiedLabel=${this.copiedLabel}\n                                                    .value=${this.detailsValue}\n                                                    @pk-copy=${this.handleCopySuccess}\n                                                    @pk-copy-error=${this.handleCopyError}\n                                                ></pk-copy-button>\n                                            </div>\n                                        `\n                                        : nothing}\n                                    <slot name=\"details\"></slot>\n                                </div>\n                            </div>\n\n                            ${this.copyable\n                                ? html`\n                                    <span\n                                        part=\"copy-status\"\n                                        class=\"copy-status\"\n                                        data-error=${this.copyFailed ? '' : nothing}\n                                        role=\"status\"\n                                        aria-live=\"polite\"\n                                    >${this.copyStatus}</span>\n                                `\n                                : nothing}\n                        </details>\n                    `\n                    : nothing}\n            </div>\n        `;\n    }\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'pk-alert': PkAlert;\n    }\n}\n"],"mappings":"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"}

package/dist/chunks/pk-autocomplete-DA77kdTN.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"pk-autocomplete-DA77kdTN.js","names":[],"sources":["../../src/components/autocomplete/pk-autocomplete.styles.ts","../../src/components/autocomplete/pk-autocomplete.ts"],"sourcesContent":["import { css } from 'lit';\n\nimport { iconStyles } from '../../base/icon.styles.js';\nimport { popupContentAnimationStyles } from '../../styles/popup-content-animation.styles.js';\n\n/**\n * Autocomplete chrome matches `pk-input` (text field), not Combobox’s slate\n * select fill / chevron affordance. Panel / listbox tokens stay shared with\n * Combobox so suggestion rows look the same.\n */\nexport const pkAutocompleteStyles = [\n    popupContentAnimationStyles,\n    css`\n    ${iconStyles}\n    @layer pk-component {\n        :host {\n            display: block;\n            position: relative;\n            width: 100%;\n            color: var(--pk-color-gray-700);\n            font-family: var(--pk-font-family);\n            font-size: var(--pk-font-size-base);\n            line-height: var(--pk-line-height);\n            /* Match pk-input control tokens — not Combobox slate fill. */\n            --pk-autocomplete-padding-block: 6px;\n            --pk-autocomplete-padding-inline: 8px;\n            --pk-autocomplete-control-gap: 6px;\n            --pk-autocomplete-decoration-size: 0.75rem;\n            --pk-autocomplete-font-size: var(--pk-font-size-base);\n            --pk-select-item-min-height: 0;\n            --pk-select-item-padding-block: 6px;\n            --pk-select-item-padding-inline: 10px;\n            --pk-select-item-padding-inline-end: 2rem;\n            --pk-select-item-font-size: 14px;\n            --pk-select-item-line-height: 1.4;\n            --pk-select-item-indicator-size: 0.75rem;\n            --pk-select-item-indicator-inset: 0.5rem;\n            --pk-select-group-label-font-size: 12px;\n        }\n\n        /* width=\"full\" is the documented stretch opt-in; host already fills by default. */\n        :host([width='full']) {\n            display: block;\n            width: 100%;\n        }\n\n        .control {\n            display: flex;\n            align-items: center;\n            gap: var(--pk-autocomplete-control-gap);\n            width: 100%;\n            max-width: 100%;\n            min-width: 0;\n            margin: 0;\n            padding-block: var(--pk-autocomplete-padding-block);\n            padding-inline: var(--pk-autocomplete-padding-inline);\n            border: var(--pk-input-border);\n            border-radius: var(--pk-input-border-radius, var(--pk-radius-sm));\n            background: var(--pk-input-bg);\n            background-clip: padding-box;\n            color: var(--pk-color-gray-700);\n            font: inherit;\n            font-size: var(--pk-autocomplete-font-size);\n            line-height: var(--pk-input-control-line-height, 1.25rem);\n            white-space: nowrap;\n            cursor: text;\n            outline: none;\n            box-sizing: border-box;\n            transition: border-color 0.12s ease, box-shadow 0.12s ease;\n        }\n\n        /*\n         * Craft text focus: resting border stays; ring is box-shadow only\n         * (--pk-input-focus-shadow already includes the 1px edge). Same when the\n         * suggestion panel is open — still a text field, not a select trigger.\n         */\n        :host(:not([invalid]):not(:state(user-invalid))) .control:focus-within,\n        :host(:not([invalid]):not(:state(user-invalid))[data-state='focus-visible']) .control,\n        :host(:not([invalid]):not(:state(user-invalid))) .control[data-popup-open] {\n            box-shadow: var(--pk-input-focus-shadow);\n        }\n\n        .control.is-disabled {\n            cursor: not-allowed;\n            opacity: 0.5;\n        }\n\n        .control-start,\n        .control-end {\n            display: inline-flex;\n            align-items: center;\n            flex-shrink: 0;\n            line-height: 0;\n            color: var(--pk-color-gray-400);\n        }\n\n        slot[name='start']::slotted(svg),\n        slot[name='end']::slotted(svg) {\n            width: var(--pk-autocomplete-decoration-size);\n            height: var(--pk-autocomplete-decoration-size);\n        }\n\n        .autocomplete-input {\n            flex: 1 1 auto;\n            width: 100%;\n            min-width: 0;\n            margin: 0;\n            padding: 0;\n            border: 0;\n            background: transparent;\n            color: inherit;\n            font: inherit;\n            line-height: var(--pk-input-control-line-height, 1.25rem);\n            outline: none;\n        }\n\n        .autocomplete-input::placeholder {\n            color: var(--pk-input-placeholder-color, var(--pk-color-gray-400));\n        }\n\n        /* Clear: flex trailing action — same contract as pk-input / Combobox clear. */\n        .clear-button {\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            flex-shrink: 0;\n            align-self: stretch;\n            box-sizing: border-box;\n            width: calc(var(--pk-autocomplete-decoration-size) + var(--pk-autocomplete-padding-inline));\n            height: auto;\n            min-height: var(--pk-autocomplete-decoration-size);\n            margin-block: calc(-1 * var(--pk-autocomplete-padding-block));\n            /* Match pk-copy-button[slot=end]: pull into padding but leave a 4px glyph inset. */\n            margin-inline-end: calc(-1 * var(--pk-autocomplete-padding-inline) + 4px);\n            margin-inline-start: 0;\n            padding: 0;\n            border: 0;\n            border-radius: 0;\n            background: transparent;\n            color: var(--pk-color-gray-600);\n            cursor: pointer;\n            outline: none;\n        }\n\n        .clear-button:disabled {\n            cursor: not-allowed;\n            opacity: 0.5;\n        }\n\n        .clear-button-icon {\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            line-height: 0;\n            pointer-events: none;\n        }\n\n        .clear-button-icon svg {\n            display: block;\n            width: 0.75rem;\n            height: 0.75rem;\n        }\n\n        .value-input {\n            position: absolute;\n            width: 1px;\n            height: 1px;\n            padding: 0;\n            margin: -1px;\n            overflow: hidden;\n            clip: rect(0, 0, 0, 0);\n            white-space: nowrap;\n            border: 0;\n        }\n\n        .panel ::slotted(pk-separator) {\n            margin: 4px 0;\n        }\n\n        .panel {\n            width: max-content;\n            min-width: var(--pk-autocomplete-anchor-width, 8rem);\n            padding: 0;\n            border: 0;\n            border-radius: var(--pk-radius-md);\n            background: var(--pk-color-white);\n            box-shadow: var(--pk-shadow-popup);\n            color: var(--pk-color-gray-700);\n            outline: none;\n        }\n\n        .panel-body {\n            max-height: 16rem;\n            overflow: auto;\n        }\n\n        .panel:not([data-open]):not(.closing) {\n            opacity: 0;\n            pointer-events: none;\n        }\n\n        .panel[data-open]:not(.closing) {\n            opacity: 1;\n            pointer-events: auto;\n        }\n\n        .panel[hidden] {\n            display: none !important;\n        }\n\n        .empty,\n        .async-status {\n            display: flex;\n            align-items: center;\n            margin: 0;\n            min-height: var(--pk-select-item-min-height, var(--pk-input-height));\n            padding-block: var(--pk-select-item-padding-block);\n            padding-inline: var(--pk-select-item-padding-inline);\n            border: var(--pk-select-trigger-border-width, 1px) solid transparent;\n            box-sizing: border-box;\n            color: var(--pk-color-gray-500);\n            font-size: var(--pk-select-item-font-size);\n            line-height: var(--pk-select-item-line-height);\n        }\n\n        :host([invalid]) .control,\n        :host(:state(user-invalid)) .control {\n            border-color: var(--pk-color-rose-600);\n        }\n\n        :host([invalid]) .control:focus-within,\n        :host([invalid][data-state='focus-visible']) .control,\n        :host(:state(user-invalid)) .control:focus-within,\n        :host(:state(user-invalid)[data-state='focus-visible']) .control {\n            box-shadow: var(--pk-input-invalid-focus-shadow);\n        }\n\n        :host([size='xs']) {\n            --pk-autocomplete-padding-block: 4px;\n            --pk-autocomplete-padding-inline: 6px;\n            --pk-autocomplete-control-gap: 4px;\n            --pk-autocomplete-decoration-size: 0.625rem;\n            --pk-autocomplete-font-size: 11px;\n            --pk-select-item-padding-block: 4px;\n            --pk-select-item-padding-inline: 8px;\n            --pk-select-item-padding-inline-end: 1.75rem;\n            --pk-select-item-font-size: 11px;\n            --pk-select-group-label-font-size: 11px;\n        }\n\n        :host([size='xs']) .clear-button-icon svg {\n            width: 0.625rem;\n            height: 0.625rem;\n        }\n\n        :host([size='sm']) {\n            --pk-autocomplete-padding-block: 4px;\n            --pk-autocomplete-padding-inline: 8px;\n            --pk-autocomplete-control-gap: 4px;\n            --pk-autocomplete-decoration-size: 0.6875rem;\n            --pk-autocomplete-font-size: 12px;\n            --pk-select-item-padding-block: 6px;\n            --pk-select-item-padding-inline: 10px;\n            --pk-select-item-padding-inline-end: 1.75rem;\n            --pk-select-item-font-size: 12px;\n            --pk-select-group-label-font-size: 12px;\n        }\n\n        :host([size='sm']) .clear-button-icon svg {\n            width: 0.6875rem;\n            height: 0.6875rem;\n        }\n\n        :host([size='lg']) {\n            --pk-autocomplete-padding-block: 8px;\n            --pk-autocomplete-padding-inline: 12px;\n            --pk-autocomplete-control-gap: 8px;\n            --pk-autocomplete-decoration-size: 0.875rem;\n            --pk-autocomplete-font-size: var(--pk-font-size-base);\n            --pk-select-item-padding-block: 8px;\n            --pk-select-item-padding-inline: 12px;\n            --pk-select-item-font-size: 14px;\n            --pk-select-group-label-font-size: 14px;\n        }\n\n        :host([size='xl']) {\n            --pk-autocomplete-padding-block: 10px;\n            --pk-autocomplete-padding-inline: 16px;\n            --pk-autocomplete-control-gap: 8px;\n            --pk-autocomplete-decoration-size: 1rem;\n            --pk-autocomplete-font-size: 16px;\n            --pk-select-item-padding-block: 10px;\n            --pk-select-item-padding-inline: 14px;\n            --pk-select-item-padding-inline-end: 2.25rem;\n            --pk-select-item-font-size: 14px;\n            --pk-select-group-label-font-size: 16px;\n        }\n\n        :host([size='xl']) .clear-button-icon svg {\n            width: 0.875rem;\n            height: 0.875rem;\n        }\n    }\n`,\n];\n","import { html, nothing } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query, state } from '../../decorators.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport type { PropertyValues } from 'lit';\n\nimport { xmark, renderIconHtml } from '../../icons/index.js';\nimport { LiveRegion, uniqueId } from '../../a11y/focus.js';\nimport { isTopDismissible, registerDismissible, unregisterDismissible } from '../../a11y/dismissible-stack.js';\nimport { scrollIntoView } from '../../a11y/scroll-lock.js';\nimport { PkFormAssociatedElement } from '../../base/pk-form-associated-element.js';\nimport { HasSlotController } from '../../internal/has-slot.js';\nimport { PkClearEvent } from '../../events/pk-clear.js';\nimport {\n    PkAfterHideEvent,\n    PkAfterShowEvent,\n    PkHideEvent,\n    PkShowEvent,\n    type PkOverlaySource,\n} from '../../events/overlay-lifecycle.js';\nimport type { PkValidator } from '../../validators/types.js';\nimport { MirrorValidator } from '../../validators/mirror-validator.js';\n// Keep the internal element registered when production builds erase type-only imports.\nimport '../popup/pk-popup.js';\nimport type { PkPopup, PkPopupPlacement } from '../popup/pk-popup.js';\nimport {\n    handleListboxKeyDown,\n    isListboxTypeToSelectKey,\n    LISTBOX_NAVIGATION_KEYS,\n} from '../../utils/listbox-keyboard.js';\nimport {\n    syncPopupPlacementAnimation,\n    waitForPopupReposition,\n} from '../../utils/popup-placement-animation.js';\nimport { waitForPopupContentExitAnimation } from '../../utils/popup-content-exit.js';\nimport { isEventInsideOverlay, isPointerInsideOverlay } from '../../utils/popup-pointer.js';\nimport { syncFilteredOptions } from '../../internal/sync-filtered-options.js';\nimport {\n    AsyncOptionFetcher,\n    type PkAsyncOptionFetchHandler,\n    type PkAsyncOptionItem,\n} from '../../utils/async-option-fetch.js';\nimport { matchesOptionFilter, type PkOptionFilter } from '../../utils/option-filter.js';\nimport type { PkOption } from '../select/pk-option.js';\nimport type { PkOptionGroup } from '../select/pk-option-group.js';\n// Freeform field chrome matches pk-input — not Combobox’s select fill / chevron.\nimport { pkAutocompleteStyles } from './pk-autocomplete.styles.js';\n\nexport type PkAutocompleteSize = 'xs' | 'sm' | 'default' | 'lg' | 'xl';\n\nexport type PkAutocompleteFilter = PkOptionFilter;\n\nexport type PkAutocompleteAsyncOption = PkAsyncOptionItem;\n\nexport type PkAutocompleteFetchHandler = PkAsyncOptionFetchHandler;\n\nconst XMARK_ICON = renderIconHtml(xmark);\n\n/**\n * Autocomplete — freeform text field with optional list suggestions.\n *\n * Unlike Combobox, the committed `value` *is* the input text. Choosing a\n * suggestion inserts that option’s value into the field; typing always wins.\n *\n * @slot start - Presentational decoration before the input (e.g. icons)\n * @slot end - Presentational decoration before the clear control\n * @slot - `pk-option` and `pk-option-group` items\n *\n * @csspart control - Input control wrapper\n * @csspart start - Host start decoration container\n * @csspart end - Host end decoration container\n * @csspart input - Autocomplete text input\n * @csspart clear-button - Clear value button\n * @csspart panel-body - Scrollable listbox region inside the popup panel\n * @csspart empty - Empty-state message\n * @csspart async-status - Async search status message\n *\n * @dependency pk-popup - Positioned suggestion panel host.\n */\n@customElement('pk-autocomplete')\nexport class PkAutocomplete extends PkFormAssociatedElement {\n    static override styles = pkAutocompleteStyles;\n\n    static override get validators(): PkValidator[] {\n        return [\n            ...super.validators,\n            MirrorValidator(),\n            {\n                observedAttributes: ['required'],\n                checkValidity: (element) => {\n                    const field = element as unknown as PkAutocomplete;\n                    const result = {\n                        message: 'Please fill out this field.',\n                        isValid: true,\n                        invalidKeys: [] as ReturnType<PkValidator['checkValidity']>['invalidKeys'],\n                    };\n\n                    if (!field.required || field.value.trim()) {\n                        return result;\n                    }\n\n                    result.isValid = false;\n                    result.invalidKeys.push('valueMissing');\n                    return result;\n                },\n            },\n        ];\n    }\n\n    override assumeInteractionOn = ['blur', 'input'];\n\n    @property({ type: Boolean, reflect: true })\n    open = false;\n\n    @property({ reflect: true })\n    placement: PkPopupPlacement = 'bottom-start';\n\n    /** Gap between the control and listbox panel in px (default: 6). */\n    @property({ attribute: 'side-offset', type: Number })\n    sideOffset = 6;\n\n    @property({ type: Boolean, reflect: true })\n    clearable = false;\n\n    @property({ attribute: 'with-clear', type: Boolean })\n    withClear = false;\n\n    /** When true, the first matching option is highlighted on open or when filtering. */\n    @property({ attribute: 'auto-highlight', type: Boolean })\n    autoHighlight = false;\n\n    @property({ type: Boolean, reflect: true })\n    invalid = false;\n\n    @property({ reflect: true })\n    size: PkAutocompleteSize = 'default';\n\n    /** When `full`, the control stretches to the host width. */\n    @property({ reflect: true })\n    width?: 'full';\n\n    /** Empty by default — consumers opt in when a prompt is useful. */\n    @property()\n    placeholder = '';\n\n    @property({ attribute: 'empty-message' })\n    emptyMessage = 'No options found.';\n\n    /** Freeform field value — always mirrors the visible input text. */\n    @property()\n    value = '';\n\n    @property({ attribute: 'default-value' })\n    defaultValue = '';\n\n    @property()\n    label = '';\n\n    @property()\n    instructions = '';\n\n    @property({ attribute: 'aria-label' })\n    ariaLabel: string | null = null;\n\n    /**\n     * Whether arrow-key focus loops from the last option back to the first (and vice versa).\n     * Default: `true` (same as Combobox).\n     */\n    @property({ attribute: 'loop-focus', type: Boolean })\n    loopFocus = true;\n\n    /** Custom filter — `(option, query) => boolean`. Defaults to label/value substring match. */\n    @property({ attribute: false })\n    filter: PkAutocompleteFilter | null = null;\n\n    /**\n     * When true, options are loaded via `fetchOptions` as the user types instead of\n     * filtering static `pk-option` children.\n     */\n    @property({ type: Boolean, reflect: true })\n    async = false;\n\n    /** Message shown while async results are loading. */\n    @property({ attribute: 'loading-message' })\n    loadingMessage = 'Searching…';\n\n    /** Message shown before the user types in async mode. */\n    @property({ attribute: 'start-typing-message' })\n    startTypingMessage = 'Start typing to search…';\n\n    /** Remote search handler — `(query, signal) => Promise<options>`. */\n    @property({ attribute: false })\n    fetchOptions: PkAutocompleteFetchHandler | null = null;\n\n    private readonly hasSlotController = new HasSlotController(this, 'start', 'end');\n\n    private readonly listboxId = uniqueId('pk-autocomplete-listbox');\n    private readonly inputId = uniqueId('pk-autocomplete-input');\n\n    @query('pk-popup')\n    private popupElement!: PkPopup;\n\n    @query('.control')\n    private controlElement!: HTMLElement;\n\n    @query('.control-input')\n    private controlInput?: HTMLInputElement;\n\n    @query('.value-input')\n    override input!: HTMLInputElement;\n\n    private get panelElement(): HTMLDivElement | null {\n        return this.popupElement?.getContentElement() as HTMLDivElement | null ?? null;\n    }\n\n    private get panelBodyElement(): HTMLDivElement | undefined {\n        return this.panelElement?.querySelector('.panel-body') as HTMLDivElement | undefined;\n    }\n\n    private get listScrollContainer(): HTMLElement {\n        return this.panelBodyElement ?? this.panelElement ?? this;\n    }\n\n    private options: PkOption[] = [];\n\n    @state()\n    private highlightedIndex = -1;\n\n    @state()\n    private closing = false;\n\n    @state()\n    private panelAnimated = false;\n\n    private dismissRegistered = false;\n    private panelEventTarget: HTMLElement | null = null;\n    private optionsObserver?: MutationObserver;\n    private liveRegion?: LiveRegion;\n    private asyncFetcher: AsyncOptionFetcher | null = null;\n\n    @state()\n    private asyncLoading = false;\n\n    @state()\n    private asyncError: string | null = null;\n\n    override connectedCallback(): void {\n        this.instructions = this.getAttribute('hint') ?? this.instructions;\n        this.refreshOptions();\n        super.connectedCallback();\n        this.syncHasValueAttribute();\n        this.addEventListener('pk-listbox-keydown', this.handleListboxKeyDownEvent as EventListener);\n        this.optionsObserver = new MutationObserver(() => {\n            this.handleOptionsMutation({ render: true });\n        });\n        this.optionsObserver.observe(this, { childList: true, subtree: true });\n    }\n\n    override disconnectedCallback(): void {\n        this.unbindPanelEvents();\n        this.removeEventListener('pk-listbox-keydown', this.handleListboxKeyDownEvent as EventListener);\n        this.optionsObserver?.disconnect();\n        this.liveRegion?.destroy();\n        this.liveRegion = undefined;\n        this.asyncFetcher?.cancel();\n        void this.closePanel('api');\n        super.disconnectedCallback();\n    }\n\n    override firstUpdated(changed: PropertyValues): void {\n        super.firstUpdated(changed);\n\n        if (!this.value && this.defaultValue) {\n            this.value = this.defaultValue;\n        }\n\n        this.applyOptionState();\n    }\n\n    override updated(changed: PropertyValues): void {\n        if (changed.has('value')) {\n            this.syncHasValueAttribute();\n            this.applyOptionState();\n        }\n\n        super.updated(changed);\n    }\n\n    protected override get validationTarget(): HTMLElement | undefined {\n        return this.controlInput ?? this.controlElement;\n    }\n\n    protected override getAriaMirrorTarget(): HTMLElement | null {\n        return this.controlInput ?? this.controlElement ?? null;\n    }\n\n    protected override syncFormValue(): void {\n        if (!this.name) {\n            this.setFormValue(null);\n            return;\n        }\n\n        this.setFormValue(this.value);\n    }\n\n    private syncHasValueAttribute(): void {\n        this.toggleAttribute('data-has-value', Boolean(this.value));\n    }\n\n    private refreshOptions(): void {\n        this.options = [...this.querySelectorAll('pk-option')] as PkOption[];\n    }\n\n    private handleOptionsMutation(options: { render?: boolean } = {}): void {\n        this.refreshOptions();\n        this.applyOptionState();\n\n        if (options.render) {\n            this.requestUpdate();\n        }\n    }\n\n    private bindPanelEvents(): void {\n        const panel = this.panelElement;\n\n        if (!panel || this.panelEventTarget === panel) {\n            return;\n        }\n\n        this.unbindPanelEvents();\n        this.panelEventTarget = panel;\n        panel.addEventListener('pk-option-select', this.handleOptionSelect as EventListener);\n        panel.addEventListener('pk-option-highlight', this.handleOptionHighlight as EventListener);\n        panel.addEventListener('pk-listbox-keydown', this.handleListboxKeyDownEvent as EventListener);\n    }\n\n    private unbindPanelEvents(): void {\n        if (!this.panelEventTarget) {\n            return;\n        }\n\n        this.panelEventTarget.removeEventListener('pk-option-select', this.handleOptionSelect as EventListener);\n        this.panelEventTarget.removeEventListener('pk-option-highlight', this.handleOptionHighlight as EventListener);\n        this.panelEventTarget.removeEventListener('pk-listbox-keydown', this.handleListboxKeyDownEvent as EventListener);\n        this.panelEventTarget = null;\n    }\n\n    private isOptionInHiddenGroup(option: PkOption): boolean {\n        const group = option.closest('pk-option-group') as PkOptionGroup | null;\n        return Boolean(group?.hidden);\n    }\n\n    private getFilterQuery(): string {\n        if (!this.open) {\n            return '';\n        }\n\n        return this.value.trim().toLowerCase();\n    }\n\n    private get usesAsyncSearch(): boolean {\n        return this.async && Boolean(this.fetchOptions);\n    }\n\n    private getVisibleOptions(): PkOption[] {\n        if (this.usesAsyncSearch) {\n            return this.options.filter((option) => !this.isOptionInHiddenGroup(option));\n        }\n\n        const filter = this.getFilterQuery();\n\n        return this.options.filter((option) => {\n            if (this.isOptionInHiddenGroup(option)) {\n                return false;\n            }\n\n            if (!filter) {\n                return true;\n            }\n\n            return matchesOptionFilter(option, filter, this.filter);\n        });\n    }\n\n    private getEnabledVisibleOptions(): PkOption[] {\n        return this.getVisibleOptions().filter((option) => !option.disabled);\n    }\n\n    private clearAsyncOptionNodes(): void {\n        this.querySelectorAll(':scope > pk-option, :scope > pk-option-group, :scope > pk-separator')\n            .forEach((node) => node.remove());\n    }\n\n    private renderAsyncOptionNodes(items: PkAutocompleteAsyncOption[]): void {\n        this.clearAsyncOptionNodes();\n\n        for (const item of items) {\n            const option = document.createElement('pk-option');\n            option.value = item.value;\n            option.textContent = item.label;\n            this.append(option);\n        }\n\n        this.handleOptionsMutation({ render: true });\n    }\n\n    private scheduleAsyncFetch(query: string): void {\n        this.ensureAsyncFetcher().schedule(query);\n    }\n\n    private ensureAsyncFetcher(): AsyncOptionFetcher {\n        if (!this.asyncFetcher) {\n            this.asyncFetcher = new AsyncOptionFetcher(\n                () => this.fetchOptions,\n                {\n                    errorLabel: 'autocomplete options',\n                    onLoading: () => {\n                        this.asyncLoading = true;\n                        this.asyncError = null;\n                        // Drop previous results so loading never stacks under a stale list.\n                        this.renderAsyncOptionNodes([]);\n                    },\n                    onResults: (results) => {\n                        this.renderAsyncOptionNodes(results);\n                    },\n                    onError: (message) => {\n                        this.asyncError = message;\n                    },\n                    onSettled: () => {\n                        this.asyncLoading = false;\n                    },\n                    onEmptyQuery: () => {\n                        this.asyncLoading = false;\n                        this.asyncError = null;\n                        this.renderAsyncOptionNodes([]);\n                    },\n                },\n            );\n        }\n\n        return this.asyncFetcher;\n    }\n\n    private getAsyncStatusMessage(): string | null {\n        if (!this.usesAsyncSearch || !this.open) {\n            return null;\n        }\n\n        if (this.asyncLoading) {\n            return this.loadingMessage;\n        }\n\n        if (this.asyncError) {\n            return this.asyncError;\n        }\n\n        const query = this.value.trim();\n\n        if (!query) {\n            return this.startTypingMessage;\n        }\n\n        if (this.getEnabledVisibleOptions().length === 0) {\n            return `No matches for \"${query}\".`;\n        }\n\n        return null;\n    }\n\n    private applyOptionState(): void {\n        const visible = this.getVisibleOptions();\n        const filterQuery = this.open ? this.getFilterQuery() : '';\n\n        // Freeform: never mark options as the “selected” form value — the text is.\n        syncFilteredOptions({\n            host: this,\n            options: this.options,\n            visible,\n            listboxId: this.listboxId,\n            filterQuery,\n            isSelected: () => false,\n        });\n\n        this.syncValueInput();\n\n        if (this.open) {\n            this.syncHighlight();\n            this.announceFilterResults();\n        }\n    }\n\n    private syncValueInput(): void {\n        if (!this.input) {\n            return;\n        }\n\n        this.input.value = this.value;\n        this.input.required = this.required;\n    }\n\n    private resetHighlightedIndexOnOpen(): void {\n        this.highlightedIndex = this.autoHighlight ? 0 : -1;\n    }\n\n    private syncHighlight(): void {\n        const enabled = this.getEnabledVisibleOptions();\n\n        for (const option of this.options) {\n            option.highlighted = false;\n            option.focusIndex = -1;\n        }\n\n        if (enabled.length === 0 || this.highlightedIndex < 0) {\n            return;\n        }\n\n        if (this.highlightedIndex >= enabled.length) {\n            this.highlightedIndex = enabled.length - 1;\n        }\n\n        const highlighted = enabled[this.highlightedIndex];\n\n        if (highlighted) {\n            highlighted.highlighted = true;\n            // Keep focus on the text field; use aria-activedescendant for the option.\n            highlighted.focusIndex = -1;\n            scrollIntoView(highlighted, this.listScrollContainer, 'vertical', 'auto');\n            this.controlInput?.focus({ preventScroll: true });\n        }\n    }\n\n    private getActiveDescendantId(): string | null {\n        const highlighted = this.getEnabledVisibleOptions()[this.highlightedIndex];\n        return highlighted?.optionId || null;\n    }\n\n    private announceFilterResults(): void {\n        if (!this.liveRegion) {\n            this.liveRegion = new LiveRegion('polite');\n        }\n\n        const count = this.getEnabledVisibleOptions().length;\n        const filter = this.getFilterQuery();\n\n        if (!filter) {\n            return;\n        }\n\n        this.liveRegion.announce(\n            count === 0\n                ? `${this.emptyMessage}`\n                : `${count} ${count === 1 ? 'result' : 'results'} available`,\n        );\n    }\n\n    private openPanel(): Promise<void> {\n        const anchor = this.controlElement;\n\n        if (!anchor) {\n            return Promise.resolve();\n        }\n\n        if (this.open) {\n            this.controlInput?.focus({ preventScroll: true });\n            return Promise.resolve();\n        }\n\n        if (this.closing) {\n            return Promise.resolve();\n        }\n\n        this.dispatchEvent(new PkShowEvent());\n        this.closing = false;\n        this.panelAnimated = false;\n        this.open = true;\n        this.applyOptionState();\n        this.resetHighlightedIndexOnOpen();\n\n        if (this.usesAsyncSearch) {\n            this.asyncError = null;\n            // Freeform async: value is the query. Clear stale nodes and show loading\n            // immediately when reopening with text so “Searching…” never sits under\n            // the previous result list during debounce.\n            this.renderAsyncOptionNodes([]);\n            const query = this.value.trim();\n            this.asyncLoading = Boolean(query);\n            this.scheduleAsyncFetch(query);\n        }\n\n        this.style.setProperty('--pk-autocomplete-anchor-width', `${anchor.getBoundingClientRect().width}px`);\n        this.popupElement.active = true;\n\n        if (this.panelElement) {\n            this.panelElement.hidden = false;\n            syncPopupPlacementAnimation(this.panelElement, this.placement);\n        }\n\n        this.registerDismissHandlers();\n        this.syncHighlight();\n        this.controlInput?.focus({ preventScroll: true });\n\n        return this.updateComplete.then(async () => {\n            const placement = await waitForPopupReposition(this.popupElement, this.placement, 300, {\n                requireEvent: true,\n            });\n\n            if (this.panelElement) {\n                syncPopupPlacementAnimation(this.panelElement, placement);\n            }\n\n            this.panelAnimated = true;\n            this.bindPanelEvents();\n            this.refreshOptions();\n            this.controlInput?.focus({ preventScroll: true });\n\n            this.dispatchEvent(new PkAfterShowEvent());\n            this.dispatchEvent(new CustomEvent('pk-open-change', {\n                detail: { open: true },\n                bubbles: true,\n                composed: true,\n            }));\n        });\n    }\n\n    private async closePanel(source: PkOverlaySource = 'unknown'): Promise<void> {\n        if (!this.open || this.closing) {\n            return;\n        }\n\n        const hideEvent = new PkHideEvent(source);\n\n        if (!this.dispatchEvent(hideEvent)) {\n            return;\n        }\n\n        this.unbindPanelEvents();\n        this.closing = true;\n        this.panelAnimated = false;\n        await waitForPopupContentExitAnimation(this.panelElement);\n\n        this.open = false;\n        this.closing = false;\n        this.panelAnimated = false;\n\n        if (this.panelElement) {\n            this.panelElement.hidden = true;\n            this.panelElement.removeAttribute('data-side');\n        }\n\n        this.popupElement.active = false;\n        this.unregisterDismissHandlers();\n        this.applyOptionState();\n\n        if (this.usesAsyncSearch) {\n            this.asyncFetcher?.cancel();\n            this.asyncLoading = false;\n            this.asyncError = null;\n            this.renderAsyncOptionNodes([]);\n        }\n\n        if (source !== 'light-dismiss' && source !== 'pointer-dismiss') {\n            this.controlInput?.focus({ preventScroll: true });\n        } else {\n            this.controlInput?.blur();\n        }\n\n        this.dispatchEvent(new PkAfterHideEvent());\n        this.dispatchEvent(new CustomEvent('pk-open-change', {\n            detail: { open: false },\n            bubbles: true,\n            composed: true,\n        }));\n    }\n\n    private registerDismissHandlers(): void {\n        registerDismissible(this);\n        this.dismissRegistered = true;\n        document.addEventListener('pointerdown', this.onDocumentPointerDown, true);\n        document.addEventListener('keydown', this.onDocumentKeyDown, true);\n    }\n\n    private unregisterDismissHandlers(): void {\n        if (this.dismissRegistered) {\n            unregisterDismissible(this);\n            this.dismissRegistered = false;\n        }\n\n        document.removeEventListener('pointerdown', this.onDocumentPointerDown, true);\n        document.removeEventListener('keydown', this.onDocumentKeyDown, true);\n    }\n\n    private onDocumentPointerDown = (event: PointerEvent): void => {\n        if (isPointerInsideOverlay(event, {\n            anchor: this.controlElement,\n            panel: this.panelElement,\n        })) {\n            return;\n        }\n\n        void this.closePanel('light-dismiss');\n    };\n\n    private onDocumentKeyDown = (event: KeyboardEvent): void => {\n        if (!this.open) {\n            return;\n        }\n\n        if (event.key === 'Escape') {\n            if (!isTopDismissible(this)) {\n                return;\n            }\n\n            event.preventDefault();\n            event.stopPropagation();\n            void this.closePanel('escape');\n            return;\n        }\n\n        const isListboxKey = LISTBOX_NAVIGATION_KEYS.has(event.key) || isListboxTypeToSelectKey(event);\n\n        if (!isListboxKey) {\n            return;\n        }\n\n        const panel = this.panelElement;\n        const path = event.composedPath();\n        const focusInPortaledPanel = Boolean(panel && path.includes(panel));\n\n        if (!focusInPortaledPanel) {\n            return;\n        }\n\n        if (!isEventInsideOverlay(event, {\n            anchor: this.controlElement,\n            panel,\n        })) {\n            return;\n        }\n\n        event.preventDefault();\n        event.stopPropagation();\n        this.onListboxKeyDown(event);\n    };\n\n    private handleOptionSelect = (event: CustomEvent<{ value: string }>): void => {\n        const { value } = event.detail;\n        this.commitValue(value, { close: true });\n    };\n\n    private handleOptionHighlight = (event: CustomEvent<{ value: string }>): void => {\n        if (!this.open) {\n            return;\n        }\n\n        const enabled = this.getEnabledVisibleOptions();\n        const index = enabled.findIndex((option) => option.value === event.detail.value);\n\n        if (index === -1 || index === this.highlightedIndex) {\n            return;\n        }\n\n        this.highlightedIndex = index;\n        this.syncHighlight();\n    };\n\n    private commitValue(next: string, { close = false, emit = true } = {}): void {\n        const changed = this.value !== next;\n        this.value = next;\n        this.syncHasValueAttribute();\n        this.applyOptionState();\n\n        if (close) {\n            void this.closePanel('api');\n        }\n\n        if (changed && emit) {\n            this.emitValueChange();\n        }\n    }\n\n    private handleClear(event: Event): void {\n        event.preventDefault();\n        event.stopPropagation();\n        this.commitValue('');\n        this.dispatchEvent(new PkClearEvent());\n        this.controlInput?.focus();\n    }\n\n    private emitValueChange(): void {\n        this.dispatchEvent(new CustomEvent('pk-change', {\n            detail: { value: this.value },\n            bubbles: true,\n            composed: true,\n        }));\n\n        this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));\n    }\n\n    private handleInput(event: Event): void {\n        const next = (event.target as HTMLInputElement).value;\n        this.value = next;\n        this.syncHasValueAttribute();\n        this.highlightedIndex = this.autoHighlight ? 0 : -1;\n        this.applyOptionState();\n        this.emitValueChange();\n\n        if (this.usesAsyncSearch) {\n            this.asyncError = null;\n            this.scheduleAsyncFetch(next.trim());\n        }\n\n        if (!this.open) {\n            void this.openPanel();\n        }\n    }\n\n    private handleControlMouseDown = (event: MouseEvent): void => {\n        if (this.disabled) {\n            return;\n        }\n\n        const path = event.composedPath();\n        const isInteractiveChild = path.some((node) => {\n            if (!(node instanceof HTMLElement)) {\n                return false;\n            }\n\n            return node.classList.contains('clear-button');\n        });\n\n        if (isInteractiveChild) {\n            return;\n        }\n\n        const isInput = event.target === this.controlInput;\n\n        if (!this.open && !this.closing) {\n            if (!isInput) {\n                event.preventDefault();\n            }\n\n            this.controlInput?.focus({ preventScroll: true });\n            void this.openPanel();\n            return;\n        }\n\n        if (!isInput) {\n            event.preventDefault();\n            this.controlInput?.focus({ preventScroll: true });\n        }\n    };\n\n    private handleInputKeyDown(event: KeyboardEvent): void {\n        if (event.key === 'Escape' && this.open) {\n            event.preventDefault();\n            void this.closePanel('escape');\n            return;\n        }\n\n        if (event.key === 'ArrowDown' && !this.open) {\n            event.preventDefault();\n            void this.openPanel();\n            return;\n        }\n\n        if (!this.open) {\n            return;\n        }\n\n        if (event.key === 'Enter') {\n            const enabled = this.getEnabledVisibleOptions();\n\n            if (this.highlightedIndex >= 0 && enabled[this.highlightedIndex]) {\n                event.preventDefault();\n                this.commitValue(enabled[this.highlightedIndex]!.value, { close: true });\n            } else {\n                void this.closePanel('api');\n            }\n\n            return;\n        }\n\n        if (LISTBOX_NAVIGATION_KEYS.has(event.key) && event.key !== 'Enter' && event.key !== 'Escape') {\n            this.onListboxKeyDown(event);\n        }\n    }\n\n    private onListboxKeyDown(event: KeyboardEvent): void {\n        const enabled = this.getEnabledVisibleOptions() as unknown as HTMLElement[];\n\n        this.highlightedIndex = handleListboxKeyDown(event, {\n            items: enabled,\n            currentIndex: this.highlightedIndex,\n            loop: this.loopFocus,\n            onSelect: (index) => {\n                const option = this.getEnabledVisibleOptions()[index];\n\n                if (option) {\n                    this.commitValue(option.value, { close: true });\n                }\n            },\n            onClose: () => {\n                void this.closePanel('escape');\n            },\n            focusItem: (index) => {\n                this.highlightedIndex = index;\n                this.syncHighlight();\n            },\n        });\n    }\n\n    private handleListboxKeyDownEvent = (event: CustomEvent<{ keyboardEvent: KeyboardEvent }>): void => {\n        this.onListboxKeyDown(event.detail.keyboardEvent);\n    };\n\n    async hide(source: PkOverlaySource = 'api'): Promise<void> {\n        await this.closePanel(source);\n    }\n\n    private renderHostDecorationSlot(name: 'start' | 'end') {\n        if (!this.hasSlotController.test(name)) {\n            return nothing;\n        }\n\n        return html`<slot name=${name} part=${name} class=${name === 'start' ? 'control-start' : 'control-end'}></slot>`;\n    }\n\n    override render() {\n        const visibleOptions = this.getEnabledVisibleOptions();\n        // Async empty / loading / errors use `async-status` only — do not also paint\n        // `emptyMessage` or the panel shows two notices for the same empty result.\n        const showEmpty = this.open && !this.usesAsyncSearch && visibleOptions.length === 0;\n        const asyncStatus = this.getAsyncStatusMessage();\n        const showClear = (this.clearable || this.withClear) && Boolean(this.value) && !this.disabled;\n        const activeDescendant = this.open ? this.getActiveDescendantId() : null;\n\n        return html`\n            <input\n                class=\"value-input\"\n                part=\"value-input\"\n                tabindex=\"-1\"\n                aria-hidden=\"true\"\n                .value=${this.value}\n                ?required=${this.required}\n                @input=${() => this.updateValidity()}\n            />\n            <div\n                part=\"control\"\n                class=${classMap({\n                    control: true,\n                    'is-disabled': this.disabled,\n                })}\n                data-popup-open=${this.open || this.closing ? '' : nothing}\n                @mousedown=${this.handleControlMouseDown}\n            >\n                ${this.renderHostDecorationSlot('start')}\n                <input\n                    part=\"input\"\n                    class=\"autocomplete-input control-input\"\n                    type=\"text\"\n                    role=\"combobox\"\n                    id=${this.inputId}\n                    .value=${this.value}\n                    placeholder=${this.placeholder || nothing}\n                    ?disabled=${this.disabled}\n                    aria-label=${this.ariaLabel ?? nothing}\n                    aria-expanded=${this.open ? 'true' : 'false'}\n                    aria-controls=${this.listboxId}\n                    aria-autocomplete=\"both\"\n                    aria-activedescendant=${activeDescendant ?? nothing}\n                    @input=${this.handleInput}\n                    @keydown=${this.handleInputKeyDown}\n                />\n                ${this.renderHostDecorationSlot('end')}\n                ${showClear\n                    ? html`\n                        <button\n                            type=\"button\"\n                            class=\"clear-button\"\n                            part=\"clear-button\"\n                            aria-label=\"Clear\"\n                            ?disabled=${this.disabled}\n                            @click=${this.handleClear}\n                        >\n                            <span class=\"clear-button-icon\" aria-hidden=\"true\">${unsafeSVG(XMARK_ICON)}</span>\n                        </button>\n                    `\n                    : nothing}\n            </div>\n            <pk-popup\n                .active=${this.open || this.closing}\n                .anchor=${this.controlElement ?? ''}\n                .placement=${this.placement}\n                .distance=${this.sideOffset}\n                .sync=${'width'}\n                flip\n                shift\n            >\n                <div\n                    part=\"panel\"\n                    class=${classMap({\n                        panel: true,\n                        'pk-popup-content': true,\n                        closing: this.closing,\n                    })}\n                    tabindex=\"-1\"\n                    ?hidden=${!this.open && !this.closing}\n                    data-open=${this.panelAnimated && !this.closing ? '' : nothing}\n                >\n                    <div\n                        part=\"panel-body\"\n                        class=\"panel-body\"\n                        id=${this.listboxId}\n                        role=\"listbox\"\n                        aria-busy=${this.usesAsyncSearch && this.asyncLoading ? 'true' : nothing}\n                    >\n                        <slot></slot>\n                        ${asyncStatus\n                            ? html`\n                                <div part=\"async-status\" class=\"async-status\" role=\"status\">${asyncStatus}</div>\n                            `\n                            : nothing}\n                        ${showEmpty\n                            ? html`\n                                <div part=\"empty\" class=\"empty\">${this.emptyMessage}</div>\n                            `\n                            : nothing}\n                    </div>\n                </div>\n            </pk-popup>\n        `;\n    }\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'pk-autocomplete': PkAutocomplete;\n    }\n}\n"],"mappings":"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"}