@yuneta/gobj-ui 7.26.25 → 7.26.27

package/README.md

@@ -3600,19 +3600,62 @@ directory:
 }
 ```
 
-It also scans the gobj-ui modules the app mounts, deep or through the barrel:
-**the library translates through the APP's i18next**, so every key it asks for
-must be defined by the app. The library it scans is the one it ships in, the
-package the app builds with. Code and catalogs shared by several apps are
-named with `--src <dir>` (repeatable) and `--locales <dir>` (yunovatios:
+It also scans the gobj-ui modules the app mounts -- deep, through the barrel,
+or by a dynamic `import()`: **the library translates through the APP's
+i18next**, so every key it asks for must be defined by the app. The library it
+scans is the one it ships in, the package the app builds with. The app's own
+source is read recursively. Code and catalogs shared by several apps are named
+with `--src <dir>` (repeatable) and `--locales <dir>` (yunovatios:
 `--src ../gui-common/src --locales ../gui-common/src/locales`); `--config`
 names a shell declaration other than `src/app_config.json`.
 
+What is particular to an app goes in ITS `package.json`, not in the script:
+properties whose value is a key, and properties whose value is a list of keys
+(yunovatios hands its orchestrator `app_title: "central"` and
+`welcome_features: [...]`):
+
+```json
+"validate-locales": {
+    "attr_keys":  ["app_title", "app_subtitle", "welcome_title", "welcome_lead"],
+    "array_keys": ["welcome_features"]
+}
+```
+
+Plurals are compared by language (since `7.26.26`): `songs_one` /
+`songs_few` / `songs_many` / `songs_other` are one key, and each locale must
+carry the categories of ITS language (`Intl.PluralRules`: English `one`,
+`other`; Russian `one`, `few`, `many`, `other`; Chinese `other`). The key with
+no suffix serves `other` and `many`; `zero`, `one`, `two` and `few` need their
+own form. That is a policy of GRAMMAR, not a need of i18next, which falls back
+to the bare key for any form that is missing: a Russian count of 3 rendered
+with the bare key reads wrong, and the check says so. A key that only ends
+like a form (`pick_one` alone) is a plain key; ordinals (`place_ordinal_one`)
+are checked with the ordinal categories of each language. A value of the shell
+declaration is a literal when it is the endonym of one of the app's locales
+(the `name` its catalog exports: `"中文"`, `"español"`); any other lower-case
+text is a key, `"configuración"` included.
+
+**A key that reaches `t()` as data is PUBLISHED by its module** (since
+`7.26.27`): an exported `<NAME>_I18N_KEYS` array of string literals, which
+`validate-locales` reads in every module the app mounts and asks the locales
+for. `yui_dev.js` publishes the 51 keys of the Developer window
+(`YUI_DEV_I18N_KEYS`) -- they used to be a comment each consumer copied, and
+one consumer lacked 35 --, `c_g6_nodes_tree.js` those of its shape tables and
+popover labels (`G6_NODES_TREE_I18N_KEYS`). A module that hands a key to `t()`
+by variable adds it to such a list:
+
+```js
+export const MY_VIEW_I18N_KEYS = ['shape', 'radius', 'apply to'];
+```
+
 Up to `7.26.24` each app carried its own copy, and the copies had drifted into
 three families: only one read the codes of the schema editor, only the other
 two the barrel imports, and two read `t('topic') + ':'` as a key built by
 concatenation and skipped it -- so the gobj tree's *"topic:"* went untranslated
-in wattyzer and yunovatios. An app keeps no copy now.
+in wattyzer and yunovatios. No app keeps a copy now, but one: `test-app`, this
+library's own demo, whose catalog has English as the source (a key IS the
+English text, Title Case included) and so follows other rules, in its own
+`test-app/scripts/validate-locales.mjs`.
 
 ### Dates: never hand-roll them again
 

package/dist/gobj-ui.cjs.js

@@ -7181,11 +7181,11 @@ function yui_file_control(gobj, { name, value, readonly, accept, on_pick }) {
 		if (picked) {
 			$state.classList.add("is-picked");
 			$state.setAttribute("data-i18n", "not saved yet");
-			$state.textContent = "not saved yet";
+			$state.textContent = (0, i18next.t)("not saved yet");
 		} else if (!kept) {
 			$state.classList.add("is-empty");
 			$state.setAttribute("data-i18n", "no file");
-			$state.textContent = "no file";
+			$state.textContent = (0, i18next.t)("no file");
 		}
 		$clear.hidden = readonly || !picked && !kept;
 		$pick.hidden = !!readonly;
@@ -8988,7 +8988,7 @@ function destroy_widgets(gobj, $container) {
 *  ids would break the association for both. The key is the
 *  label's own, so a language change reaches it.
 ************************************************************/
-function name_form_control($field, conf) {
+function name_form_control$1($field, conf) {
 	if (!$field || typeof $field.querySelector !== "function" || !conf) return;
 	let key = conf.label_i18n || conf.label || "";
 	if (!key) return;
@@ -9059,7 +9059,7 @@ function build_html_form(gobj, $form, prefix, template) {
 		if (placeholders[key]) html_field_conf.placeholder = placeholders[key];
 		if (html_field_conf.tag) {
 			let $field = create_form_field(gobj, $form, prefix, field_desc, html_field_conf);
-			name_form_control($field, html_field_conf);
+			name_form_control$1($field, html_field_conf);
 			$form.appendChild($field);
 		}
 	});
@@ -63793,19 +63793,34 @@ function touch_control_css() {
 	if (!coarse_pointer()) return "";
 	return "min-height:44px;font-size:16px;";
 }
+var form_control_seq = 0;
 function create_form_label(parent, text) {
 	let label = document.createElement("label");
 	label.textContent = (0, i18next.t)(text);
+	label.setAttribute("data-i18n", text);
 	label.style.cssText = "display:block;margin-bottom:4px;font-weight:500;";
 	parent.appendChild(label);
 	return label;
 }
+function name_form_control(parent, control) {
+	let label = parent.lastElementChild;
+	if (!label || label.tagName !== "LABEL") return;
+	let key = label.getAttribute("data-i18n");
+	if (!key) return;
+	control.id = "g6-form-control-" + ++form_control_seq;
+	label.htmlFor = control.id;
+	control.setAttribute("title", (0, i18next.t)(key));
+	control.setAttribute("data-i18n-title", key);
+	control.setAttribute("aria-label", (0, i18next.t)(key));
+	control.setAttribute("data-i18n-aria-label", key);
+}
 function create_form_color_input(parent, value, onInput) {
 	let input = document.createElement("input");
 	input.type = "color";
 	input.value = value;
 	input.style.cssText = "width:100%;height:30px;padding:0;border:1px solid var(--bulma-border-weak, #d9d9d9);border-radius:4px;cursor:pointer;margin-bottom:10px;" + touch_control_css();
 	if (onInput) input.addEventListener("input", onInput);
+	name_form_control(parent, input);
 	parent.appendChild(input);
 	return input;
 }
@@ -63817,6 +63832,7 @@ function create_form_number_input(parent, value, min, max, onInput) {
 	input.value = value;
 	input.style.cssText = "width:100%;padding:4px 6px;background:var(--bulma-scheme-main-bis, #fff);color:var(--bulma-text-strong, #333);border:1px solid var(--bulma-border-weak, #d9d9d9);border-radius:4px;box-sizing:border-box;margin-bottom:10px;" + touch_control_css();
 	if (onInput) input.addEventListener("input", onInput);
+	name_form_control(parent, input);
 	parent.appendChild(input);
 	return input;
 }
@@ -63826,9 +63842,11 @@ function create_form_select(parent, options, marginBottom) {
 	for (let opt of options) {
 		let o = document.createElement("option");
 		o.value = opt.value;
-		o.textContent = opt.label;
+		o.textContent = (0, i18next.t)(opt.i18n);
+		o.setAttribute("data-i18n", opt.i18n);
 		select.appendChild(o);
 	}
+	name_form_control(parent, select);
 	parent.appendChild(select);
 	return select;
 }
@@ -63836,9 +63854,14 @@ var BTN_STYLE_CANCEL = "flex:1;padding:6px;background:var(--bulma-scheme-main-bi
 function create_form_button_row(parent, buttons) {
 	let btnRow = document.createElement("div");
 	btnRow.style.cssText = "display:flex;gap:8px;";
-	for (let { text, style, onClick } of buttons) {
+	for (let { i18n, style, onClick } of buttons) {
 		let btn = document.createElement("button");
-		btn.textContent = (0, i18next.t)(text);
+		btn.textContent = (0, i18next.t)(i18n);
+		btn.setAttribute("data-i18n", i18n);
+		btn.setAttribute("title", (0, i18next.t)(i18n));
+		btn.setAttribute("data-i18n-title", i18n);
+		btn.setAttribute("aria-label", (0, i18next.t)(i18n));
+		btn.setAttribute("data-i18n-aria-label", i18n);
 		btn.style.cssText = style + touch_control_css();
 		btn.addEventListener("click", (e) => {
 			e.stopPropagation();
@@ -63872,11 +63895,11 @@ function show_confirm_popover(gobj, target_el, message, confirm_text, confirm_co
 	msg.textContent = message;
 	popover.appendChild(msg);
 	create_form_button_row(popover, [{
-		text: "cancel",
+		i18n: "cancel",
 		style: BTN_STYLE_CANCEL,
 		onClick: () => hide_overlay(gobj, priv_key)
 	}, {
-		text: confirm_text,
+		i18n: confirm_text,
 		style: "flex:1;padding:6px;background:" + confirm_color + ";color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:13px;font-weight:500;",
 		onClick: onConfirm
 	}]);
@@ -64582,7 +64605,7 @@ function show_port_popover(gobj) {
 	let shapeSelect = create_form_select(popover, PORT_SHAPES.map((shape) => {
 		return {
 			value: shape,
-			label: (0, i18next.t)(shape)
+			i18n: shape
 		};
 	}));
 	shapeSelect.value = orig_shape;
@@ -64593,25 +64616,25 @@ function show_port_popover(gobj) {
 	let scopeSelect = create_form_select(popover, [
 		{
 			value: "this",
-			label: (0, i18next.t)("this port")
+			i18n: "this port"
 		},
 		{
 			value: "same_topic",
-			label: (0, i18next.t)("same port in topic")
+			i18n: "same port in topic"
 		},
 		{
 			value: "all",
-			label: (0, i18next.t)("all ports")
+			i18n: "all ports"
 		}
 	]);
 	create_form_button_row(popover, [{
-		text: "cancel",
+		i18n: "cancel",
 		style: BTN_STYLE_CANCEL,
 		onClick: () => {
 			hide_port_popover(gobj);
 		}
 	}, {
-		text: "apply",
+		i18n: "apply",
 		style: "flex:1;padding:6px;background:#1890ff;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:13px;font-weight:500;",
 		onClick: () => {
 			drop_preview_undo(gobj, "_port_preview_undo");
@@ -65289,25 +65312,25 @@ function show_edge_popover(gobj) {
 	let scopeSelect = create_form_select(popover, [
 		{
 			value: "this",
-			label: (0, i18next.t)("this edge")
+			i18n: "this edge"
 		},
 		{
 			value: "same_type",
-			label: (0, i18next.t)("same type edges")
+			i18n: "same type edges"
 		},
 		{
 			value: "all",
-			label: (0, i18next.t)("all edges")
+			i18n: "all edges"
 		}
 	]);
 	create_form_button_row(popover, [{
-		text: "cancel",
+		i18n: "cancel",
 		style: BTN_STYLE_CANCEL,
 		onClick: () => {
 			deselect_edge(gobj);
 		}
 	}, {
-		text: "apply",
+		i18n: "apply",
 		style: "flex:1;padding:6px;background:#52c41a;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:13px;font-weight:500;",
 		onClick: () => {
 			drop_preview_undo(gobj, "_edge_preview_undo");
@@ -65441,7 +65464,7 @@ function show_node_popover(gobj) {
 	let shapeSelect = create_form_select(popover, NODE_SHAPES.map((shape) => {
 		return {
 			value: shape,
-			label: (0, i18next.t)(shape)
+			i18n: shape
 		};
 	}));
 	shapeSelect.value = nodeData.data && nodeData.data.desc ? node_figure_of(gobj, nodeData.data.desc, nodeData.data.graph_props || {}) : DEFAULT_NODE_SHAPE;
@@ -65450,25 +65473,25 @@ function show_node_popover(gobj) {
 	let scopeSelect = create_form_select(popover, [
 		{
 			value: "this",
-			label: (0, i18next.t)("this node")
+			i18n: "this node"
 		},
 		{
 			value: "same_topic",
-			label: (0, i18next.t)("same topic nodes")
+			i18n: "same topic nodes"
 		},
 		{
 			value: "all",
-			label: (0, i18next.t)("all nodes")
+			i18n: "all nodes"
 		}
 	]);
 	create_form_button_row(popover, [{
-		text: "cancel",
+		i18n: "cancel",
 		style: BTN_STYLE_CANCEL,
 		onClick: () => {
 			hide_node_popover(gobj);
 		}
 	}, {
-		text: "apply",
+		i18n: "apply",
 		style: "flex:1;padding:6px;background:#1890ff;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:13px;font-weight:500;",
 		onClick: () => {
 			drop_preview_undo(gobj, "_node_preview_undo");
@@ -66122,12 +66145,21 @@ function show_create_popover(gobj) {
 	let titleEl = document.createElement("div");
 	titleEl.style.cssText = "margin-bottom:10px;font-weight:600;font-size:14px;";
 	titleEl.textContent = (0, i18next.t)("create node");
+	titleEl.setAttribute("data-i18n", "create node");
 	popover.appendChild(titleEl);
 	let topicLabel = document.createElement("div");
 	topicLabel.style.cssText = "margin-bottom:4px;font-weight:500;";
-	topicLabel.textContent = (0, i18next.t)("topic") + ":";
+	let topicWord = document.createElement("span");
+	topicWord.textContent = (0, i18next.t)("topic");
+	topicWord.setAttribute("data-i18n", "topic");
+	topicLabel.appendChild(topicWord);
+	topicLabel.appendChild(document.createTextNode(":"));
 	popover.appendChild(topicLabel);
 	let topicSelect = document.createElement("select");
+	topicSelect.setAttribute("title", (0, i18next.t)("topic"));
+	topicSelect.setAttribute("data-i18n-title", "topic");
+	topicSelect.setAttribute("aria-label", (0, i18next.t)("topic"));
+	topicSelect.setAttribute("data-i18n-aria-label", "topic");
 	topicSelect.style.cssText = "width:100%;padding:6px;border:1px solid #d9d9d9;border-radius:4px;font-size:13px;margin-bottom:8px;" + touch_control_css();
 	for (let i = 0; i < topics.length; i++) {
 		let opt = document.createElement("option");
@@ -66156,11 +66188,20 @@ function show_create_popover(gobj) {
 	});
 	let idLabel = document.createElement("div");
 	idLabel.style.cssText = "margin-bottom:4px;font-weight:500;";
-	idLabel.textContent = "Id:";
+	let idWord = document.createElement("span");
+	idWord.textContent = (0, i18next.t)("node id");
+	idWord.setAttribute("data-i18n", "node id");
+	idLabel.appendChild(idWord);
+	idLabel.appendChild(document.createTextNode(":"));
 	popover.appendChild(idLabel);
 	let idInput = document.createElement("input");
 	idInput.type = "text";
 	idInput.placeholder = (0, i18next.t)("node id");
+	idInput.setAttribute("data-i18n-placeholder", "node id");
+	idInput.setAttribute("title", (0, i18next.t)("node id"));
+	idInput.setAttribute("data-i18n-title", "node id");
+	idInput.setAttribute("aria-label", (0, i18next.t)("node id"));
+	idInput.setAttribute("data-i18n-aria-label", "node id");
 	idInput.style.cssText = "width:100%;padding:6px;border:1px solid #d9d9d9;border-radius:4px;font-size:13px;margin-bottom:10px;box-sizing:border-box;" + touch_control_css();
 	popover.appendChild(idInput);
 	let errorEl = document.createElement("div");
@@ -66168,16 +66209,17 @@ function show_create_popover(gobj) {
 	popover.appendChild(errorEl);
 	let createBtn;
 	create_form_button_row(popover, [{
-		text: "cancel",
+		i18n: "cancel",
 		style: BTN_STYLE_CANCEL,
 		onClick: () => hide_create_popover(gobj)
 	}, {
-		text: "create",
+		i18n: "create",
 		style: "flex:1;padding:6px;background:#1890ff;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:13px;font-weight:500;",
 		onClick: () => {
 			let node_id = idInput.value.trim();
 			if (!node_id) {
-				errorEl.textContent = (0, i18next.t)("node id") + " required";
+				errorEl.textContent = (0, i18next.t)("node id required");
+				errorEl.setAttribute("data-i18n", "node id required");
 				errorEl.style.display = "block";
 				idInput.focus();
 				return;

package/dist/gobj-ui.es.js

@@ -7176,11 +7176,11 @@ function yui_file_control(gobj, { name, value, readonly, accept, on_pick }) {
 		if (picked) {
 			$state.classList.add("is-picked");
 			$state.setAttribute("data-i18n", "not saved yet");
-			$state.textContent = "not saved yet";
+			$state.textContent = t("not saved yet");
 		} else if (!kept) {
 			$state.classList.add("is-empty");
 			$state.setAttribute("data-i18n", "no file");
-			$state.textContent = "no file";
+			$state.textContent = t("no file");
 		}
 		$clear.hidden = readonly || !picked && !kept;
 		$pick.hidden = !!readonly;
@@ -8983,7 +8983,7 @@ function destroy_widgets(gobj, $container) {
 *  ids would break the association for both. The key is the
 *  label's own, so a language change reaches it.
 ************************************************************/
-function name_form_control($field, conf) {
+function name_form_control$1($field, conf) {
 	if (!$field || typeof $field.querySelector !== "function" || !conf) return;
 	let key = conf.label_i18n || conf.label || "";
 	if (!key) return;
@@ -9054,7 +9054,7 @@ function build_html_form(gobj, $form, prefix, template) {
 		if (placeholders[key]) html_field_conf.placeholder = placeholders[key];
 		if (html_field_conf.tag) {
 			let $field = create_form_field(gobj, $form, prefix, field_desc, html_field_conf);
-			name_form_control($field, html_field_conf);
+			name_form_control$1($field, html_field_conf);
 			$form.appendChild($field);
 		}
 	});
@@ -63788,19 +63788,34 @@ function touch_control_css() {
 	if (!coarse_pointer()) return "";
 	return "min-height:44px;font-size:16px;";
 }
+var form_control_seq = 0;
 function create_form_label(parent, text) {
 	let label = document.createElement("label");
 	label.textContent = t(text);
+	label.setAttribute("data-i18n", text);
 	label.style.cssText = "display:block;margin-bottom:4px;font-weight:500;";
 	parent.appendChild(label);
 	return label;
 }
+function name_form_control(parent, control) {
+	let label = parent.lastElementChild;
+	if (!label || label.tagName !== "LABEL") return;
+	let key = label.getAttribute("data-i18n");
+	if (!key) return;
+	control.id = "g6-form-control-" + ++form_control_seq;
+	label.htmlFor = control.id;
+	control.setAttribute("title", t(key));
+	control.setAttribute("data-i18n-title", key);
+	control.setAttribute("aria-label", t(key));
+	control.setAttribute("data-i18n-aria-label", key);
+}
 function create_form_color_input(parent, value, onInput) {
 	let input = document.createElement("input");
 	input.type = "color";
 	input.value = value;
 	input.style.cssText = "width:100%;height:30px;padding:0;border:1px solid var(--bulma-border-weak, #d9d9d9);border-radius:4px;cursor:pointer;margin-bottom:10px;" + touch_control_css();
 	if (onInput) input.addEventListener("input", onInput);
+	name_form_control(parent, input);
 	parent.appendChild(input);
 	return input;
 }
@@ -63812,6 +63827,7 @@ function create_form_number_input(parent, value, min, max, onInput) {
 	input.value = value;
 	input.style.cssText = "width:100%;padding:4px 6px;background:var(--bulma-scheme-main-bis, #fff);color:var(--bulma-text-strong, #333);border:1px solid var(--bulma-border-weak, #d9d9d9);border-radius:4px;box-sizing:border-box;margin-bottom:10px;" + touch_control_css();
 	if (onInput) input.addEventListener("input", onInput);
+	name_form_control(parent, input);
 	parent.appendChild(input);
 	return input;
 }
@@ -63821,9 +63837,11 @@ function create_form_select(parent, options, marginBottom) {
 	for (let opt of options) {
 		let o = document.createElement("option");
 		o.value = opt.value;
-		o.textContent = opt.label;
+		o.textContent = t(opt.i18n);
+		o.setAttribute("data-i18n", opt.i18n);
 		select.appendChild(o);
 	}
+	name_form_control(parent, select);
 	parent.appendChild(select);
 	return select;
 }
@@ -63831,9 +63849,14 @@ var BTN_STYLE_CANCEL = "flex:1;padding:6px;background:var(--bulma-scheme-main-bi
 function create_form_button_row(parent, buttons) {
 	let btnRow = document.createElement("div");
 	btnRow.style.cssText = "display:flex;gap:8px;";
-	for (let { text, style, onClick } of buttons) {
+	for (let { i18n, style, onClick } of buttons) {
 		let btn = document.createElement("button");
-		btn.textContent = t(text);
+		btn.textContent = t(i18n);
+		btn.setAttribute("data-i18n", i18n);
+		btn.setAttribute("title", t(i18n));
+		btn.setAttribute("data-i18n-title", i18n);
+		btn.setAttribute("aria-label", t(i18n));
+		btn.setAttribute("data-i18n-aria-label", i18n);
 		btn.style.cssText = style + touch_control_css();
 		btn.addEventListener("click", (e) => {
 			e.stopPropagation();
@@ -63867,11 +63890,11 @@ function show_confirm_popover(gobj, target_el, message, confirm_text, confirm_co
 	msg.textContent = message;
 	popover.appendChild(msg);
 	create_form_button_row(popover, [{
-		text: "cancel",
+		i18n: "cancel",
 		style: BTN_STYLE_CANCEL,
 		onClick: () => hide_overlay(gobj, priv_key)
 	}, {
-		text: confirm_text,
+		i18n: confirm_text,
 		style: "flex:1;padding:6px;background:" + confirm_color + ";color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:13px;font-weight:500;",
 		onClick: onConfirm
 	}]);
@@ -64577,7 +64600,7 @@ function show_port_popover(gobj) {
 	let shapeSelect = create_form_select(popover, PORT_SHAPES.map((shape) => {
 		return {
 			value: shape,
-			label: t(shape)
+			i18n: shape
 		};
 	}));
 	shapeSelect.value = orig_shape;
@@ -64588,25 +64611,25 @@ function show_port_popover(gobj) {
 	let scopeSelect = create_form_select(popover, [
 		{
 			value: "this",
-			label: t("this port")
+			i18n: "this port"
 		},
 		{
 			value: "same_topic",
-			label: t("same port in topic")
+			i18n: "same port in topic"
 		},
 		{
 			value: "all",
-			label: t("all ports")
+			i18n: "all ports"
 		}
 	]);
 	create_form_button_row(popover, [{
-		text: "cancel",
+		i18n: "cancel",
 		style: BTN_STYLE_CANCEL,
 		onClick: () => {
 			hide_port_popover(gobj);
 		}
 	}, {
-		text: "apply",
+		i18n: "apply",
 		style: "flex:1;padding:6px;background:#1890ff;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:13px;font-weight:500;",
 		onClick: () => {
 			drop_preview_undo(gobj, "_port_preview_undo");
@@ -65284,25 +65307,25 @@ function show_edge_popover(gobj) {
 	let scopeSelect = create_form_select(popover, [
 		{
 			value: "this",
-			label: t("this edge")
+			i18n: "this edge"
 		},
 		{
 			value: "same_type",
-			label: t("same type edges")
+			i18n: "same type edges"
 		},
 		{
 			value: "all",
-			label: t("all edges")
+			i18n: "all edges"
 		}
 	]);
 	create_form_button_row(popover, [{
-		text: "cancel",
+		i18n: "cancel",
 		style: BTN_STYLE_CANCEL,
 		onClick: () => {
 			deselect_edge(gobj);
 		}
 	}, {
-		text: "apply",
+		i18n: "apply",
 		style: "flex:1;padding:6px;background:#52c41a;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:13px;font-weight:500;",
 		onClick: () => {
 			drop_preview_undo(gobj, "_edge_preview_undo");
@@ -65436,7 +65459,7 @@ function show_node_popover(gobj) {
 	let shapeSelect = create_form_select(popover, NODE_SHAPES.map((shape) => {
 		return {
 			value: shape,
-			label: t(shape)
+			i18n: shape
 		};
 	}));
 	shapeSelect.value = nodeData.data && nodeData.data.desc ? node_figure_of(gobj, nodeData.data.desc, nodeData.data.graph_props || {}) : DEFAULT_NODE_SHAPE;
@@ -65445,25 +65468,25 @@ function show_node_popover(gobj) {
 	let scopeSelect = create_form_select(popover, [
 		{
 			value: "this",
-			label: t("this node")
+			i18n: "this node"
 		},
 		{
 			value: "same_topic",
-			label: t("same topic nodes")
+			i18n: "same topic nodes"
 		},
 		{
 			value: "all",
-			label: t("all nodes")
+			i18n: "all nodes"
 		}
 	]);
 	create_form_button_row(popover, [{
-		text: "cancel",
+		i18n: "cancel",
 		style: BTN_STYLE_CANCEL,
 		onClick: () => {
 			hide_node_popover(gobj);
 		}
 	}, {
-		text: "apply",
+		i18n: "apply",
 		style: "flex:1;padding:6px;background:#1890ff;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:13px;font-weight:500;",
 		onClick: () => {
 			drop_preview_undo(gobj, "_node_preview_undo");
@@ -66117,12 +66140,21 @@ function show_create_popover(gobj) {
 	let titleEl = document.createElement("div");
 	titleEl.style.cssText = "margin-bottom:10px;font-weight:600;font-size:14px;";
 	titleEl.textContent = t("create node");
+	titleEl.setAttribute("data-i18n", "create node");
 	popover.appendChild(titleEl);
 	let topicLabel = document.createElement("div");
 	topicLabel.style.cssText = "margin-bottom:4px;font-weight:500;";
-	topicLabel.textContent = t("topic") + ":";
+	let topicWord = document.createElement("span");
+	topicWord.textContent = t("topic");
+	topicWord.setAttribute("data-i18n", "topic");
+	topicLabel.appendChild(topicWord);
+	topicLabel.appendChild(document.createTextNode(":"));
 	popover.appendChild(topicLabel);
 	let topicSelect = document.createElement("select");
+	topicSelect.setAttribute("title", t("topic"));
+	topicSelect.setAttribute("data-i18n-title", "topic");
+	topicSelect.setAttribute("aria-label", t("topic"));
+	topicSelect.setAttribute("data-i18n-aria-label", "topic");
 	topicSelect.style.cssText = "width:100%;padding:6px;border:1px solid #d9d9d9;border-radius:4px;font-size:13px;margin-bottom:8px;" + touch_control_css();
 	for (let i = 0; i < topics.length; i++) {
 		let opt = document.createElement("option");
@@ -66151,11 +66183,20 @@ function show_create_popover(gobj) {
 	});
 	let idLabel = document.createElement("div");
 	idLabel.style.cssText = "margin-bottom:4px;font-weight:500;";
-	idLabel.textContent = "Id:";
+	let idWord = document.createElement("span");
+	idWord.textContent = t("node id");
+	idWord.setAttribute("data-i18n", "node id");
+	idLabel.appendChild(idWord);
+	idLabel.appendChild(document.createTextNode(":"));
 	popover.appendChild(idLabel);
 	let idInput = document.createElement("input");
 	idInput.type = "text";
 	idInput.placeholder = t("node id");
+	idInput.setAttribute("data-i18n-placeholder", "node id");
+	idInput.setAttribute("title", t("node id"));
+	idInput.setAttribute("data-i18n-title", "node id");
+	idInput.setAttribute("aria-label", t("node id"));
+	idInput.setAttribute("data-i18n-aria-label", "node id");
 	idInput.style.cssText = "width:100%;padding:6px;border:1px solid #d9d9d9;border-radius:4px;font-size:13px;margin-bottom:10px;box-sizing:border-box;" + touch_control_css();
 	popover.appendChild(idInput);
 	let errorEl = document.createElement("div");
@@ -66163,16 +66204,17 @@ function show_create_popover(gobj) {
 	popover.appendChild(errorEl);
 	let createBtn;
 	create_form_button_row(popover, [{
-		text: "cancel",
+		i18n: "cancel",
 		style: BTN_STYLE_CANCEL,
 		onClick: () => hide_create_popover(gobj)
 	}, {
-		text: "create",
+		i18n: "create",
 		style: "flex:1;padding:6px;background:#1890ff;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:13px;font-weight:500;",
 		onClick: () => {
 			let node_id = idInput.value.trim();
 			if (!node_id) {
-				errorEl.textContent = t("node id") + " required";
+				errorEl.textContent = t("node id required");
+				errorEl.setAttribute("data-i18n", "node id required");
 				errorEl.style.display = "block";
 				idInput.focus();
 				return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuneta/gobj-ui",
-  "version": "7.26.25",
+  "version": "7.26.27",
   "type": "module",
   "main": "dist/gobj-ui.cjs.js",
   "module": "dist/gobj-ui.es.js",