@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.63 → 2.0.0-next.65

package/src/components/alert-list-details/alert-list-details.stories.ts

@@ -188,57 +188,57 @@ export const OneItem: Story = {
   },
 };
 
-export const IsaCategories: Story = {
+export const LevelCategories: Story = {
   args: {
     alerts: [
       {
-        id: 'isa-1',
+        id: 'level-1',
         tagId: 'CRIT-01',
         source: 'PCS',
         text: 'Emergency shutdown condition detected',
         acknowledged: false,
         active: true,
-        type: AlertType.IsaCritical,
+        type: AlertType.LevelCritical,
         time: new Date('2024-01-15T14:32:15Z'),
       },
       {
-        id: 'isa-2',
+        id: 'level-2',
         tagId: 'HIGH-02',
         source: 'ME 1',
         text: 'Main engine overspeed',
         acknowledged: false,
         active: true,
-        type: AlertType.IsaHigh,
+        type: AlertType.LevelHigh,
         time: new Date('2024-01-15T14:30:00Z'),
       },
       {
-        id: 'isa-3',
+        id: 'level-3',
         tagId: 'MED-03',
         source: 'Tank 1',
         text: 'Tank level approaching high limit',
         acknowledged: false,
         active: true,
-        type: AlertType.IsaMedium,
+        type: AlertType.LevelMedium,
         time: new Date('2024-01-15T14:28:00Z'),
       },
       {
-        id: 'isa-4',
+        id: 'level-4',
         tagId: 'LOW-04',
         source: 'HVAC',
         text: 'Filter maintenance due',
         acknowledged: false,
         active: true,
-        type: AlertType.IsaLow,
+        type: AlertType.LevelLow,
         time: new Date('2024-01-15T14:25:00Z'),
       },
       {
-        id: 'isa-5',
+        id: 'level-5',
         tagId: 'DIAG-05',
         source: 'Network',
         text: 'Redundant link diagnostic message',
         acknowledged: false,
         active: true,
-        type: AlertType.IsaDiagnostic,
+        type: AlertType.LevelDiagnostic,
         time: new Date('2024-01-15T14:20:00Z'),
       },
     ],

package/src/components/badge/badge.css

@@ -92,31 +92,31 @@
   }
 
   &.type-caution,
-  &.type-isa-low {
+  &.type-level-low {
     background-color: var(--alert-caution-color);
     border-color: var(--alert-caution-outline-color);
     color: var(--on-caution-color);
   }
 
-  &.type-isa-critical {
+  &.type-level-critical {
     background-color: var(--critical-enabled-background-color);
     border-color: var(--critical-enabled-border-color);
     color: var(--on-critical-color);
   }
 
-  &.type-isa-high {
+  &.type-level-high {
     background-color: var(--alert-alarm-color);
     border-color: var(--alert-alarm-outline-color);
     color: var(--on-alarm-color);
   }
 
-  &.type-isa-medium {
+  &.type-level-medium {
     background-color: var(--alert-warning-color);
     border-color: var(--alert-warning-outline-color);
     color: var(--on-warning-color);
   }
 
-  &.type-isa-diagnostic {
+  &.type-level-diagnostic {
     background-color: var(--notification-enabled-background-color);
     border-color: var(--notification-enabled-border-color);
     color: var(--on-notification-active-color);
@@ -173,31 +173,31 @@
       background: none;
     }
     .icon.type-caution,
-    .icon.type-isa-low {
+    .icon.type-level-low {
       color: unset;
       border-color: var(--alert-caution-outline-color);
       background: none;
     }
 
-    .icon.type-isa-critical {
+    .icon.type-level-critical {
       color: unset;
       border-color: var(--critical-enabled-border-color);
       background: none;
     }
 
-    .icon.type-isa-high {
+    .icon.type-level-high {
       color: unset;
       border-color: var(--alert-alarm-outline-color);
       background: none;
     }
 
-    .icon.type-isa-medium {
+    .icon.type-level-medium {
       color: unset;
       border-color: var(--alert-warning-outline-color);
       background: none;
     }
 
-    .icon.type-isa-diagnostic {
+    .icon.type-level-diagnostic {
       color: unset;
       border-color: var(--notification-enabled-border-color);
       background: none;

package/src/components/badge/badge.stories.ts

@@ -199,8 +199,8 @@ export const Caution: Story = {
   },
 };
 
-export const IsaCritical: Story = {
-  args: {type: BadgeType.isaCritical, showIcon: true},
+export const LevelCritical: Story = {
+  args: {type: BadgeType.levelCritical, showIcon: true},
   render(args) {
     return html`<obc-badge
       number=${args.number}
@@ -214,8 +214,8 @@ export const IsaCritical: Story = {
   },
 };
 
-export const IsaHigh: Story = {
-  args: {type: BadgeType.isaHigh, showIcon: true},
+export const LevelHigh: Story = {
+  args: {type: BadgeType.levelHigh, showIcon: true},
   render(args) {
     return html`<obc-badge
       number=${args.number}
@@ -229,8 +229,8 @@ export const IsaHigh: Story = {
   },
 };
 
-export const IsaMedium: Story = {
-  args: {type: BadgeType.isaMedium, showIcon: true},
+export const LevelMedium: Story = {
+  args: {type: BadgeType.levelMedium, showIcon: true},
   render(args) {
     return html`<obc-badge
       number=${args.number}
@@ -244,8 +244,8 @@ export const IsaMedium: Story = {
   },
 };
 
-export const IsaLow: Story = {
-  args: {type: BadgeType.isaLow, showIcon: true},
+export const LevelLow: Story = {
+  args: {type: BadgeType.levelLow, showIcon: true},
   render(args) {
     return html`<obc-badge
       number=${args.number}
@@ -259,8 +259,8 @@ export const IsaLow: Story = {
   },
 };
 
-export const IsaDiagnostic: Story = {
-  args: {type: BadgeType.isaDiagnostic, showIcon: true},
+export const LevelDiagnostic: Story = {
+  args: {type: BadgeType.levelDiagnostic, showIcon: true},
   render(args) {
     return html`<obc-badge
       number=${args.number}

package/src/components/badge/badge.ts

@@ -25,11 +25,11 @@ export enum BadgeSize {
  * - `alarm`: Indicates a critical or urgent state.
  * - `warning`: Indicates a warning or cautionary state.
  * - `caution`: Indicates a less severe caution.
- * - `isa-critical`: ISA highest-severity state (critical).
- * - `isa-high`: ISA high-severity state (alarm-equivalent styling).
- * - `isa-medium`: ISA medium-severity state (warning-equivalent styling).
- * - `isa-low`: ISA low-severity state (caution-equivalent styling).
- * - `isa-diagnostic`: ISA diagnostic/notification state.
+ * - `level-critical`: level highest-severity state (critical).
+ * - `level-high`: level high-severity state (alarm-equivalent styling).
+ * - `level-medium`: level medium-severity state (warning-equivalent styling).
+ * - `level-low`: level low-severity state (caution-equivalent styling).
+ * - `level-diagnostic`: level diagnostic/notification state.
  * - `running`: Indicates an active or running state.
  * - `notification`: Used for general notifications.
  * - `enhance`: Used for enhanced or secondary notifications.
@@ -42,11 +42,11 @@ export enum BadgeType {
   alarm = 'alarm',
   warning = 'warning',
   caution = 'caution',
-  isaCritical = 'isa-critical',
-  isaHigh = 'isa-high',
-  isaMedium = 'isa-medium',
-  isaLow = 'isa-low',
-  isaDiagnostic = 'isa-diagnostic',
+  levelCritical = 'level-critical',
+  levelHigh = 'level-high',
+  levelMedium = 'level-medium',
+  levelLow = 'level-low',
+  levelDiagnostic = 'level-diagnostic',
   running = 'running',
   notification = 'notification',
   enhance = 'enhance',
@@ -80,7 +80,7 @@ export enum BadgeVariant {
  *   - `alarm`: Highlights critical or urgent states.
  *   - `warning`: Indicates caution or warning.
  *   - `caution`: Used for less severe caution.
- *   - `isa-critical`, `isa-high`, `isa-medium`, `isa-low`, `isa-diagnostic`: ISA severity levels, styled to match their legacy equivalents (critical, alarm, warning, caution, notification).
+ *   - `level-critical`, `level-high`, `level-medium`, `level-low`, `level-diagnostic`: level severity levels, styled to match their legacy equivalents (critical, alarm, warning, caution, notification).
  *   - `running`: Represents active or running states.
  *   - `notification`: For general notifications.
  *   - `enhance`: For secondary notifications or emphasis.
@@ -170,7 +170,7 @@ export class ObcBadge extends LitElement {
   /**
    * Visual style/type of the badge.
    *
-   * Possible values: `regular`, `alarm`, `warning`, `caution`, `isa-critical`, `isa-high`, `isa-medium`, `isa-low`, `isa-diagnostic`, `running`, `notification`, `enhance`, `automation`, `outline`, `empty`.
+   * Possible values: `regular`, `alarm`, `warning`, `caution`, `level-critical`, `level-high`, `level-medium`, `level-low`, `level-diagnostic`, `running`, `notification`, `enhance`, `automation`, `outline`, `empty`.
    *
    * Defaults to `regular`.
    */
@@ -194,7 +194,7 @@ export class ObcBadge extends LitElement {
   /**
    * Whether to show an icon in the badge.
    *
-   * For built-in types (`alarm`, `warning`, `caution`, the `isa-*` severities, and `running`), a contextual icon is shown automatically.
+   * For built-in types (`alarm`, `warning`, `caution`, the `level-*` severities, and `running`), a contextual icon is shown automatically.
    * For other types, provide a custom icon in the `badge-icon` slot.
    */
   @property({type: Boolean}) showIcon = false;
@@ -244,7 +244,7 @@ export class ObcBadge extends LitElement {
             />
           </svg>
         `;
-      case BadgeType.isaHigh:
+      case BadgeType.levelHigh:
         return html`
           <svg width="100%" height="100%" viewBox="0 0 12 12" fill="none">
             <path
@@ -253,7 +253,7 @@ export class ObcBadge extends LitElement {
             />
           </svg>
         `;
-      case BadgeType.isaMedium:
+      case BadgeType.levelMedium:
         return html`
           <svg width="100%" height="100%" viewBox="0 0 12 12" fill="none">
             <circle
@@ -267,7 +267,7 @@ export class ObcBadge extends LitElement {
             />
           </svg>
         `;
-      case BadgeType.isaLow:
+      case BadgeType.levelLow:
         return html`
           <svg width="100%" height="100%" viewBox="0 0 12 12" fill="none">
             <path
@@ -279,7 +279,7 @@ export class ObcBadge extends LitElement {
             />
           </svg>
         `;
-      case BadgeType.isaCritical:
+      case BadgeType.levelCritical:
         return html`
           <svg width="100%" height="100%" viewBox="0 0 12 12" fill="none">
             <path
@@ -290,7 +290,7 @@ export class ObcBadge extends LitElement {
             />
           </svg>
         `;
-      case BadgeType.isaDiagnostic:
+      case BadgeType.levelDiagnostic:
         return html`
           <svg width="100%" height="100%" viewBox="0 0 12 12" fill="none">
             <path

package/src/components/navigation-item/navigation-item.ts

@@ -10,8 +10,8 @@ import '../tree-navigation-item/tree-navigation-item.js';
 import {
   TreeBranchType,
   TreeTerminalType,
+  type TreeNavigationItemAlerts,
 } from '../tree-navigation-item/tree-navigation-item.js';
-import {BadgeType} from '../badge/badge.js';
 
 enum NavigationItemRole {
   Button = 'button',
@@ -160,14 +160,12 @@ export class ObcNavigationItem extends LitElement {
    */
   @property({type: String}) terminalType: string = TreeTerminalType.regular;
 
-  /** Whether a trailing alert counter badge is shown (Tree variant only). */
-  @property({type: Boolean}) hasAlertBadge = false;
-
-  /** The number shown in the alert badge when `hasAlertBadge` is true (Tree variant only). */
-  @property({type: Number}) alertCount = 0;
-
-  /** The severity/type of the alert badge — one of the `obc-badge` types (Tree variant only). */
-  @property({type: String}) alertType: string = BadgeType.alarm;
+  /**
+   * Per-severity alert counts shown as trailing badge(s) (Tree variant only).
+   * Forwarded to the underlying `obc-tree-navigation-item`. See
+   * {@link TreeNavigationItemAlerts}.
+   */
+  @property({type: Object}) alerts?: TreeNavigationItemAlerts;
 
   @query('a') private anchorElement?: HTMLAnchorElement;
 
@@ -231,9 +229,7 @@ export class ObcNavigationItem extends LitElement {
           .hasLeadingIcon=${this.hasIcon}
           .href=${this.href}
           .terminalType=${this.terminalType}
-          ?hasAlertBadge=${this.hasAlertBadge}
-          .alertCount=${this.alertCount}
-          .alertType=${this.alertType}
+          .alerts=${this.alerts}
           @click=${this.onClick}
         >
           ${this.hasIcon

package/src/components/navigation-item-group/navigation-item-group.ts

@@ -8,8 +8,8 @@ import '../tree-navigation-item/tree-navigation-item.js';
 import {
   TreeBranchType,
   TreeTerminalType,
+  type TreeNavigationItemAlerts,
 } from '../tree-navigation-item/tree-navigation-item.js';
-import {BadgeType} from '../badge/badge.js';
 
 /**
  * `<obc-navigation-item-group>` – A collapsible navigation group component for organizing related navigation items under a single expandable label.
@@ -108,14 +108,13 @@ export class ObcNavigationItemGroup extends LitElement {
    */
   @property({type: String}) terminalType: string = TreeTerminalType.regular;
 
-  /** Whether a trailing alert counter badge is shown on the header (Tree variant only). */
-  @property({type: Boolean}) hasAlertBadge = false;
-
-  /** The number shown in the header's alert badge when `hasAlertBadge` is true (Tree variant only). */
-  @property({type: Number}) alertCount = 0;
-
-  /** The severity/type of the header's alert badge — one of the `obc-badge` types (Tree variant only). */
-  @property({type: String}) alertType: string = BadgeType.alarm;
+  /**
+   * Per-severity alert counts shown as trailing badge(s) on the group header
+   * (Tree variant only). Forwarded to the underlying `obc-tree-navigation-item`;
+   * typically `{aggregate: true, ...}` so the header totals the rows beneath it.
+   * See {@link TreeNavigationItemAlerts}.
+   */
+  @property({type: Object}) alerts?: TreeNavigationItemAlerts;
 
   /** Whether the group starts expanded. Useful for trees that open by default. */
   @property({type: Boolean}) defaultOpen = false;
@@ -178,9 +177,7 @@ export class ObcNavigationItemGroup extends LitElement {
           ?checked=${this.checked}
           .hasLeadingIcon=${this.hasIcon}
           .terminalType=${this.terminalType}
-          ?hasAlertBadge=${this.hasAlertBadge}
-          .alertCount=${this.alertCount}
-          .alertType=${this.alertType}
+          .alerts=${this.expanded ? undefined : this.alerts}
           @expand-toggle=${this.onClickGroup}
         >
           ${this.hasIcon

package/src/components/navigation-menu/navigation-menu.stories.ts

@@ -268,6 +268,13 @@ export const Tree: Story = {
           label="Vessel"
           hasIcon
           defaultOpen
+          .alerts=${{
+            aggregate: true,
+            countLevelCritical: 1,
+            countLevelHigh: 1,
+            countLevelMedium: 2,
+            countLevelLow: 1,
+          }}
         >
           <obi-placeholder slot="icon"></obi-placeholder>
           <obc-navigation-item-group
@@ -275,26 +282,47 @@ export const Tree: Story = {
             hasIcon
             defaultOpen
             terminalType="aggregated-header"
+            .alerts=${{
+              aggregate: true,
+              countLevelCritical: 1,
+              countLevelHigh: 1,
+            }}
           >
             <obi-placeholder slot="icon"></obi-placeholder>
-            <obc-navigation-item label="Main engine" hasIcon checked>
+            <obc-navigation-item
+              label="Main engine"
+              hasIcon
+              checked
+              .alerts=${{countLevelHigh: 1}}
+            >
               <obi-placeholder slot="icon"></obi-placeholder>
             </obc-navigation-item>
             <obc-navigation-item
               label="Cooling system"
               hasIcon
-              hasAlertBadge
-              .alertCount=${3}
+              .alerts=${{countLevelCritical: 1}}
             >
               <obi-placeholder slot="icon"></obi-placeholder>
             </obc-navigation-item>
           </obc-navigation-item-group>
-          <obc-navigation-item-group label="Bridge" hasIcon>
+          <obc-navigation-item-group
+            label="Bridge"
+            hasIcon
+            .alerts=${{aggregate: true, countLevelMedium: 2, countLevelLow: 1}}
+          >
             <obi-placeholder slot="icon"></obi-placeholder>
-            <obc-navigation-item label="Radar" hasIcon>
+            <obc-navigation-item
+              label="Radar"
+              hasIcon
+              .alerts=${{countLevelMedium: 2}}
+            >
               <obi-placeholder slot="icon"></obi-placeholder>
             </obc-navigation-item>
-            <obc-navigation-item label="Autopilot" hasIcon>
+            <obc-navigation-item
+              label="Autopilot"
+              hasIcon
+              .alerts=${{countLevelLow: 1}}
+            >
               <obi-placeholder slot="icon"></obi-placeholder>
             </obc-navigation-item>
           </obc-navigation-item-group>

package/src/components/navigation-menu/navigation-menu.ts

@@ -77,8 +77,8 @@ export enum ObcNavigationMenuFlyoutVariant {
  *   - **Tree:** Renders the same `obc-navigation-item` / `obc-navigation-item-group`
  *     markup as a hierarchical tree. Groups expand inline (instead of as flyouts),
  *     rows are indented by depth, multiple branches can stay open at once, and the
- *     tree-row presentation (alert badge, terminal marker) is available via the
- *     items' `hasAlertBadge`/`alertCount`/`alertType`/`terminalType` properties.
+ *     tree-row presentation (alert badges, terminal marker) is available via the
+ *     items' `alerts`/`terminalType` properties.
  * - **Responsive Layout:**
  *   - `smallScreen` property adapts the footer and logo layout for smaller viewports.
  * - **Slot-based Content:**

package/src/components/tree-navigation/tree-navigation.stories.ts

@@ -4,8 +4,9 @@ import './tree-navigation.js';
 import '../tree-navigation-group/tree-navigation-group.js';
 import '../tree-navigation-item/tree-navigation-item.js';
 import {TreeTerminalType} from '../tree-navigation-item/tree-navigation-item.js';
+import type {TreeNavigationItemAlerts} from '../tree-navigation-item/tree-navigation-item.js';
 import {iconIdToIconHtml} from '../../storybook-util.js';
-import {LitElement, html} from 'lit';
+import {LitElement, html, type TemplateResult} from 'lit';
 import {state} from 'lit/decorators.js';
 import {customElement} from '../../decorator.js';
 
@@ -21,22 +22,30 @@ const meta: Meta<typeof ObcTreeNavigation> = {
   component: 'obc-tree-navigation',
   render: () => html`
     <obc-tree-navigation>
-      <obc-tree-navigation-group label="Vessel" expanded>
+      <obc-tree-navigation-group
+        label="Vessel"
+        .alerts=${{aggregate: true, countLevelHigh: 3}}
+        expanded
+      >
         ${iconIdToIconHtml('placeholder', {slot: 'icon'})}
         <obc-tree-navigation-group
           label="Engine room"
           expanded
+          .alerts=${{aggregate: true, countLevelHigh: 3}}
           .terminalType=${TreeTerminalType.aggregatedHeader}
         >
           ${iconIdToIconHtml('placeholder', {slot: 'icon'})}
-          <obc-tree-navigation-item label="Main engine" checked>
+          <obc-tree-navigation-item
+            label="Main engine"
+            checked
+            .alerts=${{countLevelHigh: 1}}
+          >
             ${iconIdToIconHtml('placeholder', {slot: 'icon'})}
           </obc-tree-navigation-item>
           <obc-tree-navigation-group
             label="Auxiliary engine"
             expanded
-            hasAlertBadge
-            .alertCount=${3}
+            .alerts=${{aggregate: true, countLevelHigh: 1}}
           >
             ${iconIdToIconHtml('placeholder', {slot: 'icon'})}
             <obc-tree-navigation-item label="Fuel pump">
@@ -44,8 +53,7 @@ const meta: Meta<typeof ObcTreeNavigation> = {
             </obc-tree-navigation-item>
             <obc-tree-navigation-item
               label="Starter"
-              hasAlertBadge
-              .alertCount=${1}
+              .alerts=${{countLevelHigh: 1}}
             >
               ${iconIdToIconHtml('placeholder', {slot: 'icon'})}
             </obc-tree-navigation-item>
@@ -53,9 +61,16 @@ const meta: Meta<typeof ObcTreeNavigation> = {
               ${iconIdToIconHtml('placeholder', {slot: 'icon'})}
             </obc-tree-navigation-item>
           </obc-tree-navigation-group>
-          <obc-tree-navigation-group label="Cooling system" expanded>
+          <obc-tree-navigation-group
+            label="Cooling system"
+            expanded
+            .alerts=${{aggregate: true, countLevelHigh: 1}}
+          >
             ${iconIdToIconHtml('placeholder', {slot: 'icon'})}
-            <obc-tree-navigation-item label="Seawater pump">
+            <obc-tree-navigation-item
+              label="Seawater pump"
+              .alerts=${{countLevelHigh: 1}}
+            >
               ${iconIdToIconHtml('placeholder', {slot: 'icon'})}
             </obc-tree-navigation-item>
           </obc-tree-navigation-group>
@@ -160,3 +175,133 @@ export const Interactive: Story = {
   render: () =>
     html`<tree-navigation-selection-demo></tree-navigation-selection-demo>`,
 };
+
+/** The `alerts` count fields summed across a subtree, most to least severe. */
+const COUNT_KEYS = [
+  'countLevelCritical',
+  'countLevelHigh',
+  'countLevelMedium',
+  'countLevelLow',
+  'countLevelDiagnostic',
+] as const satisfies ReadonlyArray<keyof TreeNavigationItemAlerts>;
+
+/** A node in the alert-demo tree: a leaf carries its own counts; a group has children. */
+interface AlertNode {
+  label: string;
+  /** Per-severity counts for a leaf row. */
+  alerts?: TreeNavigationItemAlerts;
+  /** Child rows; presence makes this node a group. */
+  children?: AlertNode[];
+}
+
+/**
+ * Level severities spread across leaves at several depths. The whole tree totals
+ * 1 critical, 3 high, 10 medium, 5 low, and 0 diagnostic, so the rolled-up group
+ * totals are easy to verify by eye.
+ */
+const ALERT_TREE: AlertNode = {
+  label: 'Vessel',
+  children: [
+    {
+      label: 'Engine room',
+      children: [
+        {label: 'Main engine', alerts: {countLevelHigh: 1}},
+        {
+          label: 'Auxiliary engine',
+          children: [
+            {label: 'Fuel pump', alerts: {countLevelMedium: 4}},
+            {
+              label: 'Starter',
+              alerts: {countLevelCritical: 1, countLevelLow: 2},
+            },
+            {label: 'Oil filter', alerts: {countLevelMedium: 2}},
+          ],
+        },
+        {
+          label: 'Cooling system',
+          children: [
+            {
+              label: 'Seawater pump',
+              alerts: {countLevelHigh: 1, countLevelMedium: 3},
+            },
+          ],
+        },
+      ],
+    },
+    {
+      label: 'Bridge',
+      children: [
+        {label: 'Radar', alerts: {countLevelHigh: 1, countLevelLow: 3}},
+        {label: 'Autopilot'},
+      ],
+    },
+    {label: 'Deck', alerts: {countLevelMedium: 1}},
+  ],
+};
+
+/** Sum every descendant leaf's counts, per severity, for a group header. */
+function sumAlerts(node: AlertNode): TreeNavigationItemAlerts {
+  if (!node.children) return node.alerts ?? {};
+  const total: TreeNavigationItemAlerts = {};
+  for (const child of node.children) {
+    const childTotal = sumAlerts(child);
+    for (const key of COUNT_KEYS) {
+      const value = childTotal[key];
+      if (value) total[key] = (total[key] ?? 0) + value;
+    }
+  }
+  return total;
+}
+
+/**
+ * Render a node with every row using the given `aggregate` setting. Group rows
+ * carry the summed counts of their whole subtree; leaf rows carry their own
+ * counts. With `aggregate` true each row collapses to a single total badge;
+ * with it false each row shows one badge per non-zero severity.
+ */
+function renderAlertNode(node: AlertNode, aggregate: boolean): TemplateResult {
+  if (node.children) {
+    const alerts: TreeNavigationItemAlerts = {aggregate, ...sumAlerts(node)};
+    return html`<obc-tree-navigation-group
+      label=${node.label}
+      expanded
+      .alerts=${alerts}
+    >
+      ${iconIdToIconHtml('placeholder', {slot: 'icon'})}
+      ${node.children.map((child) => renderAlertNode(child, aggregate))}
+    </obc-tree-navigation-group>`;
+  }
+  const alerts = node.alerts ? {aggregate, ...node.alerts} : undefined;
+  return html`<obc-tree-navigation-item label=${node.label} .alerts=${alerts}>
+    ${iconIdToIconHtml('placeholder', {slot: 'icon'})}
+  </obc-tree-navigation-item>`;
+}
+
+/**
+ * Alerts spread across leaves at several depths, every row with
+ * `aggregate: true`. Each group header carries a single badge whose number is
+ * the sum of all alerts beneath it (child groups roll up into their parent in
+ * turn), styled as the most severe category present — e.g. "Auxiliary engine"
+ * totals 9 (1 critical + 6 medium + 2 low) and shows as critical, and "Vessel"
+ * totals 19 (1 critical + 3 high + 10 medium + 5 low) and also shows as critical.
+ */
+export const AggregatedAlertCounts: Story = {
+  render: () =>
+    html`<obc-tree-navigation>
+      ${renderAlertNode(ALERT_TREE, true)}
+    </obc-tree-navigation>`,
+};
+
+/**
+ * The same tree and the same rolled-up totals, but every row with
+ * `aggregate: false`: each row renders one badge per non-zero severity instead
+ * of a single combined badge. Group headers still sum their whole subtree —
+ * e.g. "Auxiliary engine" shows separate critical (1), medium (6), and
+ * low (2) badges.
+ */
+export const PerSeverityAlertCounts: Story = {
+  render: () =>
+    html`<obc-tree-navigation>
+      ${renderAlertNode(ALERT_TREE, false)}
+    </obc-tree-navigation>`,
+};