@yuneta/gobj-ui 7.26.29 → 7.26.30

package/dist/gobj-ui.es.js

@@ -519,6 +519,127 @@ function text_list_item_formatter(label) {
 	return span;
 }
 //#endregion
+//#region src/yui_badge.js
+/***********************************************************************
+*          yui_badge.js
+*
+*      The BADGE: the little count a control carries -- unread
+*      notifications, active alarms.  The toolbar items of C_YUI_SHELL
+*      and the menu items of C_YUI_NAV build and paint theirs here, so
+*      the two follow the same rules and cannot drift apart:
+*
+*      EMPTY IS 0, "" AND null ALIKE (false and undefined too): a badge
+*      reading "0" is worse than no badge -- it draws the eye to say
+*      nothing.  A count is only worth a pixel when there IS something.
+*
+*      CAPPED AT 99+: a badge sits in a row of fixed width (the app bar,
+*      a bottom icon bar), and a four digit pill pushes the items next
+*      to it off a phone screen.  A string passes through, for the
+*      states that are not counts ("!", "…").
+*
+*      ALWAYS RENDERED, hidden when empty, so the runtime setters have a
+*      node to write into and never rebuild the control that holds it.
+*
+*      role="status" and NOT aria-hidden, deliberately.  The control
+*      carries an explicit aria-label, and an explicit label REPLACES
+*      the element's content for a screen reader -- so a badge inside
+*      it would be silent.  As its own live region it is both read and
+*      announced when the count changes, which is the whole point of a
+*      badge that means "something needs you".  For the same reason a
+*      write that changes nothing touches no DOM: rewriting the same
+*      number would have it announced again on every tick.
+*
+*      A TONE, optional: one of BADGE_TONES, drawn as Bulma's
+*      `is-<tone>` on the badge.  It says HOW BAD the count is -- the
+*      alarms of an app coloured by the worst state among them.  No
+*      tone is the default look (the danger colour: a badge exists to
+*      pull the eye).  An unknown tone is the caller's error: it is
+*      logged, and the default look is drawn instead.
+*
+*      The text is a Text node, never a string: a value that came from
+*      outside must not reach createElement2() as markup.
+*
+*          Copyright (c) 2026, ArtGins.
+*          All Rights Reserved.
+***********************************************************************/
+/***************************************************************
+*              Constants
+***************************************************************/
+var BADGE_TONES = Object.freeze([
+	"danger",
+	"warning",
+	"info",
+	"success",
+	"primary",
+	"link"
+]);
+/************************************************************
+*  The text a badge shows for `value`, "" when it shows none.
+************************************************************/
+function badge_text(value) {
+	if (value === null || value === void 0 || value === false) return "";
+	if (typeof value === "number") {
+		if (!isFinite(value) || value <= 0) return "";
+		return value > 99 ? "99+" : String(Math.floor(value));
+	}
+	return String(value).trim();
+}
+/************************************************************
+*  The tone to draw: `tone` when it is one of BADGE_TONES, ""
+*  (the default look) when it is empty.  Anything else is logged,
+*  naming `who`, and answers "".
+************************************************************/
+function badge_tone(tone, who) {
+	if (tone === void 0 || tone === null || tone === "") return "";
+	if (BADGE_TONES.indexOf(tone) < 0) {
+		log_error(`${who}: unknown badge tone '${tone}', drawn with the default look (the tones: ${BADGE_TONES.join(", ")})`);
+		return "";
+	}
+	return tone;
+}
+/************************************************************
+*  The createElement2() description of a badge.  `classes` are
+*  the host's (its logical name, `yui-badge` for the look, and
+*  where it sits); `who` names the item in the log of an unknown
+*  tone.
+************************************************************/
+function badge_node(value, tone, classes, who) {
+	let text = badge_text(value);
+	let known = badge_tone(tone, who);
+	let attrs = {
+		class: known ? `${classes} is-${known}` : classes,
+		role: "status"
+	};
+	if (!text) attrs.hidden = "hidden";
+	return [
+		"span",
+		attrs,
+		text_node(text)
+	];
+}
+/************************************************************
+*  Write a badge that is already in the DOM, as badge_node()
+*  draws it.  `tone` is one badge_tone() answered: the setter
+*  checks it once for all the badges it paints.
+************************************************************/
+function paint_badge($badge, value, tone) {
+	for (let known of BADGE_TONES) {
+		let cls = `is-${known}`;
+		if (known === tone) {
+			if (!$badge.classList.contains(cls)) $badge.classList.add(cls);
+		} else if ($badge.classList.contains(cls)) $badge.classList.remove(cls);
+	}
+	let text = badge_text(value);
+	if (!text) {
+		$badge.textContent = "";
+		$badge.setAttribute("hidden", "hidden");
+		return;
+	}
+	if ($badge.textContent === text && !$badge.hasAttribute("hidden")) return;
+	$badge.textContent = text;
+	$badge.removeAttribute("hidden");
+}
+//#endregion
 //#region src/route_map_model.js
 /***********************************************************************
 *          route_map_model.js
@@ -957,6 +1078,8 @@ var PRIVATE_DATA$22 = {
 	stages: {},
 	navs: [],
 	item_index: {},
+	nav_badges: {},
+	dynamic_items: {},
 	section_pos: {},
 	route_mru: [],
 	sub_routes: {},
@@ -1580,6 +1703,7 @@ function instantiate_nav_in_zone(gobj, menu, menu_id, zone_id, level, nav_label)
 		level,
 		show_on: render_cfg.show_on || "",
 		back_route: render_cfg.back_route || "",
+		badges: Object.assign({}, priv.nav_badges),
 		shell: gobj
 	}, gobj);
 	let $c = gobj_read_attr(nav, "$container");
@@ -1769,8 +1893,10 @@ function navigate_to(gobj, route, depth, no_drain) {
 	});
 }
 function build_view_gobj(gobj, entry, route, stage) {
+	let priv = gobj.priv;
 	let target = entry.target;
 	let kw = target.kw || {};
+	if (target.gclass === "C_YUI_NAV") kw = Object.assign({}, kw, { badges: Object.assign({}, priv.nav_badges) });
 	let name = target.name || `view_${safe_id(route)}`;
 	let view;
 	try {
@@ -1871,48 +1997,6 @@ function build_toolbar$1(gobj, config) {
 	$zone.appendChild($bar);
 }
 /************************************************************
-*  The badge node of a toolbar item — the little count pinned to
-*  the corner of its icon (unread notifications, active alarms).
-*
-*  ALWAYS rendered, hidden when empty, so the runtime setter has a
-*  node to write into and does not have to rebuild the button.
-*
-*  EMPTY IS 0, "" AND null ALIKE: a badge reading "0" is worse than
-*  no badge — it draws the eye to say nothing.  A count is only
-*  worth a pixel when there IS something.
-*
-*  Capped at 99+: the toolbar is a fixed-width row, and a four
-*  digit pill pushes the items next to it off a phone screen.
-*
-*  role="status" and NOT aria-hidden, deliberately.  The button
-*  carries an explicit aria-label, and an explicit label REPLACES
-*  the element's content for a screen reader — so a badge inside
-*  it would be silent.  As its own live region it is both read and
-*  announced when the count changes, which is the whole point of a
-*  badge that means "something needs you".
-************************************************************/
-function badge_text(value) {
-	if (value === null || value === void 0 || value === false) return "";
-	if (typeof value === "number") {
-		if (!isFinite(value) || value <= 0) return "";
-		return value > 99 ? "99+" : String(Math.floor(value));
-	}
-	return String(value).trim();
-}
-function badge_node(value) {
-	let text = badge_text(value);
-	let attrs = {
-		class: "yui-toolbar-badge",
-		role: "status"
-	};
-	if (!text) attrs.hidden = "hidden";
-	return [
-		"span",
-		attrs,
-		text
-	];
-}
-/************************************************************
 *  The attributes that turn a toolbar item into a real link, or
 *  null when this item is not one.  Answering null is what keeps
 *  every caller's default (a <button> that dispatches an action)
@@ -1943,7 +2027,7 @@ function build_toolbar_action_item(gobj, it) {
 		[["i", {
 			class: it.icon,
 			"aria-hidden": "true"
-		}], badge_node(it.badge)]
+		}], badge_node(it.badge, it.badge_tone, "TOOLBAR_ITEM_BADGE yui-badge yui-toolbar-badge", `C_YUI_SHELL: toolbar item '${it.id || "?"}'`)]
 	]);
 	if (!empty_string(it.name)) children.push([
 		"span",
@@ -2754,6 +2838,41 @@ function update_secondary_nav_visibility(gobj, entry) {
 		else $c.classList.add("is-hidden");
 	}
 }
+/************************************************************
+*  Does a menu of this shell declare an item `item_id`: an item
+*  of a menu of app_config.json, of one of their submenus, or
+*  one given to yui_shell_set_submenu() since.
+************************************************************/
+function nav_item_declared(gobj, item_id) {
+	let priv = gobj.priv;
+	let config = gobj_read_attr(gobj, "config") || {};
+	let menus = is_object(config.menu) ? config.menu : {};
+	let holds = (items) => is_array(items) && items.some((it) => it && it.id === item_id);
+	for (let menu_id in menus) {
+		let items = menus[menu_id] && menus[menu_id].items;
+		if (!is_array(items)) continue;
+		if (holds(items)) return true;
+		for (let it of items) if (it && it.submenu && holds(it.submenu.items)) return true;
+	}
+	for (let parent_item_id in priv.dynamic_items) if (holds(priv.dynamic_items[parent_item_id])) return true;
+	return false;
+}
+/************************************************************
+*  Every C_YUI_NAV of this shell: the navs of its menus, and the
+*  section-index landings mounted in a stage.
+************************************************************/
+function shell_navs(gobj) {
+	let priv = gobj.priv;
+	let navs = priv.navs.slice();
+	for (let stage_name in priv.stages) {
+		let views = priv.stages[stage_name].items || {};
+		for (let route in views) {
+			let view = views[route];
+			if (view && gobj_gclass_name(view) === "C_YUI_NAV") navs.push(view);
+		}
+	}
+	return navs;
+}
 /***************************
 *      Actions
 ***************************/
