@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.128 → 2.0.0-next.129

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

@@ -13,6 +13,8 @@ import {
   isDisplayedAtSetpoint,
   readoutPrimarySize,
   readoutSecondarySize,
+  readoutSetpointSize,
+  readoutValueSize,
   readoutSetpointWeight,
   readoutDataQualityClasses,
   resolveSetpointHidePhase,
@@ -91,6 +93,54 @@ describe('readoutPrimarySize / readoutSecondarySize', () => {
   });
 });
 
+describe('readoutSetpointSize', () => {
+  const sizes = {primary: ObcTextboxSize.l, secondary: ObcTextboxSize.s};
+
+  it('is secondary at rest (primary-secondary convention)', () => {
+    expect(
+      readoutSetpointSize({...sizes, emphasized: false, equalSize: false})
+    ).toBe(ObcTextboxSize.s);
+  });
+
+  it('is primary while emphasised OR in equal-size, including both at once', () => {
+    expect(
+      readoutSetpointSize({...sizes, emphasized: true, equalSize: false})
+    ).toBe(ObcTextboxSize.l);
+    expect(
+      readoutSetpointSize({...sizes, emphasized: false, equalSize: true})
+    ).toBe(ObcTextboxSize.l);
+    // Touching an equal-size setpoint must not demote it.
+    expect(
+      readoutSetpointSize({...sizes, emphasized: true, equalSize: true})
+    ).toBe(ObcTextboxSize.l);
+  });
+});
+
+describe('readoutValueSize', () => {
+  const sizes = {primary: ObcTextboxSize.l, secondary: ObcTextboxSize.s};
+
+  it('is primary at rest and secondary while the setpoint is emphasised', () => {
+    expect(
+      readoutValueSize({...sizes, setpointEmphasized: false, equalSize: false})
+    ).toBe(ObcTextboxSize.l);
+    expect(
+      readoutValueSize({...sizes, setpointEmphasized: true, equalSize: false})
+    ).toBe(ObcTextboxSize.s);
+  });
+
+  it('never demotes in equal-size — not even while touching', () => {
+    // Both blocks holding the primary size IS the mode; a touch-driven
+    // demotion would silently turn equal-size into primary-secondary for the
+    // whole adjustment.
+    expect(
+      readoutValueSize({...sizes, setpointEmphasized: true, equalSize: true})
+    ).toBe(ObcTextboxSize.l);
+    expect(
+      readoutValueSize({...sizes, setpointEmphasized: false, equalSize: true})
+    ).toBe(ObcTextboxSize.l);
+  });
+});
+
 describe('readoutSetpointWeight', () => {
   it('is semibold only while emphasised', () => {
     expect(readoutSetpointWeight(true)).toBe(ObcTextboxFontWeight.semibold);

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

@@ -112,6 +112,39 @@ export function readoutSecondarySize(size: ReadoutBlockSize): ObcTextboxSize {
   }
 }
 
+/**
+ * The setpoint block's typography size: primary while emphasised (touching /
+ * flip-flop away from setpoint) or in the `equal-size` interaction, secondary
+ * otherwise.
+ */
+export function readoutSetpointSize(options: {
+  primary: ObcTextboxSize;
+  secondary: ObcTextboxSize;
+  emphasized: boolean;
+  equalSize: boolean;
+}): ObcTextboxSize {
+  return options.emphasized || options.equalSize
+    ? options.primary
+    : options.secondary;
+}
+
+/**
+ * The value block's typography size: secondary while the setpoint is the
+ * focus of attention (touching / flip-flop away from setpoint) — EXCEPT in
+ * the `equal-size` interaction, whose whole point is that both blocks hold
+ * the primary size; there the value never demotes, not even while touching.
+ */
+export function readoutValueSize(options: {
+  primary: ObcTextboxSize;
+  secondary: ObcTextboxSize;
+  setpointEmphasized: boolean;
+  equalSize: boolean;
+}): ObcTextboxSize {
+  return options.setpointEmphasized && !options.equalSize
+    ? options.secondary
+    : options.primary;
+}
+
 /** Setpoint is SemiBold only while emphasised, otherwise regular weight. */
 export function readoutSetpointWeight(
   emphasized: boolean

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

@@ -41,7 +41,7 @@ obc-readout-block {
   );
   --obc-readout-block-hinted-color: var(
     --obc-readout-hinted-color,
-    var(--element-inactive-color)
+    var(--element-disabled-color)
   );
 }
 
@@ -252,37 +252,83 @@ obc-readout-block {
   );
 }
 
-/* ---------- Meta zone (label + unit) ---------- */
+/* ---------- Meta zone (label + unit) ----------
+ * `.meta` is a row hosting the optional leading icon and `.meta-labels`; the
+ * inline/stacked arrangement applies to `.meta-labels` (the label/unit pair). */
 .meta {
   display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--instrument-components-readout-new-general-regular-icon-gap);
   padding-inline: var(--_readout-trim);
 }
 
-.meta.meta-inline {
+.meta .leading-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  color: var(--element-neutral-color);
+}
+.meta .leading-icon ::slotted(*) {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+}
+.readout.size-small .meta .leading-icon {
+  inline-size: var(
+    --instrument-components-readout-new-general-regular-icon-size
+  );
+  block-size: var(
+    --instrument-components-readout-new-general-regular-icon-size
+  );
+}
+.readout.size-medium .meta .leading-icon {
+  inline-size: var(
+    --instrument-components-readout-new-general-medium-icon-size
+  );
+  block-size: var(--instrument-components-readout-new-general-medium-icon-size);
+}
+.readout.size-large .meta .leading-icon {
+  inline-size: var(--instrument-components-readout-new-general-large-icon-size);
+  block-size: var(--instrument-components-readout-new-general-large-icon-size);
+}
+
+.meta-labels {
+  display: inline-flex;
+}
+
+.meta-inline .meta-labels {
   flex-direction: row;
-  align-items: flex-start;
+  /* Bottom-align so an `s` label and its `xs` unit share a baseline (the
+     Figma title block is items-end); identical to the old flex-start while
+     both were `xs`. */
+  align-items: flex-end;
   gap: var(--global-size-spacing-target-padding);
 }
 
-.meta.meta-stacked {
+.meta-stacked .meta-labels {
   flex-direction: column;
   align-items: flex-end;
 }
 
-.readout.direction-vertical.alignment-left .meta.meta-stacked {
+.readout.direction-vertical.alignment-left .meta-stacked .meta-labels {
   align-items: flex-start;
 }
 
-.readout.direction-vertical.alignment-center .meta.meta-stacked {
+.readout.direction-vertical.alignment-center .meta-stacked .meta-labels {
   align-items: center;
 }
 
 /* Horizontal: the label/unit column sits beside the value, top-aligned within
    the row so the label reads first. */
 .readout.direction-horizontal .meta.meta-stacked {
-  align-items: flex-start;
   align-self: center;
 
+  & .meta-labels {
+    align-items: flex-start;
+  }
+
   &.label-only {
     align-self: flex-start;
   }
@@ -292,6 +338,20 @@ obc-readout-block {
   }
 }
 
+/* Cap alignment beside the value (Figma 6.1 review): the label's cap TOP and
+   the unit's cap BOTTOM line up with the value's cap edges. The stack is
+   pinned to the value's container height with space-between — every textbox
+   carries a fixed 4px pad above/below its cap, exactly like the value box, so
+   pinning the boxes to the container edges aligns the caps for any label/unit
+   size. Only when both lines exist: a single line keeps its edge alignment
+   from the rules above. */
+.readout.direction-horizontal
+  .meta.meta-stacked:not(.label-only):not(.unit-only)
+  .meta-labels {
+  block-size: var(--_readout-primary-height);
+  justify-content: space-between;
+}
+
 .label {
   color: var(--obc-readout-label-color, var(--element-neutral-color));
 }
@@ -328,6 +388,60 @@ obc-readout-block {
   outline-color: var(--alert-invalid-border-color);
 }
 
+/* ---------- Source state chip & deviation (Figma 6.1 Readout-block-source)
+ * `enhanced` renders the amplified chip, `caution`/`warning` the alert chip.
+ * Like the data-quality chip these use `outline`, so toggling a state never
+ * shifts the layout. TODO(designer): Figma pads the chip 4px; a padding here
+ * would shift the layout on live state changes, so the chip hugs the text
+ * like the data-quality chip does. */
+.source-block {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+.source-block.source-state-enhanced,
+.source-block.source-state-caution,
+.source-block.source-state-warning {
+  outline: 1px solid;
+  border-radius: var(--global-border-radius-border-radius-check);
+}
+.source-block.source-state-enhanced {
+  background: var(--amplified-enabled-background-color);
+  outline-color: var(--amplified-enabled-border-color);
+}
+.source-block.source-state-enhanced .source,
+.source-block.source-state-enhanced .source-deviation {
+  color: var(--on-amplified-active-color);
+}
+.source-block.source-state-caution {
+  background: var(--alert-caution-color);
+  outline-color: var(--alert-caution-outline-color);
+}
+.source-block.source-state-caution .source,
+.source-block.source-state-caution .source-deviation {
+  color: var(--on-caution-active-color);
+}
+.source-block.source-state-warning {
+  background: var(--alert-warning-color);
+  outline-color: var(--alert-warning-outline-color);
+}
+.source-block.source-state-warning .source,
+.source-block.source-state-warning .source-deviation {
+  color: var(--on-warning-active-color);
+}
+
+.source-deviation {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  color: var(--element-inactive-color);
+}
+.source-deviation obi-delta {
+  display: block;
+  inline-size: 12px;
+  block-size: 12px;
+}
+
 /* ---------- Source row & auto divider ---------- */
 .source-row {
   display: inline-flex;
@@ -340,12 +454,8 @@ obc-readout-block {
   background-color: var(--border-divider-color);
 }
 
-.divider.divider-horizontal {
-  inline-size: 100%;
-  block-size: 1px;
-  margin-block: var(--_readout-divider-pad);
-}
-
+/* Only the horizontal direction draws a source divider (Figma 6.1: vertical
+   readouts have no rule above the source). */
 .divider.divider-vertical {
   inline-size: 1px;
   align-self: stretch;
@@ -497,9 +607,6 @@ obc-readout-block {
   --_readout-value-pad-v: var(
     --instrument-components-readout-new-group-vertical-regular-value-container-padding-vertical
   );
-  --_readout-divider-pad: var(
-    --instrument-components-readout-new-group-vertical-regular-divider-padding
-  );
   --_readout-min-height: var(
     --instrument-components-readout-new-group-vertical-regular-container-min-height
   );
@@ -524,9 +631,6 @@ obc-readout-block {
   --_readout-value-pad-v: var(
     --instrument-components-readout-new-group-vertical-medium-value-container-padding-vertical
   );
-  --_readout-divider-pad: var(
-    --instrument-components-readout-new-group-vertical-medium-divider-padding
-  );
 }
 
 .readout.direction-vertical.stacking-inline.size-large {
@@ -545,9 +649,6 @@ obc-readout-block {
   --_readout-value-pad-v: var(
     --instrument-components-readout-new-group-vertical-enhanced-vertical-value-container-padding-vertical
   );
-  --_readout-divider-pad: var(
-    --instrument-components-readout-new-group-vertical-enhanced-divider-padding
-  );
   --_readout-min-height: var(
     --instrument-components-readout-new-group-vertical-enhanced-container-min-height
   );
@@ -570,9 +671,6 @@ obc-readout-block {
   --_readout-value-pad-v: var(
     --instrument-components-readout-new-stack-regular-value-container-padding-vertical
   );
-  --_readout-divider-pad: var(
-    --instrument-components-readout-new-stack-regular-divider-padding
-  );
   --_readout-min-height: var(
     --instrument-components-readout-new-stack-regular-container-min-height
   );
@@ -594,9 +692,6 @@ obc-readout-block {
   --_readout-value-pad-v: var(
     --instrument-components-readout-new-stack-medium-value-container-padding-vertical
   );
-  --_readout-divider-pad: var(
-    --instrument-components-readout-new-stack-medium-divider-padding
-  );
 }
 
 .readout.direction-vertical.stacking-stacked.size-large {
@@ -615,9 +710,6 @@ obc-readout-block {
   --_readout-value-pad-v: var(
     --instrument-components-readout-new-stack-enhanced-vertical-value-container-padding-vertical
   );
-  --_readout-divider-pad: var(
-    --instrument-components-readout-new-stack-enhanced-divider-padding
-  );
   --_readout-min-height: var(
     --instrument-components-readout-new-stack-enhanced-container-min-height
   );