@intent-framework/dom 0.1.0-alpha.4 → 0.1.0-alpha.6

package/dist/index.js

@@ -100,6 +100,8 @@ function renderDom(screenDef, options) {
 					if (!reasonEl) {
 						reasonEl = document.createElement("p");
 						reasonEl.id = reasonId;
+						reasonEl.className = "intent-blocked-reason";
+						reasonEl.setAttribute("role", "alert");
 						form.appendChild(reasonEl);
 					}
 					reasonEl.textContent = act.blockedReasons[0];
@@ -157,6 +159,8 @@ function renderDom(screenDef, options) {
 				if (event.key !== "Enter") return;
 				if (event.shiftKey || event.metaKey || event.ctrlKey || event.altKey) return;
 				if (input.tagName === "TEXTAREA") return;
+				if (input.tagName === "SELECT") return;
+				if (input.type === "checkbox") return;
 				const defaultAction = findDefaultAction(screenDef.acts);
 				if (!defaultAction || !defaultAction.enabled.current) return;
 				event.preventDefault();
@@ -203,20 +207,42 @@ function buildDom(screenDef, showScreenName, showSemanticIds) {
 			if (sid) label.setAttribute("data-intent-ask", sid);
 		}
 		container.appendChild(label);
-		const input = createInputForAsk(ask);
-		input.id = ask.id;
-		input.name = ask.id;
+		const control = createInputForAsk(ask);
+		control.id = ask.id;
+		control.name = ask.id;
 		if (showSemanticIds && askSemanticIds) {
 			const sid = askSemanticIds.get(ask.id);
-			if (sid) input.setAttribute("data-intent-ask", sid);
+			if (sid) control.setAttribute("data-intent-ask", sid);
 		}
-		if (ask.required) input.required = true;
-		if (ask.kind === "contact" && ask.contactKind) input.setAttribute("autocomplete", ask.contactKind);
-		input.addEventListener("input", () => {
+		if (ask.required) control.required = true;
+		if (ask.kind === "contact" && ask.contactKind) control.setAttribute("autocomplete", ask.contactKind);
+		if (typeof ask.state.value === "boolean") {
 			const stateObj = ask.state;
-			if (typeof stateObj.set === "function") stateObj.set(input.value);
-		});
-		container.appendChild(input);
+			control.checked = stateObj.value;
+			control.addEventListener("change", () => {
+				stateObj.set(control.checked);
+			});
+		} else if (ask.kind === "choice") {
+			const stateObj = ask.state;
+			const select = control;
+			for (const opt of stateObj.options) {
+				const option = document.createElement("option");
+				option.value = opt;
+				option.textContent = opt;
+				select.appendChild(option);
+			}
+			select.value = stateObj.value;
+			select.addEventListener("change", () => {
+				stateObj.set(select.value);
+			});
+		} else {
+			const textInput = control;
+			textInput.addEventListener("input", () => {
+				const stateObj = ask.state;
+				if (typeof stateObj.set === "function") stateObj.set(textInput.value);
+			});
+		}
+		container.appendChild(control);
 		if (ask.hintText) {
 			const hint = document.createElement("p");
 			hint.id = `${ask.id}-hint`;
@@ -232,9 +258,9 @@ function buildDom(screenDef, showScreenName, showSemanticIds) {
 			if (!defaultAction.enabled.current) hint.style.display = "none";
 			container.appendChild(hint);
 			if (defaultAction.enabled.current) {
-				const existing = input.getAttribute("aria-describedby");
-				if (existing) input.setAttribute("aria-describedby", `${existing} ${hintId}`);
-				else input.setAttribute("aria-describedby", hintId);
+				const existing = control.getAttribute("aria-describedby");
+				if (existing) control.setAttribute("aria-describedby", `${existing} ${hintId}`);
+				else control.setAttribute("aria-describedby", hintId);
 			}
 		}
 		form.appendChild(container);
@@ -256,6 +282,8 @@ function buildDom(screenDef, showScreenName, showSemanticIds) {
 				button.setAttribute("aria-describedby", reasonId);
 				const reasonEl = document.createElement("p");
 				reasonEl.id = reasonId;
+				reasonEl.className = "intent-blocked-reason";
+				reasonEl.setAttribute("role", "alert");
 				reasonEl.textContent = act.blockedReasons[0];
 				form.appendChild(reasonEl);
 			}
@@ -275,13 +303,16 @@ function updateFeedback(act, output) {
 	else output.textContent = "";
 }
 function createInputForAsk(ask) {
+	if (typeof ask.state.value === "boolean") {
+		const input$1 = document.createElement("input");
+		input$1.type = "checkbox";
+		return input$1;
+	}
+	if (ask.kind === "choice") return document.createElement("select");
 	const input = document.createElement("input");
 	if (ask.kind === "contact" && ask.contactKind === "email") input.type = "email";
 	else if (ask.kind === "secret") input.type = "password";
-	else if (ask.kind === "choice") {
-		input.type = "text";
-		input.setAttribute("role", "combobox");
-	} else input.type = "text";
+	else input.type = "text";
 	return input;
 }
 

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.1.0-alpha.4",
+  "version": "0.1.0-alpha.6",
   "description": "DOM materializer for Intent screens and router",
   "license": "MIT",
   "repository": {
@@ -26,8 +26,8 @@
     "dist"
   ],
   "dependencies": {
-    "@intent-framework/core": "^0.1.0-alpha.4",
-    "@intent-framework/router": "^0.1.0-alpha.4"
+    "@intent-framework/core": "^0.1.0-alpha.6",
+    "@intent-framework/router": "^0.1.0-alpha.6"
   },
   "devDependencies": {
     "jsdom": "^29.1.1",