@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.57 → 2.0.0-next.59

package/src/components/alert-icon/alert-icon.stories.ts

@@ -97,3 +97,44 @@ export const AlarmOutline: Story = {
     outline: true,
   },
 };
+
+export const IsaCritical: Story = {
+  args: {
+    type: AlertType.IsaCritical,
+    acknowledged: false,
+    active: true,
+    outline: true,
+  },
+};
+
+export const IsaHigh: Story = {
+  args: {
+    type: AlertType.IsaHigh,
+    acknowledged: false,
+    active: true,
+  },
+};
+
+export const IsaMedium: Story = {
+  args: {
+    type: AlertType.IsaMedium,
+    acknowledged: false,
+    active: true,
+  },
+};
+
+export const IsaLow: Story = {
+  args: {
+    type: AlertType.IsaLow,
+    acknowledged: false,
+    active: true,
+  },
+};
+
+export const IsaDiagnostic: Story = {
+  args: {
+    type: AlertType.IsaDiagnostic,
+    acknowledged: false,
+    active: true,
+  },
+};

package/src/components/alert-icon/alert-icon.ts

@@ -1,4 +1,4 @@
-import {LitElement, html, css, TemplateResult} from 'lit';
+import {LitElement, html, css, TemplateResult, nothing} from 'lit';
 import {property} from 'lit/decorators.js';
 import {classMap} from 'lit/directives/class-map.js';
 import {alarmRectifiedA} from './icons/icon-alarm-rectified.js';
@@ -13,9 +13,19 @@ import {warningUnackA, warningUnackB} from './icons/icon-warning-unack.js';
 import '../../icons/icon-caution-color-iec.js';
 import {customElement} from '../../decorator.js';
 import {AlertType} from '../../types.js';
+import {
+  getAlertBadgeComponent,
+  AlertBadgeComponent,
+  getAlertBlinkMode,
+  getBamAlertTypeForBlinking,
+  supportsBlinking,
+} from '../../alert-severity.js';
 import '../../icons/icon-alarm-badge-outline.js';
 import '../../icons/icon-warning-badge-outline.js';
 import '../../icons/icon-caution-badge-outline.js';
