@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.58 → 2.0.0-next.60

package/src/ar/building-blocks/poi-header/poi-header.css

@@ -31,26 +31,44 @@
   border: 1px solid var(--overlay-border-outline-color);
 }
 
-.wrapper.type-id.state-caution {
+.wrapper.type-id.state-caution,
+.wrapper.type-id.state-isa-low {
   background: var(--alert-caution-color);
   border: 1px solid var(--alert-caution-outline-color);
 }
 
-.wrapper.type-id.state-warning {
+.wrapper.type-id.state-warning,
+.wrapper.type-id.state-isa-medium {
   background: var(--alert-warning-color);
   border: 1px solid var(--alert-warning-outline-color);
 }
 
-.wrapper.type-id.state-alarm {
+.wrapper.type-id.state-alarm,
+.wrapper.type-id.state-isa-high {
   background: var(--alert-alarm-color);
   border: 1px solid var(--alert-alarm-outline-color);
 }
 
+.wrapper.type-id.state-isa-critical {
+  background: var(--critical-enabled-background-color);
+  border: 1px solid var(--critical-enabled-border-color);
+}
+
+.wrapper.type-id.state-isa-diagnostic {
+  background: var(--notification-enabled-background-color);
+  border: 1px solid var(--notification-enabled-border-color);
+}
+
 .wrapper.type-data:is(
     .state-selected,
     .state-caution,
     .state-warning,
-    .state-alarm
+    .state-alarm,
+    .state-isa-critical,
+    .state-isa-high,
+    .state-isa-medium,
+    .state-isa-low,
+    .state-isa-diagnostic
   ) {
   background: var(--overlay-container-background-color);
   border: 1px solid var(--overlay-border-outline-color);
@@ -104,21 +122,34 @@
   border: 1px solid var(--overlay-border-outline-color);
 }
 
-.wrapper.type-data.state-caution .id-pill {
+.wrapper.type-data.state-caution .id-pill,
+.wrapper.type-data.state-isa-low .id-pill {
   background: var(--alert-caution-color);
   border: 1px solid var(--alert-caution-outline-color);
 }
 
-.wrapper.type-data.state-warning .id-pill {
+.wrapper.type-data.state-warning .id-pill,
+.wrapper.type-data.state-isa-medium .id-pill {
   background: var(--alert-warning-color);
   border: 1px solid var(--alert-warning-outline-color);
 }
 
-.wrapper.type-data.state-alarm .id-pill {
+.wrapper.type-data.state-alarm .id-pill,
+.wrapper.type-data.state-isa-high .id-pill {
   background: var(--alert-alarm-color);
   border: 1px solid var(--alert-alarm-outline-color);
 }
 
+.wrapper.type-data.state-isa-critical .id-pill {
+  background: var(--critical-enabled-background-color);
+  border: 1px solid var(--critical-enabled-border-color);
+}
+
+.wrapper.type-data.state-isa-diagnostic .id-pill {
+  background: var(--notification-enabled-background-color);
+  border: 1px solid var(--notification-enabled-border-color);
+}
+
 .id-text {
   @mixin font-label-active;
   text-align: center;

package/src/ar/building-blocks/poi-header/poi-header.ts

@@ -14,6 +14,11 @@ export enum ObcPoiHeaderState {
   Caution = 'caution',
   Warning = 'warning',
   Alarm = 'alarm',
+  IsaCritical = 'isa-critical',
+  IsaHigh = 'isa-high',
+  IsaMedium = 'isa-medium',
+  IsaLow = 'isa-low',
+  IsaDiagnostic = 'isa-diagnostic',
 }
 
 export enum ObcPoiHeaderType {
@@ -32,7 +37,7 @@ export enum ObcPoiHeaderType {
  * - `type` (default `id`):
  *   - `id`: shows identifier content only.
  *   - `data`: shows identifier plus secondary label.
- * - `state` (default `enabled`): `enabled`, `selected`, `caution`, `warning`, `alarm`.
+ * - `state` (default `enabled`): `enabled`, `selected`, `caution`, `warning`, `alarm`, `isa-critical`, `isa-high`, `isa-medium`, `isa-low`, `isa-diagnostic`.
  * - `content` (default `"1"`): primary identifier text.
  * - `label` (default `"Data"`): secondary text used by `type="data"`.
  * - `hasIndicator` (default `false`): appends indicator area.

package/src/ar/poi-button/poi-button.css

@@ -119,15 +119,25 @@
     }
   }
 
-  &.alert-caution {
+  &.alert-alarm,
+  &.alert-isa-high {
     .alert-ring {
-      background: var(--alert-caution-color);
-      border-color: var(--alert-caution-outline-color);
-      outline-color: var(--alert-caution-outline-color);
+      background: var(--alert-alarm-color);
+      border-color: var(--alert-alarm-outline-color);
+      outline-color: var(--alert-alarm-outline-color);
+    }
+  }
+
+  &.alert-isa-critical {
+    .alert-ring {
+      background: var(--critical-enabled-background-color);
+      border-color: var(--critical-enabled-border-color);
+      outline-color: var(--critical-enabled-border-color);
     }
   }
 
-  &.alert-warning {
+  &.alert-warning,
+  &.alert-isa-medium {
     .alert-ring {
       background: var(--alert-warning-color);
       border-color: var(--alert-warning-outline-color);
@@ -135,11 +145,20 @@
     }
   }
 
-  &.alert-alarm {
+  &.alert-caution,
+  &.alert-isa-low {
     .alert-ring {
-      background: var(--alert-alarm-color);
-      border-color: var(--alert-alarm-outline-color);
-      outline-color: var(--alert-alarm-outline-color);
+      background: var(--alert-caution-color);
+      border-color: var(--alert-caution-outline-color);
+      outline-color: var(--alert-caution-outline-color);
+    }
+  }
+
+  &.alert-isa-diagnostic {
+    .alert-ring {
+      background: var(--notification-enabled-background-color);
+      border-color: var(--notification-enabled-border-color);
+      outline-color: var(--notification-enabled-border-color);
     }
   }
 
@@ -245,52 +264,101 @@
 
 /* Overlap alert color styles */
 .wrapper.value-overlapped {
-  &.alert-caution {
-    --overlay-container-background-color: var(--alert-caution-color, #ffdb42);
-    --overlay-border-outline-color: var(--alert-caution-outline-color);
+  &.alert-alarm,
+  &.alert-isa-high {
+    --overlay-container-background-color: var(--alert-alarm-color, #e30019);
+    --overlay-border-outline-color: var(--alert-alarm-outline-color);
   }
 
-  &.alert-caution .poi-object {
-    --overlay-container-background-color: var(--alert-caution-color, #ffdb42);
-    --overlay-border-outline-color: var(--alert-caution-outline-color);
+  &.alert-alarm .poi-object,
+  &.alert-isa-high .poi-object {
+    --overlay-container-background-color: var(--alert-alarm-color, #e30019);
+    --overlay-border-outline-color: var(--alert-alarm-outline-color);
+  }
+
+  &.alert-isa-critical {
+    --overlay-container-background-color: var(
+      --critical-enabled-background-color
+    );
+    --overlay-border-outline-color: var(--critical-enabled-border-color);
   }
 
-  &.alert-warning {
+  &.alert-isa-critical .poi-object {
+    --overlay-container-background-color: var(
+      --critical-enabled-background-color
+    );
+    --overlay-border-outline-color: var(--critical-enabled-border-color);
+  }
+
+  &.alert-warning,
+  &.alert-isa-medium {
     --overlay-container-background-color: var(--alert-warning-color, #fe9413);
     --overlay-border-outline-color: var(--alert-warning-outline-color);
   }
 
-  &.alert-warning .poi-object {
+  &.alert-warning .poi-object,
+  &.alert-isa-medium .poi-object {
     --overlay-container-background-color: var(--alert-warning-color, #fe9413);
     --overlay-border-outline-color: var(--alert-warning-outline-color);
   }
 
-  &.alert-alarm {
-    --overlay-container-background-color: var(--alert-alarm-color, #e30019);
-    --overlay-border-outline-color: var(--alert-alarm-outline-color);
+  &.alert-caution,
+  &.alert-isa-low {
+    --overlay-container-background-color: var(--alert-caution-color, #ffdb42);
+    --overlay-border-outline-color: var(--alert-caution-outline-color);
   }
 
-  &.alert-alarm .poi-object {
-    --overlay-container-background-color: var(--alert-alarm-color, #e30019);
-    --overlay-border-outline-color: var(--alert-alarm-outline-color);
+  &.alert-caution .poi-object,
+  &.alert-isa-low .poi-object {
+    --overlay-container-background-color: var(--alert-caution-color, #ffdb42);
+    --overlay-border-outline-color: var(--alert-caution-outline-color);
+  }
+
+  &.alert-isa-diagnostic {
+    --overlay-container-background-color: var(
+      --notification-enabled-background-color
+    );
+    --overlay-border-outline-color: var(--notification-enabled-border-color);
+  }
+
+  &.alert-isa-diagnostic .poi-object {
+    --overlay-container-background-color: var(
+      --notification-enabled-background-color
+    );
+    --overlay-border-outline-color: var(--notification-enabled-border-color);
   }
 }
 
-.wrapper.value-overlapped.alert-caution .poi-object::part(background-frame) {
+.wrapper.value-overlapped.alert-caution .poi-object::part(background-frame),
+.wrapper.value-overlapped.alert-isa-low .poi-object::part(background-frame) {
   background-color: var(--alert-caution-color, #ffdb42);
   border-color: var(--alert-caution-outline-color);
 }
 
-.wrapper.value-overlapped.alert-warning .poi-object::part(background-frame) {
+.wrapper.value-overlapped.alert-warning .poi-object::part(background-frame),
+.wrapper.value-overlapped.alert-isa-medium .poi-object::part(background-frame) {
   background-color: var(--alert-warning-color, #fe9413);
   border-color: var(--alert-warning-outline-color);
 }
 
-.wrapper.value-overlapped.alert-alarm .poi-object::part(background-frame) {
+.wrapper.value-overlapped.alert-alarm .poi-object::part(background-frame),
+.wrapper.value-overlapped.alert-isa-high .poi-object::part(background-frame) {
   background-color: var(--alert-alarm-color, #e30019);
   border-color: var(--alert-alarm-outline-color);
 }
 
+.wrapper.value-overlapped.alert-isa-critical
+  .poi-object::part(background-frame) {
+  background-color: var(--critical-enabled-background-color);
+  border-color: var(--critical-enabled-border-color);
+}
+
+.wrapper.value-overlapped.alert-isa-diagnostic
+  .poi-object::part(background-frame) {
+  background-color: var(--notification-enabled-background-color);
+  border-color: var(--notification-enabled-border-color);
+}
+
 ::slotted(:not([slot])) {
   width: 100%;
   height: 100%;
@@ -317,20 +385,33 @@
       display: none;
     }
 
-    .alert-caution & {
+    .alert-caution &,
+    .alert-isa-low & {
       border-color: var(--alert-caution-outline-color);
       outline-color: var(--alert-caution-color);
     }
 
-    .alert-warning & {
+    .alert-warning &,
+    .alert-isa-medium & {
       border-color: var(--alert-warning-outline-color);
       outline-color: var(--alert-warning-color);
     }
 
-    .alert-alarm & {
+    .alert-alarm &,
+    .alert-isa-high & {
       border-color: var(--alert-alarm-outline-color);
       outline-color: var(--alert-alarm-color);
     }
+
+    .alert-isa-critical & {
+      border-color: var(--critical-enabled-border-color);
+      outline-color: var(--critical-enabled-background-color);
+    }
+
+    .alert-isa-diagnostic & {
+      border-color: var(--notification-enabled-border-color);
+      outline-color: var(--notification-enabled-background-color);
+    }
   }
 
   .id-label {
@@ -405,21 +486,34 @@
   opacity: var(--obc-poi-overlap-wrapper-opacity, 0.6);
 }
 
-.wrapper.value-overlapped.has-data.alert-caution {
+.wrapper.value-overlapped.has-data.alert-caution,
+.wrapper.value-overlapped.has-data.alert-isa-low {
   background: var(--alert-caution-color, #ffdb42);
   border-color: var(--alert-caution-outline-color);
 }
 
-.wrapper.value-overlapped.has-data.alert-warning {
+.wrapper.value-overlapped.has-data.alert-warning,
+.wrapper.value-overlapped.has-data.alert-isa-medium {
   background: var(--alert-warning-color, #fe9413);
   border-color: var(--alert-warning-outline-color);
 }
 
-.wrapper.value-overlapped.has-data.alert-alarm {
+.wrapper.value-overlapped.has-data.alert-alarm,
+.wrapper.value-overlapped.has-data.alert-isa-high {
   background: var(--alert-alarm-color, #e30019);
   border-color: var(--alert-alarm-outline-color);
 }
 
+.wrapper.value-overlapped.has-data.alert-isa-critical {
+  background: var(--critical-enabled-background-color);
+  border-color: var(--critical-enabled-border-color);
+}
+
+.wrapper.value-overlapped.has-data.alert-isa-diagnostic {
+  background: var(--notification-enabled-background-color);
+  border-color: var(--notification-enabled-border-color);
+}
+
 .wrapper.value-overlapped:not(.layout-inline).has-data {
   width: var(--maneuvering-components-poi-button-touch-target, 48px);
   min-width: var(--maneuvering-components-poi-button-touch-target, 48px);

package/src/ar/poi-button/poi-button.ts

@@ -34,6 +34,11 @@ export enum ObcPoiButtonState {
   Caution = 'caution',
   Warning = 'warning',
   Alarm = 'alarm',
+  IsaCritical = 'isa-critical',
+  IsaHigh = 'isa-high',
+  IsaMedium = 'isa-medium',
+  IsaLow = 'isa-low',
+  IsaDiagnostic = 'isa-diagnostic',
 }
 
 export enum PoiButtonVisualState {
@@ -90,7 +95,7 @@ export interface ObcPoiButtonDataItem {
  * - `layout` (default `anchored`): `anchored` or `inline`.
  * - `value` (default `unchecked`): `unchecked`, `checked`, `activated`, `overlapped`.
  * - `overlapOpaque` (default `false`): controls overlapped opacity mode (`false` = translucent, `true` = opaque).
- * - `state` (default `enabled`): `enabled`, `caution`, `warning`, `alarm`.
+ * - `state` (default `enabled`): `enabled`, `caution`, `warning`, `alarm`, `isa-critical`, `isa-high`, `isa-medium`, `isa-low`, `isa-diagnostic`.
  * - `selected` (default `false`): shows selection frame in anchored layout.
  * - `relativeDirection` (default `0`): rotates default-slot icon content in degrees.
  * - `data` (default `[]`): when non-empty, renders value/label/unit rows.
@@ -207,6 +212,16 @@ export class ObcPoiButton extends LitElement {
         return ObcPoiHeaderState.Warning;
       case ObcPoiButtonState.Alarm:
         return ObcPoiHeaderState.Alarm;
+      case ObcPoiButtonState.IsaCritical:
+        return ObcPoiHeaderState.IsaCritical;
+      case ObcPoiButtonState.IsaHigh:
+        return ObcPoiHeaderState.IsaHigh;
+      case ObcPoiButtonState.IsaMedium:
+        return ObcPoiHeaderState.IsaMedium;
+      case ObcPoiButtonState.IsaLow:
+        return ObcPoiHeaderState.IsaLow;
+      case ObcPoiButtonState.IsaDiagnostic:
+        return ObcPoiHeaderState.IsaDiagnostic;
       case ObcPoiButtonState.Enabled:
       default:
         return ObcPoiHeaderState.Selected;

package/src/ar/types.ts

@@ -3,4 +3,9 @@ export enum ObcArAlertType {
   Caution = 'caution',
   Warning = 'warning',
   Alarm = 'alarm',
+  IsaCritical = 'isa-critical',
+  IsaHigh = 'isa-high',
+  IsaMedium = 'isa-medium',
+  IsaLow = 'isa-low',
+  IsaDiagnostic = 'isa-diagnostic',
 }

package/src/automation/automation-badge/automation-badge.ts

@@ -32,8 +32,24 @@ export enum ObcAutomationBadgeType {
   Caution = 'caution',
   Warning = 'warning',
   Alarm = 'alarm',
+  IsaCritical = 'isa-critical',
+  IsaHigh = 'isa-high',
+  IsaMedium = 'isa-medium',
+  IsaLow = 'isa-low',
+  IsaDiagnostic = 'isa-diagnostic',
 }
 
+const ALERT_BADGE_TYPES: ObcAutomationBadgeType[] = [
+  ObcAutomationBadgeType.Caution,
+  ObcAutomationBadgeType.Warning,
+  ObcAutomationBadgeType.Alarm,
+  ObcAutomationBadgeType.IsaCritical,
+  ObcAutomationBadgeType.IsaHigh,
+  ObcAutomationBadgeType.IsaMedium,
+  ObcAutomationBadgeType.IsaLow,
+  ObcAutomationBadgeType.IsaDiagnostic,
+];
+
 @customElement('obc-automation-badge')
 export class ObcAutomationBadge extends LitElement {
   @property({type: String}) mode: ObcAutomationBadgeMode =
@@ -42,20 +58,81 @@ export class ObcAutomationBadge extends LitElement {
   @property({type: String}) type?: ObcAutomationBadgeType = undefined;
 
   private get effectiveMode() {
-    if (
-      this.type &&
-      [
-        ObcAutomationBadgeType.Caution,
-        ObcAutomationBadgeType.Warning,
-        ObcAutomationBadgeType.Alarm,
-      ].includes(this.type)
-    ) {
+    if (this.type && ALERT_BADGE_TYPES.includes(this.type)) {
       return ObcAutomationBadgeMode.Flat;
     } else {
       return this.mode;
     }
   }
 
+  private isAlertType(...types: ObcAutomationBadgeType[]): boolean {
+    return !!this.type && types.includes(this.type);
+  }
+
+  private renderIsaCriticalIcon(flat: boolean) {
+    if (flat) {
+      return html`<svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M14.667 8L11.3337 13.77H4.66634L1.33301 8L4.66634 2.23H11.3337L14.667 8Z"
+          fill="var(--critical-enabled-background-color)"
+        />
+        <path
+          d="M11.1543 2.72998H4.8457L2.51237 7.99998L4.8457 13.27H11.1543L13.4876 7.99998L11.1543 2.72998Z"
+          stroke="var(--critical-enabled-border-color)"
+        />
+        <path
+          d="M7.66754 10.3343V5.00098H9.00087V10.3343H7.66754Z"
+          fill="var(--on-critical-active-color)"
+        />
+        <path
+          d="M9.00087 11.6676H7.66754V13.001H9.00087V11.6676Z"
+          fill="var(--on-critical-active-color)"
+        />
+      </svg>`;
+    }
+    return html`<svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M2 0.5H14C14.8284 0.5 15.5 1.17157 15.5 2V14C15.5 14.8284 14.8284 15.5 14 15.5H2C1.17157 15.5 0.5 14.8284 0.5 14V2C0.5 1.17157 1.17157 0.5 2 0.5Z"
+        fill="var(--critical-enabled-background-color)"
+      />
+      <path
+        d="M2 0.5H14C14.8284 0.5 15.5 1.17157 15.5 2V14C15.5 14.8284 14.8284 15.5 14 15.5H2C1.17157 15.5 0.5 14.8284 0.5 14V2C0.5 1.17157 1.17157 0.5 2 0.5Z"
+        stroke="var(--critical-enabled-border-color)"
+      />
+      <path
+        d="M14 8L10.9282 13.33H5.0718L2 8L5.0718 2.67H10.9282L14 8Z"
+        fill="var(--on-critical-active-color)"
+      />
+    </svg>`;
+  }
+
+  private renderIsaDiagnosticIcon() {
+    return html`<svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7 1.33301H9V7.53301L13.2147 5.13301L14.2147 6.86634L10 9.33301L14.2147 11.7997L13.2147 13.533L9 11.133V15.667H7V11.133L2.78534 13.533L1.78534 11.7997L6 9.33301L1.78534 6.86634L2.78534 5.13301L7 7.53301V1.33301Z"
+        fill="var(--notification-enabled-background-color)"
+      />
+    </svg>`;
+  }
+
   // TODO: replace the typo 'siluette' with 'silhouette', probably in Figma as well
   private getIcon() {
     if (this.type === ObcAutomationBadgeType.Auto) {
@@ -89,9 +166,18 @@ export class ObcAutomationBadge extends LitElement {
           class="icon siluette"
         ></obi-alert-off-filled
         ><obi-alert-off-filled class="icon"></obi-alert-off-filled>`;
+    } else if (this.type === ObcAutomationBadgeType.IsaCritical) {
+      return this.renderIsaCriticalIcon(
+        this.effectiveMode === ObcAutomationBadgeMode.Flat
+      );
+    } else if (this.type === ObcAutomationBadgeType.IsaDiagnostic) {
+      return this.renderIsaDiagnosticIcon();
     } else if (
-      this.type === ObcAutomationBadgeType.Caution &&
-      this.mode === ObcAutomationBadgeMode.Flat
+      this.isAlertType(
+        ObcAutomationBadgeType.Caution,
+        ObcAutomationBadgeType.IsaLow
+      ) &&
+      this.effectiveMode === ObcAutomationBadgeMode.Flat
     ) {
       return html`<svg
         width="16"
@@ -138,7 +224,12 @@ export class ObcAutomationBadge extends LitElement {
           fill="var(--on-caution-active-color)"
         />
       </svg>`;
-    } else if (this.type === ObcAutomationBadgeType.Caution) {
+    } else if (
+      this.isAlertType(
+        ObcAutomationBadgeType.Caution,
+        ObcAutomationBadgeType.IsaLow
+      )
+    ) {
       return html`<svg
         width="16"
         height="16"
@@ -160,8 +251,11 @@ export class ObcAutomationBadge extends LitElement {
         />
       </svg> `;
     } else if (
-      this.type === ObcAutomationBadgeType.Warning &&
-      this.mode === ObcAutomationBadgeMode.Flat
+      this.isAlertType(
+        ObcAutomationBadgeType.Warning,
+        ObcAutomationBadgeType.IsaMedium
+      ) &&
+      this.effectiveMode === ObcAutomationBadgeMode.Flat
     ) {
       return html`
         <svg
@@ -218,7 +312,12 @@ export class ObcAutomationBadge extends LitElement {
           />
         </svg>
       `;
-    } else if (this.type === ObcAutomationBadgeType.Warning) {
+    } else if (
+      this.isAlertType(
+        ObcAutomationBadgeType.Warning,
+        ObcAutomationBadgeType.IsaMedium
+      )
+    ) {
       return html`<svg
         width="16"
         height="16"
@@ -237,8 +336,11 @@ export class ObcAutomationBadge extends LitElement {
         <circle cx="8" cy="8" r="5" fill="var(--on-warning-active-color)" />
       </svg> `;
     } else if (
-      this.type === ObcAutomationBadgeType.Alarm &&
-      this.mode === ObcAutomationBadgeMode.Flat
+      this.isAlertType(
+        ObcAutomationBadgeType.Alarm,
+        ObcAutomationBadgeType.IsaHigh
+      ) &&
+      this.effectiveMode === ObcAutomationBadgeMode.Flat
     ) {
       return html`<svg
         width="16"
@@ -285,7 +387,12 @@ export class ObcAutomationBadge extends LitElement {
           fill="var(--on-alarm-active-color)"
         />
       </svg> `;
-    } else if (this.type === ObcAutomationBadgeType.Alarm) {
+    } else if (
+      this.isAlertType(
+        ObcAutomationBadgeType.Alarm,
+        ObcAutomationBadgeType.IsaHigh
+      )
+    ) {
       return html`
         <svg
           width="16"

package/src/automation/automation-button/abstract-automation-button-storybook-helpers.ts

@@ -2,6 +2,7 @@ import {
   ObcAlertFrameStatus,
   ObcAlertFrameThickness,
   ObcAlertFrameType,
+  ObcAlertFrameMode,
 } from '../../components/alert-frame/alert-frame.js';
 import {MotorizedVariant} from './abstract-automation-button-motorized.js';
 import {
@@ -33,6 +34,10 @@ export const argTypesAbstractAutomationButton = {
     options: Object.values(ObcAlertFrameType),
     control: {type: 'radio'},
   },
+  alertFrameMode: {
+    options: Object.values(ObcAlertFrameMode),
+    control: {type: 'radio'},
+  },
   alertFrameThickness: {
     options: Object.values(ObcAlertFrameThickness),
     control: {type: 'radio'},

package/src/automation/automation-button/abstract-automation-button.ts

@@ -13,10 +13,11 @@ import {
   AutomationButtonReadoutStackSize,
 } from '../../components/automation-button-readout-stack/automation-button-readout-stack.js';
 import {
-  ObcAlertFrameStatus,
   ObcAlertFrameThickness,
   ObcAlertFrameType,
+  ObcAlertFrameMode,
 } from '../../components/alert-frame/alert-frame.js';
+import {AlertType} from '../../types.js';
 import '../automation-badge/automation-badge.js';
 import {ObcAutomationBadgeType} from '../automation-badge/automation-badge.js';
 import {CircularProgressMode} from '../../building-blocks/circular-progress/circular-progress.js';
@@ -27,6 +28,11 @@ export enum AutomationButtonBadgeAlert {
   Caution = 'caution',
   Warning = 'warning',
   Alarm = 'alarm',
+  IsaCritical = 'isa-critical',
+  IsaHigh = 'isa-high',
+  IsaMedium = 'isa-medium',
+  IsaLow = 'isa-low',
+  IsaDiagnostic = 'isa-diagnostic',
 }
 
 export enum AutomationButtonBadgeInterlock {
@@ -62,8 +68,9 @@ export class ObcAbstractAutomationButton extends LitElement {
     ObcAlertFrameType.SmallSideFlip;
   @property({type: String}) alertFrameThickness: ObcAlertFrameThickness =
     ObcAlertFrameThickness.Small;
-  @property({type: String}) alertFrameStatus: ObcAlertFrameStatus =
-    ObcAlertFrameStatus.Alarm;
+  @property({type: String}) alertFrameStatus: AlertType = AlertType.Alarm;
+  @property({type: String}) alertFrameMode: ObcAlertFrameMode =
+    ObcAlertFrameMode.ackedActive;
   @property({type: Boolean, attribute: false}) showAlertCategoryIcon: boolean =
     true;
   @property({type: Boolean}) showAlertIcon: boolean = false;
@@ -151,6 +158,16 @@ export class ObcAbstractAutomationButton extends LitElement {
       return ObcAutomationBadgeType.Warning;
     } else if (this.badgeAlert === AutomationButtonBadgeAlert.Alarm) {
       return ObcAutomationBadgeType.Alarm;
+    } else if (this.badgeAlert === AutomationButtonBadgeAlert.IsaCritical) {
+      return ObcAutomationBadgeType.IsaCritical;
+    } else if (this.badgeAlert === AutomationButtonBadgeAlert.IsaHigh) {
+      return ObcAutomationBadgeType.IsaHigh;
+    } else if (this.badgeAlert === AutomationButtonBadgeAlert.IsaMedium) {
+      return ObcAutomationBadgeType.IsaMedium;
+    } else if (this.badgeAlert === AutomationButtonBadgeAlert.IsaLow) {
+      return ObcAutomationBadgeType.IsaLow;
+    } else if (this.badgeAlert === AutomationButtonBadgeAlert.IsaDiagnostic) {
+      return ObcAutomationBadgeType.IsaDiagnostic;
     }
     return null;
   }
@@ -211,6 +228,7 @@ export class ObcAbstractAutomationButton extends LitElement {
       .alertFrameType=${this.alertFrameType}
       .alertFrameThickness=${this.alertFrameThickness}
       .alertFrameStatus=${this.alertFrameStatus}
+      .alertFrameMode=${this.alertFrameMode}
       .showAlertCategoryIcon=${this.showAlertCategoryIcon}
       .showAlertIcon=${this.showAlertIcon}
       ?progress=${this.progress}