@yuneta/gobj-ui 7.23.39 → 7.23.41

package/dist/gobj-ui.cjs.js

@@ -44,6 +44,75 @@ maplibre_gl = __toESM(maplibre_gl, 1);
 let uplot = require("uplot");
 uplot = __toESM(uplot, 1);
 let _antv_g6 = require("@antv/g6");
+//#region src/bulma_tint.js
+/***********************************************************************
+*          bulma_tint.js
+*
+*      Bulma's "soften this colour" modifier, applied so that it cannot
+*      be applied alone.
+*
+*      WHY THIS IS A FUNCTION AND NOT A STRING.  'light' is one of
+*      Bulma's colours, so `is-light` is BOTH a colour and the modifier
+*      that softens another one.  A compound selector may match the same
+*      class twice, so `.tag.is-light.is-light` matches an element that
+*      carries the class ONCE -- and that rule sets the text to
+*      var(--bulma-light-light-invert-l), WHICH BULMA NEVER DEFINES:
+*      referenced four times in bulma.css, declared zero times.  The
+*      colour declaration is then invalid while the background still
+*      resolves, so what is left on screen is a pill with no readable
+*      label.
+*
+*      Two selectors of Bulma 1 reach that undefined variable:
+*
+*          .tag.is-light.is-light
+*          .notification.is-light.is-light
+*
+*      It cost three unreadable chips in the schema editor -- the topic
+*      count, the schema version, and every column flag with no colour of
+*      its own ('writable', 'image', 'wild'...).  They read as empty
+*      pills, which looks like a bug in the DATA and is a missing CSS
+*      variable.
+*
+*      The neutral chip is a bare element with no modifier at all: it
+*      takes --bulma-background-l and --bulma-text-l, follows the theme
+*      and stays legible in both.
+*
+*          Copyright (c) 2026, ArtGins.
+*          All Rights Reserved.
+***********************************************************************/
+var TINTABLE = [
+	"primary",
+	"link",
+	"info",
+	"success",
+	"warning",
+	"danger",
+	"black",
+	"dark",
+	"white",
+	"text",
+	"ghost"
+];
+/***************************************************************
+*  A softened colour, or nothing.
+*
+*      yui_tint("warning")     -> "is-warning is-light"
+*      yui_tint("is-warning")  -> "is-warning is-light"
+*      yui_tint("light")       -> ""     (there is nothing to soften)
+*      yui_tint("")            -> ""
+*      yui_tint(undefined)     -> ""
+*
+*  Anything it does not recognise comes back empty rather than being
+*  passed through: a class this function cannot vouch for is exactly the
+*  case it exists to stop.
+***************************************************************/
+function yui_tint(colour) {
+	if (typeof colour !== "string") return "";
+	const name = colour.trim().replace(/^is-/, "");
+	if (TINTABLE.indexOf(name) < 0) return "";
+	return `is-${name} is-light`;
+}
+//#endregion
 //#region src/shell_focus_trap.js
 /***********************************************************************
 *          shell_focus_trap.js
@@ -2858,7 +2927,7 @@ function show_notification(shell, kind, message, opts) {
 	let $note = (0, _yuneta_gobj_js.createElement2)([
 		"div",
 		{
-			class: `TOAST notification yui-notification is-${kind} is-light`,
+			class: `TOAST notification yui-notification ${yui_tint(kind)}`,
 			role: kind === "danger" ? "alert" : "status"
 		},
 		[["button", {
@@ -10921,10 +10990,6 @@ function make_toolbar$5(gobj) {
 			"span",
 			{ class: "JSON_GRAPH_FIND_COUNT" },
 			""
-		], [
-			"span",
-			{ i18n: "matches" },
-			"matches"
 		]]
 	]]);
 	let center_items = [];
@@ -11450,7 +11515,7 @@ function update_find_result$1(gobj) {
 		priv.$find_count.textContent = "";
 		return;
 	}
-	priv.$find_count.textContent = String(priv.match_count);
+	priv.$find_count.textContent = (0, i18next.t)("matches", { count: priv.match_count });
 	priv.$find_result.classList.remove("is-hidden");
 }
 /************************************************************
@@ -17368,10 +17433,6 @@ function make_find_items(gobj) {
 			"span",
 			{ class: "GOBJ_TREE_FIND_COUNT" },
 			""
-		], [
-			"span",
-			{ i18n: "matches" },
-			(0, i18next.t)("matches")
 		]]
 	]];
 }
@@ -17404,7 +17465,7 @@ function update_find_result(gobj) {
 		priv.$find_count.textContent = "";
 		return;
 	}
-	priv.$find_count.textContent = String(priv.match_count);
+	priv.$find_count.textContent = (0, i18next.t)("matches", { count: priv.match_count });
 	priv.$find_result.classList.remove("is-hidden");
 }
 function make_toolbar$1(gobj) {
@@ -18650,6 +18711,7 @@ function ac_language_changed$3(gobj, event, kw, src) {
 	if ($container) (0, _yuneta_gobj_js.refresh_language)($container, i18next.t);
 	hide_popover(gobj);
 	refresh_tree(gobj);
+	update_find_result(gobj);
 	return 0;
 }
 /***************************
@@ -20164,11 +20226,7 @@ function build_body(shell, t) {
 	let $count = (0, _yuneta_gobj_js.createElement2)([
 		"span",
 		{ class: "ROUTEMAP_COUNT is-size-7 has-text-grey is-hidden" },
-		[$count_n, [
-			"span",
-			{ i18n: "matches" },
-			"matches"
-		]]
+		[$count_n]
 	]);
 	let $refs_input = (0, _yuneta_gobj_js.createElement2)(["input", {
 		class: "ROUTEMAP_REFS_INPUT",
@@ -20206,7 +20264,7 @@ function build_body(shell, t) {
 		if ($root_li) filter_li($root_li, q, false, __show_refs__);
 		if (q === "") $count.classList.add("is-hidden");
 		else {
-			$count_n.textContent = $tree.querySelectorAll(".ROUTEMAP_MATCH").length;
+			$count_n.textContent = t("matches", { count: $tree.querySelectorAll(".ROUTEMAP_MATCH").length });
 			$count.classList.remove("is-hidden");
 		}
 	};
@@ -58140,10 +58198,6 @@ function make_toolbar(gobj) {
 					"span",
 					{ class: "GRAPH_FIND_COUNT" },
 					""
-				], [
-					"span",
-					{ i18n: "matches" },
-					"matches"
 				]]
 			]]
 		],
@@ -59199,7 +59253,7 @@ function ac_find_result(gobj, event, kw, src) {
 		$count.textContent = "";
 		return 0;
 	}
-	$count.textContent = String(kw && kw.matches || 0);
+	$count.textContent = (0, i18next.t)("matches", { count: kw && kw.matches || 0 });
 	$result.classList.remove("is-hidden");
 	return 0;
 }
@@ -62428,7 +62482,7 @@ function open_card(gobj, logical, title, icon, tags, event, kw) {
 	let $tags = tags.map((tag) => {
 		return [
 			"span",
-			{ class: `${logical}_TAG tag ${tag.style || "is-light"}` },
+			{ class: `${logical}_TAG tag ${tag.style || ""}`.trimEnd() },
 			tag.i18n ? [[
 				"span",
 				{ i18n: tag.i18n },
@@ -62575,7 +62629,7 @@ function render_topics(gobj, $body) {
 						topic.system_topic ? [
 							"span",
 							{
-								class: "SCHEMA_TOPIC_SYSTEM tag is-light ml-2",
+								class: "SCHEMA_TOPIC_SYSTEM tag ml-2",
 								i18n: "system"
 							},
 							(0, i18next.t)("system")
@@ -62924,7 +62978,7 @@ function column_row(gobj, topic, col, index, readonly, twice) {
 	let $flags = flags.map((flag) => {
 		return [
 			"span",
-			{ class: `SCHEMA_COL_FLAG tag is-light ${flag_style(flag)}` },
+			{ class: `SCHEMA_COL_FLAG tag ${yui_tint(flag_style(flag))}`.trimEnd() },
 			`${flag}`
 		];
 	});

package/dist/gobj-ui.es.js

@@ -39,6 +39,75 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 	enumerable: true
 }) : target, mod));
 //#endregion
+//#region src/bulma_tint.js
+/***********************************************************************
+*          bulma_tint.js
+*
+*      Bulma's "soften this colour" modifier, applied so that it cannot
+*      be applied alone.
+*
+*      WHY THIS IS A FUNCTION AND NOT A STRING.  'light' is one of
+*      Bulma's colours, so `is-light` is BOTH a colour and the modifier
+*      that softens another one.  A compound selector may match the same
+*      class twice, so `.tag.is-light.is-light` matches an element that
+*      carries the class ONCE -- and that rule sets the text to
+*      var(--bulma-light-light-invert-l), WHICH BULMA NEVER DEFINES:
+*      referenced four times in bulma.css, declared zero times.  The
+*      colour declaration is then invalid while the background still
+*      resolves, so what is left on screen is a pill with no readable
+*      label.
+*
+*      Two selectors of Bulma 1 reach that undefined variable:
+*
+*          .tag.is-light.is-light
+*          .notification.is-light.is-light
+*
+*      It cost three unreadable chips in the schema editor -- the topic
+*      count, the schema version, and every column flag with no colour of
+*      its own ('writable', 'image', 'wild'...).  They read as empty
+*      pills, which looks like a bug in the DATA and is a missing CSS
+*      variable.
+*
+*      The neutral chip is a bare element with no modifier at all: it
+*      takes --bulma-background-l and --bulma-text-l, follows the theme
+*      and stays legible in both.
+*
+*          Copyright (c) 2026, ArtGins.
+*          All Rights Reserved.
+***********************************************************************/
+var TINTABLE = [
+	"primary",
+	"link",
+	"info",
+	"success",
+	"warning",
+	"danger",
+	"black",
+	"dark",
+	"white",
+	"text",
+	"ghost"
+];
+/***************************************************************
+*  A softened colour, or nothing.
+*
+*      yui_tint("warning")     -> "is-warning is-light"
+*      yui_tint("is-warning")  -> "is-warning is-light"
+*      yui_tint("light")       -> ""     (there is nothing to soften)
+*      yui_tint("")            -> ""
+*      yui_tint(undefined)     -> ""
+*
+*  Anything it does not recognise comes back empty rather than being
+*  passed through: a class this function cannot vouch for is exactly the
+*  case it exists to stop.
+***************************************************************/
+function yui_tint(colour) {
+	if (typeof colour !== "string") return "";
+	const name = colour.trim().replace(/^is-/, "");
+	if (TINTABLE.indexOf(name) < 0) return "";
+	return `is-${name} is-light`;
+}
+//#endregion
 //#region src/shell_focus_trap.js
 /***********************************************************************
 *          shell_focus_trap.js
@@ -2853,7 +2922,7 @@ function show_notification(shell, kind, message, opts) {
 	let $note = createElement2([
 		"div",
 		{
-			class: `TOAST notification yui-notification is-${kind} is-light`,
+			class: `TOAST notification yui-notification ${yui_tint(kind)}`,
 			role: kind === "danger" ? "alert" : "status"
 		},
 		[["button", {
@@ -10916,10 +10985,6 @@ function make_toolbar$5(gobj) {
 			"span",
 			{ class: "JSON_GRAPH_FIND_COUNT" },
 			""
-		], [
-			"span",
-			{ i18n: "matches" },
-			"matches"
 		]]
 	]]);
 	let center_items = [];
@@ -11445,7 +11510,7 @@ function update_find_result$1(gobj) {
 		priv.$find_count.textContent = "";
 		return;
 	}
-	priv.$find_count.textContent = String(priv.match_count);
+	priv.$find_count.textContent = t("matches", { count: priv.match_count });
 	priv.$find_result.classList.remove("is-hidden");
 }
 /************************************************************
@@ -17363,10 +17428,6 @@ function make_find_items(gobj) {
 			"span",
 			{ class: "GOBJ_TREE_FIND_COUNT" },
 			""
-		], [
-			"span",
-			{ i18n: "matches" },
-			t("matches")
 		]]
 	]];
 }
@@ -17399,7 +17460,7 @@ function update_find_result(gobj) {
 		priv.$find_count.textContent = "";
 		return;
 	}
-	priv.$find_count.textContent = String(priv.match_count);
+	priv.$find_count.textContent = t("matches", { count: priv.match_count });
 	priv.$find_result.classList.remove("is-hidden");
 }
 function make_toolbar$1(gobj) {
@@ -18645,6 +18706,7 @@ function ac_language_changed$3(gobj, event, kw, src) {
 	if ($container) refresh_language($container, t);
 	hide_popover(gobj);
 	refresh_tree(gobj);
+	update_find_result(gobj);
 	return 0;
 }
 /***************************
@@ -20159,11 +20221,7 @@ function build_body(shell, t) {
 	let $count = createElement2([
 		"span",
 		{ class: "ROUTEMAP_COUNT is-size-7 has-text-grey is-hidden" },
-		[$count_n, [
-			"span",
-			{ i18n: "matches" },
-			"matches"
-		]]
+		[$count_n]
 	]);
 	let $refs_input = createElement2(["input", {
 		class: "ROUTEMAP_REFS_INPUT",
@@ -20201,7 +20259,7 @@ function build_body(shell, t) {
 		if ($root_li) filter_li($root_li, q, false, __show_refs__);
 		if (q === "") $count.classList.add("is-hidden");
 		else {
-			$count_n.textContent = $tree.querySelectorAll(".ROUTEMAP_MATCH").length;
+			$count_n.textContent = t("matches", { count: $tree.querySelectorAll(".ROUTEMAP_MATCH").length });
 			$count.classList.remove("is-hidden");
 		}
 	};
@@ -58135,10 +58193,6 @@ function make_toolbar(gobj) {
 					"span",
 					{ class: "GRAPH_FIND_COUNT" },
 					""
-				], [
-					"span",
-					{ i18n: "matches" },
-					"matches"
 				]]
 			]]
 		],
@@ -59194,7 +59248,7 @@ function ac_find_result(gobj, event, kw, src) {
 		$count.textContent = "";
 		return 0;
 	}
-	$count.textContent = String(kw && kw.matches || 0);
+	$count.textContent = t("matches", { count: kw && kw.matches || 0 });
 	$result.classList.remove("is-hidden");
 	return 0;
 }
@@ -62423,7 +62477,7 @@ function open_card(gobj, logical, title, icon, tags, event, kw) {
 	let $tags = tags.map((tag) => {
 		return [
 			"span",
-			{ class: `${logical}_TAG tag ${tag.style || "is-light"}` },
+			{ class: `${logical}_TAG tag ${tag.style || ""}`.trimEnd() },
 			tag.i18n ? [[
 				"span",
 				{ i18n: tag.i18n },
@@ -62570,7 +62624,7 @@ function render_topics(gobj, $body) {
 						topic.system_topic ? [
 							"span",
 							{
-								class: "SCHEMA_TOPIC_SYSTEM tag is-light ml-2",
+								class: "SCHEMA_TOPIC_SYSTEM tag ml-2",
 								i18n: "system"
 							},
 							t("system")
@@ -62919,7 +62973,7 @@ function column_row(gobj, topic, col, index, readonly, twice) {
 	let $flags = flags.map((flag) => {
 		return [
 			"span",
-			{ class: `SCHEMA_COL_FLAG tag is-light ${flag_style(flag)}` },
+			{ class: `SCHEMA_COL_FLAG tag ${yui_tint(flag_style(flag))}`.trimEnd() },
 			`${flag}`
 		];
 	});

package/package.json

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

package/src/bulma_is_light.test.js

@@ -0,0 +1,160 @@
+/***********************************************************************
+ *          bulma_is_light.test.js
+ *
+ *      `is-light` MUST NEVER BE THE ONLY BULMA COLOUR ON AN ELEMENT.
+ *
+ *      'light' is one of Bulma's colours, so `is-light` is both a colour
+ *      and the "soften it" modifier.  A compound selector may match the
+ *      same class twice, so `.tag.is-light.is-light` matches an element
+ *      that carries the class ONCE -- and that rule sets the text to
+ *      var(--bulma-light-light-invert-l), WHICH BULMA NEVER DEFINES:
+ *      referenced four times in bulma.css, declared zero times.  The
+ *      colour declaration is then invalid while the background still
+ *      resolves, and what is left on screen is a pill with no readable
+ *      label.
+ *
+ *      Two selectors in Bulma 1 reach that undefined variable:
+ *
+ *          .tag.is-light.is-light
+ *          .notification.is-light.is-light
+ *
+ *      It cost three unreadable chips in the schema editor -- the topic
+ *      count, the schema version, and every column flag without a colour
+ *      of its own ('writable', 'image', 'wild'...).  They looked like
+ *      empty pills, which reads as a rendering bug in the data and is a
+ *      missing CSS variable.
+ *
+ *      THIS IS A SOURCE SCAN AND NOT A RENDER TEST ON PURPOSE: jsdom does
+ *      not load Bulma, so no mounted test can see the contrast.  What can
+ *      be checked is the rule that produces it.
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+import {describe, it, expect} from "vitest";
+import {readdirSync, readFileSync} from "node:fs";
+import {dirname, join} from "node:path";
+import {fileURLToPath} from "node:url";
+
+import {yui_tint, TINTABLE} from "./bulma_tint.js";
+
+const SRC = dirname(fileURLToPath(import.meta.url));
+
+/*
+ *  The ONE file allowed to write the literal: yui_tint() emits it only
+ *  next to a colour it has already checked against TINTABLE, and the
+ *  colour is interpolated, so no source scan can see it. What guards
+ *  that file is the behaviour suite at the bottom, not the scan.
+ */
+const EMITTER = "bulma_tint.js";
+
+/*  Every Bulma colour except 'light' itself. */
+const COLOURS = [
+    "is-primary", "is-link", "is-info", "is-success", "is-warning",
+    "is-danger", "is-black", "is-dark", "is-white", "is-text", "is-ghost"
+];
+
+/*
+ *  How far around an occurrence to look for its colour.  The colour does
+ *  not have to sit on the same line: it may come from a ternary, from a
+ *  string concatenation split across two lines, or from a variable
+ *  interpolated just before.  A window is what covers all three without
+ *  parsing javascript.
+ */
+const WINDOW = 260;
+
+function offenders(source)
+{
+    let out = [];
+    let at = source.indexOf("is-light");
+    while(at >= 0) {
+        const from = Math.max(0, at - WINDOW);
+        const to = Math.min(source.length, at + WINDOW);
+        const around = source.slice(from, to);
+
+        /*  A comment ABOUT the rule is not a use of it. */
+        const line_start = source.lastIndexOf("\n", at) + 1;
+        const line = source.slice(line_start, source.indexOf("\n", at));
+        const is_comment = /^\s*(\*|\/\/|\/\*)/.test(line);
+
+        if(!is_comment && !COLOURS.some((c) => around.includes(c))) {
+            out.push(line.trim());
+        }
+        at = source.indexOf("is-light", at + 1);
+    }
+    return out;
+}
+
+describe("bulma: is-light never travels alone", () => {
+    const files = readdirSync(SRC).filter(
+        (f) => f.endsWith(".js") && !f.endsWith(".test.js") && f !== EMITTER
+    );
+
+    it("scans every source file of the library", () => {
+        expect(files.length).toBeGreaterThan(0);
+    });
+
+    for(let file of files) {
+        it(`${file} carries no colourless is-light`, () => {
+            const source = readFileSync(join(SRC, file), "utf-8");
+            expect(offenders(source)).toEqual([]);
+        });
+    }
+});
+
+describe("the scan itself", () => {
+    it("catches a colourless is-light", () => {
+        const bad = 'return ["span", {class: `SOMETHING tag is-light`}, "x"];';
+        expect(offenders(bad)).toHaveLength(1);
+    });
+
+    it("accepts one that travels with a colour", () => {
+        const good = 'return ["span", {class: `SOMETHING tag is-warning is-light`}, "x"];';
+        expect(offenders(good)).toEqual([]);
+    });
+
+    it("accepts a colour that arrives split across lines", () => {
+        const good = 'const c = `tag ${x ? "is-danger" : "is-warning"}`\n'
+                   + '    + " is-light";';
+        expect(offenders(good)).toEqual([]);
+    });
+});
+
+describe("yui_tint", () => {
+    it("softens every colour that CAN be softened", () => {
+        for(let name of TINTABLE) {
+            expect(yui_tint(name)).toBe(`is-${name} is-light`);
+            expect(yui_tint(`is-${name}`)).toBe(`is-${name} is-light`);
+        }
+    });
+
+    it("refuses to soften 'light' with itself", () => {
+        expect(yui_tint("light")).toBe("");
+        expect(yui_tint("is-light")).toBe("");
+    });
+
+    it("answers nothing for nothing", () => {
+        expect(yui_tint("")).toBe("");
+        expect(yui_tint(undefined)).toBe("");
+        expect(yui_tint(null)).toBe("");
+        expect(yui_tint(7)).toBe("");
+    });
+
+    it("does not pass through what it cannot vouch for", () => {
+        /*  A class this function cannot recognise is exactly the case it
+         *  exists to stop, so it comes back empty instead of forwarded.  */
+        expect(yui_tint("is-whatever")).toBe("");
+        expect(yui_tint("has-text-danger")).toBe("");
+    });
+
+    it("never emits is-light on its own", () => {
+        for(let input of TINTABLE.concat(
+            ["light", "is-light", "", "nope", "is-nope"]
+        )) {
+            const out = yui_tint(input);
+            if(out.includes("is-light")) {
+                expect(out).toMatch(/is-(primary|link|info|success|warning|danger|black|dark|white|text|ghost) is-light/);
+            }
+        }
+    });
+});

