@yuneta/gobj-ui 7.23.111 → 7.23.113

package/dist/gobj-ui.es.js

@@ -7007,8 +7007,10 @@ function toolbar_button$1(gobj, name) {
 			"button",
 			{
 				class: "button p-1 button-save",
-				title: "save",
-				"aria-label": "save",
+				title: t("save"),
+				"data-i18n-title": "save",
+				"aria-label": t("save"),
+				"data-i18n-aria-label": "save",
 				disabled: true
 			},
 			[[
@@ -7032,8 +7034,10 @@ function toolbar_button$1(gobj, name) {
 			"button",
 			{
 				class: "button p-1 button-undo",
-				title: "undo",
-				"aria-label": "undo",
+				title: t("undo"),
+				"data-i18n-title": "undo",
+				"aria-label": t("undo"),
+				"data-i18n-aria-label": "undo",
 				disabled: true
 			},
 			[[
@@ -7057,8 +7061,10 @@ function toolbar_button$1(gobj, name) {
 			"button",
 			{
 				class: "button p-1 button-clear",
-				title: "clear",
-				"aria-label": "clear"
+				title: t("clear"),
+				"data-i18n-title": "clear",
+				"aria-label": t("clear"),
+				"data-i18n-aria-label": "clear"
 			},
 			[[
 				"span",
@@ -7081,8 +7087,10 @@ function toolbar_button$1(gobj, name) {
 			"button",
 			{
 				class: "button p-1 button-copy",
-				title: "copy",
-				"aria-label": "copy"
+				title: t("copy"),
+				"data-i18n-title": "copy",
+				"aria-label": t("copy"),
+				"data-i18n-aria-label": "copy"
 			},
 			[[
 				"span",
@@ -7105,8 +7113,10 @@ function toolbar_button$1(gobj, name) {
 			"button",
 			{
 				class: "button p-1 button-paste",
-				title: "paste",
-				"aria-label": "paste"
+				title: t("paste"),
+				"data-i18n-title": "paste",
+				"aria-label": t("paste"),
+				"data-i18n-aria-label": "paste"
 			},
 			[[
 				"span",
@@ -8367,7 +8377,7 @@ function template2columns(gobj, columns, template, sub_elements) {
 				column.editorParams = {
 					format: "dd/MM/yyyy hh:mm",
 					verticalNavigation: "table",
-					elementAttributes: { title: "slide bar to choose option" }
+					elementAttributes: { title: t("slide bar to choose option") }
 				};
 				field_desc.real_type;
 				break;
@@ -9309,7 +9319,9 @@ var EditControl = class {
 				{
 					class: "button is-small is-flex is-align-items-center is-justify-content-center",
 					title: t("maplibre.drag_mark"),
-					"aria-label": t("maplibre.drag_mark")
+					"data-i18n-title": "maplibre.drag_mark",
+					"aria-label": t("maplibre.drag_mark"),
+					"data-i18n-aria-label": "maplibre.drag_mark"
 				},
 				parseSVG(`
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="22" height="22" fill="#CCCCCC"><path d="M273 7c-9.4-9.4-24.6-9.4-33.9 0L167 79c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l31-31L232 232 81.9 232l31-31c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0L7 239c-9.4 9.4-9.4 24.6 0 33.9l72 72c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-31-31L232 280l0 150.1-31-31c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l72 72c9.4 9.4 24.6 9.4 33.9 0l72-72c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-31 31L280 280l150.1 0-31 31c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l72-72c9.4-9.4 9.4-24.6 0-33.9l-72-72c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l31 31L280 232l0-150.1 31 31c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9L273 7z"/></svg>
@@ -9368,7 +9380,9 @@ var MarkerControl = class {
 				{
 					class: "button is-small is-flex is-align-items-center is-justify-content-center",
 					title: t("maplibre.center_map"),
-					"aria-label": t("maplibre.center_map")
+					"data-i18n-title": "maplibre.center_map",
+					"aria-label": t("maplibre.center_map"),
+					"data-i18n-aria-label": "maplibre.center_map"
 				},
 				parseSVG(`
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" width="22" height="22"><path d="M15 15C24.4 5.7 39.6 5.7 49 15l63 63L112 40c0-13.3 10.7-24 24-24s24 10.7 24 24l0 96c0 13.3-10.7 24-24 24l-96 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l38.1 0L15 49C5.7 39.6 5.7 24.4 15 15zM133.5 243.9C158.6 193.6 222.7 112 320 112s161.4 81.6 186.5 131.9c3.8 7.6 3.8 16.5 0 24.2C481.4 318.4 417.3 400 320 400s-161.4-81.6-186.5-131.9c-3.8-7.6-3.8-16.5 0-24.2zM320 320a64 64 0 1 0 0-128 64 64 0 1 0 0 128zM591 15c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-63 63 38.1 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-96 0c-13.3 0-24-10.7-24-24l0-96c0-13.3 10.7-24 24-24s24 10.7 24 24l0 38.1 63-63zM15 497c-9.4-9.4-9.4-24.6 0-33.9l63-63L40 400c-13.3 0-24-10.7-24-24s10.7-24 24-24l96 0c13.3 0 24 10.7 24 24l0 96c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-38.1L49 497c-9.4 9.4-24.6 9.4-33.9 0zm576 0l-63-63 0 38.1c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-96c0-13.3 10.7-24 24-24l96 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-38.1 0 63 63c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0z"/></svg>
@@ -9385,7 +9399,9 @@ var MarkerControl = class {
 				{
 					class: "button is-small is-flex is-align-items-center is-justify-content-center",
 					title: t("maplibre.user_location"),
-					"aria-label": t("maplibre.user_location")
+					"data-i18n-title": "maplibre.user_location",
+					"aria-label": t("maplibre.user_location"),
+					"data-i18n-aria-label": "maplibre.user_location"
 				},
 				parseSVG(`
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="22" height="22" fill="#CCCCCC"><path d="M256 0c17.7 0 32 14.3 32 32l0 34.7C368.4 80.1 431.9 143.6 445.3 224l34.7 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-34.7 0C431.9 368.4 368.4 431.9 288 445.3l0 34.7c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-34.7C143.6 431.9 80.1 368.4 66.7 288L32 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l34.7 0C80.1 143.6 143.6 80.1 224 66.7L224 32c0-17.7 14.3-32 32-32zM128 256a128 128 0 1 0 256 0 128 128 0 1 0 -256 0zm128-80a80 80 0 1 1 0 160 80 80 0 1 1 0-160z"/></svg>
@@ -20533,8 +20549,10 @@ function render_tabs(gobj, items) {
 				class: "icon is-small yui-nav-close ml-2",
 				"data-close-item": it.id,
 				role: "button",
-				"aria-label": "close",
-				title: "close"
+				"aria-label": t("close"),
+				"data-i18n-aria-label": "close",
+				title: t("close"),
+				"data-i18n-title": "close"
 			},
 			["i", {
 				class: "yi-xmark",
@@ -24982,7 +25000,8 @@ function create_tabulator(gobj) {
 	}
 	if (write_plan(gobj).in_row_icons) columns.push({
 		field: "_operation",
-		title: "Op",
+		title: "",
+		titleFormatter: () => t("operations"),
 		hozAlign: "center",
 		frozen: "right",
 		visible: false,
@@ -72077,37 +72096,37 @@ var TRAFFIC_TS_FIELDS = {
 var TRACE_DEFS = [
 	[
 		"trace_automata",
-		"Automata",
+		"automata",
 		trace_automata
 	],
 	[
 		"trace_creation",
-		"Creation",
+		"creation",
 		trace_creation
 	],
 	[
 		"trace_start_stop",
-		"Start/Stop",
+		"start / stop",
 		trace_start_stop
 	],
 	[
 		"trace_subscriptions",
-		"Subscriptions",
+		"subscriptions",
 		trace_subscriptions
 	],
 	[
 		"trace_i18n",
-		"I18n",
+		"i18n",
 		trace_i18n
 	],
 	[
 		"trace_traffic",
-		"Traffic",
+		"traffic",
 		trace_traffic
 	],
 	[
 		"no_poll",
-		"No Poll",
+		"no poll",
 		set_no_poll
 	]
 ];
@@ -72581,7 +72600,8 @@ function mute_button(sig) {
 		{
 			class: "TRAFFIC_MUTE",
 			type: "button",
-			title: "Mute " + sig
+			title: t("mute this message"),
+			"data-i18n-title": "mute this message"
 		},
 		"⊘",
 		{ click: (ev) => {
@@ -73081,7 +73101,7 @@ function set_no_poll() {
 function refresh_dev_chrome() {
 	document.querySelectorAll(".YDEV_CHIP[data-trace]").forEach(($b) => {
 		let key = $b.getAttribute("data-trace");
-		let label = $b.getAttribute("data-label") || "";
+		let label = t($b.getAttribute("data-label") || "");
 		let v = dev_num(key, 0);
 		$b.textContent = key === "trace_automata" && v > 0 ? label + " " + v : label;
 		$b.classList.toggle("is-active", v > 0);
@@ -73115,7 +73135,8 @@ function refresh_dev_chrome() {
 		if (set.size) {
 			let $lbl = document.createElement("span");
 			$lbl.className = "YDEV_LABEL";
-			$lbl.textContent = "Muted";
+			$lbl.textContent = t("muted");
+			$lbl.setAttribute("data-i18n", "muted");
 			$m.appendChild($lbl);
 			set.forEach((sig) => {
 				$m.appendChild(createElement2([
@@ -73123,7 +73144,8 @@ function refresh_dev_chrome() {
 					{
 						class: "YDEV_MUTED_CHIP",
 						type: "button",
-						title: "Unmute"
+						title: t("unmute"),
+						"data-i18n-title": "unmute"
 					},
 					"⊘ " + sig + "  ✕",
 					{ click: (ev) => {
@@ -73178,15 +73200,16 @@ function dev_fallback_copy(text) {
 	document.body.removeChild(ta);
 }
 function build_control_bar() {
-	let trace_chips = TRACE_DEFS.map(([key, label, fn]) => [
+	let trace_chips = TRACE_DEFS.map(([key, label_key, fn]) => [
 		"button",
 		{
 			class: "YDEV_CHIP",
 			"data-trace": key,
-			"data-label": label,
+			"data-label": label_key,
+			"data-i18n": label_key,
 			type: "button"
 		},
-		label,
+		t(label_key),
 		{ click: (ev) => {
 			ev.stopPropagation();
 			fn();
@@ -73198,9 +73221,11 @@ function build_control_bar() {
 			class: "YDEV_CHIP",
 			"data-toggle": "automata-simple",
 			type: "button",
-			title: "Machine trace shape. On (default): one line per transition, event first, like the C kernel. Off: the legacy three-line shape (the call, the state change and the return)"
+			title: t("machine trace shape"),
+			"data-i18n-title": "machine trace shape",
+			"data-i18n": "simple mach"
 		},
-		"Simple mach",
+		t("simple mach"),
 		{ click: (ev) => {
 			ev.stopPropagation();
 			let v = dev_simple_mach() ? 0 : 1;
@@ -73214,9 +73239,10 @@ function build_control_bar() {
 		{
 			class: "YDEV_SEG_BTN",
 			"data-view": v,
+			"data-i18n": label,
 			type: "button"
 		},
-		label,
+		t(label),
 		{ click: (ev) => {
 			ev.stopPropagation();
 			set_view(v);
@@ -73229,16 +73255,16 @@ function build_control_bar() {
 			id: "ydev-seg"
 		},
 		[
-			mk_view("detailed", "Detailed"),
-			mk_view("full", "Expanded"),
-			mk_view("compact", "Compact"),
-			mk_view("name", "Name only")
+			mk_view("detailed", "detailed"),
+			mk_view("full", "expanded"),
+			mk_view("compact", "compact"),
+			mk_view("name", "name only")
 		]
 	];
 	let OUT_TITLES = {
-		window: "Dev window only (browser console stays clean)",
-		console: "Browser console only (nothing shown in this window)",
-		both: "Dev window and browser console"
+		window: "dev window only",
+		console: "browser console only",
+		both: "dev window and browser console"
 	};
 	let mk_out = (v, label) => [
 		"button",
@@ -73246,9 +73272,11 @@ function build_control_bar() {
 			class: "YDEV_SEG_BTN",
 			"data-output": v,
 			type: "button",
-			title: OUT_TITLES[v]
+			title: t(OUT_TITLES[v]),
+			"data-i18n-title": OUT_TITLES[v],
+			"data-i18n": label
 		},
-		label,
+		t(label),
 		{ click: (ev) => {
 			ev.stopPropagation();
 			set_output_route(v);
@@ -73261,9 +73289,9 @@ function build_control_bar() {
 			id: "ydev-output"
 		},
 		[
-			mk_out("window", "Window"),
-			mk_out("console", "Console"),
-			mk_out("both", "Both")
+			mk_out("window", "window"),
+			mk_out("console", "console"),
+			mk_out("both", "both")
 		]
 	];
 	let mk_expand = (key, label) => [
@@ -73272,9 +73300,11 @@ function build_control_bar() {
 			class: "YDEV_CHIP",
 			"data-expand": key,
 			type: "button",
-			title: "Show " + label + " in the Expanded view"
+			title: t("show this section in the expanded view"),
+			"data-i18n-title": "show this section in the expanded view",
+			"data-i18n": label
 		},
-		label,
+		t(label),
 		{ click: (ev) => {
 			ev.stopPropagation();
 			toggle_pref(key, key === "dev_full_data" ? 1 : 0);
@@ -73289,12 +73319,15 @@ function build_control_bar() {
 		[
 			[
 				"span",
-				{ class: "YDEV_LABEL" },
-				"Expand"
+				{
+					class: "YDEV_LABEL",
+					"data-i18n": "expand"
+				},
+				t("expand")
 			],
-			mk_expand("dev_full_schema", "Schema"),
-			mk_expand("dev_full_data", "Data"),
-			mk_expand("dev_full_meta", "Metadata")
+			mk_expand("dev_full_schema", "schema"),
+			mk_expand("dev_full_data", "data"),
+			mk_expand("dev_full_meta", "metadata")
 		]
 	];
 	let mk_dir = (dir, glyph, key, title) => [
@@ -73303,7 +73336,8 @@ function build_control_bar() {
 			class: "YDEV_CHIP s-" + dir,
 			"data-dir": key,
 			type: "button",
-			title
+			title: t(title),
+			"data-i18n-title": title
 		},
 		glyph,
 		{ click: (ev) => {
@@ -73312,9 +73346,9 @@ function build_control_bar() {
 		} }
 	];
 	let dir_chips = [
-		mk_dir("out", "⇢", "dev_filter_out", "Outgoing"),
-		mk_dir("in", "⇠", "dev_filter_in", "Incoming"),
-		mk_dir("err", "⚠", "dev_filter_err", "Errors")
+		mk_dir("out", "⇢", "dev_filter_out", "outgoing"),
+		mk_dir("in", "⇠", "dev_filter_in", "incoming"),
+		mk_dir("err", "⚠", "dev_filter_err", "errors")
 	];
 	let periodic_chip = [
 		"button",
@@ -73322,9 +73356,18 @@ function build_control_bar() {
 			class: "YDEV_CHIP",
 			"data-toggle": "periodic",
 			type: "button",
-			title: "Hide the timers: EV_TIMEOUT / PERIODIC / HEARTBEAT / PING transitions, and recurring traffic. On by default"
+			title: t("hide the timers and the recurring traffic"),
+			"data-i18n-title": "hide the timers and the recurring traffic"
 		},
-		"⊘ Periodic",
+		[[
+			"span",
+			{ class: "YDEV_GLYPH" },
+			"⊘"
+		], [
+			"span",
+			{ "data-i18n": "periodic" },
+			t("periodic")
+		]],
 		{ click: (ev) => {
 			ev.stopPropagation();
 			toggle_pref("dev_hide_periodic", HIDE_PERIODIC_DEFAULT);
@@ -73335,8 +73378,9 @@ function build_control_bar() {
 		{
 			class: "YDEV_SEARCH",
 			type: "search",
-			placeholder: "filter events / payload…",
-			"data-role": "search"
+			"data-role": "search",
+			placeholder: t("filter events / payload"),
+			"data-i18n-placeholder": "filter events / payload"
 		},
 		"",
 		{ input: (ev) => {
@@ -73349,15 +73393,17 @@ function build_control_bar() {
 		{
 			class: "YDEV_CHIP",
 			type: "button",
-			title: "Copy visible traffic to clipboard"
+			title: t("copy visible traffic to clipboard"),
+			"data-i18n-title": "copy visible traffic to clipboard",
+			"data-i18n": "copy"
 		},
-		"Copy",
+		t("copy"),
 		{ click: (ev) => {
 			ev.stopPropagation();
 			let btn = ev.currentTarget;
 			dev_copy_text(traffic_to_text()).then(() => {
 				let prev = btn.textContent;
-				btn.textContent = "Copied";
+				btn.textContent = t("copied");
 				setTimeout(() => {
 					btn.textContent = prev;
 				}, 1e3);
@@ -73369,9 +73415,11 @@ function build_control_bar() {
 		{
 			class: "YDEV_CHIP",
 			type: "button",
-			title: "Clear captured traffic"
+			title: t("clear captured traffic"),
+			"data-i18n-title": "clear captured traffic",
+			"data-i18n": "clear"
 		},
-		"Clear",
+		t("clear"),
 		{ click: (ev) => {
 			ev.stopPropagation();
 			clear_traffic();
@@ -73382,8 +73430,11 @@ function build_control_bar() {
 		{ class: "YDEV_GROUP" },
 		[[
 			"span",
-			{ class: "YDEV_LABEL" },
-			label
+			{
+				class: "YDEV_LABEL",
+				"data-i18n": label
+			},
+			t(label)
 		], ...items]
 	];
 	let sep = () => [
@@ -73395,18 +73446,18 @@ function build_control_bar() {
 		"div",
 		{ class: "YDEV_BAR" },
 		[
-			grp("Traces", [...trace_chips, simple_mach]),
+			grp("traces", [...trace_chips, simple_mach]),
 			sep(),
-			grp("Output", [output_seg]),
+			grp("output", [output_seg]),
 			sep(),
-			grp("View", [view_seg]),
+			grp("view", [view_seg]),
 			expand_grp,
 			sep(),
-			grp("Show", [...dir_chips, periodic_chip]),
+			grp("show", [...dir_chips, periodic_chip]),
 			sep(),
-			grp("Find", [search]),
+			grp("find", [search]),
 			sep(),
-			grp("Log", [copy, clear])
+			grp("log", [copy, clear])
 		]
 	]);
 }
@@ -73416,12 +73467,18 @@ function build_title_header() {
 		{ class: "YDEV_TITLE" },
 		[[
 			"span",
-			{ class: "YDEV_TITLE_MAIN" },
-			"Developer"
+			{
+				class: "YDEV_TITLE_MAIN",
+				"data-i18n": "developer"
+			},
+			t("developer")
 		], [
 			"span",
-			{ class: "YDEV_TITLE_SUB" },
-			"yuno monitor · traffic & traces"
+			{
+				class: "YDEV_TITLE_SUB",
+				"data-i18n": "yuno monitor"
+			},
+			t("yuno monitor")
 		]]
 	]);
 }
@@ -73519,7 +73576,7 @@ function setup_dev(self, show) {
 			showFooter: false,
 			auto_save_size_and_position: true,
 			center: false,
-			title: "Developer",
+			title: "developer",
 			icon: "yi-terminal",
 			manager: gobj_find_service("__window_manager__", false) || null,
 			keep_on_navigate: true,

package/package.json

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

package/src/c_yui_form.js

@@ -347,7 +347,7 @@ function toolbar_button(gobj, name)
 {
     switch(name) {
         case "save":
-            return ['button', {class: 'button p-1 button-save', title: 'save', 'aria-label': 'save', disabled: true}, [
+            return ['button', {class: 'button p-1 button-save', title: t('save'), 'data-i18n-title': 'save', 'aria-label': t('save'), 'data-i18n-aria-label': 'save', disabled: true}, [
                 ['span', {class: 'icon m-0'}, '<i class="yi-floppy-disk"></i>'],
                 ['span', {class: 'is-hidden-mobile pl-1 pr-1', i18n: 'save'}, 'save']
             ], {
@@ -357,7 +357,7 @@ function toolbar_button(gobj, name)
                 }
             }];
         case "undo":
-            return ['button', {class: 'button p-1 button-undo', title: 'undo', 'aria-label': 'undo', disabled: true}, [
+            return ['button', {class: 'button p-1 button-undo', title: t('undo'), 'data-i18n-title': 'undo', 'aria-label': t('undo'), 'data-i18n-aria-label': 'undo', disabled: true}, [
                 ['span', {class: 'icon m-0'}, '<i class="yi-arrow-rotate-left"></i>'],
                 ['span', {class: 'is-hidden-mobile pl-1 pr-1', i18n: 'undo'}, 'undo']
             ], {
@@ -367,7 +367,7 @@ function toolbar_button(gobj, name)
                 }
             }];
         case "clear":
-            return ['button', {class: 'button p-1 button-clear', title: 'clear', 'aria-label': 'clear'}, [
+            return ['button', {class: 'button p-1 button-clear', title: t('clear'), 'data-i18n-title': 'clear', 'aria-label': t('clear'), 'data-i18n-aria-label': 'clear'}, [
                 ['span', {class: 'icon m-0'}, '<i class="yi-broom-wide"></i>'],
                 ['span', {class: 'is-hidden-mobile pl-1 pr-1', i18n: 'clear'}, 'clear']
             ], {
@@ -377,7 +377,7 @@ function toolbar_button(gobj, name)
                 }
             }];
         case "copy":
-            return ['button', {class: 'button p-1 button-copy', title: 'copy', 'aria-label': 'copy'}, [
+            return ['button', {class: 'button p-1 button-copy', title: t('copy'), 'data-i18n-title': 'copy', 'aria-label': t('copy'), 'data-i18n-aria-label': 'copy'}, [
                 ['span', {class: 'icon m-0'}, '<i class="yi-copy"></i>'],
                 ['span', {class: 'is-hidden-mobile pl-1 pr-1', i18n: 'copy'}, 'copy']
             ], {click: function(evt) {
@@ -386,7 +386,7 @@ function toolbar_button(gobj, name)
                 }
             }];
         case "paste":
-            return ['button', {class: 'button p-1 button-paste', title: 'paste', 'aria-label': 'paste'}, [
+            return ['button', {class: 'button p-1 button-paste', title: t('paste'), 'data-i18n-title': 'paste', 'aria-label': t('paste'), 'data-i18n-aria-label': 'paste'}, [
                 ['span', {class: 'icon m-0'}, '<i class="yi-paste"></i>'],
                 ['span', {class: 'is-hidden-mobile pl-1 pr-1', i18n: 'paste'}, 'paste']
             ], {click: async function(evt) {
@@ -2011,7 +2011,10 @@ function template2columns(gobj, columns, template, sub_elements)
                     format: "dd/MM/yyyy hh:mm", // the format of the date value stored in the cell
                     verticalNavigation: "table", //navigate cursor around table without changing the value
                     elementAttributes: {
-                        title:"slide bar to choose option" // custom tooltip
+                        /*  Tabulator writes this attribute once, when the
+                         *  editor opens, so it is translated then -- which
+                         *  is also when it is read.  */
+                        title: t("slide bar to choose option")
                     }
                 };
                 switch(field_desc.real_type) {

package/src/c_yui_nav.js

@@ -74,6 +74,8 @@ import {
     createElement2, empty_string, is_array, is_object, is_string,
 } from "@yuneta/gobj-js";
 
+import {t} from "i18next";
+
 import { cards_grid_descriptor } from "./nav_cards_helpers.js";
 import {
     BULMA_BP_ORDER,
@@ -407,7 +409,8 @@ function render_tabs(gobj, items)
         if(it.closable) {
             children.push(["span", {class: "icon is-small yui-nav-close ml-2",
                     "data-close-item": it.id, role: "button",
-                    "aria-label": "close", title: "close"},
+                    "aria-label": t("close"), "data-i18n-aria-label": "close",
+                    title: t("close"), "data-i18n-title": "close"},
                 ["i", {class: "yi-xmark", "aria-hidden":"true"}]]);
         }
         let a_attrs = {

package/src/c_yui_treedb_topic_with_form.js

@@ -1384,7 +1384,13 @@ function create_tabulator(gobj)
     if(with_in_row_edit_icons) {
         columns.push({
             field: '_operation',
-            title: 'Op',
+            /*  A FORMATTER and not a `title`, like every other column of
+             *  this table: a language change re-runs `setColumns()` over
+             *  the SAME definitions, so a title decided when they were
+             *  built -- `'Op'`, in English and abbreviated -- is frozen
+             *  there for the life of the view.  */
+            title: '',
+            titleFormatter: () => t('operations'),
             hozAlign: 'center',
             frozen: "right",
             visible: false,

package/src/lib_maplibre.js

@@ -61,7 +61,9 @@ class EditControl {
                     {
                         class: 'button is-small is-flex is-align-items-center is-justify-content-center',
                         title: t('maplibre.drag_mark'),
+                        "data-i18n-title": 'maplibre.drag_mark',
                         "aria-label": t('maplibre.drag_mark'),
+                        "data-i18n-aria-label": 'maplibre.drag_mark',
                     },
                     parseSVG(`
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="22" height="22" fill="#CCCCCC"><path d="M273 7c-9.4-9.4-24.6-9.4-33.9 0L167 79c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l31-31L232 232 81.9 232l31-31c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0L7 239c-9.4 9.4-9.4 24.6 0 33.9l72 72c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-31-31L232 280l0 150.1-31-31c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l72 72c9.4 9.4 24.6 9.4 33.9 0l72-72c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-31 31L280 280l150.1 0-31 31c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l72-72c9.4-9.4 9.4-24.6 0-33.9l-72-72c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l31 31L280 232l0-150.1 31 31c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9L273 7z"/></svg>
@@ -144,7 +146,9 @@ class MarkerControl {
                     {
                         class: 'button is-small is-flex is-align-items-center is-justify-content-center',
                         title: t('maplibre.center_map'),
+                        "data-i18n-title": 'maplibre.center_map',
                         "aria-label": t('maplibre.center_map'),
+                        "data-i18n-aria-label": 'maplibre.center_map',
                     },
                     parseSVG(`
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" width="22" height="22"><path d="M15 15C24.4 5.7 39.6 5.7 49 15l63 63L112 40c0-13.3 10.7-24 24-24s24 10.7 24 24l0 96c0 13.3-10.7 24-24 24l-96 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l38.1 0L15 49C5.7 39.6 5.7 24.4 15 15zM133.5 243.9C158.6 193.6 222.7 112 320 112s161.4 81.6 186.5 131.9c3.8 7.6 3.8 16.5 0 24.2C481.4 318.4 417.3 400 320 400s-161.4-81.6-186.5-131.9c-3.8-7.6-3.8-16.5 0-24.2zM320 320a64 64 0 1 0 0-128 64 64 0 1 0 0 128zM591 15c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-63 63 38.1 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-96 0c-13.3 0-24-10.7-24-24l0-96c0-13.3 10.7-24 24-24s24 10.7 24 24l0 38.1 63-63zM15 497c-9.4-9.4-9.4-24.6 0-33.9l63-63L40 400c-13.3 0-24-10.7-24-24s10.7-24 24-24l96 0c13.3 0 24 10.7 24 24l0 96c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-38.1L49 497c-9.4 9.4-24.6 9.4-33.9 0zm576 0l-63-63 0 38.1c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-96c0-13.3 10.7-24 24-24l96 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-38.1 0 63 63c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0z"/></svg>
@@ -166,7 +170,9 @@ class MarkerControl {
                     {
                         class: 'button is-small is-flex is-align-items-center is-justify-content-center',
                         title: t('maplibre.user_location'),
+                        "data-i18n-title": 'maplibre.user_location',
                         "aria-label": t('maplibre.user_location'),
+                        "data-i18n-aria-label": 'maplibre.user_location',
                     },
                     parseSVG(`
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="22" height="22" fill="#CCCCCC"><path d="M256 0c17.7 0 32 14.3 32 32l0 34.7C368.4 80.1 431.9 143.6 445.3 224l34.7 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-34.7 0C431.9 368.4 368.4 431.9 288 445.3l0 34.7c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-34.7C143.6 431.9 80.1 368.4 66.7 288L32 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l34.7 0C80.1 143.6 143.6 80.1 224 66.7L224 32c0-17.7 14.3-32 32-32zM128 256a128 128 0 1 0 256 0 128 128 0 1 0 -256 0zm128-80a80 80 0 1 1 0 160 80 80 0 1 1 0-160z"/></svg>