@yuneta/gobj-ui 7.26.28 → 7.26.30

package/src/c_yui_form.js

@@ -805,11 +805,13 @@ function build_html_form(gobj, $form, prefix, template)
         }
 
         /*
-         *  Build the html field and add to form, if <tag> is not-null
+         *  Build the html field and add to form, if <tag> is not-null.
+         *  Its label and options are the schema's: column names and
+         *  headers, data.
          */
         if(html_field_conf.tag) {
-            let $field = create_form_field(gobj, $form, prefix, field_desc, html_field_conf);
-            name_form_control($field, html_field_conf);
+            let $field = create_form_field(gobj, $form, prefix, field_desc, /* i18n: data */ html_field_conf);
+            name_form_control($field, /* i18n: data */ html_field_conf);
             $form.appendChild($field);
         }
     });

package/src/c_yui_gobj_tree_js.js

@@ -2862,7 +2862,7 @@ function ac_open_gclass(gobj, event, kw, src)
     close_gclass_view(priv.gclass_view);
     priv.gclass_view = null;
 
-    priv.gclass_view = open_gclass_view(gobj, node_data.gclass, {
+    priv.gclass_view = open_gclass_view(gobj, /* i18n: data */ node_data.gclass, {
         title_prefix: gobj_yuno_name() || "",
         /*  Which state THIS gobj is in. The description describes the
          *  CLASS and cannot carry it, and the tree is the only party

package/src/c_yui_nav.js

@@ -33,11 +33,29 @@
  *
  *      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
@@ -48,6 +66,13 @@
  *      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:
  *
@@ -71,6 +96,7 @@ import {
     gobj_parent,
     gobj_read_attr, gobj_read_pointer_attr, gobj_write_attr,
     gobj_publish_event,
+    gobj_short_name,
     createElement2, empty_string, is_array, is_object, is_string,
 } from "@yuneta/gobj-js";
 
@@ -83,6 +109,7 @@ import {
     bulma_hidden_class,
 } from "./shell_show_on.js";
 import {text_node} from "./yui_text.js";
+import {badge_node, badge_tone, paint_badge} from "./yui_badge.js";
 
 /***************************************************************
  *              Constants
@@ -118,6 +145,7 @@ SDATA(data_type_t.DTP_BOOLEAN,  "show_label",    0,  true,         "Show item la
 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"),
@@ -230,17 +258,19 @@ function build_ui(gobj)
     let menu_id = gobj_read_attr(gobj, "menu_id") || "nav";
     let $container;
 
+    /*  The items are the app's nav declaration: the keys of their names
+     *  are read there (app_config.json), not here.  */
     switch(layout) {
-        case "vertical":   $container = render_vertical(gobj, items); break;
-        case "icon-bar":   $container = render_icon_bar(gobj, items); break;
-        case "tabs":       $container = render_tabs(gobj, items);     break;
-        case "drawer":     $container = render_drawer(gobj, items);   break;
-        case "submenu":    $container = render_submenu(gobj, items);  break;
-        case "accordion":  $container = render_accordion(gobj, items); break;
-        case "cards":      $container = render_cards(gobj, items);    break;
-        case "backbar":    $container = render_backbar(gobj);         break;
-        case "breadcrumb": $container = render_breadcrumb(gobj, items); break;
-        default:           $container = render_vertical(gobj, items);
+        case "vertical":   $container = render_vertical(gobj, /* i18n: data */ items); break;
+        case "icon-bar":   $container = render_icon_bar(gobj, /* i18n: data */ items); break;
+        case "tabs":       $container = render_tabs(gobj, /* i18n: data */ items);     break;
+        case "drawer":     $container = render_drawer(gobj, /* i18n: data */ items);   break;
+        case "submenu":    $container = render_submenu(gobj, /* i18n: data */ items);  break;
+        case "accordion":  $container = render_accordion(gobj, /* i18n: data */ items); break;
+        case "cards":      $container = render_cards(gobj, /* i18n: data */ items);    break;
+        case "backbar":    $container = render_backbar(gobj);                          break;
+        case "breadcrumb": $container = render_breadcrumb(gobj, /* i18n: data */ items); break;
+        default:           $container = render_vertical(gobj, /* i18n: data */ items);
     }
     $container.setAttribute("data-nav-zone", zone);
     $container.setAttribute("data-nav-layout", layout);
@@ -407,13 +437,20 @@ function render_tabs(gobj, items)
             continue;   /*  tab strips have no room for section labels  */
         }
         let children = [];
+        let has_label = show_label && !empty_string(it.name);
+        /*  An icon-only tab carries its badge on the icon; a labelled
+         *  one after the label, before the ✕.  */
+        let pinned = !empty_string(it.icon) && !has_label;
+        let badge_el = item_badge_node(gobj, it, pinned);
         if(!empty_string(it.icon)) {
-            children.push(["span", {class: "icon is-small"},
-                ["i", {class: it.icon, "aria-hidden":"true"}]]);
+            children.push(icon_span(it.icon, "icon is-small", pinned ? badge_el : null));
         }
-        if(show_label && !empty_string(it.name)) {
+        if(has_label) {
             children.push(["span", {i18n: it.name}, text_node(it.name)]);
         }
+        if(!pinned) {
+            children.push(badge_el);
+        }
         /*  Optional close affordance: a trailing ✕ that emits
          *  EV_NAV_ITEM_CLOSE instead of navigating (caught first in
          *  wire_clicks by its data-close-item marker). */
@@ -460,7 +497,8 @@ 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)));
 }
 
 /************************************************************
@@ -479,6 +517,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)
 {
@@ -642,7 +683,9 @@ function render_accordion(gobj, items)
             head_attrs["aria-label"] = head_text;
             head_attrs["data-i18n-aria-label"] = head_text;
         }
-        let $hdr = createElement2(["button", head_attrs, text_node(head_text)]);
+        /*  A section head reads as a line: its badge follows the label  */
+        let $hdr = createElement2(["button", head_attrs,
+            [text_node(head_text), item_badge_node(gobj, it, false)]]);
         $container.appendChild($hdr);
 
         let $ul = createElement2(
@@ -694,16 +737,21 @@ function item_li(gobj, it, opts)
     let { icon_pos, show_label, stacked } = opts;
     let children = [];
     let label = it.name || "";
+    let is_stacked = !!(stacked || icon_pos === "top" || icon_pos === "bottom");
 
-    let icon_el = !empty_string(it.icon)
-        ? ["span", {class: "icon"}, ["i", {class: it.icon, "aria-hidden":"true"}]]
-        : null;
     let label_el = (show_label && !empty_string(label))
         ? ["span", {class: "yui-nav-label", i18n: label}, text_node(label)]
         : null;
+    /*  On the corner of the icon where the item is an icon over its
+     *  label or an icon alone; after the label where it reads as a line. */
+    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") {
+    if(is_stacked) {
         a_class += " yui-nav-stacked";
     }
 
@@ -711,6 +759,9 @@ function item_li(gobj, it, opts)
         if(label_el) {
             children.push(label_el);
         }
+        if(!pinned) {
+            children.push(badge_el);
+        }
         if(icon_el) {
             children.push(icon_el);
         }
@@ -721,6 +772,9 @@ function item_li(gobj, it, opts)
         if(label_el) {
             children.push(label_el);
         }
+        if(!pinned) {
+            children.push(badge_el);
+        }
     }
 
     let aria_key = label || it.id;
