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

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

@@ -7,6 +7,55 @@
   width: 100%;
 }
 
+/* Bridge the list-item's public colour custom properties onto the block's, so
+   consumers keep theming the value / setpoint / advice / hinted-zero colours via
+   `--obc-readout-list-item-*` even though they now render inside obc-readout-block. */
+obc-readout-block {
+  --obc-readout-block-value-color: var(
+    --obc-readout-list-item-value-color,
+    var(--element-neutral-color)
+  );
+  --obc-readout-block-value-enhanced-color: var(
+    --obc-readout-list-item-value-enhanced-color,
+    var(--element-neutral-enhanced-color)
+  );
+  --obc-readout-block-setpoint-color: var(
+    --obc-readout-list-item-setpoint-color,
+    var(--element-neutral-color)
+  );
+  --obc-readout-block-setpoint-enhanced-color: var(
+    --obc-readout-list-item-setpoint-enhanced-color,
+    var(--instrument-enhanced-secondary-color)
+  );
+  --obc-readout-block-setpoint-touching-outline-color: var(
+    --obc-readout-list-item-setpoint-touching-outline-color,
+    var(--element-neutral-enhanced-color)
+  );
+  --obc-readout-block-setpoint-touching-color: var(
+    --obc-readout-list-item-setpoint-touching-color,
+    var(--base-blue-100)
+  );
+  --obc-readout-block-advice-color: var(
+    --obc-readout-list-item-advice-color,
+    var(--element-neutral-color)
+  );
+  --obc-readout-block-hinted-color: var(
+    --obc-readout-list-item-hinted-color,
+    var(--element-inactive-color)
+  );
+}
+
+/* Size the consumer-provided block icons forwarded into obc-readout-block's
+   `icon` slot (the block sizes the forwarded slot element; this sizes the
+   consumer's icon to fill it). */
+::slotted([slot="value-icon"]),
+::slotted([slot="setpoint-icon"]),
+::slotted([slot="advice-icon"]) {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+}
+
 /* ---------- Root / surface ----------
  * `.root` is the touch target (a <button> when clickable, otherwise a <div>).
  * `.surface` is the visible box that carries padding, corner radius, the
@@ -140,115 +189,10 @@
   align-items: flex-end;
 }
 
-/* ---------- Readout building block (advice / setpoint / value) ---------- */
-.block {
-  display: inline-flex;
-  align-items: flex-end;
-}
-
-/* Number + its (setpoint/advice) degree glyph, hugging with no gap — the
-   `.block` gap only separates the icon from this group. */
-.block-content {
-  display: inline-flex;
-  align-items: flex-end;
-}
-
-.block-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: none;
-  color: inherit;
-  /* Centre the icon against the block's text rather than bottom-aligning it (the
-     block is flex-end). Matters for the value block, whose text is taller than
-     the icon, so the value icon lines up with the number like the smaller
-     setpoint/advice icons do. */
-  align-self: center;
-}
-
-.block-icon obi-input-right,
-.block-icon obi-notification-advice,
-.block-icon ::slotted(*) {
-  display: block;
-  inline-size: 100%;
-  block-size: 100%;
-}
-
-.hinted-zero {
-  color: var(
-    --obc-readout-list-item-hinted-color,
-    var(--element-inactive-color)
-  );
-}
-
-/* ---------- Text colours (overridable via custom properties) ----------
- * obc-textbox does not set its own colour, so it inherits these. */
-.block-value {
-  color: var(--obc-readout-list-item-value-color, var(--element-neutral-color));
-}
-.block-value.tone-enhanced {
-  color: var(
-    --obc-readout-list-item-value-enhanced-color,
-    var(--element-neutral-enhanced-color)
-  );
-}
-/* The setpoint shares the value's colour state: neutral by default, enhanced
-   (blue) only when the row is enhanced — never a blue setpoint next to a grey
-   value. `--instrument-enhanced-secondary-color` is the same #2d548b as the
-   value's `--element-neutral-enhanced-color`. */
-.block-setpoint {
-  color: var(
-    --obc-readout-list-item-setpoint-color,
-    var(--element-neutral-color)
-  );
-  /* Flip-flop emphasis + pop-up fade animate at 100ms. */
-  transition:
-    opacity 100ms ease,
-    color 100ms ease;
-}
-.block-setpoint.tone-enhanced {
-  color: var(
-    --obc-readout-list-item-setpoint-enhanced-color,
-    var(--instrument-enhanced-secondary-color)
-  );
-}
-/* Pop-up: fade the setpoint out once value === setpoint, keeping its space so
-   the value stays column-aligned. */
-.block-setpoint.is-hiding {
-  opacity: 0;
-}
-.block-setpoint.is-hidden {
-  opacity: 0;
-  visibility: hidden;
-}
-/* Touching / focus state: the setpoint triangle takes the marker's focus look — a
-   pale fill (--base-blue-100) with a dark 1px edge (--element-neutral-enhanced),
-   mirroring `svghelpers/setpoint.ts` focus (fill base-blue-100 + 2px stroke).
-   The glyph icon is `fill: currentColor` and can't take a CSS `stroke`, so the
-   edge is layered drop-shadows. The setpoint number keeps its normal, readable
-   colour. */
-.block-setpoint.touching {
-  --_touching-outline: var(
-    --obc-readout-list-item-setpoint-touching-outline-color,
-    var(--element-neutral-enhanced-color)
-  );
-}
-.block-setpoint.touching .block-icon {
-  color: var(
-    --obc-readout-list-item-setpoint-touching-color,
-    var(--base-blue-100)
-  );
-  filter: drop-shadow(1px 0 0 var(--_touching-outline))
-    drop-shadow(-1px 0 0 var(--_touching-outline))
-    drop-shadow(0 1px 0 var(--_touching-outline))
-    drop-shadow(0 -1px 0 var(--_touching-outline));
-}
-.block-advice {
-  color: var(
-    --obc-readout-list-item-advice-color,
-    var(--element-neutral-color)
-  );
-}
+/* 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
+   keeps the surrounding row layout below. */
 
 .label {
   color: var(
@@ -266,23 +210,19 @@
   );
 }
 