+import '../alert-frame/critical-badge.js';
+import '../alert-frame/diagnostic-badge.js';
+import {criticalA, criticalB} from './icons/icon-critical.js';
 
 enum AlertIconName {
   AlarmSilenced = 'alarm-silenced',
@@ -24,6 +34,7 @@ enum AlertIconName {
   WarningUnack = 'warning-unack',
   WarningRectified = 'warning-rectified',
   WarningSilenced = 'warning-silenced',
+  Critical = 'critical',
 }
 
 const mapping = {
@@ -51,6 +62,10 @@ const mapping = {
     a: warningSilencedA,
     b: warningSilencedB,
   },
+  [AlertIconName.Critical]: {
+    a: criticalA,
+    b: criticalB,
+  },
 };
 /**
  * `obc-alert-icon` – Animated alert icon for signaling alarm and warning states.
@@ -92,8 +107,14 @@ export class ObcAlertIcon extends LitElement {
   @property({type: Boolean}) active!: boolean;
   @property({type: Boolean}) outline!: boolean;
 
+  private get bamType(): AlertType {
+    return getBamAlertTypeForBlinking(this.type);
+  }
+
   get icon() {
-    if (this.type === AlertType.Alarm) {
+    if (this.type === AlertType.IsaCritical) {
+      return mapping[AlertIconName.Critical];
+    } else if (this.bamType === AlertType.Alarm) {
       if (this.active === false) {
         return mapping[AlertIconName.AlarmRectified];
       } else if (this.acknowledged) {
@@ -101,7 +122,7 @@ export class ObcAlertIcon extends LitElement {
       } else {
         return mapping[AlertIconName.AlarmUnack];
       }
-    } else {
+    } else if (this.bamType === AlertType.Warning) {
       if (this.active === false) {
         return mapping[AlertIconName.WarningRectified];
       } else if (this.acknowledged) {
@@ -110,45 +131,65 @@ export class ObcAlertIcon extends LitElement {
         return mapping[AlertIconName.WarningUnack];
       }
     }
+
+    return null;
+  }
+
+  private renderOutlineIcon(): TemplateResult {
+    switch (getAlertBadgeComponent(this.type)) {
+      case AlertBadgeComponent.Critical:
+        return html`<obi-critical-badge></obi-critical-badge>`;
+      case AlertBadgeComponent.Warning:
+        return html`<obi-warning-badge-outline></obi-warning-badge-outline>`;
+      case AlertBadgeComponent.Caution:
+        return html`<obi-caution-badge-outline></obi-caution-badge-outline>`;
+      case AlertBadgeComponent.Diagnostic:
+        return html`<obi-diagnostic-badge
+          style="color: var(--alert-diagnostic-color);"
+        ></obi-diagnostic-badge>`;
+      default:
+        return html`<obi-alarm-badge-outline></obi-alarm-badge-outline>`;
+    }
+  }
+
+  private renderStaticIcon(): TemplateResult | typeof nothing {
+    if (this.type === AlertType.Caution || this.type === AlertType.IsaLow) {
+      return html`<obi-caution-color-iec usecsscolor></obi-caution-color-iec>`;
+    }
+    if (this.type === AlertType.IsaDiagnostic) {
+      return html`<obi-diagnostic-badge
+        style="color: var(--alert-diagnostic-color);"
+      ></obi-diagnostic-badge>`;
+    }
+    return nothing;
   }
 
   override render() {
     if (!this.type) {
       return html`<div>No alarm</div>`;
     }
-    let icon: TemplateResult | undefined;
     if (this.outline) {
-      switch (this.type) {
-        case AlertType.Alarm:
-          icon = html`<obi-alarm-badge-outline></obi-alarm-badge-outline>`;
-          break;
-        case AlertType.Warning:
-          icon = html`<obi-warning-badge-outline></obi-warning-badge-outline>`;
-          break;
-        case AlertType.Caution:
-          icon = html`<obi-caution-badge-outline></obi-caution-badge-outline>`;
-          break;
-      }
-    } else if (this.type === AlertType.Caution) {
-      icon = html`<obi-caution-color-iec usecsscolor></obi-caution-color-iec>`;
-    } else if ([AlertType.Alarm, AlertType.Warning].includes(this.type)) {
+      return html`<div class="wrapper">${this.renderOutlineIcon()}</div>`;
+    }
+    if (supportsBlinking(this.type) && !(this.type === AlertType.IsaLow)) {
       const icons = this.icon;
-      const isWarning = this.type === AlertType.Warning;
+      if (!icons) {
+        throw new Error('No icon found');
+      }
+      const blinkMode = getAlertBlinkMode(this.type);
       return html`
         <div
           class=${classMap({
             wrapper: true,
-            warning: isWarning,
+            [`blink-${blinkMode}`]: true,
           })}
         >
           <span class="a">${icons.a}</span>
           <span class="b">${icons.b}</span>
         </div>
       `;
-    } else {
-      return html`<div>No alarm</div>`;
     }
-    return html`<div class="wrapper">${icon}</div>`;
+    return html`<div class="wrapper">${this.renderStaticIcon()}</div>`;
   }
 
   static override styles = css`
@@ -156,33 +197,55 @@ export class ObcAlertIcon extends LitElement {
       height: 100%;
       width: 100%;
       position: relative;
-    }
-    .wrapper svg {
-      height: 100%;
-      width: 100%;
-      position: absolute;
-      top: 0;
-      left: 0;
-    }
 
-    :not(.warning) {
-      .a {
+      obi-diagnostic-badge,
+      obi-critical-badge {
+        display: block;
+        height: 100%;
+        width: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
+
+      svg {
+        height: 100%;
+        width: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
+      &.blink-alarm .a {
         opacity: var(--alarm-blink-on);
       }
 
-      .b {
+      &.blink-alarm .b {
         opacity: var(--alarm-blink-off);
       }
-    }
 
-    .warning {
-      .a {
+      &.blink-critical .a {
+        opacity: var(--critical-blink-on);
+      }
+
+      &.blink-critical .b {
+        opacity: var(--critical-blink-off);
+      }
+
+      &.blink-warning .a {
         opacity: var(--warning-blink-on);
       }
 
-      .b {
+      &.blink-warning .b {
         opacity: var(--warning-blink-off);
       }
+
+      &.blink-low .a {
+        opacity: var(--low-blink-on);
+      }
+
+      &.blink-low .b {
+        opacity: var(--low-blink-off);
+      }
     }
   `;
 }

package/src/components/alert-icon/icons/icon-critical.ts

@@ -0,0 +1,23 @@
+import {svg} from 'lit';
+
+export const criticalA = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M 22,12 
+           L 17,20.66 
+           L 7,20.66 
+           L 2,12 
+           L 7,3.34 
+           L 17,3.34 
+           Z" 
+        fill="var(--alert-critical-color)" stroke="var(--alert-critical-outline-color)" />
+</svg>`;
+
+export const criticalB = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M 22,12 
+           L 17,20.66 
+           L 7,20.66 
+           L 2,12 
+           L 7,3.34 
+           L 17,3.34 
+           Z" 
+        fill="none" stroke="var(--element-active-color)" />
+</svg>`;

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

@@ -187,3 +187,70 @@ export const OneItem: Story = {
     </obc-alert-list-details>`;
   },
 };
+
+export const IsaCategories: Story = {
+  args: {
+    alerts: [
+      {
+        id: 'isa-1',
+        tagId: 'CRIT-01',
+        source: 'PCS',
+        text: 'Emergency shutdown condition detected',
+        acknowledged: false,
+        active: true,
+        type: AlertType.IsaCritical,
+        time: new Date('2024-01-15T14:32:15Z'),
+      },
+      {
+        id: 'isa-2',
+        tagId: 'HIGH-02',
+        source: 'ME 1',
+        text: 'Main engine overspeed',
+        acknowledged: false,
+        active: true,
+        type: AlertType.IsaHigh,
+        time: new Date('2024-01-15T14:30:00Z'),
+      },
+      {
+        id: 'isa-3',
+        tagId: 'MED-03',
+        source: 'Tank 1',
+        text: 'Tank level approaching high limit',
+        acknowledged: false,
+        active: true,
+        type: AlertType.IsaMedium,
+        time: new Date('2024-01-15T14:28:00Z'),
+      },
+      {
+        id: 'isa-4',
+        tagId: 'LOW-04',
+        source: 'HVAC',
+        text: 'Filter maintenance due',
+        acknowledged: false,
+        active: true,
+        type: AlertType.IsaLow,
+        time: new Date('2024-01-15T14:25:00Z'),
+      },
+      {
+        id: 'isa-5',
+        tagId: 'DIAG-05',
+        source: 'Network',
+        text: 'Redundant link diagnostic message',
+        acknowledged: false,
+        active: true,
+        type: AlertType.IsaDiagnostic,
+        time: new Date('2024-01-15T14:20:00Z'),
+      },
+    ],
+  },
+  render: (args) => {
+    return html` <obc-alert-list-details
+      @ack-click=${handleAck}
+      .selectedMode=${args.selectedMode}
+      .alerts=${args.alerts}
+      .showTime=${args.showTime}
+      style="height: 100vh; display: block;"
+    >
+    </obc-alert-list-details>`;
+  },
+};

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

@@ -16,13 +16,17 @@ import '../../icons/icon-warning-noack-iec.js';
 import '../alert-icon/alert-icon.js';
 import {
   Alert,
-  AlertType,
   comparePriorityAlerts,
   isActive,
   isAcknowledged,
   isBlocked,
   isShelved,
 } from '../../types.js';
+import {
+  excludedFromUnackedFilter,
+  requiresAcknowledgement,
+  usesAlarmNoAckIcon,
+} from '../../alert-severity.js';
 import {
   ObcTable,
   ObcTableCellClickEvent,
@@ -68,7 +72,7 @@ export function getAlertListModeData(selectedMode: AlertListMode) {
       filter: (alert: Alert) =>
         !isAcknowledged(alert) &&
         isActive(alert) &&
-        alert.type !== AlertType.Caution &&
+        !excludedFromUnackedFilter(alert.type) &&
         !isShelved(alert),
     };
   else if (selectedMode === AlertListMode.SHELVED)
@@ -102,7 +106,7 @@ export function canAckFilter(filter: (alert: Alert) => boolean) {
   return (alert: Alert) =>
     !isAcknowledged(alert) &&
     !alert.noAck &&
-    alert.type !== AlertType.Caution &&
+    !excludedFromUnackedFilter(alert.type) &&
     filter(alert);
 }
 
@@ -254,15 +258,12 @@ export class ObcAlertListDetails extends LitElement {
       if (
         !isAcknowledged(alert) &&
         isActive(alert) &&
-        [AlertType.Alarm, AlertType.Warning].includes(alert.type)
+        requiresAcknowledgement(alert.type)
       ) {
         if (alert.noAck) {
-          const icon =
-            alert.type === AlertType.Alarm
-              ? html`<obi-alarm-noack-iec usecsscolor></obi-alarm-noack-iec>`
-              : html`<obi-warning-noack-iec
-                  usecsscolor
-                ></obi-warning-noack-iec>`;
+          const icon = usesAlarmNoAckIcon(alert.type)
+            ? html`<obi-alarm-noack-iec usecsscolor></obi-alarm-noack-iec>`
+            : html`<obi-warning-noack-iec usecsscolor></obi-warning-noack-iec>`;
           action = {
             type: ObcTableCellType.Regular,
             largeIcon: true,

package/src/components/badge/badge.css

@@ -91,12 +91,37 @@
     color: var(--on-warning-color);
   }
 
-  &.type-caution {
+  &.type-caution,
+  &.type-isa-low {
     background-color: var(--alert-caution-color);
     border-color: var(--alert-caution-outline-color);
     color: var(--on-caution-color);
   }
 
+  &.type-isa-critical {
+    background-color: var(--critical-enabled-background-color);
+    border-color: var(--critical-enabled-border-color);
+    color: var(--on-critical-color);
+  }
+
+  &.type-isa-high {
+    background-color: var(--alert-alarm-color);
+    border-color: var(--alert-alarm-outline-color);
+    color: var(--on-alarm-color);
+  }
+
+  &.type-isa-medium {
+    background-color: var(--alert-warning-color);
+    border-color: var(--alert-warning-outline-color);
+    color: var(--on-warning-color);
+  }
+
+  &.type-isa-diagnostic {
+    background-color: var(--notification-enabled-background-color);
+    border-color: var(--notification-enabled-border-color);
+    color: var(--on-notification-active-color);
+  }
+
   &.type-running {
     background-color: var(--alert-running-color);
     border-color: var(--alert-running-color);
@@ -147,12 +172,37 @@
       border-color: var(--alert-warning-outline-color);
       background: none;
     }
-    .icon.type-caution {
+    .icon.type-caution,
+    .icon.type-isa-low {
       color: unset;
       border-color: var(--alert-caution-outline-color);
       background: none;
     }
 
+    .icon.type-isa-critical {
+      color: unset;
+      border-color: var(--critical-enabled-border-color);
+      background: none;
+    }
+
+    .icon.type-isa-high {
+      color: unset;
+      border-color: var(--alert-alarm-outline-color);
+      background: none;
+    }
+
+    .icon.type-isa-medium {
+      color: unset;
+      border-color: var(--alert-warning-outline-color);
+      background: none;
+    }
+
+    .icon.type-isa-diagnostic {
+      color: unset;
+      border-color: var(--notification-enabled-border-color);
+      background: none;
+    }
+
     .icon.type-regular {
       color: unset;
       border-color: var(--normal-enabled-border-color);

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

@@ -199,6 +199,81 @@ export const Caution: Story = {
   },
 };
 
+export const IsaCritical: Story = {
+  args: {type: BadgeType.isaCritical, showIcon: true},
+  render(args) {
+    return html`<obc-badge
+      number=${args.number}
+      size=${args.size}
+      type=${args.type}
+      variant=${args.variant}
+      .showNumber=${args.showNumber}
+      ?showIcon=${args.showIcon}
+    >
+    </obc-badge>`;
+  },
+};
+
+export const IsaHigh: Story = {
+  args: {type: BadgeType.isaHigh, showIcon: true},
+  render(args) {
+    return html`<obc-badge
+      number=${args.number}
+      size=${args.size}
+      type=${args.type}
+      variant=${args.variant}
+      .showNumber=${args.showNumber}
+      ?showIcon=${args.showIcon}
+    >
+    </obc-badge>`;
+  },
+};
+
+export const IsaMedium: Story = {
+  args: {type: BadgeType.isaMedium, showIcon: true},
+  render(args) {
+    return html`<obc-badge
+      number=${args.number}
+      size=${args.size}
+      type=${args.type}
+      variant=${args.variant}
+      .showNumber=${args.showNumber}
+      ?showIcon=${args.showIcon}
+    >
+    </obc-badge>`;
+  },
+};
+
+export const IsaLow: Story = {
+  args: {type: BadgeType.isaLow, showIcon: true},
+  render(args) {
+    return html`<obc-badge
+      number=${args.number}
+      size=${args.size}
+      type=${args.type}
+      variant=${args.variant}
+      .showNumber=${args.showNumber}
+      ?showIcon=${args.showIcon}
+    >
+    </obc-badge>`;
+  },
+};
+
+export const IsaDiagnostic: Story = {
+  args: {type: BadgeType.isaDiagnostic, showIcon: true},
+  render(args) {
+    return html`<obc-badge
+      number=${args.number}
+      size=${args.size}
+      type=${args.type}
+      variant=${args.variant}
+      .showNumber=${args.showNumber}
+      ?showIcon=${args.showIcon}
+    >
+    </obc-badge>`;
+  },
+};
+
 export const Running: Story = {
   args: {type: BadgeType.running, showIcon: true},
   render(args) {

package/src/components/badge/badge.ts

@@ -25,6 +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.
  * - `running`: Indicates an active or running state.
  * - `notification`: Used for general notifications.
  * - `enhance`: Used for enhanced or secondary notifications.
@@ -37,6 +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',
   running = 'running',
   notification = 'notification',
   enhance = 'enhance',
@@ -70,6 +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).
  *   - `running`: Represents active or running states.
  *   - `notification`: For general notifications.
  *   - `enhance`: For secondary notifications or emphasis.
@@ -159,7 +170,7 @@ export class ObcBadge extends LitElement {
   /**
    * Visual style/type of the badge.
    *
-   * Possible values: `regular`, `alarm`, `warning`, `caution`, `running`, `notification`, `enhance`, `automation`, `outline`, `empty`.
+   * Possible values: `regular`, `alarm`, `warning`, `caution`, `isa-critical`, `isa-high`, `isa-medium`, `isa-low`, `isa-diagnostic`, `running`, `notification`, `enhance`, `automation`, `outline`, `empty`.
    *
    * Defaults to `regular`.
    */
@@ -183,7 +194,7 @@ export class ObcBadge extends LitElement {
   /**
    * Whether to show an icon in the badge.
    *
-   * For built-in types (`alarm`, `warning`, `caution`, `running`), a contextual icon is shown automatically.
+   * For built-in types (`alarm`, `warning`, `caution`, the `isa-*` 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;
@@ -233,6 +244,63 @@ export class ObcBadge extends LitElement {
             />
           </svg>
         `;
+      case BadgeType.isaHigh:
+        return html`
+          <svg width="100%" height="100%" viewBox="0 0 12 12" fill="none">
+            <path
+              d="M5.29694 1.72622L1.05702 9.32693C0.838739 9.71823 0.729598 9.91388 0.748108 10.0741C0.764257 10.2138 0.83853 10.3403 0.952704 10.4225C1.08357 10.5167 1.3076 10.5167 1.75567 10.5167H10.233C10.6809 10.5167 10.9049 10.5167 11.0357 10.4225C11.1499 10.3403 11.2242 10.2139 11.2404 10.0741C11.2589 9.914 11.1498 9.71837 10.9317 9.3271L6.69433 1.7264C6.46616 1.31712 6.35207 1.11247 6.20181 1.04447C6.07082 0.985194 5.92064 0.985175 5.78964 1.04442C5.63936 1.11238 5.52522 1.317 5.29694 1.72622Z"
+              fill=${isFlat ? 'var(--alert-alarm-color)' : 'currentColor'}
+            />
+          </svg>
+        `;
+      case BadgeType.isaMedium:
+        return html`
+          <svg width="100%" height="100%" viewBox="0 0 12 12" fill="none">
+            <circle
+              cx="6"
+              cy="6"
+              r="4.5"
+              fill=${isFlat ? 'var(--alert-warning-color)' : 'currentColor'}
+              stroke=${isFlat
+                ? 'var(--alert-warning-outline-color)'
+                : 'currentColor'}
+            />
+          </svg>
+        `;
+      case BadgeType.isaLow:
+        return html`
+          <svg width="100%" height="100%" viewBox="0 0 12 12" fill="none">
+            <path
+              d="M2.2998 2H9.7002C9.848 2 9.92907 2.00015 9.9873 2.00488C9.98955 2.00507 9.99213 2.0047 9.99414 2.00488C9.99436 2.0072 9.9949 2.01006 9.99512 2.0127C9.99985 2.07093 10 2.152 10 2.2998V9.7002C10 9.848 9.99985 9.92907 9.99512 9.9873C9.99493 9.98958 9.99433 9.9921 9.99414 9.99414C9.9921 9.99433 9.98958 9.99493 9.9873 9.99512C9.92907 9.99985 9.848 10 9.7002 10H2.2998C2.152 10 2.07093 9.99985 2.0127 9.99512C2.01006 9.9949 2.0072 9.99436 2.00488 9.99414C2.0047 9.99213 2.00507 9.98955 2.00488 9.9873C2.00015 9.92907 2 9.848 2 9.7002V2.2998L2.00488 2.0127C2.0051 2.01009 2.00467 2.00718 2.00488 2.00488C2.00718 2.00467 2.01009 2.0051 2.0127 2.00488L2.2998 2Z"
+              fill=${isFlat ? 'var(--alert-caution-color)' : 'currentColor'}
+              stroke=${isFlat
+                ? 'var(--alert-caution-outline-color)'
+                : 'currentColor'}
+            />
+          </svg>
+        `;
+      case BadgeType.isaCritical:
+        return html`
+          <svg width="100%" height="100%" viewBox="0 0 12 12" fill="none">
+            <path
+              d="M11 6L8.5 10.33H3.5L1 6L3.5 1.67H8.5L11 6Z"
+              fill=${isFlat
+                ? 'var(--critical-enabled-background-color)'
+                : 'currentColor'}
+            />
+          </svg>
+        `;
+      case BadgeType.isaDiagnostic:
+        return html`
+          <svg width="100%" height="100%" viewBox="0 0 12 12" fill="none">
+            <path
+              d="M5.25 1H6.75V5.7L9.955 3.85L10.705 5.15L7.5 7L10.705 8.85L9.955 10.15L6.75 8.3V11H5.25V8.3L2.045 10.15L1.295 8.85L4.5 7L1.295 5.15L2.045 3.85L5.25 5.7V1Z"
+              fill=${isFlat
+                ? 'var(--notification-enabled-background-color)'
+                : 'currentColor'}
+            />
+          </svg>
+        `;
       case BadgeType.running:
         return html`
           <svg width="100%" height="100%" viewBox="0 0 12 12" fill="none">