@yuneta/gobj-ui 7.26.29 → 7.26.30

package/dist/gobj-ui.cjs.js

@@ -524,6 +524,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) {
+		(0, _yuneta_gobj_js.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
@@ -962,6 +1083,8 @@ var PRIVATE_DATA$22 = {
 	stages: {},
 	navs: [],
 	item_index: {},
+	nav_badges: {},
+	dynamic_items: {},
 	section_pos: {},
 	route_mru: [],
 	sub_routes: {},
@@ -1585,6 +1708,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 = (0, _yuneta_gobj_js.gobj_read_attr)(nav, "$container");
@@ -1774,8 +1898,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 {
@@ -1876,48 +2002,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)
@@ -1948,7 +2032,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 (!(0, _yuneta_gobj_js.empty_string)(it.name)) children.push([
 		"span",
@@ -2759,6 +2843,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 = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "config") || {};
+	let menus = (0, _yuneta_gobj_js.is_object)(config.menu) ? config.menu : {};
+	let holds = (items) => (0, _yuneta_gobj_js.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 (!(0, _yuneta_gobj_js.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 && (0, _yuneta_gobj_js.gobj_gclass_name)(view) === "C_YUI_NAV") navs.push(view);
+		}
+	}
+	return navs;
+}
 /***************************
 *      Actions
 ***************************/
@@ -3255,35 +3374,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 || !(0, _yuneta_gobj_js.is_gobj)(shell_gobj) || (0, _yuneta_gobj_js.empty_string)(item_id)) return;
 	let $container = (0, _yuneta_gobj_js.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 || !(0, _yuneta_gobj_js.is_gobj)(shell_gobj) || (0, _yuneta_gobj_js.gobj_is_destroying)(shell_gobj) || (0, _yuneta_gobj_js.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)) (0, _yuneta_gobj_js.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
@@ -23365,18 +23528,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",
 		{
@@ -23385,6 +23564,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 : "#",
@@ -23412,12 +23592,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",
@@ -23462,11 +23643,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
@@ -23477,6 +23676,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:
 *
@@ -23524,6 +23730,7 @@ var attrs_table$7 = [
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "level", 0, "primary", "primary|secondary"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "show_on", 0, "", "Breakpoint visibility expr (shell show_on syntax); empty = always"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "back_route", 0, "", "backbar layout: route of the section index the ← returns to"),
+	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.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"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_POINTER, "shell", 0, null, "C_YUI_SHELL gobj (for navigation calls)"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_POINTER, "$container", 0, null, "Root HTMLElement of this nav"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_STRING, "active_route", 0, "", "Currently active route"),
@@ -23738,19 +23945,16 @@ function render_tabs(gobj, items) {
 	for (let it of items) {
 		if (is_decorative(it)) continue;
 		let children = [];
-		if (!(0, _yuneta_gobj_js.empty_string)(it.icon)) children.push([
-			"span",
-			{ class: "icon is-small" },
-			["i", {
-				class: it.icon,
-				"aria-hidden": "true"
-			}]
-		]);
-		if (show_label && !(0, _yuneta_gobj_js.empty_string)(it.name)) children.push([
+		let has_label = show_label && !(0, _yuneta_gobj_js.empty_string)(it.name);
+		let pinned = !(0, _yuneta_gobj_js.empty_string)(it.icon) && !has_label;
+		let badge_el = item_badge_node(gobj, it, pinned);
+		if (!(0, _yuneta_gobj_js.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",
 			{
@@ -23808,7 +24012,7 @@ function render_tabs(gobj, items) {
 }
 function render_cards(gobj, items) {
 	let show_label = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "show_label");
-	return (0, _yuneta_gobj_js.createElement2)(cards_grid_descriptor(items, show_label));
+	return (0, _yuneta_gobj_js.createElement2)(cards_grid_descriptor(items, show_label, (it, pinned) => item_badge_node(gobj, it, pinned)));
 }
 /************************************************************
 *  "backbar": a single "← <section>" link back to the section
@@ -23826,6 +24030,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 = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "show_label");
@@ -24004,7 +24211,7 @@ function render_accordion(gobj, items) {
 		let $hdr = (0, _yuneta_gobj_js.createElement2)([
 			"button",
 			head_attrs,
-			text_node(head_text)
+			[text_node(head_text), item_badge_node(gobj, it, false)]
 		]);
 		$container.appendChild($hdr);
 		let $ul = (0, _yuneta_gobj_js.createElement2)(["ul", {
@@ -24051,14 +24258,7 @@ function item_li(gobj, it, opts) {
 	let { icon_pos, show_label, stacked } = opts;
 	let children = [];
 	let label = it.name || "";
-	let icon_el = !(0, _yuneta_gobj_js.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 && !(0, _yuneta_gobj_js.empty_string)(label) ? [
 		"span",
 		{
@@ -24067,14 +24267,19 @@ function item_li(gobj, it, opts) {
 		},
 		text_node(label)
 	] : null;
+	let pinned = !(0, _yuneta_gobj_js.empty_string)(it.icon) && (is_stacked || !label_el);
+	let badge_el = item_badge_node(gobj, it, pinned);
+	let icon_el = !(0, _yuneta_gobj_js.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 = {
@@ -24108,14 +24313,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 = !(0, _yuneta_gobj_js.empty_string)(it.icon) ? [
-		"span",
-		{ class: "icon is-medium" },
-		["i", {
-			class: it.icon,
-			"aria-hidden": "true"
-		}]
-	] : null;
+	let pinned = !(0, _yuneta_gobj_js.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 && !(0, _yuneta_gobj_js.empty_string)(label) ? [
 		"span",
 		{
@@ -24132,6 +24332,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 : "#",
@@ -24155,6 +24356,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 = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "badges");
+	let state = it;
+	if ((0, _yuneta_gobj_js.is_object)(badges) && (0, _yuneta_gobj_js.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 '${(0, _yuneta_gobj_js.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) => {
@@ -24231,6 +24466,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 ((0, _yuneta_gobj_js.empty_string)(item_id)) {
+		(0, _yuneta_gobj_js.log_error)(`C_YUI_NAV: ${event} without item_id, from ${(0, _yuneta_gobj_js.gobj_short_name)(src)}`);
+		return -1;
+	}
+	let menu_id = (0, _yuneta_gobj_js.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({}, (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "badges"));
+	badges[item_id] = {
+		badge,
+		badge_tone: tone
+	};
+	(0, _yuneta_gobj_js.gobj_write_attr)(gobj, "badges", badges);
+	let $c = (0, _yuneta_gobj_js.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) {
@@ -24286,18 +24551,27 @@ function create_gclass$7(gclass_name) {
 		(0, _yuneta_gobj_js.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", _yuneta_gobj_js.event_flag_t.EVF_OUTPUT_EVENT | _yuneta_gobj_js.event_flag_t.EVF_PUBLIC_EVENT],
 		["EV_NAV_ITEM_CLOSE", _yuneta_gobj_js.event_flag_t.EVF_OUTPUT_EVENT | _yuneta_gobj_js.event_flag_t.EVF_PUBLIC_EVENT],
 		["EV_DRAWER_CLOSE_REQUESTED", _yuneta_gobj_js.event_flag_t.EVF_OUTPUT_EVENT | _yuneta_gobj_js.event_flag_t.EVF_PUBLIC_EVENT]
@@ -83309,6 +83583,7 @@ exports.yui_shell_register_event_handler = yui_shell_register_event_handler;
 exports.yui_shell_register_overlay = yui_shell_register_overlay;
 exports.yui_shell_set_avatar_provider = yui_shell_set_avatar_provider;
 exports.yui_shell_set_connection_state = yui_shell_set_connection_state;
+exports.yui_shell_set_nav_item_badge = yui_shell_set_nav_item_badge;
 exports.yui_shell_set_sub_routes = yui_shell_set_sub_routes;
 exports.yui_shell_set_toolbar_item_badge = yui_shell_set_toolbar_item_badge;
 exports.yui_shell_set_toolbar_item_icon = yui_shell_set_toolbar_item_icon;