package/src/bulma_tint.js

@@ -0,0 +1,71 @@
+/***********************************************************************
+ *          bulma_tint.js
+ *
+ *      Bulma's "soften this colour" modifier, applied so that it cannot
+ *      be applied alone.
+ *
+ *      WHY THIS IS A FUNCTION AND NOT A STRING.  'light' is one of
+ *      Bulma's colours, so `is-light` is BOTH a colour and the modifier
+ *      that softens another one.  A compound selector may match the same
+ *      class twice, so `.tag.is-light.is-light` matches an element that
+ *      carries the class ONCE -- and that rule sets the text to
+ *      var(--bulma-light-light-invert-l), WHICH BULMA NEVER DEFINES:
+ *      referenced four times in bulma.css, declared zero times.  The
+ *      colour declaration is then invalid while the background still
+ *      resolves, so what is left on screen is a pill with no readable
+ *      label.
+ *
+ *      Two selectors of Bulma 1 reach that undefined variable:
+ *
+ *          .tag.is-light.is-light
+ *          .notification.is-light.is-light
+ *
+ *      It cost three unreadable chips in the schema editor -- the topic
+ *      count, the schema version, and every column flag with no colour of
+ *      its own ('writable', 'image', 'wild'...).  They read as empty
+ *      pills, which looks like a bug in the DATA and is a missing CSS
+ *      variable.
+ *
+ *      The neutral chip is a bare element with no modifier at all: it
+ *      takes --bulma-background-l and --bulma-text-l, follows the theme
+ *      and stays legible in both.
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+
+/*
+ *  Bulma's colours, minus 'light' -- which is exactly the one that must
+ *  never be softened with itself.
+ */
+const TINTABLE = [
+    "primary", "link", "info", "success", "warning",
+    "danger", "black", "dark", "white", "text", "ghost"
+];
+
+/***************************************************************
+ *  A softened colour, or nothing.
+ *
+ *      yui_tint("warning")     -> "is-warning is-light"
+ *      yui_tint("is-warning")  -> "is-warning is-light"
+ *      yui_tint("light")       -> ""     (there is nothing to soften)
+ *      yui_tint("")            -> ""
+ *      yui_tint(undefined)     -> ""
+ *
+ *  Anything it does not recognise comes back empty rather than being
+ *  passed through: a class this function cannot vouch for is exactly the
+ *  case it exists to stop.
+ ***************************************************************/
+function yui_tint(colour)
+{
+    if(typeof colour !== "string") {
+        return "";
+    }
+    const name = colour.trim().replace(/^is-/, "");
+    if(TINTABLE.indexOf(name) < 0) {
+        return "";
+    }
+    return `is-${name} is-light`;
+}
+
+export {yui_tint, TINTABLE};

