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

package/src/main.css

@@ -1,4 +1,5 @@
 @import "palettes/variables.css";
+@import "palettes/manual.css";
 @import "components/radio/radio.css";
 
 html {

package/src/manual-icon/icon-alerts-critical-twotone.ts

@@ -0,0 +1,60 @@
+import {LitElement, html, css, svg} from 'lit';
+import {property} from 'lit/decorators.js';
+import {customElement} from '../decorator.js';
+
+/**
+ * `<obi-alerts-critical-twotone>` – Two-tone bell icon for the ISA "critical" alert severity.
+ *
+ * Renders the alert (bell) glyph as a layered two-tone shape so the silhouette and
+ * fill can be tinted independently. Used wherever a critical-severity alert needs an
+ * icon representation (badges, frames, lists).
+ *
+ * ### Features
+ * - **Color modes:** Set `useCssColor` to render with the critical design tokens
+ *   (`--alert-critical-color` / `--alert-critical-outline-color`); leave it `false`
+ *   (default) to render with `currentColor` so the icon inherits its parent's color.
+ *
+ * ### Properties and Attributes
+ * - `useCssColor` (boolean): When true, fills the two tones with the critical color
+ *   tokens instead of `currentColor`. Defaults to `false`.
+ */
+@customElement('obi-alerts-critical-twotone')
+export class ObiAlertsCriticalTwotone extends LitElement {
+  @property({type: Boolean}) useCssColor = false;
+
+  private icon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 19V17H6V10C6 8.61667 6.41667 7.3875 7.25 6.3125C8.08333 5.2375 9.16667 4.53333 10.5 4.2V3.5C10.5 3.08333 10.6458 2.72917 10.9375 2.4375C11.2292 2.14583 11.5833 2 12 2C12.4167 2 12.7708 2.14583 13.0625 2.4375C13.3542 2.72917 13.5 3.08333 13.5 3.5V4.2C14.8333 4.53333 15.9167 5.2375 16.75 6.3125C17.5833 7.3875 18 8.61667 18 10V17H20V19H4ZM12 22C11.45 22 10.9792 21.8042 10.5875 21.4125C10.1958 21.0208 10 20.55 10 20H14C14 20.55 13.8042 21.0208 13.4125 21.4125C13.0208 21.8042 12.55 22 12 22Z" fill="currentColor"/>
+<path d="M4 19V17H6V10C6 8.61667 6.41667 7.3875 7.25 6.3125C8.08333 5.2375 9.16667 4.53333 10.5 4.2V3.5C10.5 3.08333 10.6458 2.72917 10.9375 2.4375C11.2292 2.14583 11.5833 2 12 2C12.4167 2 12.7708 2.14583 13.0625 2.4375C13.3542 2.72917 13.5 3.08333 13.5 3.5V4.2C14.8333 4.53333 15.9167 5.2375 16.75 6.3125C17.5833 7.3875 18 8.61667 18 10V17H20V19H4ZM12 22C11.45 22 10.9792 21.8042 10.5875 21.4125C10.1958 21.0208 10 20.55 10 20H14C14 20.55 13.8042 21.0208 13.4125 21.4125C13.0208 21.8042 12.55 22 12 22ZM8 17H16V10C16 8.9 15.6083 7.95833 14.825 7.175C14.0417 6.39167 13.1 6 12 6C10.9 6 9.95833 6.39167 9.175 7.175C8.39167 7.95833 8 8.9 8 10V17Z" fill="currentColor"/>
+</svg>
+`;
+
+  private iconCss = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 19V17H6V10C6 8.61667 6.41667 7.3875 7.25 6.3125C8.08333 5.2375 9.16667 4.53333 10.5 4.2V3.5C10.5 3.08333 10.6458 2.72917 10.9375 2.4375C11.2292 2.14583 11.5833 2 12 2C12.4167 2 12.7708 2.14583 13.0625 2.4375C13.3542 2.72917 13.5 3.08333 13.5 3.5V4.2C14.8333 4.53333 15.9167 5.2375 16.75 6.3125C17.5833 7.3875 18 8.61667 18 10V17H20V19H4ZM12 22C11.45 22 10.9792 21.8042 10.5875 21.4125C10.1958 21.0208 10 20.55 10 20H14C14 20.55 13.8042 21.0208 13.4125 21.4125C13.0208 21.8042 12.55 22 12 22Z" style="fill: var(--alert-critical-color)"/>
+<path d="M4 19V17H6V10C6 8.61667 6.41667 7.3875 7.25 6.3125C8.08333 5.2375 9.16667 4.53333 10.5 4.2V3.5C10.5 3.08333 10.6458 2.72917 10.9375 2.4375C11.2292 2.14583 11.5833 2 12 2C12.4167 2 12.7708 2.14583 13.0625 2.4375C13.3542 2.72917 13.5 3.08333 13.5 3.5V4.2C14.8333 4.53333 15.9167 5.2375 16.75 6.3125C17.5833 7.3875 18 8.61667 18 10V17H20V19H4ZM12 22C11.45 22 10.9792 21.8042 10.5875 21.4125C10.1958 21.0208 10 20.55 10 20H14C14 20.55 13.8042 21.0208 13.4125 21.4125C13.0208 21.8042 12.55 22 12 22ZM8 17H16V10C16 8.9 15.6083 7.95833 14.825 7.175C14.0417 6.39167 13.1 6 12 6C10.9 6 9.95833 6.39167 9.175 7.175C8.39167 7.95833 8 8.9 8 10V17Z" style="fill: var(--alert-critical-outline-color)"/>
+</svg>
+`;
+
+  override render() {
+    return html`
+      <div class="wrapper">${this.useCssColor ? this.iconCss : this.icon}</div>
+    `;
+  }
+
+  static override styles = css`
+    .wrapper {
+      height: 100%;
+      width: 100%;
+      line-height: 0;
+    }
+    .wrapper > * {
+      height: 100%;
+      width: 100%;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obi-alerts-critical-twotone': ObiAlertsCriticalTwotone;
+  }
+}

package/src/manual-icon/icon-alerts-diagnostic-twotone.ts

@@ -0,0 +1,60 @@
+import {LitElement, html, css, svg} from 'lit';
+import {property} from 'lit/decorators.js';
+import {customElement} from '../decorator.js';
+
+/**
+ * `<obi-alerts-diagnostic-twotone>` – Two-tone bell icon for the ISA "diagnostic" alert severity.
+ *
+ * Renders the alert (bell) glyph as a layered two-tone shape so the silhouette and
+ * fill can be tinted independently. Used wherever a diagnostic-severity alert needs an
+ * icon representation (badges, frames, lists).
+ *
+ * ### Features
+ * - **Color modes:** Set `useCssColor` to render with the diagnostic design tokens
+ *   (`--alert-diagnostic-color` / `--alert-diagnostic-outline-color`); leave it `false`
+ *   (default) to render with `currentColor` so the icon inherits its parent's color.
+ *
+ * ### Properties and Attributes
+ * - `useCssColor` (boolean): When true, fills the two tones with the diagnostic color
+ *   tokens instead of `currentColor`. Defaults to `false`.
+ */
+@customElement('obi-alerts-diagnostic-twotone')
+export class ObiAlertsDiagnosticTwotone extends LitElement {
+  @property({type: Boolean}) useCssColor = false;
+
+  private icon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 19V17H6V10C6 8.61667 6.41667 7.3875 7.25 6.3125C8.08333 5.2375 9.16667 4.53333 10.5 4.2V3.5C10.5 3.08333 10.6458 2.72917 10.9375 2.4375C11.2292 2.14583 11.5833 2 12 2C12.4167 2 12.7708 2.14583 13.0625 2.4375C13.3542 2.72917 13.5 3.08333 13.5 3.5V4.2C14.8333 4.53333 15.9167 5.2375 16.75 6.3125C17.5833 7.3875 18 8.61667 18 10V17H20V19H4ZM12 22C11.45 22 10.9792 21.8042 10.5875 21.4125C10.1958 21.0208 10 20.55 10 20H14C14 20.55 13.8042 21.0208 13.4125 21.4125C13.0208 21.8042 12.55 22 12 22Z" fill="currentColor"/>
+<path d="M4 19V17H6V10C6 8.61667 6.41667 7.3875 7.25 6.3125C8.08333 5.2375 9.16667 4.53333 10.5 4.2V3.5C10.5 3.08333 10.6458 2.72917 10.9375 2.4375C11.2292 2.14583 11.5833 2 12 2C12.4167 2 12.7708 2.14583 13.0625 2.4375C13.3542 2.72917 13.5 3.08333 13.5 3.5V4.2C14.8333 4.53333 15.9167 5.2375 16.75 6.3125C17.5833 7.3875 18 8.61667 18 10V17H20V19H4ZM12 22C11.45 22 10.9792 21.8042 10.5875 21.4125C10.1958 21.0208 10 20.55 10 20H14C14 20.55 13.8042 21.0208 13.4125 21.4125C13.0208 21.8042 12.55 22 12 22ZM8 17H16V10C16 8.9 15.6083 7.95833 14.825 7.175C14.0417 6.39167 13.1 6 12 6C10.9 6 9.95833 6.39167 9.175 7.175C8.39167 7.95833 8 8.9 8 10V17Z" fill="currentColor"/>
+</svg>
+`;
+
+  private iconCss = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 19V17H6V10C6 8.61667 6.41667 7.3875 7.25 6.3125C8.08333 5.2375 9.16667 4.53333 10.5 4.2V3.5C10.5 3.08333 10.6458 2.72917 10.9375 2.4375C11.2292 2.14583 11.5833 2 12 2C12.4167 2 12.7708 2.14583 13.0625 2.4375C13.3542 2.72917 13.5 3.08333 13.5 3.5V4.2C14.8333 4.53333 15.9167 5.2375 16.75 6.3125C17.5833 7.3875 18 8.61667 18 10V17H20V19H4ZM12 22C11.45 22 10.9792 21.8042 10.5875 21.4125C10.1958 21.0208 10 20.55 10 20H14C14 20.55 13.8042 21.0208 13.4125 21.4125C13.0208 21.8042 12.55 22 12 22Z" style="fill: var(--alert-diagnostic-color)"/>
+<path d="M4 19V17H6V10C6 8.61667 6.41667 7.3875 7.25 6.3125C8.08333 5.2375 9.16667 4.53333 10.5 4.2V3.5C10.5 3.08333 10.6458 2.72917 10.9375 2.4375C11.2292 2.14583 11.5833 2 12 2C12.4167 2 12.7708 2.14583 13.0625 2.4375C13.3542 2.72917 13.5 3.08333 13.5 3.5V4.2C14.8333 4.53333 15.9167 5.2375 16.75 6.3125C17.5833 7.3875 18 8.61667 18 10V17H20V19H4ZM12 22C11.45 22 10.9792 21.8042 10.5875 21.4125C10.1958 21.0208 10 20.55 10 20H14C14 20.55 13.8042 21.0208 13.4125 21.4125C13.0208 21.8042 12.55 22 12 22ZM8 17H16V10C16 8.9 15.6083 7.95833 14.825 7.175C14.0417 6.39167 13.1 6 12 6C10.9 6 9.95833 6.39167 9.175 7.175C8.39167 7.95833 8 8.9 8 10V17Z" style="fill: var(--alert-diagnostic-outline-color)"/>
+</svg>
+`;
+
+  override render() {
+    return html`
+      <div class="wrapper">${this.useCssColor ? this.iconCss : this.icon}</div>
+    `;
+  }
+
+  static override styles = css`
+    .wrapper {
+      height: 100%;
+      width: 100%;
+      line-height: 0;
+    }
+    .wrapper > * {
+      height: 100%;
+      width: 100%;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obi-alerts-diagnostic-twotone': ObiAlertsDiagnosticTwotone;
+  }
+}

package/src/mixins/alert.css

@@ -1,3 +1,32 @@
+@define-mixin alert-critical $wrapperClass {
+  &:focus {
+    outline: none;
+  }
+
+  & $(wrapperClass) {
+    border: 1px solid var(--critical-enabled-border-color);
+    background: var(--critical-enabled-background-color);
+  }
+
+  &:hover $(wrapperClass) {
+    border-color: var(--critical-hover-border-color);
+    background-color: var(--critical-hover-background-color);
+  }
+
+  &:active $(wrapperClass) {
+    border-color: var(--critical-pressed-border-color);
+    background-color: var(--critical-pressed-background-color);
+  }
+
+  &:focus-visible $(wrapperClass) {
+    background-color: var(--critical-focused-background-color);
+    border-color: var(--critical-focused-border-color);
+    outline-color: var(--border-outline-color);
+    outline-width: 4px;
+    outline-style: solid;
+  }
+}
+
 @define-mixin alert-alarm $wrapperClass {
   &:focus {
     outline: none;

package/src/navigation-instruments/readout/readout.css

@@ -34,43 +34,22 @@
     grid-template-areas: "meta";
   }
 
-  &:is(
-    .alert-low-integrity,
-    .alert-invalid,
-    .alert-caution,
-    .alert-warning,
-    .alert-alarm
-  ) {
+  &:is(.data-low-integrity, .data-invalid) {
     border-width: 1px;
     border-style: solid;
     border-radius: var(--global-border-radius-border-radius-base);
   }
 
-  &.alert-low-integrity {
+  &.data-low-integrity {
     background: var(--alert-low-integrity-background-color);
     border-color: var(--alert-low-integrity-border-color);
   }
 
-  &.alert-invalid {
+  &.data-invalid {
     background: var(--alert-invalid-background-color);
     border-color: var(--alert-invalid-border-color);
   }
 
-  &.alert-caution {
-    background: var(--alert-caution-container-background-color);
-    border-color: var(--alert-caution-container-border-color);
-  }
-
-  &.alert-warning {
-    background: var(--alert-warning-container-background-color);
-    border-color: var(--alert-warning-container-border-color);
-  }
-
-  &.alert-alarm {
-    background: var(--alert-alarm-container-background-color);
-    border-color: var(--alert-alarm-container-border-color);
-  }
-
   &.stack {
     padding-bottom: calc(
       var(--obc-readout-padding-horizontal-safe) +

package/src/navigation-instruments/readout/readout.stories.ts

@@ -9,7 +9,7 @@ import {
 import {
   ReadoutDirection,
   ReadoutSetpointInteraction,
-  ReadoutAlertState,
+  ReadoutDataState,
   ReadoutVariant,
   ReadoutStackVerticalAlignment,
 } from './readout.js';
@@ -19,6 +19,12 @@ import {
   ReadoutAdviceFormat,
   ReadoutAdviceState,
 } from '../readout-advice/readout-advice.js';
+import {AlertType} from '../../types.js';
+import {
+  ObcAlertFrameMode,
+  ObcAlertFrameThickness,
+  ObcAlertFrameType,
+} from '../../components/alert-frame/alert-frame.js';
 
 const meta: Meta<ObcReadout> = {
   title: 'Instruments/Readout',
@@ -57,11 +63,11 @@ const meta: Meta<ObcReadout> = {
       },
       options: Object.values(Priority),
     },
-    alertState: {
+    dataState: {
       control: {
         type: 'select',
       },
-      options: Object.values(ReadoutAlertState),
+      options: Object.values(ReadoutDataState),
     },
     setpointInteraction: {
       control: {
@@ -193,7 +199,7 @@ function renderComponent(args: ObcReadout): TemplateResult {
     <obc-readout
       .variant=${args.variant}
       .valuePriority=${args.valuePriority}
-      .alertState=${args.alertState}
+      .dataState=${args.dataState}
       .direction=${args.direction}
       .setpointInteraction=${args.setpointInteraction}
       .setpointSize=${args.setpointSize}
@@ -219,6 +225,7 @@ function renderComponent(args: ObcReadout): TemplateResult {
       .fractionDigits=${args.fractionDigits}
       .alignment=${args.alignment}
       .off=${args.off}
+      .alert=${args.alert}
     >
     </obc-readout>
   `;
@@ -252,3 +259,49 @@ export const Center: Story = {
 
   render: (args) => renderComponent(args as ObcReadout),
 };
+
+export const DataLowIntegrity: Story = {
+  args: {
+    value: 42,
+    label: 'RPM',
+    unit: 'rpm',
+    dataState: ReadoutDataState.lowIntegrity,
+  },
+  render: (args) => renderComponent(args as ObcReadout),
+};
+
+export const DataInvalid: Story = {
+  args: {
+    value: 42,
+    label: 'RPM',
+    unit: 'rpm',
+    dataState: ReadoutDataState.invalid,
+  },
+  render: (args) => renderComponent(args as ObcReadout),
+};
+
+export const Alarm: Story = {
+  args: {
+    value: 42,
+    label: 'RPM',
+    unit: 'rpm',
+    alert: {
+      status: 'alarm',
+      mode: 'acked-active',
+    },
+  },
+  render: (args) => renderComponent(args as ObcReadout),
+};
+
+export const IsaCritical: Story = {
+  args: {
+    value: 42,
+    label: 'RPM',
+    unit: 'rpm',
+    alert: {
+      status: 'isa-critical',
+      mode: 'unacked-active',
+    },
+  },
+  render: (args) => renderComponent(args as ObcReadout),
+};

package/src/navigation-instruments/readout/readout.ts

@@ -34,6 +34,10 @@ import {
   ReadoutSetpointSize,
 } from '../readout-setpoint/readout-setpoint.js';
 import '../readout-setpoint/readout-setpoint.js';
+import {
+  type AlertFrameConfig,
+  wrapWithAlertFrame,
+} from '../../components/alert-frame/alert-frame.js';
 
 export enum ReadoutVariant {
   regular = 'regular',
@@ -41,13 +45,10 @@ export enum ReadoutVariant {
   stack = 'stack',
 }
 
-export enum ReadoutAlertState {
+export enum ReadoutDataState {
   none = 'none',
   lowIntegrity = 'low-integrity',
   invalid = 'invalid',
-  caution = 'caution',
-  warning = 'warning',
-  alarm = 'alarm',
 }
 
 export enum ReadoutSetpointInteraction {
@@ -123,8 +124,7 @@ export class ObcReadout extends LitElement {
   @property({type: String}) src?: string;
   @property({type: Boolean}) off = false;
   @property({type: String}) valuePriority?: Priority;
-  @property({type: String}) alertState: ReadoutAlertState =
-    ReadoutAlertState.none;
+  @property({type: String}) dataState: ReadoutDataState = ReadoutDataState.none;
   @property({type: String}) setpointInteraction: ReadoutSetpointInteraction =
     ReadoutSetpointInteraction.alwaysVisible;
   @property({type: String}) direction: ReadoutDirection =
@@ -161,6 +161,8 @@ export class ObcReadout extends LitElement {
   @property({type: String}) sourceType?: ReadoutSourceType;
   @property({type: Boolean}) hasLeadingIcon = false;
 
+  @property({type: Object}) alert: AlertFrameConfig | boolean = false;
+
   @property({type: Boolean, attribute: false}) sourceHug = true;
   @property({type: Boolean}) hasSourceLeadingIcon = false;
   @property({type: Boolean, attribute: false}) hasSourceTrailingIcon = true;
@@ -1033,63 +1035,67 @@ export class ObcReadout extends LitElement {
   }
 
   override render() {
-    return html`
-      <div
-        class=${classMap({
-          readout: true,
-          [this.variant]: true,
-          [this.direction]: true,
-          'alignment-left': this.alignment === 'left',
-          'alignment-center': this.alignment === 'center',
-          'alignment-vertical': this.alignment === 'vertical',
-          'interaction-always-visible':
-            this.interactionMode === ReadoutSetpointInteraction.alwaysVisible,
-          'interaction-flip-flop':
-            this.setpointInteractionEnabled &&
-            this.interactionMode === ReadoutSetpointInteraction.flipFlop,
-          'interaction-pop-up':
-            this.setpointInteractionEnabled &&
-            this.interactionMode === ReadoutSetpointInteraction.popUp,
-          'focus-setpoint':
-            this.setpointInteractionEnabled && this.flipFlopSetpointFocused,
-          'focus-value':
-            this.setpointInteractionEnabled && this.flipFlopValueFocused,
-          'alert-none': this.alertState === ReadoutAlertState.none,
-          'alert-low-integrity':
-            this.alertState === ReadoutAlertState.lowIntegrity,
-          'alert-invalid': this.alertState === ReadoutAlertState.invalid,
-          'alert-caution': this.alertState === ReadoutAlertState.caution,
-          'alert-warning': this.alertState === ReadoutAlertState.warning,
-          'alert-alarm': this.alertState === ReadoutAlertState.alarm,
-          'has-source': this.hasSrc,
-          'has-setpoint': this.hasSetpoint,
-          'has-setpoint-button':
-            this.isHorizontal &&
-            this.setpointFormat === ReadoutSetpointFormat.button,
-          'no-hug': !this.hug,
-          'label-only': this.labelOnly,
-        })}
-      >
-        ${!this.labelOnly && this.isVertical ? this.renderAdvice() : nothing}
-        ${!this.labelOnly && this.isVertical ? this.renderSetpoint() : nothing}
-        ${!this.labelOnly && this.isVertical ? this.renderValueZone() : nothing}
-        ${(this.labelOnly || this.isVertical) &&
-        this.shouldRenderReadoutMetaZone
-          ? renderReadoutMetaZone({
-              labelValue: this.label,
-              unitValue: this.unit,
-            })
-          : nothing}
-        ${!this.labelOnly && this.hasSrc && this.isVertical
-          ? this.renderSource()
-          : nothing}
-        ${!this.labelOnly && this.isHorizontal
-          ? this.renderHorizontalLayout()
-          : nothing}
-        ${this.renderSourcePickerSlot()}
-      </div>
-      ${this.renderSourcePickerContent()}
-    `;
+    return wrapWithAlertFrame(
+      this.alert,
+      html`
+        <div
+          class=${classMap({
+            readout: true,
+            [this.variant]: true,
+            [this.direction]: true,
+            'alignment-left': this.alignment === 'left',
+            'alignment-center': this.alignment === 'center',
+            'alignment-vertical': this.alignment === 'vertical',
+            'interaction-always-visible':
+              this.interactionMode === ReadoutSetpointInteraction.alwaysVisible,
+            'interaction-flip-flop':
+              this.setpointInteractionEnabled &&
+              this.interactionMode === ReadoutSetpointInteraction.flipFlop,
+            'interaction-pop-up':
+              this.setpointInteractionEnabled &&
+              this.interactionMode === ReadoutSetpointInteraction.popUp,
+            'focus-setpoint':
+              this.setpointInteractionEnabled && this.flipFlopSetpointFocused,
+            'focus-value':
+              this.setpointInteractionEnabled && this.flipFlopValueFocused,
+            'data-none': this.dataState === ReadoutDataState.none,
+            'data-low-integrity':
+              this.dataState === ReadoutDataState.lowIntegrity,
+            'data-invalid': this.dataState === ReadoutDataState.invalid,
+            'has-source': this.hasSrc,
+            'has-setpoint': this.hasSetpoint,
+            'has-setpoint-button':
+              this.isHorizontal &&
+              this.setpointFormat === ReadoutSetpointFormat.button,
+            'no-hug': !this.hug,
+            'label-only': this.labelOnly,
+          })}
+        >
+          ${!this.labelOnly && this.isVertical ? this.renderAdvice() : nothing}
+          ${!this.labelOnly && this.isVertical
+            ? this.renderSetpoint()
+            : nothing}
+          ${!this.labelOnly && this.isVertical
+            ? this.renderValueZone()
+            : nothing}
+          ${(this.labelOnly || this.isVertical) &&
+          this.shouldRenderReadoutMetaZone
+            ? renderReadoutMetaZone({
+                labelValue: this.label,
+                unitValue: this.unit,
+              })
+            : nothing}
+          ${!this.labelOnly && this.hasSrc && this.isVertical
+            ? this.renderSource()
+            : nothing}
+          ${!this.labelOnly && this.isHorizontal
+            ? this.renderHorizontalLayout()
+            : nothing}
+          ${this.renderSourcePickerSlot()}
+        </div>
+        ${this.renderSourcePickerContent()}
+      `
+    );
   }
 
   static override styles = unsafeCSS(componentStyle);

package/src/navigation-instruments/readout-list-item/readout-list-item.css

@@ -228,58 +228,25 @@
     }
   }
 
-  &:is(
-    .alert-low-integrity,
-    .alert-invalid,
-    .alert-caution,
-    .alert-warning,
-    .alert-alarm
-  ) {
-    background: var(--_obc-readout-list-item-alert-background);
-    border: 1px solid var(--_obc-readout-list-item-alert-border);
+  &:is(.data-low-integrity, .data-invalid) {
+    background: var(--_obc-readout-list-item-data-background);
+    border: 1px solid var(--_obc-readout-list-item-data-border);
     border-radius: 4px;
   }
 
-  &.alert-low-integrity {
-    --_obc-readout-list-item-alert-background: var(
+  &.data-low-integrity {
+    --_obc-readout-list-item-data-background: var(
       --alert-low-integrity-background-color
     );
-    --_obc-readout-list-item-alert-border: var(
+    --_obc-readout-list-item-data-border: var(
       --alert-low-integrity-border-color
     );
   }
 
-  &.alert-invalid {
-    --_obc-readout-list-item-alert-background: var(
+  &.data-invalid {
+    --_obc-readout-list-item-data-background: var(
       --alert-invalid-background-color
     );
-    --_obc-readout-list-item-alert-border: var(--alert-invalid-border-color);
-  }
-
-  &.alert-caution {
-    --_obc-readout-list-item-alert-background: var(
-      --alert-caution-container-background-color
-    );
-    --_obc-readout-list-item-alert-border: var(
-      --alert-caution-container-border-color
-    );
-  }
-
-  &.alert-warning {
-    --_obc-readout-list-item-alert-background: var(
-      --alert-warning-container-background-color
-    );
-    --_obc-readout-list-item-alert-border: var(
-      --alert-warning-container-border-color
-    );
-  }
-
-  &.alert-alarm {
-    --_obc-readout-list-item-alert-background: var(
-      --alert-alarm-container-background-color
-    );
-    --_obc-readout-list-item-alert-border: var(
-      --alert-alarm-container-border-color
-    );
+    --_obc-readout-list-item-data-border: var(--alert-invalid-border-color);
   }
 }