@spinjs/components 0.0.0-stage → 0.1.0-preview.1

package/dist/tags-input/tags.presentation.js

@@ -0,0 +1,782 @@
+import { tags as tags$1 } from "./tags.machine.js";
+import { ariaDisabled, ariaInvalid, defineComponent, isRecord, liveRegion } from "@spinjs/runtime";
+// src/tags-input/tags.presentation.ts
+const defaultTranslations = {
+	clearTriggerLabel: "Clear all tags",
+	deleteTagTriggerLabel: (value) => `Delete tag ${value}`,
+	tagAdded: (value) => `Added tag ${value}`,
+	tagEdited: (value) => `Editing tag ${value}. Press enter to save or escape to cancel.`,
+	tagUpdated: (value) => `Tag update to ${value}`,
+	tagDeleted: (value) => `Tag ${value} deleted`,
+	tagSelected: (value) => `Tag ${value} selected. Press enter to edit, delete or backspace to remove.`,
+	tagsPasted: (values) => `Pasted ${values.length} tags`,
+	noTagsSelected: "No tags selected"
+};
+const isHostFn = (value) => typeof value === "function";
+/** Whether the window holds focus: a window blur leaves the field alone
+* (Zag reports nothing), a label-click blur ends the edit. */
+const windowFocused = () => {
+	if (typeof document === "undefined") return true;
+	if (typeof document.hasFocus !== "function") return true;
+	return document.hasFocus();
+};
+const textOf = (raw, fallback = "") => typeof raw === "string" ? raw : fallback;
+const callHostFn = (fn, event) => {
+	if (!isHostFn(fn)) return;
+	fn(event);
+};
+/** Whether the caret sits at the start of the entry field: arrows and
+* delete then move between tags instead of text. Falls back to the entry
+* input in the owned root, since a synthetic event carries no target. */
+const caretAtStart = (scope, target) => {
+	const at = (node) => {
+		if (!isRecord(node)) return false;
+		return node["selectionStart"] === 0 && node["selectionEnd"] === 0;
+	};
+	if (at(target)) return true;
+	const host = scope.root();
+	if (typeof host.querySelector !== "function") return false;
+	return at(host.querySelector(`[id="${scope.id("input")}"]`));
+};
+/** Host behavioral props live on the element, not the scope: the scope
+* grammar has no function type. Read through the owned root, never the
+* global document. */
+const hostProp = (scope, name) => {
+	const root = scope.root();
+	if (!isRecord(root)) return void 0;
+	const found = root[name];
+	return found === void 0 ? scope.context[name] : found;
+};
+const translationsOf = (scope) => {
+	const fromRoot = hostProp(scope, "translations");
+	if (fromRoot !== void 0) return parseTranslations(fromRoot);
+	const raw = scope.context.translations;
+	return typeof raw === "function" || isRecord(raw) ? parseTranslations(raw) : defaultTranslations;
+};
+const hostFnOf = (scope, name) => {
+	const value = hostProp(scope, name);
+	return isHostFn(value) ? value : void 0;
+};
+function parseTranslations(raw) {
+	if (!isRecord(raw)) return defaultTranslations;
+	const text = (name, fallback) => {
+		const value = raw[name];
+		return typeof value === "string" ? value : fallback;
+	};
+	const fn1 = (name, fallback) => {
+		const value = raw[name];
+		if (!isHostFn(value)) return fallback;
+		return (arg) => {
+			const out = value(arg);
+			return typeof out === "string" ? out : fallback(arg);
+		};
+	};
+	const pasted = raw["tagsPasted"];
+	return {
+		clearTriggerLabel: text("clearTriggerLabel", defaultTranslations.clearTriggerLabel),
+		deleteTagTriggerLabel: fn1("deleteTagTriggerLabel", defaultTranslations.deleteTagTriggerLabel),
+		tagAdded: fn1("tagAdded", defaultTranslations.tagAdded),
+		tagEdited: fn1("tagEdited", defaultTranslations.tagEdited),
+		tagUpdated: fn1("tagUpdated", defaultTranslations.tagUpdated),
+		tagDeleted: fn1("tagDeleted", defaultTranslations.tagDeleted),
+		tagSelected: fn1("tagSelected", defaultTranslations.tagSelected),
+		tagsPasted: isHostFn(pasted) ? (values) => {
+			const out = pasted(values);
+			return typeof out === "string" ? out : defaultTranslations.tagsPasted(values);
+		} : defaultTranslations.tagsPasted,
+		noTagsSelected: text("noTagsSelected", defaultTranslations.noTagsSelected)
+	};
+}
+/**
+* One row object per logical tag, reused across value changes: a `for` cell
+* holds the row it captured, so a rebuilt object would leave it rendering
+* the previous tag's state. Memoized on the value array's identity.
+*/
+const rowsCache = /* @__PURE__ */ new WeakMap();
+const rowsOf = (value) => {
+	const hit = rowsCache.get(value);
+	if (hit !== void 0) return hit;
+	const counts = /* @__PURE__ */ new Map();
+	const built = [];
+	for (const item of value) {
+		const occurrence = counts.get(item) ?? 0;
+		counts.set(item, occurrence + 1);
+		built.push({
+			value: item,
+			occurrence
+		});
+	}
+	rowsCache.set(value, built);
+	return built;
+};
+const tagIdOf = (id, row) => `${id("tag")}:${row.value}:${row.occurrence}`;
+const rowOf = (arg) => {
+	if (!isRecord(arg)) return {
+		value: "",
+		occurrence: 0
+	};
+	const value = arg["value"];
+	const occurrence = arg["occurrence"];
+	return {
+		value: typeof value === "string" ? value : "",
+		occurrence: typeof occurrence === "number" ? occurrence : 0
+	};
+};
+const indexOfRow = (context, row) => {
+	const value = context.value;
+	let seen = 0;
+	for (let i = 0; i < value.length; i++) {
+		if (value[i] !== row.value) continue;
+		if (seen === row.occurrence) return i;
+		seen++;
+	}
+	return -1;
+};
+const itemStateOf = (context, state, disabled, id, row) => {
+	const index = indexOfRow(context, row);
+	const editing = state === "editing:tag" && context.editedIndex === index;
+	return {
+		id: tagIdOf(id, row),
+		index,
+		editing,
+		highlighted: context.highlightedIndex === index,
+		disabled
+	};
+};
+const stateOf = (scope, row) => itemStateOf(scope.context, scope.state, scope.context.disabled, scope.id, row);
+/** Whether a node belongs to a tag part, so a press on a tag is not read
+* as a press outside the input. */
+const withinTag = (scope, node) => {
+	if (!(node instanceof Element)) return false;
+	const host = scope.root();
+	const prefix = `${scope.id("tag")}:`;
+	let at = node;
+	while (at !== null) {
+		if (at.id.startsWith(prefix)) return true;
+		if (at === host) return false;
+		at = at.parentElement;
+	}
+	return false;
+};
+const invalidOf = (scope) => {
+	const context = scope.context;
+	return scope.context.invalid === true || context.value.length > context.max;
+};
+const tagHandlersByBridge = /* @__PURE__ */ new WeakMap();
+const tagHandlers = (scope, row) => {
+	let byRow = tagHandlersByBridge.get(scope.send);
+	if (byRow === void 0) {
+		byRow = /* @__PURE__ */ new WeakMap();
+		tagHandlersByBridge.set(scope.send, byRow);
+	}
+	const hit = byRow.get(row);
+	if (hit !== void 0) return hit;
+	const made = {
+		onPointerDown: (event) => {
+			const context = scope.context;
+			if (scope.context.readOnly || scope.context.disabled) return;
+			if (event.button !== 0) return;
+			event.preventDefault();
+			const index = indexOfRow(context, row);
+			if (index === -1) return;
+			scope.send({
+				type: "POINTER_DOWN_TAG",
+				index
+			});
+		},
+		onDblclick: () => {
+			const context = scope.context;
+			if (scope.context.readOnly || scope.context.disabled) return;
+			const index = indexOfRow(context, row);
+			if (index === -1) return;
+			scope.send({
+				type: "DOUBLE_CLICK_TAG",
+				index
+			});
+		},
+		onDeleteClick: (event) => {
+			if (event.defaultPrevented) return;
+			const context = scope.context;
+			if (scope.context.readOnly || scope.context.disabled) return;
+			const index = indexOfRow(context, row);
+			if (index === -1) return;
+			scope.send({
+				type: "CLICK_DELETE_TAG",
+				index
+			});
+		},
+		onDeletePointerDown: (event) => {
+			if (event.button !== 0) return;
+			if (!scope.context.readOnly && !scope.context.disabled) return;
+			event.preventDefault();
+		}
+	};
+	byRow.set(row, made);
+	return made;
+};
+const message = (log, prev, t) => {
+	switch (log.type) {
+		case "add": return t.tagAdded(log.value);
+		case "delete": return t.tagDeleted(log.value);
+		case "update": return t.tagUpdated(log.value);
+		case "paste": return t.tagsPasted(log.values);
+		case "clear": return t.noTagsSelected;
+		case "select": {
+			const head = prev !== null && prev.type === "delete" ? t.tagDeleted(prev.value) : prev !== null && prev.type === "update" ? t.tagUpdated(prev.value) : null;
+			const body = t.tagSelected(log.value);
+			return head === null ? body : `${head}. ${body}`;
+		}
+	}
+};
+/** Announced by swapping the region node for a fresh clone: a new node in
+* the live tree is a mutation a screen reader reads even when the message
+* repeats, which rewriting the same node's text would not be. Scoped to
+* the owned root — never the global document. */
+const rootByBridge = /* @__PURE__ */ new WeakMap();
+const rememberRoot = (id, root) => {
+	rootByBridge.set(id, root);
+};
+/** Sync the element's host functions into context, silently and pre-send:
+* commands run before their event transmits, so assigns read fresh host
+* behavior on the very send that needs it. Bag sends sync in settled
+* instead (post-send, silent) — one send behind, which beats never. The
+* check is against the raw fn: a wrapper is fresh per sync. */
+const syncHostFns = (context, id) => {
+	const root = rootByBridge.get(id);
+	if (root === void 0) return;
+	const seen = seenOf(id);
+	const scope = {
+		context,
+		root: () => root
+	};
+	const sanitize = hostFnOf(scope, "sanitizeValue");
+	if (sanitize !== void 0 && seen.sanitize !== sanitize) {
+		seen.sanitize = sanitize;
+		const fn = sanitize;
+		context.sanitizeValue = (value) => {
+			const out = fn(value);
+			return typeof out === "string" ? out : value;
+		};
+	}
+	const check = hostFnOf(scope, "validate");
+	if (check !== void 0 && seen.validate !== check) {
+		seen.validate = check;
+		const fn = check;
+		context.validate = (details) => {
+			const out = fn(details);
+			return typeof out === "boolean" ? out : true;
+		};
+	}
+};
+const seenByBridge = /* @__PURE__ */ new WeakMap();
+const seenOf = (id) => {
+	let seen = seenByBridge.get(id);
+	if (seen === void 0) {
+		seen = {};
+		seenByBridge.set(id, seen);
+	}
+	return seen;
+};
+const announce = (root, regionId, translations, log, prev) => {
+	const region = root.querySelector(`[id="${regionId}"]`);
+	if (region === null || region.parentNode === null) return;
+	const fresh = region.cloneNode(false);
+	fresh.textContent = message(log, prev, translations);
+	region.replaceWith(fresh);
+};
+const blurBehaviorOf = (value, authored) => {
+	if (!authored) return {};
+	return {
+		addOnBlur: value === "add",
+		clearOnBlur: value === "clear"
+	};
+};
+/** The component's public state: the names the markup may key on. */
+const def = {
+	name: "tags-input",
+	machine: (args, authored) => tags$1(args, authored),
+	start: (raw) => raw["autoFocus"] === true ? "focused:input" : "idle",
+	reconcile: ({ context, parsed, authored }) => {
+		let moved = false;
+		const invalid = parsed["invalid"] === true ? true : void 0;
+		if (context.invalid !== invalid) {
+			context.invalid = invalid;
+			moved = true;
+		}
+		const input = parsed["inputValue"];
+		if (authored("inputValue") && typeof input === "string") {
+			if (context.inputValue !== input) {
+				context.inputValue = input;
+				moved = true;
+			}
+		}
+		const behavior = blurBehaviorOf(parsed["blurBehavior"], authored("blurBehavior"));
+		if (behavior.addOnBlur !== void 0 && behavior.addOnBlur !== context.addOnBlur) {
+			context.addOnBlur = behavior.addOnBlur;
+			moved = true;
+		}
+		if (behavior.clearOnBlur !== void 0 && behavior.clearOnBlur !== context.clearOnBlur) {
+			context.clearOnBlur = behavior.clearOnBlur;
+			moved = true;
+		}
+		if (moved) {}
+		return moved;
+	},
+	mounted: ({ root, id }) => {
+		rememberRoot(id, root());
+	},
+	settled: ({ event, before, after, root, id, focus }) => {
+		rememberRoot(id, root());
+		syncHostFns(after.context, id);
+		if (before.context.log !== after.context.log && after.context.log !== null) announce(root(), id("liveRegion"), translationsOf({
+			context: after.context,
+			root
+		}), after.context.log, after.context.logPrev);
+		if (after.state === "editing:tag" && before.state !== "editing:tag" && after.context.editedIndex !== null) {
+			const row = rowsOf(after.context.value)[after.context.editedIndex];
+			if (row !== void 0) focus("tag", `${row.value}:${row.occurrence}:input`);
+			return;
+		}
+		if (event.type === "POINTER_DOWN_TAG" || event.type === "CLICK_DELETE_TAG" || event.type === "TAG_INPUT_ENTER" || event.type === "TAG_INPUT_ESCAPE" || event.type === "CLEAR_VALUE" || event.type === "ENTER" || event.type === "BACKSPACE" || event.type === "DELETE" || event.type === "DOUBLE_CLICK_TAG") focus("input");
+	},
+	parts: {
+		root: {
+			id: "",
+			attrs: (scope) => ({
+				dir: scope.context.dir,
+				"data-disabled": scope.attr(scope.context.disabled),
+				"data-readonly": scope.attr(scope.context.readOnly),
+				"data-focus": scope.attr(scope.state !== "idle"),
+				"data-invalid": scope.attr(invalidOf(scope)),
+				"data-empty": scope.attr(scope.context.value.length === 0),
+				onPointerDown: () => {
+					if (scope.context.readOnly || scope.context.disabled) return;
+					scope.send({ type: "POINTER_DOWN" });
+				}
+			})
+		},
+		label: { attrs: (scope) => ({
+			dir: scope.context.dir,
+			for: scope.id("input"),
+			"data-disabled": scope.attr(scope.context.disabled),
+			"data-readonly": scope.attr(scope.context.readOnly),
+			"data-invalid": scope.attr(invalidOf(scope)),
+			"data-required": scope.attr(scope.context.required)
+		}) },
+		control: { attrs: (scope) => ({
+			dir: scope.context.dir,
+			tabIndex: scope.context.readOnly ? 0 : void 0,
+			"data-disabled": scope.attr(scope.context.disabled),
+			"data-readonly": scope.attr(scope.context.readOnly),
+			"data-invalid": scope.attr(invalidOf(scope)),
+			"data-focus": scope.attr(scope.state !== "idle")
+		}) },
+		input: { attrs: (scope) => {
+			const context = scope.context;
+			const empty = context.value.length === 0;
+			return {
+				dir: scope.context.dir,
+				type: "text",
+				autoComplete: "off",
+				autoCorrect: "off",
+				autoCapitalize: "none",
+				enterKeyHint: "done",
+				disabled: scope.context.disabled || scope.context.readOnly,
+				maxLength: scope.context.maxLength ?? void 0,
+				...ariaInvalid(invalidOf(scope)),
+				"data-invalid": scope.attr(invalidOf(scope)),
+				"data-readonly": scope.attr(scope.context.readOnly),
+				"data-empty": scope.attr(empty),
+				placeholder: empty ? textOf(scope.context.placeholder) : void 0,
+				value: context.inputValue,
+				onInput: (event) => {
+					if (scope.context.readOnly || scope.context.disabled) return;
+					const target = event.currentTarget;
+					if (!(target instanceof HTMLInputElement)) return;
+					const value = target.value;
+					if (event.inputType === "insertFromPaste") {
+						scope.send({
+							type: "PASTE",
+							value
+						});
+						return;
+					}
+					const delimiter = textOf(scope.context.delimiter, ",");
+					if (delimiter.length > 0 && value.endsWith(delimiter)) {
+						scope.send({ type: "DELIMITER_KEY" });
+						return;
+					}
+					scope.send({
+						type: "TYPE",
+						value
+					});
+				},
+				onFocus: () => scope.send({ type: "FOCUS" }),
+				onFocusOut: (event) => {
+					const host = scope.root();
+					const input = host.querySelector(`[id="${scope.id("input")}"]`);
+					const related = event.relatedTarget;
+					if ((related === null || related === void 0) && !windowFocused()) return;
+					if (related !== null && related !== void 0 && !(related instanceof Node)) return;
+					const node = related === null || related === void 0 ? null : related;
+					if (input !== null && node !== null && (related === input || input instanceof Node && input.contains(node))) return;
+					if (node !== null) {
+						if (withinTag(scope, node)) return;
+						if (host.contains(node)) return;
+					}
+					callHostFn(hostFnOf(scope, "onFocusOutside"), event);
+					scope.send({ type: "BLUR" });
+				},
+				onKeydown: (event) => {
+					if (event.defaultPrevented) return;
+					if (event.isComposing) return;
+					const caret = caretAtStart(scope, event.currentTarget);
+					const ctx = scope.context;
+					switch (event.key) {
+						case "ArrowDown":
+							scope.send({ type: "ARROW_DOWN" });
+							break;
+						case "ArrowLeft":
+							scope.send({
+								type: "ARROW_LEFT",
+								caretAtStart: caret
+							});
+							break;
+						case "ArrowRight":
+							if (ctx.highlightedIndex !== null) event.preventDefault();
+							scope.send({
+								type: "ARROW_RIGHT",
+								caretAtStart: caret
+							});
+							break;
+						case "Escape":
+							event.preventDefault();
+							scope.send({ type: "ESCAPE" });
+							break;
+						case "Backspace":
+							scope.send({
+								type: "BACKSPACE",
+								caretAtStart: caret
+							});
+							break;
+						case "Delete":
+							scope.send({
+								type: "DELETE",
+								caretAtStart: caret
+							});
+							break;
+						case "Enter":
+							scope.send({ type: "ENTER" });
+							event.preventDefault();
+							break;
+						default: return;
+					}
+				},
+				"use:dismissable": { onOutside: (event) => {
+					callHostFn(hostFnOf(scope, "onPointerDownOutside"), event);
+					callHostFn(hostFnOf(scope, "onInteractOutside"), event);
+					if (event.defaultPrevented) return;
+					if (withinTag(scope, event.target)) return;
+					if (scope.context.readOnly || scope.context.disabled) return;
+					scope.send({ type: "BLUR" });
+				} }
+			};
+		} },
+		hiddenInput: {
+			id: "hidden-input",
+			attrs: (scope) => {
+				const context = scope.context;
+				return {
+					type: "text",
+					hidden: true,
+					name: scope.context.name,
+					form: scope.context.form,
+					disabled: scope.context.disabled,
+					readOnly: scope.context.readOnly,
+					required: scope.context.required,
+					value: context.value.join(", "),
+					"use:form-control": { onFormReset: () => {
+						scope.send({
+							type: "SET_VALUE",
+							value: [...scope.context.initialValue]
+						});
+					} }
+				};
+			}
+		},
+		clearTrigger: {
+			id: "clear-btn",
+			attrs: (scope) => {
+				const empty = scope.context.value.length === 0;
+				return {
+					type: "button",
+					dir: scope.context.dir,
+					disabled: scope.context.disabled,
+					"data-readonly": scope.attr(scope.context.readOnly),
+					"aria-label": translationsOf(scope).clearTriggerLabel,
+					hidden: empty,
+					onClick: () => {
+						if (scope.context.readOnly || scope.context.disabled) return;
+						scope.send({ type: "CLEAR_VALUE" });
+					}
+				};
+			}
+		},
+		liveRegion: {
+			id: "live-region",
+			attrs: (_scope) => ({
+				role: "status",
+				...liveRegion({
+					live: "assertive",
+					atomic: true
+				})
+			})
+		}
+	},
+	slots: {
+		item: {
+			indexes: (context) => rowsOf(context.value).filter(() => true),
+			attrs: (scope) => {
+				const row = scope.slot;
+				return {
+					dir: scope.context.dir,
+					"data-value": row.value,
+					"data-disabled": scope.attr(scope.context.disabled)
+				};
+			}
+		},
+		itemPreview: {
+			id: "preview",
+			indexes: (context) => rowsOf(context.value),
+			attrs: (scope) => {
+				const row = scope.slot;
+				const state = stateOf(scope, row);
+				return {
+					id: tagIdOf(scope.id, row),
+					dir: scope.context.dir,
+					hidden: state.editing,
+					"data-value": row.value,
+					"data-disabled": scope.attr(state.disabled),
+					"data-highlighted": scope.attr(state.highlighted),
+					onPointerDown: tagHandlers(scope, row).onPointerDown,
+					onDblclick: tagHandlers(scope, row).onDblclick
+				};
+			}
+		},
+		itemText: {
+			id: "text",
+			indexes: (context) => rowsOf(context.value),
+			attrs: (scope) => {
+				const state = stateOf(scope, scope.slot);
+				return {
+					dir: scope.context.dir,
+					"data-disabled": scope.attr(state.disabled),
+					"data-highlighted": scope.attr(state.highlighted)
+				};
+			}
+		},
+		itemInput: {
+			id: "tag-input",
+			indexes: (context) => rowsOf(context.value),
+			attrs: (scope) => {
+				const row = scope.slot;
+				const state = stateOf(scope, row);
+				return {
+					id: `${tagIdOf(scope.id, row)}:input`,
+					dir: scope.context.dir,
+					type: "text",
+					disabled: state.disabled,
+					"aria-label": translationsOf(scope).tagEdited(row.value),
+					hidden: !state.editing,
+					maxLength: scope.context.maxLength ?? void 0,
+					tabIndex: -1,
+					autoComplete: "off",
+					value: state.editing ? scope.context.editedValue : "",
+					onInput: (event) => {
+						const target = event.currentTarget;
+						if (!(target instanceof HTMLInputElement)) return;
+						scope.send({
+							type: "TAG_INPUT_TYPE",
+							value: target.value
+						});
+					},
+					onKeydown: (event) => {
+						if (event.defaultPrevented) return;
+						if (event.isComposing) return;
+						switch (event.key) {
+							case "Enter":
+								scope.send({ type: "TAG_INPUT_ENTER" });
+								break;
+							case "Escape": scope.send({ type: "TAG_INPUT_ESCAPE" });
+						}
+					},
+					onBlur: (event) => {
+						const input = scope.root().querySelector(`[id="${scope.id("input")}"]`);
+						const related = event.relatedTarget;
+						const relatedToInput = related !== null && input !== null && related === input;
+						queueMicrotask(() => {
+							scope.send({
+								type: "TAG_INPUT_BLUR",
+								relatedToInput
+							});
+							if (!relatedToInput) scope.send({ type: "EXTERNAL_BLUR" });
+						});
+					}
+				};
+			}
+		},
+		itemDeleteTrigger: {
+			id: "delete-btn",
+			indexes: (context) => rowsOf(context.value),
+			attrs: (scope) => {
+				const row = scope.slot;
+				const state = stateOf(scope, row);
+				const handlers = tagHandlers(scope, row);
+				return {
+					id: `${tagIdOf(scope.id, row)}:delete-btn`,
+					type: "button",
+					dir: scope.context.dir,
+					"data-disabled": scope.attr(state.disabled),
+					...ariaDisabled(state.disabled),
+					"data-highlighted": scope.attr(state.highlighted),
+					"aria-label": translationsOf(scope).deleteTagTriggerLabel(row.value),
+					tabIndex: -1,
+					disabled: state.disabled,
+					onPointerDown: handlers.onDeletePointerDown,
+					onClick: handlers.onDeleteClick
+				};
+			}
+		}
+	},
+	commands: {
+		setValue: { event: ([value]) => ({
+			type: "SET_VALUE",
+			value: [...value]
+		}) },
+		addValue: { event: ([value], context, id) => {
+			syncHostFns(context, id);
+			return {
+				type: "ADD_TAG",
+				value
+			};
+		} },
+		setValueAtIndex: { event: ([index, value]) => ({
+			type: "SET_VALUE_AT_INDEX",
+			index: Math.trunc(index),
+			value
+		}) },
+		clearValue: { event: (args, context, id) => {
+			const at = args[0];
+			if (at === void 0) return { type: "CLEAR_VALUE" };
+			if (typeof at === "number") return {
+				type: "CLEAR_TAG",
+				index: at
+			};
+			const ctx = context;
+			for (const row of rowsOf(ctx.value)) {
+				const tag = tagIdOf(id, row);
+				if (tag === at || `${tag}:delete-btn` === at || `${tag}:input` === at) return {
+					type: "CLEAR_TAG",
+					index: indexOfRow(ctx, row)
+				};
+			}
+			return {
+				type: "CLEAR_TAG",
+				index: -1
+			};
+		} },
+		setInputValue: { event: (args) => {
+			const value = args[0];
+			return {
+				type: "SET_INPUT_VALUE",
+				value: typeof value === "string" ? value : ""
+			};
+		} },
+		clearInputValue: { event: () => ({
+			type: "SET_INPUT_VALUE",
+			value: ""
+		}) },
+		focus: { view: ({ focus }) => focus("input") }
+	},
+	readers: {
+		value: { read: (context) => context.value },
+		inputValue: { read: (context) => context.inputValue },
+		valueAsString: { read: (context) => context.value.join(", ") },
+		count: { read: (context) => context.value.length },
+		empty: { read: (context) => context.value.length === 0 },
+		atMax: { read: (context) => context.value.length >= context.max },
+		highlightedIndex: { read: (context) => context.highlightedIndex },
+		editing: { read: (_context, state) => state === "editing:tag" },
+		editedIndex: { read: (context) => context.editedIndex },
+		focused: { read: (_context, state) => state !== "idle" },
+		disabled: { read: (context) => context.disabled === true }
+	},
+	methods: {
+		getTags: { call: (context) => rowsOf(context.value) },
+		getItemState: { call: (context, state, [row], _props, id) => itemStateOf(context, state, context.disabled, id, rowOf(row)) },
+		indexOfRow: { call: (context, _state, [row]) => indexOfRow(context, rowOf(row)) },
+		indexOfId: { call: (context, _state, [target], _props, id) => {
+			if (typeof target !== "string") return -1;
+			for (const row of rowsOf(context.value)) {
+				const tag = tagIdOf(id, row);
+				if (tag === target || `${tag}:delete-btn` === target || `${tag}:input` === target) return indexOfRow(context, row);
+			}
+			return -1;
+		} },
+		announceLog: { call: (context, _state, _args, _props, id) => {
+			const ctx = context;
+			if (ctx.log === null) return;
+			const root = rootByBridge.get(id);
+			if (root === void 0) return;
+			announce(root, id("liveRegion"), translationsOf({
+				context: ctx,
+				root: () => root
+			}), ctx.log, ctx.logPrev);
+		} }
+	},
+	events: {
+		"value-change": {
+			prop: "onValueChange",
+			watch: (context) => [...context.value],
+			detail: (watched) => ({ value: watched.filter((v) => typeof v === "string") })
+		},
+		"input-value-change": {
+			prop: "onInputValueChange",
+			watch: (context) => [context.inputValue],
+			detail: (watched) => {
+				const text = watched[0];
+				return { inputValue: typeof text === "string" ? text : "" };
+			}
+		},
+		"highlight-change": {
+			prop: "onHighlightChange",
+			watch: (context) => [context.highlightedIndex],
+			detail: (watched) => {
+				const index = watched[0];
+				return { highlightedValue: typeof index === "number" ? index : null };
+			}
+		},
+		"value-invalid": {
+			prop: "onValueInvalid",
+			watch: () => [],
+			detail: () => ({ reason: "invalidTag" }),
+			select: (_event, before, after) => {
+				const beforeCtx = before;
+				const afterCtx = after;
+				if (afterCtx.refusal !== null) {
+					const reason = afterCtx.refusal;
+					afterCtx.refusal = null;
+					return { reason };
+				}
+				const wasOver = beforeCtx.value.length > beforeCtx.max;
+				const isOver = afterCtx.value.length > afterCtx.max;
+				if (!wasOver && isOver) return { reason: "rangeOverflow" };
+				return null;
+			}
+		}
+	}
+};
+const tags = defineComponent(def);
+export { def, tags };
+
+//# sourceMappingURL=tags.presentation.js.map