-/* ---------- Per-block data quality ----------
+/* ---------- Source data quality ----------
  * Independent of (and nests inside) the row-level data-quality frame. Uses
- * `outline` (not `border`) so the chip never shifts the block's width — the
- * value stays column-aligned across rows. */
-.block.data-low-integrity,
-.block.data-invalid,
+ * `outline` (not `border`) so the chip never shifts the source's width. (The
+ * per-block value/setpoint/advice chips live in `obc-readout-block`.) */
 .source.data-low-integrity,
 .source.data-invalid {
   outline: 1px solid;
   border-radius: var(--global-border-radius-border-radius-check);
 }
-.block.data-low-integrity,
 .source.data-low-integrity {
   background: var(--alert-low-integrity-background-color);
   outline-color: var(--alert-low-integrity-border-color);
 }
-.block.data-invalid,
 .source.data-invalid {
   background: var(--alert-invalid-background-color);
   outline-color: var(--alert-invalid-border-color);
@@ -407,10 +347,6 @@
     --instrument-components-readout-new-list-item-regular-value-container-gap
   );
 }
-.size-small .block {
-  gap: var(--instrument-components-readout-new-general-regular-icon-gap);
-}
-.size-small .block-icon,
 .size-small .leading-icon {
   inline-size: var(
     --instrument-components-readout-new-general-regular-icon-size
@@ -443,10 +379,6 @@
     --instrument-components-readout-new-list-item-medium-value-container-gap
   );
 }