@@ -763,9 +817,12 @@ 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"}]]
+    /*  An icon bar item is an icon over its label: the badge goes on
+     *  the corner of the icon, or after the label of one that has none. */
+    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", {class: "yui-nav-label is-size-7", i18n: label}, text_node(label)]
@@ -787,6 +844,9 @@ function item_iconbar(gobj, it, opts)
             children.push(label_el);
         }
     }
+    if(!pinned) {
+        children.push(badge_el);
+    }
 
     let a_attrs = {
         class: "yui-nav-item yui-nav-stacked",
@@ -808,6 +868,41 @@ 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;
@@ -930,6 +1025,44 @@ 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 === undefined) ? null : kw.badge;
+
+    /*  A new dict: the one in the attr may be the creator's.  */
+    let badges = Object.assign({}, gobj_read_attr(gobj, "badges"));
+    badges[item_id] = {badge: 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
  ************************************************************/
@@ -1041,14 +1174,16 @@ function create_gclass(gclass_name)
 
     const states = [
         ["ST_IDLE", [
-            ["EV_ROUTE_CHANGED", ac_route_changed, null],
-            ["EV_SET_ITEMS",     ac_set_items,     null]
+            ["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]

package/src/c_yui_period.js

@@ -386,7 +386,7 @@ function mode_name(mode)
         return t(mode.roll.label || mode.id);
     }
     if(mode.kind === "bucket") {
-        return period_name(/* i18n: YUI_TIME_I18N_KEYS */ mode.spec, t);
+        return period_name(mode.spec, t);
     }
     return t(mode.id);                      /*  span / custom  */
 }
@@ -482,7 +482,7 @@ function build_ui(gobj)
         if(mode.overflow || mode.hidden) {
             continue;
         }
-        priv.$modes.appendChild(build_mode_button(gobj, mode));
+        priv.$modes.appendChild(build_mode_button(gobj, /* i18n: C_YUI_PERIOD_I18N_KEYS, YUI_TIME_I18N_KEYS */ mode));
     }
 
     /*  Scroll plumbing, not an action: it changes nothing outside the strip.
@@ -572,7 +572,7 @@ function build_mode_button(gobj, mode)
 {
     /*  The name is COMPOSED for a bucket (period_name), so it carries no
      *  key: ac_language_changed() rewrites the text and both names.  */
-    let name = mode_name(/* i18n: C_YUI_PERIOD_I18N_KEYS, YUI_TIME_I18N_KEYS */ mode);
+    let name = mode_name(mode);
     let $btn = createElement2(
         ["button", {class: `button YUI_PERIOD_MODE YUI_PERIOD_MODE_${mode.id.toUpperCase()}`,
                     type: "button", title: name, "aria-label": name},

package/src/c_yui_schema_editor.js

@@ -383,7 +383,7 @@ function mt_destroy(gobj)
 function refuse_bad_name(gobj, $message)
 {
     mark_name_field(gobj, true);
-    yui_shell_show_error(yui_shell_of(gobj), /* i18n: data */ $message, {t: t});
+    yui_shell_show_error(yui_shell_of(gobj), $message, {t: t});
     return -1;
 }
 
@@ -1258,7 +1258,7 @@ function render(gobj)
     }
     if(state === "ST_IDLE") {
         show_notice(gobj, priv.load_error ? "cannot load the schemas" : "not connected",
-            priv.load_error, true);
+            /* i18n: data */ priv.load_error, true);
         destroy_diagram(gobj);
         clear($body);
         return;
@@ -1362,16 +1362,16 @@ function render_treedbs(gobj, $body)
     let $cards = [];
 
     for(let treedb of priv.model.treedbs) {
-        let tags = [
+        const from_c = treedb.c_schema_version !== undefined &&
+            String(treedb.c_schema_version) !== String(treedb.schema_version);
+        const tags = [
             {i18n: "topics", text: treedb.topics.length},
             {i18n: "version", text: treedb.schema_version === undefined
-                ? "?" : treedb.schema_version}
+                ? "?" : treedb.schema_version},
+            ...(from_c
+                ? [{i18n: "from c", text: treedb.c_schema_version, style: "is-warning is-light"}]
+                : [])
         ];
-        if(treedb.c_schema_version !== undefined &&
-            String(treedb.c_schema_version) !== String(treedb.schema_version)
-        ) {
-            tags.push({i18n: "from c", text: treedb.c_schema_version, style: "is-warning is-light"});
-        }
         $cards.push(open_card(gobj, "SCHEMA_TREEDB_CARD", treedb.id, "yi-database",
             tags, "EV_SELECT_TREEDB", {treedb: treedb.id}));
     }
@@ -1406,7 +1406,7 @@ function render_topics(gobj, $body)
     let treedb = current_treedb(gobj);
 
     if(!treedb) {
-        show_notice(gobj, "that treedb is not here any more", priv.treedb_id);
+        show_notice(gobj, "that treedb is not here any more", /* i18n: data */ priv.treedb_id);
         return;
     }
 
@@ -1554,7 +1554,7 @@ function render_columns(gobj, $body)
     let topic = current_topic(gobj);
 
     if(!topic) {
-        show_notice(gobj, "that topic is not here any more", priv.topic_name);
+        show_notice(gobj, "that topic is not here any more", /* i18n: data */ priv.topic_name);
         return;
     }
 
@@ -1815,7 +1815,7 @@ function render_diagram(gobj)
     if(!treedb) {
         destroy_diagram(gobj);
         clear($body);
-        show_notice(gobj, "that treedb is not here any more", priv.treedb_id);
+        show_notice(gobj, "that treedb is not here any more", /* i18n: data */ priv.treedb_id);
         return;
     }
     if(!gclass_find_by_name("C_YUI_TREEDB_SCHEMA")) {
@@ -1921,7 +1921,7 @@ function open_dialog(gobj, $content, title, logical, title_prefix)
     priv.dialog_gen = priv.model_gen;
     priv.dialog_kind = logical;
     priv.dialog_content = $content;
-    priv.dialog = yui_shell_show_modal(yui_shell_of(gobj), /* i18n: data */ $content, {
+    priv.dialog = yui_shell_show_modal(yui_shell_of(gobj), $content, {
         dialog:        true,
         title:         title,
         title_prefix:  title_prefix || "",
@@ -2435,8 +2435,8 @@ function open_report(gobj, findings, treedb_id)
         return ["tr", {class: `SCHEMA_REPORT_ROW SCHEMA_REPORT_${finding.severity.toUpperCase()}`}, [
             ["td", {class: "SCHEMA_REPORT_SEVERITY"}, [
                 ["span", {class: `tag ${finding.severity === "error" ? "is-danger" : "is-warning"}` +
-                                 " is-light", i18n: /* i18n: C_YUI_SCHEMA_EDITOR_I18N_KEYS */ finding.severity},
-                    t(/* i18n: C_YUI_SCHEMA_EDITOR_I18N_KEYS */ finding.severity)]
+                                 " is-light", i18n: finding.severity},
+                    t(finding.severity)]
             ]],
             ["td", {class: "SCHEMA_REPORT_WHAT", i18n: finding.code}, t(finding.code)],
             ["td", {class: "SCHEMA_REPORT_TOPIC"}, text_node(finding.topic || "")],
@@ -4256,7 +4256,7 @@ function confirm_column_delete(gobj, verdict)
         }
         $warning = createElement2(["div", {class: "SCHEMA_COLUMN_DATA_WARNING"}, children]);
     }
-    confirm_then(gobj, $warning? /* i18n: data */ $warning : message, `${c.topic}.${c.col}`,
+    confirm_then(gobj, $warning? $warning : message, `${c.topic}.${c.col}`,
         {what: "column", topic: c.topic, col: c.col});
     return 0;
 }
@@ -4494,7 +4494,9 @@ function ac_validate(gobj, event, kw, src)
         written_topics: Object.keys(priv.written),
         baseline:       priv.baseline
     });
-    open_report(gobj, findings, treedb.id);
+    /*  The severities are C_YUI_SCHEMA_EDITOR_I18N_KEYS; the codes are the
+     *  checks' own keys, read where schema_validate.js writes them.  */
+    open_report(gobj, /* i18n: C_YUI_SCHEMA_EDITOR_I18N_KEYS */ findings, treedb.id);
     if(has_errors(findings)) {
         log_warning(`${gobj_short_name(gobj)}: ${treedb.id} would be refused as it is`);
     }
@@ -4578,7 +4580,9 @@ function ac_preview_import(gobj, event, kw, src)
 
     let plan = plan_import(treedb, incoming, {prune: !!kw.prune});
     priv.import_plan = plan;
-    render_import_plan(gobj, plan);
+    /*  Its writes are SCHEMA_IMPORT_I18N_KEYS; its conflicts are keys of
+     *  their own, read where schema_import.js writes them.  */
+    render_import_plan(gobj, /* i18n: SCHEMA_IMPORT_I18N_KEYS */ plan);
     return 0;
 }
 

package/src/c_yui_shell.css

@@ -459,29 +459,30 @@
 }
 
 /*------------------------------------------------------------
- *      Toolbar badge — the count pinned to an item's icon
+ *      Badge — the count of a toolbar item or a menu item
+ *      (yui_badge.js)
  *
- *  Anchored to the ICON and not to the button: with its label on
- *  (desktop) the button is wide, and a badge in its corner would
- *  float away from the glyph it counts.
+ *  `.yui-badge` is the LOOK, one for both.  Where it SITS is the
+ *  host's: `.yui-toolbar-badge` on the corner of a toolbar icon,
+ *  `.yui-nav-badge` after a menu item's label, or on the corner
+ *  of its icon (`.yui-nav-badge-pinned`).
+ *
+ *  Anchored to the ICON and not to the control: with its label on
+ *  (desktop) a toolbar button is wide, and a badge in its corner
+ *  would float away from the glyph it counts.
  *
  *  `hidden` is honoured explicitly: the element is always in the
  *  DOM (so the runtime setter has somewhere to write) and
  *  [hidden] loses to `display:inline-flex` without this rule.
  *
- *  Danger colour on purpose — a badge exists to pull the eye.  It
- *  is its own colour pair in both schemes rather than a Bulma
- *  helper, so it keeps its contrast when the toolbar background
- *  changes with the theme.  No transition: house rule.
+ *  Danger colour by default, on purpose — a badge exists to pull
+ *  the eye.  A TONE (`is-warning`, `is-info`, …) is a FILL: the
+ *  raw Bulma token under its `-invert` ink, its own colour pair in
+ *  both schemes rather than a Bulma helper, so the badge keeps its
+ *  contrast when the bar under it changes with the theme (README,
+ *  "Colour").  No transition: house rule.
  *------------------------------------------------------------*/
-.yui-toolbar-icon {
-    position: relative;
-    overflow: visible;
-}
-.yui-toolbar-badge {
-    position: absolute;
-    top: -0.35em;
-    right: -0.55em;
+.yui-badge {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -491,19 +492,84 @@
     height: 1.15em;
     padding: 0 0.3em;
     border-radius: 999px;
-    font-size: 0.62em;
     font-weight: 700;
     line-height: 1;
     font-family: inherit;
+    white-space: nowrap;
     background-color: var(--bulma-danger, #f14668);
     color: var(--bulma-danger-invert, #fff);
     /*  Separates the pill from the glyph when they overlap. */
     box-shadow: 0 0 0 0.12em var(--bulma-scheme-main, #fff);
     pointer-events: none;
 }
-.yui-toolbar-badge[hidden] {
+.yui-badge[hidden] {
     display: none;
 }
+.yui-badge.is-danger {
+    background-color: var(--bulma-danger, #f14668);
+    color: var(--bulma-danger-invert, #fff);
+}
+.yui-badge.is-warning {
+    background-color: var(--bulma-warning, #ffb70f);
+    color: var(--bulma-warning-invert, rgba(0, 0, 0, 0.7));
+}
+.yui-badge.is-info {
+    background-color: var(--bulma-info, #66d1ff);
+    color: var(--bulma-info-invert, rgba(0, 0, 0, 0.7));
+}
+.yui-badge.is-success {
+    background-color: var(--bulma-success, #48c78e);
+    color: var(--bulma-success-invert, rgba(0, 0, 0, 0.7));
+}
+.yui-badge.is-primary {
+    background-color: var(--bulma-primary, #00d1b2);
+    color: var(--bulma-primary-invert, rgba(0, 0, 0, 0.7));
+}
+.yui-badge.is-link {
+    background-color: var(--bulma-link, #485fc7);
+    color: var(--bulma-link-invert, #fff);
+}
+
+/*  Toolbar: on the corner of the icon, sized by the icon. */
+.yui-toolbar-icon {
+    position: relative;
+    overflow: visible;
+}
+.yui-toolbar-badge {
+    position: absolute;
+    top: -0.35em;
+    right: -0.55em;
+    font-size: 0.62em;
+}
+
+/*  Menu item: after the label.  Sized in rem, so it is the same
+ *  pill in every layout whatever the item's own font size.  */
+.yui-nav-badge {
+    flex: 0 0 auto;
+    margin-inline-start: 0.4rem;
+    font-size: 0.75rem;
+    vertical-align: middle;
+}
+/*  Where the item already spaces its children (a flex row or column
+ *  with a gap), the gap is the space.  */
+.yui-nav-vertical .menu-list a > .yui-nav-badge,
+.yui-nav-stacked > .yui-nav-badge,
+.yui-nav-cards .yui-nav-card > .yui-nav-badge {
+    margin-inline-start: 0;
+}
+/*  ...or 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. */
+.yui-nav-icon {
+    position: relative;
+    overflow: visible;
+}
+.yui-nav-badge.yui-nav-badge-pinned {
+    position: absolute;
+    top: -0.35em;
+    inset-inline-end: -0.55em;
+    margin: 0;
+    font-size: 0.7rem;
+}
 
 /*============================================================
  *      Toolbar — type:"brand"