package/src/c_yui_gobj_tree_js.js

@@ -914,16 +914,25 @@ function make_find_items(gobj)
 
     return [
         $find_control,
-        /*  Two spans, not one string: the number is DATA and "matches"
-         *  is the word, so a language switch re-translates the half that
-         *  is a word. `display:flex` inline and NOT the `is-flex` helper
-         *  -- both Bulma helpers carry !important, so `is-hidden is-flex`
-         *  on one element is decided by stylesheet order.  */
+        /*  ONE counted span, not a number beside a word: "1 matches"
+         *  is what two spans always produce, because nothing there can
+         *  see the count. `t(key, {count})` picks `matches_one` for
+         *  one and falls back to the base key for the rest, in both
+         *  languages.
+         *
+         *  And NO `i18n` attribute on it: refresh_language()
+         *  re-translates whatever carries one by calling t() WITHOUT
+         *  the count, which would put the plural back over the
+         *  singular. A counted word is re-rendered by its owner
+         *  instead -- which is why the language action below repaints
+         *  this chip.  */
+        /*  `display:flex` inline and NOT the `is-flex` helper -- both
+         *  Bulma helpers carry !important, so `is-hidden is-flex` on one
+         *  element is decided by stylesheet order.  */
         ['div', {class: 'GOBJ_TREE_FIND_RESULT is-hidden',
                  style: 'display:flex; align-items:center; gap:.3rem; ' +
                         'margin-right:.5rem; font-size:.85rem;'}, [
-            ['span', {class: 'GOBJ_TREE_FIND_COUNT'}, ''],
-            ['span', {i18n: 'matches'}, t('matches')]
+            ['span', {class: 'GOBJ_TREE_FIND_COUNT'}, '']
         ]]
     ];
 }