-.size-medium .block {
-  gap: var(--instrument-components-readout-new-general-medium-icon-gap);
-}
-.size-medium .block-icon,
 .size-medium .leading-icon {
   inline-size: var(
     --instrument-components-readout-new-general-medium-icon-size
@@ -474,10 +406,6 @@
 .size-large .value-cluster {
   gap: var(--instrument-components-readout-new-list-item-large-value-gap);
 }
-.size-large .block {
-  gap: var(--instrument-components-readout-new-general-large-icon-gap);
-}
-.size-large .block-icon,
 .size-large .leading-icon {
   inline-size: var(--instrument-components-readout-new-general-large-icon-size);
   block-size: var(--instrument-components-readout-new-general-large-icon-size);
@@ -517,3 +445,22 @@
   );
   --_obc-readout-list-item-data-border: var(--alert-invalid-border-color);
 }
+
+/* ---------- Debug overlay ----------
+ * `showDebugOverlay` outlines each readout building block (red), the degree
+ * columns (blue) and the degree spacer (green) so reserver widths / alignment
+ * are visible. A development aid (mirrors the donut chart's `showDebugOverlay`);
+ * off by default. */
+:host([showDebugOverlay]) obc-readout-block::part(block) {
+  outline: 1px solid rgba(220, 0, 0, 0.7);
+  outline-offset: -1px;
+}
+:host([showDebugOverlay]) obc-readout-block::part(degree),
+:host([showDebugOverlay]) .degree-column {
+  outline: 1px solid rgba(0, 0, 220, 0.7);
+  outline-offset: -1px;
+}
+:host([showDebugOverlay]) .degree-spacer {
+  outline: 1px solid rgba(0, 160, 0, 0.8);
+  outline-offset: -1px;
+}

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

@@ -99,6 +99,7 @@ type ReadoutItemConfig = {
   options?: StoryOptions;
   hasLeadingIcon?: boolean;
   hasValueIcon?: boolean;
+  showDebugOverlay?: boolean;
 };
 
 type ShowcaseCase = {label: string; config: ReadoutItemConfig};
@@ -179,6 +180,7 @@ function renderItem(config: ReadoutItemConfig) {
       .adviceOptions=${o.advice}
       .unitOptions=${o.unit}
       .srcOptions=${o.src}
+      .showDebugOverlay=${config.showDebugOverlay ?? false}
     >
       ${config.hasLeadingIcon
         ? html`<obi-placeholder slot="leading-icon"></obi-placeholder>`
@@ -1652,21 +1654,9 @@ const alignmentStyle = `
     display: flex; flex-direction: column; gap: 2px; width: 480px;
     padding: 8px; border: 1px dashed var(--border-divider-color, #ccc); border-radius: 8px;
   }
-  /* Debug aid (temporary): outline each readout building block (red) and the
-     degree column (blue) so reserver widths / alignment are visible. Scoped to
-     this story only via .rli-align-wrap — safe to delete when no longer needed. */
-  .rli-align-wrap obc-readout-list-item::part(block) {
-    outline: 1px solid rgba(220, 0, 0, 0.7); outline-offset: -1px;
-  }
-  .rli-align-wrap obc-readout-list-item::part(degree) {
-    outline: 1px solid rgba(0, 0, 220, 0.7); outline-offset: -1px;
-  }
-  .rli-align-wrap obc-readout-list-item::part(degree-spacer) {
-    outline: 1px solid rgba(0, 160, 0, 0.8); outline-offset: -1px;
-  }
 `;
 
-function renderAlignmentColumn(aligned: boolean) {
+function renderAlignmentColumn(aligned: boolean, showDebugOverlay: boolean) {
   return html`
     <div class="rli-align-col">
       ${ALIGNMENT_ROWS.map((row) =>
@@ -1681,6 +1671,7 @@ function renderAlignmentColumn(aligned: boolean) {
           advice: row.advice,
           hasLeadingIcon: row.hasLeadingIcon,
           hasValueIcon: row.hasValueIcon,
+          showDebugOverlay,
           options: {
             size: row.size ?? ReadoutListItemSize.small,
             hasDegree: row.hasDegree ?? false,
@@ -1716,8 +1707,18 @@ function renderAlignmentColumn(aligned: boolean) {
   `;
 }
 
-export const ColumnAlignment: Story = {
-  render: () => html`
+export const ColumnAlignment: StoryObj<
+  ReadoutListItemStoryArgs & {showDebugOverlay: boolean}
+> = {
+  args: {showDebugOverlay: true},
+  argTypes: {
+    showDebugOverlay: {
+      name: 'Show Debug Overlay',
+      control: {type: 'boolean'},
+      table: {category: 'Debug'},
+    },
+  },
+  render: (args) => html`
     <style>
       ${alignmentStyle}
     </style>
@@ -1726,13 +1727,13 @@ export const ColumnAlignment: Story = {
         <h3 class="rli-align-section-title">
           Without reservers — columns drift
         </h3>
-        ${renderAlignmentColumn(false)}
+        ${renderAlignmentColumn(false, args.showDebugOverlay)}
       </section>
       <section class="rli-align-section">
         <h3 class="rli-align-section-title">
           With shared reservers — unit column &amp; value right edge aligned
         </h3>
-        ${renderAlignmentColumn(true)}
+        ${renderAlignmentColumn(true, args.showDebugOverlay)}
       </section>
     </div>
   `,

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

@@ -8,11 +8,15 @@ import {
   ObcTextboxSize,
   ObcTextboxFontWeight,
 } from '../../components/textbox/textbox.js';
-import '../../icons/icon-input-right.js';
-import '../../icons/icon-notification-advice.js';
+import '../../building-blocks/readout-block/readout-block.js';
+import {
+  ReadoutBlockVariant,
+  ReadoutBlockSize,
+  ReadoutBlockDataQuality,
+  ReadoutBlockHidePhase,
+} from '../../building-blocks/readout-block/readout-block.js';
 import {
   formatNumericValue,
-  getHintZeros,
   type ReadoutNumericFormatOptions,
 } from '../readout/readout-formatters.js';
 import {
@@ -26,16 +30,13 @@ import {
 export {ObcTextboxFontWeight} from '../../components/textbox/textbox.js';
 
 /**
- * Density/size scale of the readout row.
+ * Density/size scale of the readout row (an alias of `ReadoutBlockSize`).
  * - `small`: regular value typography (smallest, densest).
  * - `medium`: medium value typography.
  * - `large`: large value typography.
  */
-export enum ReadoutListItemSize {
-  small = 'small',
-  medium = 'medium',
-  large = 'large',
-}
+export const ReadoutListItemSize = ReadoutBlockSize;
+export type ReadoutListItemSize = ReadoutBlockSize;
 
 /**
  * Placement of the unit/source relative to the label and value.
@@ -60,13 +61,12 @@ export enum ReadoutListItemPriority {
 }
 
 /**
- * Measurement quality of the value. Orthogonal to the row-level `alert`
- * – a low-integrity or invalid value can also sit inside an alert frame.
+ * Measurement quality of the value (an alias of `ReadoutBlockDataQuality`).
+ * Orthogonal to the row-level `alert` – a low-integrity or invalid value can
+ * also sit inside an alert frame.
  */
-export enum ReadoutListItemDataQuality {
-  lowIntegrity = 'low-integrity',
-  invalid = 'invalid',
-}
+export const ReadoutListItemDataQuality = ReadoutBlockDataQuality;
+export type ReadoutListItemDataQuality = ReadoutBlockDataQuality;
 
 /**
  * Corner style of the interactive (clickable) surface.
@@ -162,12 +162,6 @@ export interface ReadoutSrcOptions extends ReadoutBlockState {
   spaceReserver?: string;
 }
 
-enum BlockRole {
-  value = 'value',
-  setpoint = 'setpoint',
-  advice = 'advice',
-}
-
 /**
  * `<obc-readout-list-item>` – A compact, dense readout row for lists and tables.
  *
@@ -225,8 +219,10 @@ export class ObcReadoutListItem extends LitElement {
 
   @property({type: Boolean, attribute: false}) hasValue = true;
   @property({type: Number}) value: number | null = null;
-  /** Render the value as the literal "OFF" (e.g. equipment powered down). Affects the value only. */
+  /** Render the value as `offText` (e.g. equipment powered down). Affects the value only. */
   @property({type: Boolean}) off = false;
+  /** Text shown in place of the value when `off` is true. @availableWhen off==true */
+  @property({type: String}) offText = 'OFF';
 
   @property({type: Boolean}) hasSetpoint = false;
   /** @availableWhen hasSetpoint==true */
@@ -261,6 +257,13 @@ export class ObcReadoutListItem extends LitElement {
   @property({type: Object}) unitOptions?: ReadoutReserverOptions;
   @property({type: Object}) srcOptions?: ReadoutSrcOptions;
 
+  /**
+   * Development aid: outline the readout building blocks (red), the degree
+   * columns (blue) and the degree spacer (green) so reserver widths / alignment
+   * are visible. Off by default.
+   */
+  @property({type: Boolean, reflect: true}) showDebugOverlay = false;
+
   /** Pop-up deferred-hide phase for the setpoint (see {@link updated}). */
   @state() private deferredSetpointHidePhase: 'none' | 'hiding' | 'hidden' =
     'none';
@@ -426,36 +429,6 @@ export class ObcReadoutListItem extends LitElement {
     };
   }
 
-  /** Widest possible value string for width reservation (e.g. `"000.0"`). */
-  private get reserverText(): string {
-    const maxDigits = this.resolvedMaxDigits;
-    if (maxDigits <= 0) {
-      return '';
-    }
-    const fractionDigits = this.resolvedFractionDigits;
-    const integer = '0'.repeat(Math.max(maxDigits, 1));
-    return fractionDigits > 0
-      ? `${integer}.${'0'.repeat(fractionDigits)}`
-      : integer;
-  }
-
-  /**
-   * Effective width reserver for a numeric block: the wider of the explicit
-   * `spaceReserver` and the `maxDigits`/`fractionDigits`-derived reserve, so an
-   * explicit reserver can never reserve *less* than the formatted value needs.
-   * Under tabular-nums the rendered width is proportional to character count, so
-   * "wider" compares string length.
-   */
-  private widerReserver(explicit: string | undefined, derived: string): string {
-    if (!explicit) {
-      return derived;
-    }
-    if (!derived) {
-      return explicit;
-    }
-    return explicit.length >= derived.length ? explicit : derived;
-  }
-
   /** classMap fragment for a block / source carrying per-block data quality. */
   private dataQualityClasses(
     dataQuality: ReadoutListItemDataQuality | undefined
@@ -467,96 +440,65 @@ export class ObcReadoutListItem extends LitElement {
     };
   }
 
-  private renderIcon(role: BlockRole): TemplateResult | typeof nothing {
-    if (role === BlockRole.value) {
-      if (!this.valueOptions?.hasIcon) {
-        return nothing;
-      }
-      return html`<span class="block-icon" aria-hidden="true"
-        ><slot name="value-icon"></slot
-      ></span>`;
+  /**
+   * Forward the matching list-item icon slot into the block's single `icon`
+   * slot. The variant's default marker lives in `obc-readout-block` and shows
+   * when nothing is assigned here (an empty forwarded slot flattens to nothing).
+   */
+  private renderForwardedIcon(variant: ReadoutBlockVariant): TemplateResult {
+    if (variant === ReadoutBlockVariant.setpoint) {
+      return html`<slot name="setpoint-icon" slot="icon"></slot>`;
     }
-    if (role === BlockRole.setpoint) {
-      return html`<span class="block-icon" aria-hidden="true">
-        <slot name="setpoint-icon"><obi-input-right></obi-input-right></slot>
-      </span>`;
+    if (variant === ReadoutBlockVariant.advice) {
+      return html`<slot name="advice-icon" slot="icon"></slot>`;
     }
-    return html`<span class="block-icon" aria-hidden="true">
-      <slot name="advice-icon"
-        ><obi-notification-advice></obi-notification-advice
-      ></slot>
-    </span>`;
+    return html`<slot name="value-icon" slot="icon"></slot>`;
   }
 
   private renderBlock(config: {
-    role: BlockRole;
+    variant: ReadoutBlockVariant;
     value: number | null | undefined;
-    size: ObcTextboxSize;
+    valueSize: ObcTextboxSize;
     enhanced: boolean;
     weight: ObcTextboxFontWeight;
     hintedZeros: boolean;
     spaceReserver?: string;
     off?: boolean;
     hasDegree?: boolean;
-    extraClasses?: Record<string, boolean>;
-    dataQuality?: ReadoutListItemDataQuality;
+    hasIcon?: boolean;
+    touching?: boolean;
+    hidePhase?: ReadoutBlockHidePhase;
+    dataQuality?: ReadoutBlockDataQuality;
     alert?: false | AlertFrameConfig;
   }): TemplateResult {
-    const formatOptions = this.numericFormatOptions(this.resolvedMaxDigits);
-    const valueForFormat = config.value ?? undefined;
-    const text = config.off
-      ? 'OFF'
-      : formatNumericValue(valueForFormat, formatOptions);
-    // `maxDigits` reserves INTEGER digits only (see `reserverText`), but
-    // getHintZeros measures total digits (it subtracts just the decimal point),
-    // so pad its target by `fractionDigits` to hint the right number of integer
-    // zeros (e.g. value 1.2, maxDigits 3, fractionDigits 1 → "001.2", not "01.2").
-    const hinted =
-      config.off || !config.hintedZeros
-        ? ''
-        : getHintZeros(valueForFormat, {
-            ...formatOptions,
-            minValueLength:
-              formatOptions.minValueLength + formatOptions.fractionDigits,
-          });
-    const reserver = this.widerReserver(
-      config.spaceReserver,
-      this.reserverText
-    );
-
-    const block = html`
-      <div
-        class=${classMap({
-          block: true,
-          [`block-${config.role}`]: true,
-          'tone-enhanced': config.enhanced,
-          ...this.dataQualityClasses(config.dataQuality),
-          ...(config.extraClasses ?? {}),
-        })}
-        part="block block-${config.role}"
+    // The block owns the formatting, hinted zeros, reserver, degree and icon; the
+    // row keeps the density tier (`size`) and the resolved per-block number size
+    // (`valueSize`) so flip-flop/pop-up emphasis stays a row decision.
+    return html`
+      <obc-readout-block
+        exportparts="block, block-content, block-text, block-icon, degree"
+        .variant=${config.variant}
+        .value=${config.value ?? null}
+        .size=${this.resolvedSize}
+        .valueSize=${config.valueSize}
+        .enhanced=${config.enhanced}
+        .weight=${config.weight}
+        .hasDegree=${config.hasDegree ?? false}
+        .hasIcon=${config.hasIcon ?? false}
+        .fractionDigits=${this.resolvedFractionDigits}
+        .maxDigits=${this.resolvedMaxDigits}
+        .hintedZeros=${config.hintedZeros}
+        .spaceReserver=${config.spaceReserver}
+        .off=${config.off ?? false}
+        .offText=${this.offText}
+        .touching=${config.touching ?? false}
+        .hidePhase=${config.hidePhase ?? ReadoutBlockHidePhase.none}
+        .dataQuality=${config.dataQuality}
+        .alert=${config.alert ?? false}
       >
-        ${this.renderIcon(config.role)}
-        <span class="block-content">
-          <obc-textbox
-            class="block-text"
-            .size=${config.size}
-            .fontWeight=${config.weight}
-            .tabularNums=${true}
-          >
-            ${hinted
-              ? html`<span class="hinted-zero" aria-hidden="true"
-                  >${hinted}</span
-                >`
-              : nothing}${text}
-            ${reserver ? html`<span slot="length">${reserver}</span>` : nothing}
-          </obc-textbox>
-          ${config.hasDegree
-            ? this.renderDegreeGlyph(config.size, {inherit: true})
-            : nothing}
-        </span>
-      </div>
+        ${this.renderForwardedIcon(config.variant)}
+      </obc-readout-block>
     `;
-    return wrapWithAlertFrame(config.alert ?? false, block);
   }
 
   /**
@@ -678,20 +620,20 @@ export class ObcReadoutListItem extends LitElement {
   private renderValueCluster(): TemplateResult {
     const popUpAtSetpoint =
       this.isPopUp && this.isAtSetpoint && !this.setpointTouching;
-    const setpointExtraClasses = {
-      'is-hiding':
-        popUpAtSetpoint && this.deferredSetpointHidePhase === 'hiding',
-      'is-hidden':
-        popUpAtSetpoint && this.deferredSetpointHidePhase === 'hidden',
-      touching: this.setpointTouching,
-    };
+    const setpointHidePhase = !popUpAtSetpoint
+      ? ReadoutBlockHidePhase.none
+      : this.deferredSetpointHidePhase === 'hiding'
+        ? ReadoutBlockHidePhase.hiding
+        : this.deferredSetpointHidePhase === 'hidden'
+          ? ReadoutBlockHidePhase.hidden
+          : ReadoutBlockHidePhase.none;
     return html`
       <div class="value-cluster" part="value-cluster">
         ${this.hasAdvice
           ? this.renderBlock({
-              role: BlockRole.advice,
+              variant: ReadoutBlockVariant.advice,
               value: this.advice,
-              size: this.secondarySize,
+              valueSize: this.secondarySize,
               enhanced: false,
               weight: ObcTextboxFontWeight.regular,
               hintedZeros: this.adviceOptions?.hintedZeros ?? false,
@@ -703,9 +645,9 @@ export class ObcReadoutListItem extends LitElement {
           : nothing}
         ${this.hasSetpoint
           ? this.renderBlock({
-              role: BlockRole.setpoint,
+              variant: ReadoutBlockVariant.setpoint,
               value: this.setpoint,
-              size: this.setpointSize,
+              valueSize: this.setpointSize,
               // Value and setpoint share the enhanced colour state (both neutral
               // or both enhanced); the setpoint is bold only while emphasised.
               enhanced: this.rowEnhanced,
@@ -713,21 +655,23 @@ export class ObcReadoutListItem extends LitElement {
               hintedZeros: this.setpointOptions?.hintedZeros ?? false,
               spaceReserver: this.setpointOptions?.spaceReserver,
               hasDegree: this.hasDegree ?? false,
-              extraClasses: setpointExtraClasses,
+              touching: this.setpointTouching,
+              hidePhase: setpointHidePhase,
               dataQuality: this.setpointOptions?.dataQuality,
               alert: this.setpointOptions?.alert,
             })
           : nothing}
         ${this.hasValue
           ? this.renderBlock({
-              role: BlockRole.value,
+              variant: ReadoutBlockVariant.value,
               value: this.value,
-              size: this.valueSize,
+              valueSize: this.valueSize,
               enhanced: this.rowEnhanced,
               weight: this.valueWeight,
               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,
             })