@@ -3250,35 +3369,79 @@ function yui_shell_set_toolbar_item_icon(shell_gobj, item_id, icon_class) {
 *  its icon.
 *
 *      yui_shell_set_toolbar_item_badge(shell, "alarms", 3);
+*      yui_shell_set_toolbar_item_badge(shell, "alarms", 3, "warning");
 *      yui_shell_set_toolbar_item_badge(shell, "alarms", 0);   // hidden
 *
 *  This is the API that matters: a count is a RUNTIME fact.  The
-*  `badge` field of a toolbar item only seeds the first paint, and
-*  an app whose number never changes did not need a badge.
+*  `badge` / `badge_tone` fields of a toolbar item only seed the
+*  first paint, and an app whose number never changes did not need
+*  a badge.
 *
 *  0 / "" / null / false all clear it, and a number over 99 renders
-*  "99+" — see badge_node().  Accepts a string for the states that
-*  are not counts ("!", "…").
+*  "99+" — see yui_badge.js.  Accepts a string for the states that
+*  are not counts ("!", "…").  `tone`, optional, is one of
+*  BADGE_TONES ("danger" | "warning" | "info" | "success" |
+*  "primary" | "link"): Bulma's is-<tone> on the badge.  Each call
+*  states the WHOLE badge: no tone is the default look, not the
+*  tone it had.  The twin of yui_shell_set_nav_item_badge().
 *
 *  Silent no-op on an unknown item id: a toolbar that does not
 *  declare the item (an app without alarms) must not be an error
-*  at every tick of whatever feeds the number.
+*  at every tick of whatever feeds the number.  An unknown TONE is
+*  the caller's error: logged, and drawn with the default look.
 ************************************************************/
-function yui_shell_set_toolbar_item_badge(shell_gobj, item_id, value) {
+function yui_shell_set_toolbar_item_badge(shell_gobj, item_id, value, tone) {
+	tone = badge_tone(tone, `C_YUI_SHELL: yui_shell_set_toolbar_item_badge('${item_id}')`);
 	if (!shell_gobj || !is_gobj(shell_gobj) || empty_string(item_id)) return;
 	let $container = gobj_read_attr(shell_gobj, "$container");
 	if (!$container) return;
 	let $badge = $container.querySelector(`[data-toolbar-item-id="${item_id}"] .yui-toolbar-badge`);
 	if (!$badge) return;
-	let text = badge_text(value);
-	if (!text) {
-		$badge.textContent = "";
-		$badge.setAttribute("hidden", "hidden");
-		return;
-	}
-	if ($badge.textContent === text && !$badge.hasAttribute("hidden")) return;
-	$badge.textContent = text;
-	$badge.removeAttribute("hidden");
+	paint_badge($badge, value, tone);
+}
+/************************************************************
+*  Set (or clear) the badge of a MENU item — the twin of
+*  yui_shell_set_toolbar_item_badge(), for an entry of a menu of
+*  app_config.json, of one of their submenus, or one given to
+*  yui_shell_set_submenu().
+*
+*      yui_shell_set_nav_item_badge(shell, "alarms", 3);
+*      yui_shell_set_nav_item_badge(shell, "alarms", 3, "warning");
+*      yui_shell_set_nav_item_badge(shell, "alarms", 0);   // hidden
+*
+*  The same value, tone and rules as the toolbar's (yui_badge.js),
+*  each call stating the whole badge.
+*
+*  EVERY instance of the item gets it: the same entry is drawn by
+*  as many navs as there are zones hosting its menu (a rail on
+*  desktop, an icon bar on a phone), and by a drawer that repeats
+*  it.  Each nav repaints it in place (EV_SET_ITEM_BADGE), and
+*  KEEPS it: a rebuild of the nav (a yui_shell_set_submenu()) draws
+*  it again.  The shell keeps it too, for the navs it creates
+*  afterwards (a section-index landing, mounted when the user walks
+*  into it).  From then on it is the badge of that id: the `badge`
+*  field of an item only seeds the paint until this is called.
+*
+*  Silent no-op on an id no menu declares, as the toolbar's: a menu
+*  without the entry (an app without alarms) must not be an error
+*  at every tick of whatever feeds the number.  An unknown TONE is
+*  the caller's error: logged, and drawn with the default look.
+************************************************************/
+function yui_shell_set_nav_item_badge(shell_gobj, item_id, value, tone) {
+	tone = badge_tone(tone, `C_YUI_SHELL: yui_shell_set_nav_item_badge('${item_id}')`);
+	if (!shell_gobj || !is_gobj(shell_gobj) || gobj_is_destroying(shell_gobj) || empty_string(item_id)) return;
+	let priv = shell_gobj.priv;
+	if (!priv || !nav_item_declared(shell_gobj, item_id)) return;
+	let badge = value === void 0 ? null : value;
+	priv.nav_badges[item_id] = {
+		badge,
+		badge_tone: tone
+	};
+	for (let nav of shell_navs(shell_gobj)) gobj_send_event(nav, "EV_SET_ITEM_BADGE", {
+		item_id,
+		badge,
+		badge_tone: tone
+	}, shell_gobj);
 }
 /************************************************************
 *  Programmatic close of any open toolbar dropdown.  Useful for
@@ -23360,18 +23523,34 @@ function register_c_yui_service_view() {
 *  contract as every other nav item (data-route/data-item-id/
 *  data-disabled), so C_YUI_NAV's delegated click handler and
 *  active-route highlight work unchanged.
+*
+*  `badge_of(it, pinned)`, optional, answers the description of
+*  the card's badge (C_YUI_NAV's, which knows what was set at
+*  runtime).  A card is an icon over its label, so the badge goes
+*  on the corner of the icon (`pinned`), or after the label of a
+*  card that has none.  Without it a card has no badge.
 ************************************************************/
-function card_descriptor(it, show_label) {
+function card_descriptor(it, show_label, badge_of) {
 	let children = [];
 	let label = it.name || "";
-	if (it.icon) children.push([
-		"span",
-		{ class: "icon is-medium" },
-		["i", {
+	let pinned = !!it.icon;
+	let badge = badge_of ? badge_of(it, pinned) : null;
+	if (it.icon) {
+		let glyph = ["i", {
 			class: it.icon,
 			"aria-hidden": "true"
-		}]
-	]);
+		}];
+		if (badge) children.push([
+			"span",
+			{ class: "icon is-medium yui-nav-icon" },
+			[glyph, badge]
+		]);
+		else children.push([
+			"span",
+			{ class: "icon is-medium" },
+			glyph
+		]);
+	}
 	if (show_label && label) children.push([
 		"span",
 		{
@@ -23380,6 +23559,7 @@ function card_descriptor(it, show_label) {
 		},
 		text_node(label)
 	]);
+	if (badge && !pinned) children.push(badge);
 	let a_attrs = {
 		class: "yui-nav-item yui-nav-card",
 		href: it.route ? "#" + it.route : "#",
@@ -23407,12 +23587,13 @@ function card_descriptor(it, show_label) {
 /************************************************************
 *  Descriptor of the whole grid.  Decorative items (`header`/
 *  `divider`) are dropped, same policy as the tabs layout.
+*  `badge_of`: as card_descriptor().
 ************************************************************/
-function cards_grid_descriptor(items, show_label) {
+function cards_grid_descriptor(items, show_label, badge_of) {
 	let cards = [];
 	for (let it of items || []) {
 		if (!it || it.type === "header" || it.type === "divider") continue;
-		cards.push(card_descriptor(it, show_label));
+		cards.push(card_descriptor(it, show_label, badge_of));
 	}
 	return [
 		"div",
@@ -23457,11 +23638,29 @@ function cards_grid_descriptor(items, show_label) {
 *
 *      Each item supports:
 *          id, name, icon (CSS class or svg id), route, disabled
-*          (`badge` was listed here for a long time and NOTHING ever
-*           rendered it — a menu item cannot carry a count today. The
-*           toolbar can: `badge` on a toolbar item plus
-*           yui_shell_set_toolbar_item_badge(). Implement it here the
-*           day a menu entry needs one, rather than re-listing it.)
+*          badge      — a count, or a short text, carried by the item:
+*                       the toolbar badge's rules, helper and live
+*                       region (yui_badge.js) -- 0 / "" / null show
+*                       none, over 99 reads "99+".  It sits on the
+*                       corner of the icon where the item is an icon
+*                       over its label (icon-bar, cards, a stacked
+*                       item) or an icon alone, and after the label
+*                       where the item reads as a line (vertical,
+*                       drawer, submenu, tabs, an accordion head).
+*                       The field only seeds the paint: a count is a
+*                       RUNTIME fact, set by
+*                       yui_shell_set_nav_item_badge(shell, id, value,
+*                       tone), which reaches every nav drawing the id.
+*                       Not drawn by "breadcrumb", deliberately: a
+*                       crumb names a step of the way in, and the
+*                       count belongs to the menu entry that leads
+*                       there -- a trail with counts on it reads as a
+*                       list of destinations, which is what a
+*                       breadcrumb is not.  ("backbar" has no items.)
+*          badge_tone — "danger" (the default look), "warning",
+*                       "info", "success", "primary" or "link":
+*                       Bulma's is-<tone> on the badge.  An unknown
+*                       one is logged and drawn with the default look.
 *          class    — extra CSS class(es) on the item (tabs layout), e.g.
 *                     a per-item state colour like "yui-nav-disconnected"
 *          closable — render a trailing ✕ that emits EV_NAV_ITEM_CLOSE
@@ -23472,6 +23671,13 @@ function cards_grid_descriptor(items, show_label) {
 *      active highlight restored.  The app_config path is simply the
 *      first, startup caller of the same mechanism.
 *
+*      One item's badge is set at runtime by sending EV_SET_ITEM_BADGE
+*      {item_id, badge, badge_tone}: painted in place, no rebuild, and
+*      KEPT in the `badges` attr, which wins over the item's own fields
+*      in every later rebuild.  The shell sends it to all its navs
+*      (yui_shell_set_nav_item_badge) and hands `badges` to every nav
+*      it creates.
+*
 *      In addition to navigable items, secondary navs accept two
 *      decorative item kinds for in-place visual grouping:
 *
@@ -23519,6 +23725,7 @@ var attrs_table$7 = [
 	SDATA(data_type_t.DTP_STRING, "level", 0, "primary", "primary|secondary"),
 	SDATA(data_type_t.DTP_STRING, "show_on", 0, "", "Breakpoint visibility expr (shell show_on syntax); empty = always"),
 	SDATA(data_type_t.DTP_STRING, "back_route", 0, "", "backbar layout: route of the section index the ← returns to"),
+	SDATA(data_type_t.DTP_DICT, "badges", 0, "{}", "Item id -> {badge, badge_tone} set at runtime (EV_SET_ITEM_BADGE); wins over the item's own fields"),
 	SDATA(data_type_t.DTP_POINTER, "shell", 0, null, "C_YUI_SHELL gobj (for navigation calls)"),
 	SDATA(data_type_t.DTP_POINTER, "$container", 0, null, "Root HTMLElement of this nav"),
 	SDATA(data_type_t.DTP_STRING, "active_route", 0, "", "Currently active route"),
@@ -23733,19 +23940,16 @@ function render_tabs(gobj, items) {
 	for (let it of items) {
 		if (is_decorative(it)) continue;
 		let children = [];
-		if (!empty_string(it.icon)) children.push([
-			"span",
-			{ class: "icon is-small" },
-			["i", {
-				class: it.icon,
-				"aria-hidden": "true"
-			}]
-		]);
-		if (show_label && !empty_string(it.name)) children.push([
+		let has_label = show_label && !empty_string(it.name);
+		let pinned = !empty_string(it.icon) && !has_label;
+		let badge_el = item_badge_node(gobj, it, pinned);
+		if (!empty_string(it.icon)) children.push(icon_span(it.icon, "icon is-small", pinned ? badge_el : null));
+		if (has_label) children.push([
 			"span",
 			{ i18n: it.name },
 			text_node(it.name)
 		]);
+		if (!pinned) children.push(badge_el);
 		if (it.closable) children.push([
 			"span",
 			{
@@ -23803,7 +24007,7 @@ function render_tabs(gobj, items) {
 }
 function render_cards(gobj, items) {
 	let show_label = gobj_read_attr(gobj, "show_label");
-	return createElement2(cards_grid_descriptor(items, show_label));
+	return createElement2(cards_grid_descriptor(items, show_label, (it, pinned) => item_badge_node(gobj, it, pinned)));
 }
 /************************************************************
 *  "backbar": a single "← <section>" link back to the section
@@ -23821,6 +24025,9 @@ function render_cards(gobj, items) {
 *  other layout — so the delegated click handler and the active
 *  highlight work unchanged, and the last crumb marks itself through
 *  `active_route` like a tab does.
+*
+*  No badge, deliberately: a crumb names a step of the way in, and a
+*  count belongs to the menu entry that leads there.
 ************************************************************/
 function render_breadcrumb(gobj, items) {
 	let show_label = gobj_read_attr(gobj, "show_label");
@@ -23999,7 +24206,7 @@ function render_accordion(gobj, items) {
 		let $hdr = createElement2([
 			"button",
 			head_attrs,
-			text_node(head_text)
+			[text_node(head_text), item_badge_node(gobj, it, false)]
 		]);
 		$container.appendChild($hdr);
 		let $ul = createElement2(["ul", {
@@ -24046,14 +24253,7 @@ function item_li(gobj, it, opts) {
 	let { icon_pos, show_label, stacked } = opts;
 	let children = [];
 	let label = it.name || "";
-	let icon_el = !empty_string(it.icon) ? [
-		"span",
-		{ class: "icon" },
-		["i", {
-			class: it.icon,
-			"aria-hidden": "true"
-		}]
-	] : null;
+	let is_stacked = !!(stacked || icon_pos === "top" || icon_pos === "bottom");
 	let label_el = show_label && !empty_string(label) ? [
 		"span",
 		{
@@ -24062,14 +24262,19 @@ function item_li(gobj, it, opts) {
 		},
 		text_node(label)
 	] : null;
+	let pinned = !empty_string(it.icon) && (is_stacked || !label_el);
+	let badge_el = item_badge_node(gobj, it, pinned);
+	let icon_el = !empty_string(it.icon) ? icon_span(it.icon, "icon", pinned ? badge_el : null) : null;
 	let a_class = "yui-nav-item";
-	if (stacked || icon_pos === "top" || icon_pos === "bottom") a_class += " yui-nav-stacked";
+	if (is_stacked) a_class += " yui-nav-stacked";
 	if (icon_pos === "right" || icon_pos === "bottom") {
 		if (label_el) children.push(label_el);
+		if (!pinned) children.push(badge_el);
 		if (icon_el) children.push(icon_el);
 	} else {
 		if (icon_el) children.push(icon_el);
 		if (label_el) children.push(label_el);
+		if (!pinned) children.push(badge_el);
 	}
 	let aria_key = label || it.id;
 	let a_attrs = {
@@ -24103,14 +24308,9 @@ function item_li(gobj, it, opts) {
 function item_iconbar(gobj, it, opts) {
 	let { icon_pos, show_label } = opts;
 	let label = it.name || "";
-	let icon_el = !empty_string(it.icon) ? [
-		"span",
-		{ class: "icon is-medium" },
-		["i", {
-			class: it.icon,
-			"aria-hidden": "true"
-		}]
-	] : null;
+	let pinned = !empty_string(it.icon);
+	let badge_el = item_badge_node(gobj, it, pinned);
+	let icon_el = pinned ? icon_span(it.icon, "icon is-medium", badge_el) : null;
 	let label_el = show_label && !empty_string(label) ? [
 		"span",
 		{
@@ -24127,6 +24327,7 @@ function item_iconbar(gobj, it, opts) {
 		if (icon_el) children.push(icon_el);
 		if (label_el) children.push(label_el);
 	}
+	if (!pinned) children.push(badge_el);
 	let a_attrs = {
 		class: "yui-nav-item yui-nav-stacked",
 		href: it.route ? "#" + it.route : "#",
@@ -24150,6 +24351,40 @@ function item_iconbar(gobj, it, opts) {
 		]
 	];
 }
+/************************************************************
+*  The badge of an item (yui_badge.js), always drawn -- hidden
+*  when empty -- so EV_SET_ITEM_BADGE has a node to write into.
+*  What was set at runtime for its id (`badges`) wins over the
+*  item's own `badge` / `badge_tone`.  `pinned`: on the corner of
+*  the icon instead of after the label.
+************************************************************/
+function item_badge_node(gobj, it, pinned) {
+	let badges = gobj_read_attr(gobj, "badges");
+	let state = it;
+	if (is_object(badges) && is_string(it.id) && Object.prototype.hasOwnProperty.call(badges, it.id)) state = badges[it.id] || {};
+	let classes = "NAV_ITEM_BADGE yui-badge yui-nav-badge";
+	if (pinned) classes += " yui-nav-badge-pinned";
+	return badge_node(state.badge, state.badge_tone, classes, `C_YUI_NAV '${gobj_read_attr(gobj, "menu_id") || ""}': item '${it.id}'`);
+}
+/************************************************************
+*  An item's icon, with its badge on the corner when given one.
+************************************************************/
+function icon_span(icon, classes, badge_el) {
+	let glyph = ["i", {
+		class: icon,
+		"aria-hidden": "true"
+	}];
+	if (!badge_el) return [
+		"span",
+		{ class: classes },
+		glyph
+	];
+	return [
+		"span",
+		{ class: `${classes} yui-nav-icon` },
+		[glyph, badge_el]
+	];
+}
 function wire_clicks(gobj, $container) {
 	let priv = gobj.priv;
 	let handler = (ev) => {
@@ -24226,6 +24461,36 @@ function ac_set_items(gobj, event, kw, src) {
 	return 0;
 }
 /************************************************************
+*  EV_SET_ITEM_BADGE {item_id, badge, badge_tone} — the badge of
+*  one item, set at runtime (yui_shell_set_nav_item_badge).
+*
+*  Kept in `badges`, so every later rebuild draws it, and painted
+*  in place: no rebuild for a count that moves on every tick.  An
+*  id this nav does not draw is kept all the same — a later
+*  EV_SET_ITEMS may bring the item.
+************************************************************/
+function ac_set_item_badge(gobj, event, kw, src) {
+	let item_id = kw.item_id;
+	if (empty_string(item_id)) {
+		log_error(`C_YUI_NAV: ${event} without item_id, from ${gobj_short_name(src)}`);
+		return -1;
+	}
+	let menu_id = gobj_read_attr(gobj, "menu_id") || "";
+	let tone = badge_tone(kw.badge_tone, `C_YUI_NAV '${menu_id}': item '${item_id}'`);
+	let badge = kw.badge === void 0 ? null : kw.badge;
+	let badges = Object.assign({}, gobj_read_attr(gobj, "badges"));
+	badges[item_id] = {
+		badge,
+		badge_tone: tone
+	};
+	gobj_write_attr(gobj, "badges", badges);
+	let $c = gobj_read_attr(gobj, "$container");
+	if (!$c) return 0;
+	let $badges = $c.querySelectorAll(`[data-item-id="${css_escape(item_id)}"] .NAV_ITEM_BADGE`);
+	for (let $badge of $badges) paint_badge($badge, badge, tone);
+	return 0;
+}
+/************************************************************
 *  EV_ROUTE_CHANGED from the shell — refresh active highlight
 ************************************************************/
 function ac_route_changed(gobj, event, kw, src) {
@@ -24281,18 +24546,27 @@ function create_gclass$7(gclass_name) {
 		log_error(`GClass ALREADY created: ${gclass_name}`);
 		return -1;
 	}
-	const states = [["ST_IDLE", [[
-		"EV_ROUTE_CHANGED",
-		ac_route_changed,
-		null
-	], [
-		"EV_SET_ITEMS",
-		ac_set_items,
-		null
-	]]]];
+	const states = [["ST_IDLE", [
+		[
+			"EV_ROUTE_CHANGED",
+			ac_route_changed,
+			null
+		],
+		[
+			"EV_SET_ITEMS",
+			ac_set_items,
+			null
+		],
+		[
+			"EV_SET_ITEM_BADGE",
+			ac_set_item_badge,
+			null
+		]
+	]]];
 	const event_types = [
 		["EV_ROUTE_CHANGED", 0],
 		["EV_SET_ITEMS", 0],
+		["EV_SET_ITEM_BADGE", 0],
 		["EV_NAV_CLICKED", event_flag_t.EVF_OUTPUT_EVENT | event_flag_t.EVF_PUBLIC_EVENT],
 		["EV_NAV_ITEM_CLOSE", event_flag_t.EVF_OUTPUT_EVENT | event_flag_t.EVF_PUBLIC_EVENT],
 		["EV_DRAWER_CLOSE_REQUESTED", event_flag_t.EVF_OUTPUT_EVENT | event_flag_t.EVF_PUBLIC_EVENT]
@@ -83199,6 +83473,6 @@ function setup_json_pad(self) {
 	return win;
 }
 //#endregion
-export { EditControl, ICONS_TOPIC, MarkerControl, USER_ICON_PREFIX, YUI_FILE_ACCEPT, YUI_PERIODS, YUI_PERIODS_DEFAULT, YUI_ROLLING, addClasses, apply_dev_traces, attach_clear, build_dev_panel, dev_window_was_open, disableElements, enableElements, epoch_to_local_input, epoch_to_ms, expose_view_container, fmt_epoch, getStrokeColor, infer_period, info_traffic, inject_svg_icons, is_current_period, iso_week, local_input_to_epoch, ms_to_epoch, period_bounds, period_bounds_epoch, period_label, period_name, period_shift, period_spec, period_start, refresh_clear, register_c_g6_nodes_tree, register_c_yui_form, register_c_yui_fsm_graph, register_c_yui_gclass, register_c_yui_gobj_tree_js, register_c_yui_json, register_c_yui_json_graph, register_c_yui_json_pad, register_c_yui_map, register_c_yui_nav, register_c_yui_pager, register_c_yui_period, register_c_yui_schema_editor, register_c_yui_service_view, register_c_yui_shell, register_c_yui_treedb_graph, register_c_yui_treedb_schema, register_c_yui_treedb_topic_with_form, register_c_yui_treedb_topics, register_c_yui_uplot, register_c_yui_window, register_c_yui_window_manager, register_c_yui_wizard, removeChildElements, removeClasses, rolling_bounds, safe_locale, set_active_state, set_cancel_state, set_pressed_state, set_submit_state, setup_dev, setup_frontend_view, setup_json_pad, toggleClasses, yui_array_buffer_to_base64, yui_asset_element, yui_asset_id, yui_asset_ids, yui_asset_missing, yui_asset_src, yui_file_control, yui_file_id_label, yui_file_read, yui_file_sha256, yui_file_size_label, yui_files_manifest, yui_icon_is_defined, yui_icons_list, yui_icons_put_user, yui_icons_remove_user, yui_icons_set_user, yui_is_dark, yui_mount_service_view, yui_shell_close_drawer, yui_shell_close_dropdown, yui_shell_confirm_danger, yui_shell_confirm_ok, yui_shell_confirm_yesno, yui_shell_confirm_yesnocancel, yui_shell_navigate, yui_shell_open_drawer, yui_shell_overlay_dismissed, yui_shell_pop_escape, yui_shell_push_escape, yui_shell_refresh_avatars, yui_shell_register_event_handler, yui_shell_register_overlay, yui_shell_set_avatar_provider, yui_shell_set_connection_state, yui_shell_set_sub_routes, yui_shell_set_toolbar_item_badge, yui_shell_set_toolbar_item_icon, yui_shell_set_translator, yui_shell_show_error, yui_shell_show_info, yui_shell_show_modal, yui_shell_show_route_map, yui_shell_show_warning, yui_shell_toggle_drawer, yui_shell_unpark_route, yui_svg_icon_element, yui_svg_sanitize, yui_theme_now, yui_toolbar, yui_user_icon_class, yui_watch_theme };
+export { EditControl, ICONS_TOPIC, MarkerControl, USER_ICON_PREFIX, YUI_FILE_ACCEPT, YUI_PERIODS, YUI_PERIODS_DEFAULT, YUI_ROLLING, addClasses, apply_dev_traces, attach_clear, build_dev_panel, dev_window_was_open, disableElements, enableElements, epoch_to_local_input, epoch_to_ms, expose_view_container, fmt_epoch, getStrokeColor, infer_period, info_traffic, inject_svg_icons, is_current_period, iso_week, local_input_to_epoch, ms_to_epoch, period_bounds, period_bounds_epoch, period_label, period_name, period_shift, period_spec, period_start, refresh_clear, register_c_g6_nodes_tree, register_c_yui_form, register_c_yui_fsm_graph, register_c_yui_gclass, register_c_yui_gobj_tree_js, register_c_yui_json, register_c_yui_json_graph, register_c_yui_json_pad, register_c_yui_map, register_c_yui_nav, register_c_yui_pager, register_c_yui_period, register_c_yui_schema_editor, register_c_yui_service_view, register_c_yui_shell, register_c_yui_treedb_graph, register_c_yui_treedb_schema, register_c_yui_treedb_topic_with_form, register_c_yui_treedb_topics, register_c_yui_uplot, register_c_yui_window, register_c_yui_window_manager, register_c_yui_wizard, removeChildElements, removeClasses, rolling_bounds, safe_locale, set_active_state, set_cancel_state, set_pressed_state, set_submit_state, setup_dev, setup_frontend_view, setup_json_pad, toggleClasses, yui_array_buffer_to_base64, yui_asset_element, yui_asset_id, yui_asset_ids, yui_asset_missing, yui_asset_src, yui_file_control, yui_file_id_label, yui_file_read, yui_file_sha256, yui_file_size_label, yui_files_manifest, yui_icon_is_defined, yui_icons_list, yui_icons_put_user, yui_icons_remove_user, yui_icons_set_user, yui_is_dark, yui_mount_service_view, yui_shell_close_drawer, yui_shell_close_dropdown, yui_shell_confirm_danger, yui_shell_confirm_ok, yui_shell_confirm_yesno, yui_shell_confirm_yesnocancel, yui_shell_navigate, yui_shell_open_drawer, yui_shell_overlay_dismissed, yui_shell_pop_escape, yui_shell_push_escape, yui_shell_refresh_avatars, yui_shell_register_event_handler, yui_shell_register_overlay, yui_shell_set_avatar_provider, yui_shell_set_connection_state, yui_shell_set_nav_item_badge, yui_shell_set_sub_routes, yui_shell_set_toolbar_item_badge, yui_shell_set_toolbar_item_icon, yui_shell_set_translator, yui_shell_show_error, yui_shell_show_info, yui_shell_show_modal, yui_shell_show_route_map, yui_shell_show_warning, yui_shell_toggle_drawer, yui_shell_unpark_route, yui_svg_icon_element, yui_svg_sanitize, yui_theme_now, yui_toolbar, yui_user_icon_class, yui_watch_theme };
 
 //# sourceMappingURL=gobj-ui.es.js.map