@@ -964,7 +973,7 @@ function update_find_result(gobj)
         priv.$find_count.textContent = "";
         return;
     }
-    priv.$find_count.textContent = String(priv.match_count);
+    priv.$find_count.textContent = t("matches", {count: priv.match_count});
     priv.$find_result.classList.remove("is-hidden");
 }
 
@@ -2834,6 +2843,9 @@ function ac_language_changed(gobj, event, kw, src)
     }
     hide_popover(gobj);
     refresh_tree(gobj);
+    /*  The count chip carries a COUNTED word, which has no key for
+     *  refresh_language() to re-translate: its owner has to repaint it.  */
+    update_find_result(gobj);
     return 0;
 }
 

package/src/c_yui_json_graph.js

@@ -599,17 +599,25 @@ function make_toolbar(gobj)
      */
     let left_items = yui_graph_fold_items(gobj, toolbar_wide).concat([
         $find_control,
-        /*  Two spans, not one string: the number is DATA and "matches"
-         *  is the word, so a language switch re-translates the half that
-         *  is a word.  `display:flex` inline and NOT the `is-flex`
-         *  helper — both Bulma helpers carry !important, so
-         *  `is-hidden is-flex` on one element is decided by stylesheet
-         *  order. */
+        /*  ONE counted span, not a number beside a word: "1 matches"
+         *  is what two spans always produce, because nothing there can
+         *  see the count. `t(key, {count})` picks `matches_one` for
+         *  one and falls back to the base key for the rest, in both
+         *  languages.
+         *
+         *  And NO `i18n` attribute on it: refresh_language()
+         *  re-translates whatever carries one by calling t() WITHOUT
+         *  the count, which would put the plural back over the
+         *  singular. Nothing re-translates it, so it is repainted on
+         *  the next find -- which is the next keystroke, and it is
+         *  hidden while the box is empty.  */
+        /*  `display:flex` inline and NOT the `is-flex` helper — both
+         *  Bulma helpers carry !important, so `is-hidden is-flex` on one
+         *  element is decided by stylesheet order. */
         ['div', {class: 'JSON_GRAPH_FIND_RESULT is-hidden',
                  style: 'display:flex; align-items:center; gap:.3rem; ' +
                         'margin-right:.5rem; font-size:.85rem;'}, [
-            ['span', {class: 'JSON_GRAPH_FIND_COUNT'}, ''],
-            ['span', {i18n: 'matches'}, 'matches']
+            ['span', {class: 'JSON_GRAPH_FIND_COUNT'}, '']
         ]]
     ]);
     let center_items = [];
