@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.89 → 2.0.0-next.90

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

@@ -5,9 +5,16 @@ import './readout-list.js';
 import {
   ReadoutListItemSize,
   ReadoutListItemPriority,
+  ReadoutListItemDataQuality,
   type ReadoutValueOptions,
 } from '../readout-list-item/readout-list-item.js';
 import '../readout-list-item/readout-list-item.js';
+import type {AlertFrameConfig} from '../../components/alert-frame/alert-frame.js';
+import {
+  ObcAlertFrameMode,
+  ObcAlertFrameType,
+} from '../../components/alert-frame/alert-frame.js';
+import {AlertType} from '../../types.js';
 
 type ListArgs = {
   showDebugOverlay: boolean;
@@ -23,9 +30,26 @@ type Row = {
   priority?: ReadoutListItemPriority;
   hasSetpoint?: boolean;
   setpoint?: number;
+  hasAdvice?: boolean;
+  advice?: number;
+  off?: boolean;
+  // Row-level and per-block state, so the list stories can smoke-test data
+  // quality + alert frames alongside the auto-alignment.
+  dataQuality?: ReadoutListItemDataQuality;
+  alert?: AlertFrameConfig;
+  valueDataQuality?: ReadoutListItemDataQuality;
+  valueAlert?: AlertFrameConfig;
+  setpointDataQuality?: ReadoutListItemDataQuality;
 };
 
 function renderRow(row: Row) {
+  const valueOptions =
+    row.valueDataQuality || row.valueAlert
+      ? {dataQuality: row.valueDataQuality, alert: row.valueAlert}
+      : undefined;
+  const setpointOptions = row.setpointDataQuality
+    ? {dataQuality: row.setpointDataQuality}
+    : undefined;
   return html`
     <obc-readout-list-item
       .label=${row.label}
@@ -35,8 +59,15 @@ function renderRow(row: Row) {
       .hasDegree=${row.hasDegree ?? false}
       .fractionDigits=${row.fractionDigits ?? 0}
       .priority=${row.priority}
+      .off=${row.off ?? false}
       .hasSetpoint=${row.hasSetpoint ?? false}
       .setpoint=${row.setpoint}
+      .hasAdvice=${row.hasAdvice ?? false}
+      .advice=${row.advice}
+      .dataQuality=${row.dataQuality}
+      .alert=${row.alert ?? false}
+      .valueOptions=${valueOptions}
+      .setpointOptions=${setpointOptions}
     ></obc-readout-list-item>
   `;
 }
@@ -92,6 +123,18 @@ export const Degrees: Story = {
   render: (args) => renderList(DEGREE_ROWS, args.showDebugOverlay),
 };
 
+const WARNING_FRAME: AlertFrameConfig = {
+  status: AlertType.Warning,
+  mode: ObcAlertFrameMode.ackedActive,
+  type: ObcAlertFrameType.Regular,
+};
+const ALARM_FRAME_ICON: AlertFrameConfig = {
+  status: AlertType.Alarm,
+  mode: ObcAlertFrameMode.ackedActive,
+  type: ObcAlertFrameType.SmallSideFlip,
+  showAlertCategoryIcon: true,
+};
+
 export const WithSetpoints: Story = {
   render: (args) =>
     renderList(
@@ -104,6 +147,7 @@ export const WithSetpoints: Story = {
           hasSetpoint: true,
           setpoint: 290,
         },
+        // invalid setpoint chip — auto-aligned alongside the others
         {
           label: 'Speed',
           value: 8,
@@ -111,8 +155,28 @@ export const WithSetpoints: Story = {
           fractionDigits: 1,
           hasSetpoint: true,
           setpoint: 12,
+          setpointDataQuality: ReadoutListItemDataQuality.invalid,
+        },
+        // advice reference
+        {label: 'Depth', value: 1013, unit: 'm', hasAdvice: true, advice: 1010},
+        // per-value alert frame — wraps value + unit
+        {label: 'Fuel', value: 42, unit: '%', valueAlert: WARNING_FRAME},
+        // whole row invalid + null value (dash)
+        {
+          label: 'Wind',
+          value: null,
+          unit: 'kn',
+          dataQuality: ReadoutListItemDataQuality.invalid,
+        },
+        // whole row low-integrity + row-level alert frame with a badge-icon flap
+        {
+          label: 'Course',
+          value: 120,
+          unit: 'T',
+          hasDegree: true,
+          dataQuality: ReadoutListItemDataQuality.lowIntegrity,
+          alert: ALARM_FRAME_ICON,
         },
-        {label: 'Depth', value: 1013, unit: 'm'},
       ],
       args.showDebugOverlay
     ),
@@ -140,13 +204,47 @@ export const TestDynamicRow: Story = {
   },
 };
 
+// Richer starting set for the interactive demo: a plain degree row, an invalid
+// setpoint, an advice reference, a per-value alert frame, a null/invalid row and
+// a low-integrity row with a row-level alert frame — so the manual add/remove /
+// re-align flow is exercised against the full range of state.
+const MANUAL_ROWS: Row[] = [
+  {label: 'Heading', value: 287, unit: 'T', hasDegree: true},
+  {
+    label: 'Speed',
+    value: 8,
+    unit: 'kn',
+    fractionDigits: 1,
+    hasSetpoint: true,
+    setpoint: 12,
+    setpointDataQuality: ReadoutListItemDataQuality.invalid,
+  },
+  {label: 'Depth', value: 1013, unit: 'm', hasAdvice: true, advice: 1010},
+  {label: 'Fuel', value: 42, unit: '%', valueAlert: WARNING_FRAME},
+  {
+    label: 'Wind',
+    value: null,
+    unit: 'kn',
+    dataQuality: ReadoutListItemDataQuality.invalid,
+  },
+  {
+    label: 'Course',
+    value: 120,
+    unit: 'T',
+    hasDegree: true,
+    dataQuality: ReadoutListItemDataQuality.lowIntegrity,
+    alert: ALARM_FRAME_ICON,
+  },
+];
+
 /**
  * **Manual (Interactive)** — the rows are slotted children, so they cannot be
  * driven by Storybook controls. Use the buttons to add / remove rows (a
  * structural change the list re-aligns automatically) and to change the first
  * row's value / unit (a property-only change, so it calls the public
  * {@link ObcReadoutList.align} method). The debug overlay shows the reserved
- * column widths reacting to each change.
+ * column widths reacting to each change. The starting rows include data-quality
+ * and alert-frame variations for a quick visual smoke test.
  */
 export const Manual: Story = {
   name: 'Manual (Interactive)',
@@ -168,22 +266,7 @@ export const Manual: Story = {
         id="manual-list"
         .showDebugOverlay=${args.showDebugOverlay}
       >
-        <obc-readout-list-item
-          .label=${'Heading'}
-          .unit=${'T'}
-          .value=${287}
-          .hasDegree=${true}
-        ></obc-readout-list-item>
-        <obc-readout-list-item
-          .label=${'Speed'}
-          .unit=${'kn'}
-          .value=${18}
-        ></obc-readout-list-item>
-        <obc-readout-list-item
-          .label=${'Depth'}
-          .unit=${'m'}
-          .value=${124}
-        ></obc-readout-list-item>
+        ${MANUAL_ROWS.map(renderRow)}
       </obc-readout-list>
       <div style="display: flex; gap: 8px; flex-wrap: wrap;">
         <button id="m-add" style="padding: 6px 12px; cursor: pointer;">
@@ -203,7 +286,7 @@ export const Manual: Story = {
         id="m-status"
         style="font: 12px/1.4 monospace; color: var(--element-neutral-color, #666);"
       >
-        3 rows
+        ${MANUAL_ROWS.length} rows
       </div>
     </div>
   `,

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

@@ -189,6 +189,80 @@ obc-readout-block {
   align-items: flex-end;
 }
 
+/* ---------- Value reading (value + degree + unit) ----------
+ * Groups the value block, its degree column and the trailing unit so the value
+ * alert frame can wrap all three. Layout-neutral: it adds no gap, so the content
+ * sits exactly where it did when these were siblings of `.value-area`. */
+.value-reading {
+  position: relative;
+  display: inline-flex;
+  align-items: flex-end;
+}
+
+/* ---------- Value data quality (low-integrity / invalid) ----------
+ * The value's per-block data-quality chip, applied to the whole reading (value +
+ * degree + unit) rather than hugging the value alone — the same logic as the
+ * value alert frame, minus its custom padding. Same look as the block/source
+ * chip (1px outline, check radius, alert-quality colours). Uses `outline` (not
+ * `border`) so it never shifts the value's width / cross-row column alignment.
+ * Setpoint/advice keep their own in-block chip; the row-level data quality on
+ * `.surface` is unchanged. */
+.value-reading.data-low-integrity,
+.value-reading.data-invalid {
+  outline: 1px solid;
+  border-radius: var(--global-border-radius-border-radius-check);
+}
+.value-reading.data-low-integrity {
+  background: var(--alert-low-integrity-background-color);
+  outline-color: var(--alert-low-integrity-border-color);
+}
+.value-reading.data-invalid {
+  background: var(--alert-invalid-background-color);
+  outline-color: var(--alert-invalid-border-color);
+}
+
+/* ---------- Value alert overlay ----------
+ * A pure overlay around the value reading: it reserves no space, so toggling the
+ * frame never changes the row height or breaks cross-row column alignment. The
+ * box is offset outward by (padding − stroke/2) on each axis so the alert-frame's
+ * outline (drawn outside its box) lands CENTRED on the 4px/2px padding line
+ * (half inside / half outside), matching Figma 58:10120. */
+.value-alert-overlay {
+  --_obc-readout-value-frame-padding-horizontal: 4px;
+  --_obc-readout-value-frame-padding-vertical: 2px;
+  /* Must match obc-alert-frame's ACTUAL outline width so the stroke stays centred
+     on the 4px/2px line. `thickness-small` is hard-coded to 2px in
+     alert-frame.css (it does NOT use the themed stroke-width token), so use a
+     literal 2px here; `thickness-large` is handled below. */
+  --_obc-readout-value-frame-stroke: 2px;
+  position: absolute;
+  inset-inline: calc(
+    -1 *
+      (
+        var(--_obc-readout-value-frame-padding-horizontal) -
+          var(--_obc-readout-value-frame-stroke) / 2
+      )
+  );
+  inset-block: calc(
+    -1 *
+      (
+        var(--_obc-readout-value-frame-padding-vertical) -
+          var(--_obc-readout-value-frame-stroke) / 2
+      )
+  );
+  /* Display-only: never intercept clicks on a clickable row. */
+  pointer-events: none;
+}
+
+/* thickness=large: obc-alert-frame's large outline uses the alert-frame border
+   weight token, so the overlay's outward offset must use the same width to keep
+   the stroke centred on the padding line. */
+.value-alert-overlay.thickness-large {
+  --_obc-readout-value-frame-stroke: var(
+    --global-size-spacing-border-weight-alertframe
+  );
+}
+
 /* The readout building blocks (advice / setpoint / value) now render inside
    `obc-readout-block`; their layout / colour / hinted-zero / data-quality CSS
    lives there. The list-item only bridges the public colour vars (see top) and

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

@@ -1262,7 +1262,7 @@ export const PerBlockState: Story = {
                 value: {
                   alert: {
                     status: AlertType.Warning,
-                    mode: ObcAlertFrameMode.unackedActive,
+                    mode: ObcAlertFrameMode.ackedActive,
                     type: ObcAlertFrameType.Regular,
                   },
                 },
@@ -1296,7 +1296,7 @@ export const PerBlockState: Story = {
                 value: {
                   alert: {
                     status: AlertType.Warning,
-                    mode: ObcAlertFrameMode.unackedActive,
+                    mode: ObcAlertFrameMode.ackedActive,
                     type: ObcAlertFrameType.Regular,
                   },
                 },
@@ -1322,7 +1322,7 @@ export const PerBlockState: Story = {
                 dataQuality: ReadoutListItemDataQuality.lowIntegrity,
                 alert: {
                   status: AlertType.Warning,
-                  mode: ObcAlertFrameMode.unackedActive,
+                  mode: ObcAlertFrameMode.ackedActive,
                   type: ObcAlertFrameType.SmallSideFlip,
                   showAlertCategoryIcon: true,
                 },
@@ -1337,7 +1337,7 @@ export const PerBlockState: Story = {
                 dataQuality: ReadoutListItemDataQuality.invalid,
                 alert: {
                   status: AlertType.Alarm,
-                  mode: ObcAlertFrameMode.unackedActive,
+                  mode: ObcAlertFrameMode.ackedActive,
                   type: ObcAlertFrameType.LargeSideFlip,
                   showAlertCategoryIcon: true,
                 },
@@ -1396,6 +1396,94 @@ export const Alarm: Story = {
     }),
 };
 
+// The value alert frame now wraps the whole reading — value + degree + unit — and
+// is drawn as a pure overlay (4px/2px padding, stroke centred on that line), so
+// toggling it changes neither the row height nor the value/unit column positions.
+// Each combo is shown unframed then framed so the constant geometry is obvious;
+// the per-item outline marks the layout box (which the frame never grows).
+const VALUE_FRAME: AlertFrameConfig = {
+  status: AlertType.Warning,
+  mode: ObcAlertFrameMode.ackedActive,
+  type: ObcAlertFrameType.Regular,
+};
+
+const VALUE_FRAME_COMBOS: {label: string; config: ReadoutItemConfig}[] = [
+  {label: 'value + unit', config: {value: 123, unit: 'kn'}},
+  {
+    label: 'value + degree + unit',
+    config: {value: 287, unit: 'T', options: {hasDegree: true}},
+  },
+  {
+    label: 'value + unit + setpoint',
+    config: {value: 123, unit: 'kn', hasSetpoint: true, setpoint: 120},
+  },
+  {
+    label: 'value + unit + advice + setpoint',
+    config: {
+      value: 123,
+      unit: 'kn',
+      hasSetpoint: true,
+      setpoint: 120,
+      hasAdvice: true,
+      advice: 118,
+    },
+  },
+];
+
+export const ValueAlertFrame: Story = {
+  render: () => html`
+    <style>
+      .rli-vf {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        width: 380px;
+      }
+      .rli-vf-row {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+      }
+      .rli-vf-tag {
+        width: 180px;
+        flex: none;
+        font: 10px/1.2 var(--global-typography-ui-label-font-family, sans-serif);
+        text-transform: uppercase;
+        letter-spacing: 0.06em;
+        color: var(--element-neutral-color, #777);
+      }
+      .rli-vf-item {
+        flex: 1;
+        outline: 1px solid rgba(0, 0, 0, 0.12);
+      }
+    </style>
+    <div class="rli-vf">
+      ${VALUE_FRAME_COMBOS.flatMap((combo) =>
+        [false, true].map(
+          (framed) => html`
+            <div class="rli-vf-row">
+              <div class="rli-vf-tag">
+                ${combo.label} ${framed ? '· framed' : '· plain'}
+              </div>
+              <div class="rli-vf-item">
+                ${renderItem({
+                  ...combo.config,
+                  label: 'Heading',
+                  options: {
+                    ...combo.config.options,
+                    size: ReadoutListItemSize.medium,
+                    value: framed ? {alert: VALUE_FRAME} : undefined,
+                  },
+                })}
+              </div>
+            </div>
+          `
+        )
+      )}
+    </div>
+  `,
+};
+
 // Each row drops a different part; the per-row outline makes it obvious that the
 // row height and the bottom baseline stay constant regardless of what's missing.
 const MISSING_PARTS_ROWS: {title: string; config: ReadoutItemConfig}[] = [
@@ -1500,9 +1588,11 @@ export const MissingParts: Story = {
  * value digit edges, not both. Aligning the value edges would need either a
  * constant degree reserve (which widens the smaller rows' `°` — visually
  * undesirable) or pinning the value edge and letting the unit column stagger;
- * left for the designer. Two rows also carry per-block (nested) state — a value
- * `invalid` chip and a value alert frame — to confirm per-block state does not
- * shift the value edge.
+ * left for the designer. Several rows also carry per-block / row state — a value
+ * `invalid` chip (Battery), a value alert frame (Fuel), a `low-integrity` advice
+ * chip (Pressure), and a whole-row `low-integrity` + `invalid` setpoint + a
+ * row-level alert frame with a badge-icon flap (Distance) — to confirm none of
+ * them shift the aligned columns.
  */
 type AlignmentRow = {
   label: string;
@@ -1523,6 +1613,9 @@ type AlignmentRow = {
   hasValueIcon?: boolean;
   valueDataQuality?: ReadoutListItemDataQuality;
   valueAlert?: AlertFrameConfig;
+  setpointDataQuality?: ReadoutListItemDataQuality;
+  adviceDataQuality?: ReadoutListItemDataQuality;
+  alert?: AlertFrameConfig;
 };
 
 const ALIGNMENT_ROWS: AlignmentRow[] = [
@@ -1548,6 +1641,8 @@ const ALIGNMENT_ROWS: AlignmentRow[] = [
     setpoint: 1015,
     hasAdvice: true,
     advice: 1008,
+    // per-block advice low-integrity — the advice chip must not shift the columns
+    adviceDataQuality: ReadoutListItemDataQuality.lowIntegrity,
   },
   // negative value + fraction + low-integrity data quality
   {
@@ -1557,7 +1652,10 @@ const ALIGNMENT_ROWS: AlignmentRow[] = [
     fractionDigits: 1,
     dataQuality: ReadoutListItemDataQuality.lowIntegrity,
   },
-  // long unit + advice + setpoint (the "miles" row)
+  // long unit + advice + setpoint (the "miles" row) — also a "kitchen sink of
+  // state": whole row low-integrity, an invalid setpoint chip, and a row-level
+  // alert frame with a badge-icon flap, all at once, to prove none of them shift
+  // the aligned columns.
   {
     label: 'Distance',
     value: 4.2,
@@ -1567,6 +1665,14 @@ const ALIGNMENT_ROWS: AlignmentRow[] = [
     setpoint: 4.5,
     hasAdvice: true,
     advice: 4,
+    dataQuality: ReadoutListItemDataQuality.lowIntegrity,
+    setpointDataQuality: ReadoutListItemDataQuality.invalid,
+    alert: {
+      status: AlertType.Warning,
+      mode: ObcAlertFrameMode.ackedActive,
+      type: ObcAlertFrameType.SmallSideFlip,
+      showAlertCategoryIcon: true,
+    },
   },
   // kitchen sink: value + setpoint + advice + leading icon + value icon
   {
@@ -1612,7 +1718,7 @@ const ALIGNMENT_ROWS: AlignmentRow[] = [
     unit: '%',
     valueAlert: {
       status: AlertType.Warning,
-      mode: ObcAlertFrameMode.unackedActive,
+      mode: ObcAlertFrameMode.ackedActive,
       type: ObcAlertFrameType.Regular,
     },
   },
@@ -1651,7 +1757,7 @@ const alignmentStyle = `
     text-transform: uppercase; letter-spacing: 0.06em; color: var(--element-neutral-color, #777);
   }
   .rli-align-col {
-    display: flex; flex-direction: column; gap: 2px; width: 480px;
+    display: flex; flex-direction: column; gap: 8px; width: 480px;
     padding: 8px; border: 1px dashed var(--border-divider-color, #ccc); border-radius: 8px;
   }
 `;
@@ -1678,6 +1784,7 @@ function renderAlignmentColumn(aligned: boolean, showDebugOverlay: boolean) {
             fractionDigits: row.fractionDigits ?? 0,
             priority: row.priority,
             dataQuality: row.dataQuality,
+            alert: row.alert,
             hasLeadingIcon: row.hasLeadingIcon,
             value: {
               hasIcon: row.hasValueIcon,
@@ -1689,6 +1796,16 @@ function renderAlignmentColumn(aligned: boolean, showDebugOverlay: boolean) {
               // independent of each row's own fractionDigits.
               ...(aligned ? {spaceReserver: VALUE_RESERVER} : {}),
             },
+            // Setpoint / advice carry their per-block data quality in both
+            // columns; the shared reserver is added only in the aligned column.
+            setpoint: {
+              dataQuality: row.setpointDataQuality,
+              ...(aligned ? {spaceReserver: VALUE_RESERVER} : {}),
+            },
+            advice: {
+              dataQuality: row.adviceDataQuality,
+              ...(aligned ? {spaceReserver: VALUE_RESERVER} : {}),
+            },
             ...(aligned
               ? {
                   // Non-degree rows reserve the degree column so their digits
@@ -1696,8 +1813,6 @@ function renderAlignmentColumn(aligned: boolean, showDebugOverlay: boolean) {
                   hasDegreeSpacer: !(row.hasDegree ?? false),
                   maxDigits: MAX_INTEGER_DIGITS,
                   unit: {spaceReserver: LONGEST_UNIT},
-                  setpoint: {spaceReserver: VALUE_RESERVER},
-                  advice: {spaceReserver: VALUE_RESERVER},
                 }
               : {}),
           },

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

@@ -22,7 +22,11 @@ import {
 import {
   type AlertFrameConfig,
   wrapWithAlertFrame,
+  ObcAlertFrameType,
+  ObcAlertFrameThickness,
+  ObcAlertFrameMode,
 } from '../../components/alert-frame/alert-frame.js';
+import {AlertType} from '../../types.js';
 
 // The value weight maps straight to obc-textbox's font weights (regular /
 // semibold / bold). Re-exported so consumers can set `valueOptions.weight`
@@ -96,6 +100,14 @@ export interface ReadoutBlockState {
   alert?: false | AlertFrameConfig;
 }
 
+/**
+ * Per-value options. Unlike setpoint/advice, the value's `alert` frame AND
+ * `dataQuality` chip wrap the whole reading — value (+ value-icon) + degree +
+ * trailing unit — rather than the value alone. The alert frame is a pure overlay
+ * (4px/2px padding, stroke centred on that line); the data-quality chip reuses
+ * the block chip's `outline` styling with no extra padding. Neither shifts
+ * content or changes the row height / column alignment (Figma 58:10120).
+ */
 export interface ReadoutValueOptions extends ReadoutBlockState {
   /** Render the unfilled leading positions as muted zeroes (requires `maxDigits`). */
   hintedZeros?: boolean;
@@ -661,6 +673,34 @@ export class ObcReadoutListItem extends LitElement {
               alert: this.setpointOptions?.alert,
             })
           : nothing}
+        ${this.renderValueReading()}
+      </div>
+    `;
+  }
+
+  /**
+   * The value reading: the value block, its degree column and the trailing unit
+   * grouped in one relatively-positioned wrapper so the value alert frame AND the
+   * value data-quality chip can wrap value + degree + unit together (Figma
+   * 58:10120).
+   *
+   * Moving the degree / unit into this wrapper (the new last child of
+   * `.value-cluster`) preserves every existing gap, so the underlying content
+   * stays column-aligned with or without the frame / chip. Both the value alert
+   * (overlay) and the value data-quality chip are applied here — NOT inside
+   * `obc-readout-block` — so they extend over the unit; setpoint/advice keep their
+   * own block-level frame and chip. The chip uses `outline` (not `border`), so it
+   * never shifts the value's width / column alignment.
+   */
+  private renderValueReading(): TemplateResult {
+    return html`
+      <div
+        class=${classMap({
+          'value-reading': true,
+          ...this.dataQualityClasses(this.valueOptions?.dataQuality),
+        })}
+        part="value-reading"
+      >
         ${this.hasValue
           ? this.renderBlock({
               variant: ReadoutBlockVariant.value,
@@ -672,10 +712,52 @@ export class ObcReadoutListItem extends LitElement {
               spaceReserver: this.valueOptions?.spaceReserver,
               off: this.off,
               hasIcon: this.valueOptions?.hasIcon ?? false,
-              dataQuality: this.valueOptions?.dataQuality,
-              alert: this.valueOptions?.alert,
             })
           : nothing}
+        ${this.renderValueUnitGap()}
+        <div class="unit-area" part="unit-area">
+          ${this.renderTrailingUnit()} ${this.renderDegreeSpacer()}
+        </div>
+        ${this.renderValueAlertOverlay()}
+      </div>
+    `;
+  }
+
+  /**
+   * The value alert frame, drawn as a pure overlay around the value reading
+   * (value + degree + unit). It reserves no space — the `obc-alert-frame` sits in
+   * an absolutely-positioned box offset outward (see `.value-alert-overlay` in
+   * the CSS) so its stroke is centred on the 4px/2px padding line and toggling it
+   * never shifts content or row height. Renders only when `valueOptions.alert` is
+   * a config object.
+   */
+  private renderValueAlertOverlay(): TemplateResult | typeof nothing {
+    const alert = this.valueOptions?.alert;
+    if (typeof alert !== 'object' || alert === null) {
+      return nothing;
+    }
+    const thickness = alert.thickness ?? ObcAlertFrameThickness.Small;
+    return html`
+      <div
+        class=${classMap({
+          'value-alert-overlay': true,
+          // The outward offset is thickness-dependent (see the CSS): large frames
+          // draw a wider outline, so the box must sit further out to stay centred.
+          'thickness-large': thickness === ObcAlertFrameThickness.Large,
+        })}
+        aria-hidden="true"
+      >
+        <obc-alert-frame
+          part="value-alert-frame"
+          .type=${alert.type ?? ObcAlertFrameType.Regular}
+          .thickness=${thickness}
+          .status=${alert.status ?? AlertType.Alarm}
+          .mode=${alert.mode ?? ObcAlertFrameMode.ackedActive}
+          .showIcon=${alert.showIcon ?? false}
+          .showAlertCategoryIcon=${alert.showAlertCategoryIcon ?? true}
+          .wrapContent=${false}
+          .fullWidth=${false}
+        ></obc-alert-frame>
       </div>
     `;
   }
@@ -753,10 +835,7 @@ export class ObcReadoutListItem extends LitElement {
       <div class="content" part="content">
         ${this.renderLabelContainer()}
         <div class="value-area" part="value-area">
-          ${this.renderValueCluster()} ${this.renderValueUnitGap()}
-          <div class="unit-area" part="unit-area">
-            ${this.renderTrailingUnit()} ${this.renderDegreeSpacer()}
-          </div>
+          ${this.renderValueCluster()}
         </div>
         ${this.renderTrailingSource()}
       </div>