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

package/bundle/openbridge-webcomponents.bundle.js

@@ -222992,6 +222992,86 @@ 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
@@ -223637,6 +223717,33 @@ let ObcReadoutListItem = class extends i$4 {
       dataQuality: this.setpointOptions?.dataQuality,
       alert: this.setpointOptions?.alert
     }) : A}
+        ${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.
+   */
+  renderValueReading() {
+    return b`
+      <div
+        class=${e$1({
+      "value-reading": true,
+      ...this.dataQualityClasses(this.valueOptions?.dataQuality)
+    })}
+        part="value-reading"
+      >
         ${this.hasValue ? this.renderBlock({
       variant: ReadoutBlockVariant.value,
       value: this.value,
@@ -223646,10 +223753,51 @@ let ObcReadoutListItem = class extends i$4 {
       hintedZeros: this.valueOptions?.hintedZeros ?? false,
       spaceReserver: this.valueOptions?.spaceReserver,
       off: this.off,
-      hasIcon: this.valueOptions?.hasIcon ?? false,
-      dataQuality: this.valueOptions?.dataQuality,
-      alert: this.valueOptions?.alert
+      hasIcon: this.valueOptions?.hasIcon ?? false
     }) : A}
+        ${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.
+   */
+  renderValueAlertOverlay() {
+    const alert = this.valueOptions?.alert;
+    if (typeof alert !== "object" || alert === null) {
+      return A;
+    }
+    const thickness = alert.thickness ?? ObcAlertFrameThickness.Small;
+    return b`
+      <div
+        class=${e$1({
+      "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>
     `;
   }
@@ -223708,10 +223856,7 @@ let ObcReadoutListItem = class extends i$4 {
       <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>
@@ -223883,13 +224028,15 @@ const componentStyle$4 = i$7`* {
   width: 100%;
 }
 
-/* Vertical stack of rows. The 4px row gap matches the rich detail rows in
-   \`obc-automation-tank\`; override via \`--obc-readout-list-row-gap\`. */
+/* Vertical stack of rows. The 8px default row gap leaves room for a value alert
+   frame, which overhangs ~3px above and below each row — so two stacked rows that
+   both carry an alarm frame never collide. Override via
+   \`--obc-readout-list-row-gap\`. */
 
 .list {
   display: flex;
   flex-direction: column;
-  gap: var(--obc-readout-list-row-gap, 4px);
+  gap: var(--obc-readout-list-row-gap, 8px);
   width: 100%;
 }
 `;