@@ -1537,7 +1545,7 @@ function update_find_result(gobj)
         priv.$find_count.textContent = "";
         return;
     }
-    priv.$find_count.textContent = String(priv.match_count);
+    priv.$find_count.textContent = t("matches", {count: priv.match_count});
     priv.$find_result.classList.remove("is-hidden");
 }
 

package/src/c_yui_schema_editor.js

@@ -109,6 +109,7 @@ import {
     is_object,
     empty_string,
 } from "@yuneta/gobj-js";
+import {yui_tint} from "./bulma_tint.js";
 
 import "./c_yui_schema_editor.css";
 
@@ -871,7 +872,24 @@ function render(gobj)
 function open_card(gobj, logical, title, icon, tags, event, kw)
 {
     let $tags = tags.map((tag) => {
-        return ["span", {class: `${logical}_TAG tag ${tag.style || "is-light"}`},
+        /*
+         *  `is-light` ALONE IS NOT A NEUTRAL CHIP, IT IS AN UNREADABLE ONE.
+         *
+         *  'light' is one of Bulma's colours, so `is-light` is both the
+         *  colour and the modifier -- and `.tag.is-light.is-light` matches
+         *  an element carrying the class ONCE (a compound selector may
+         *  match the same class twice). That rule sets the text to
+         *  var(--bulma-light-light-invert-l), WHICH BULMA NEVER DEFINES:
+         *  used four times in its stylesheet, declared zero. The colour
+         *  declaration is then invalid, the background still resolves, and
+         *  what is left is a pill with no readable label.
+         *
+         *  A bare `.tag` is the neutral chip: it takes --bulma-background-l
+         *  and --bulma-text-l, so it follows the theme and stays legible in
+         *  both. `is-light` goes on only NEXT TO a real colour, where the
+         *  variable it needs does exist.
+         */
+        return ["span", {class: `${logical}_TAG tag ${tag.style || ""}`.trimEnd()},
             tag.i18n
                 ? [["span", {i18n: tag.i18n}, t(tag.i18n)],
                    ["span", {class: "ml-1"}, `${tag.text}`]]
@@ -989,7 +1007,7 @@ function render_topics(gobj, $body)
             ["td", {class: "SCHEMA_TOPIC_NAME"}, [
                 ["span", {class: "has-text-weight-semibold"}, `${topic.name}`],
                 topic.system_topic
-                    ? ["span", {class: "SCHEMA_TOPIC_SYSTEM tag is-light ml-2",
+                    ? ["span", {class: "SCHEMA_TOPIC_SYSTEM tag ml-2",
                                 i18n: "system"}, t("system")]
                     : ["span", {}, ""],
                 ambiguous
@@ -1222,7 +1240,13 @@ function column_row(gobj, topic, col, index, readonly, twice)
     let is_pkey = (col.name === (topic.pkey || "id"));
 
     let $flags = flags.map((flag) => {
-        return ["span", {class: `SCHEMA_COL_FLAG tag is-light ${flag_style(flag)}`}, `${flag}`];
+        /*  The colour carries the meaning, and `is-light` softens it. With
+         *  no colour there is nothing to soften: a bare tag is the neutral
+         *  one, and `is-light` on its own would erase the label -- see
+         *  open_card(). It is why 'writable', 'image', 'wild' and every
+         *  other unstyled flag rendered as an empty pill.  */
+        return ["span", {class: `SCHEMA_COL_FLAG tag ${yui_tint(flag_style(flag))}`.trimEnd()},
+            `${flag}`];
     });
 
     /*  An unset `blob` column comes back as `{}`, which is an object and

package/src/c_yui_treedb_graph.js

@@ -649,9 +649,14 @@ function make_toolbar(gobj)
 
     let center_items = [
         $find_control,
-        /*  Two spans, not one string: the number is DATA and "matches" is
-         *  the word, so a language switch re-translates the half that is a
-         *  word. Spaced with CSS because createElement2 trims text nodes. */
+        /*  ONE counted span, not a number beside a word: "1 matches" is
+         *  what two spans always produce, because nothing there can see
+         *  the count. `t(key, {count})` picks `matches_one` for one and
+         *  falls back to the base key for the rest, in both languages.
+         *  No `i18n` attribute on it: refresh_language() would call t()
+         *  WITHOUT the count and put the plural back over the singular.
+         *  Nothing re-translates it, so it is repainted on the next
+         *  find, and it is hidden while the box is empty.  */
         /*  `display:flex` inline and NOT the `is-flex` helper: both Bulma
          *  helpers carry !important, so `is-hidden is-flex` on one element
          *  is decided by whichever lands later in the stylesheet — and the
@@ -661,8 +666,7 @@ function make_toolbar(gobj)
         ['div', {class: 'GRAPH_FIND_RESULT is-hidden',
                  style: 'display:flex; align-items:center; gap:.3rem; ' +
                         'margin-right:.5rem; font-size:.85rem;'}, [
-            ['span', {class: 'GRAPH_FIND_COUNT'}, ''],
-            ['span', {i18n: 'matches'}, 'matches']
+            ['span', {class: 'GRAPH_FIND_COUNT'}, '']
         ]]
     ];
 
@@ -2485,7 +2489,7 @@ function ac_find_result(gobj, event, kw, src)
         return 0;
     }
 
-    $count.textContent = String((kw && kw.matches) || 0);
+    $count.textContent = t("matches", {count: (kw && kw.matches) || 0});
     $result.classList.remove("is-hidden");
     return 0;
 }

package/src/shell_modals.js

@@ -33,6 +33,7 @@ import {
     empty_string,
     log_warning,
 } from "@yuneta/gobj-js";
+import {yui_tint} from "./bulma_tint.js";
 
 import {
     activate_focus_trap_on,
@@ -121,7 +122,7 @@ function show_notification(shell, kind, message, opts)
         ? {i18n: message}
         : {};
     let $note = createElement2(
-        ["div", {class: `TOAST notification yui-notification is-${kind} is-light`,
+        ["div", {class: `TOAST notification yui-notification ${yui_tint(kind)}`,
                  role: kind === "danger" ? "alert" : "status"},
             [
                 ["button", {class: "TOAST_CLOSE delete", "aria-label": "close"}],

package/src/shell_route_map.js

@@ -257,11 +257,19 @@ function build_body(shell, t)
     );
     attach_clear($search_ctrl, $search);
 
-    /*  Live match counter next to the filter. */
+    /*  Live match counter next to the filter.
+     *
+     *  ONE counted span, not a number beside a word: "1 matches" is what
+     *  two spans always produce, because nothing there can see the
+     *  count. `t(key, {count})` picks `matches_one` for one and falls
+     *  back to the base key for the rest. No `i18n` attribute on it --
+     *  refresh_language() would call t() WITHOUT the count and put the
+     *  plural back over the singular -- so the filter, which runs on
+     *  every keystroke, is what repaints it.  */
     let $count_n = createElement2(["span", {class: "ROUTEMAP_COUNT_N"}, ""]);
     let $count = createElement2(
         ["span", {class: "ROUTEMAP_COUNT is-size-7 has-text-grey is-hidden"},
-            [$count_n, ["span", {i18n: "matches"}, "matches"]]]
+            [$count_n]]
     );
     /*  References are hidden by default and revealed by this toggle.
      *  Remembered for the page session (not localStorage): it is a
@@ -294,7 +302,9 @@ function build_body(shell, t)
         if(q === "") {
             $count.classList.add("is-hidden");
         } else {
-            $count_n.textContent = $tree.querySelectorAll(".ROUTEMAP_MATCH").length;
+            $count_n.textContent = t("matches", {
+                count: $tree.querySelectorAll(".ROUTEMAP_MATCH").length
+            });
             $count.classList.remove("is-hidden");
         }
     };