@oicl/openbridge-webcomponents 2.0.0-next.83 → 2.0.0-next.85

package/dist/navigation-instruments/readout-list-item/readout-list-item.js

@@ -1,11 +1,12 @@
 import { unsafeCSS, LitElement, nothing, html } from "lit";
-import { property } from "lit/decorators.js";
+import { property, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import componentStyle from "./readout-list-item.css.js";
 import { customElement } from "../../decorator.js";
-import { ReadoutSetpointSize, ReadoutSetpointValueTypography, ReadoutSetpointMode } from "../readout-setpoint/readout-setpoint.js";
-import { Priority } from "../types.js";
+import { ObcTextboxSize, ObcTextboxFontWeight } from "../../components/textbox/textbox.js";
 import "../../icons/icon-input-right.js";
+import "../../icons/icon-notification-advice.js";
+import { formatNumericValue, getHintZeros } from "../readout/readout-formatters.js";
 import { wrapWithAlertFrame } from "../../components/alert-frame/alert-frame.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -17,16 +18,10 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-var ReadoutListItemDataState = /* @__PURE__ */ ((ReadoutListItemDataState2) => {
-  ReadoutListItemDataState2["none"] = "none";
-  ReadoutListItemDataState2["lowIntegrity"] = "low-integrity";
-  ReadoutListItemDataState2["invalid"] = "invalid";
-  return ReadoutListItemDataState2;
-})(ReadoutListItemDataState || {});
 var ReadoutListItemSize = /* @__PURE__ */ ((ReadoutListItemSize2) => {
-  ReadoutListItemSize2["base"] = "base";
-  ReadoutListItemSize2["priority"] = "priority";
-  ReadoutListItemSize2["enhanced"] = "enhanced";
+  ReadoutListItemSize2["small"] = "small";
+  ReadoutListItemSize2["medium"] = "medium";
+  ReadoutListItemSize2["large"] = "large";
   return ReadoutListItemSize2;
 })(ReadoutListItemSize || {});
 var ReadoutListItemStacking = /* @__PURE__ */ ((ReadoutListItemStacking2) => {
@@ -38,285 +33,539 @@ var ReadoutListItemStacking = /* @__PURE__ */ ((ReadoutListItemStacking2) => {
 var ReadoutListItemPriority = /* @__PURE__ */ ((ReadoutListItemPriority2) => {
   ReadoutListItemPriority2["regular"] = "regular";
   ReadoutListItemPriority2["enhanced"] = "enhanced";
-  ReadoutListItemPriority2["setpoint"] = "setpoint";
-  ReadoutListItemPriority2["setpointFlipFlop"] = "setpoint-flip-flop";
   return ReadoutListItemPriority2;
 })(ReadoutListItemPriority || {});
+var ReadoutListItemDataQuality = /* @__PURE__ */ ((ReadoutListItemDataQuality2) => {
+  ReadoutListItemDataQuality2["lowIntegrity"] = "low-integrity";
+  ReadoutListItemDataQuality2["invalid"] = "invalid";
+  return ReadoutListItemDataQuality2;
+})(ReadoutListItemDataQuality || {});
+var ReadoutListItemBorder = /* @__PURE__ */ ((ReadoutListItemBorder2) => {
+  ReadoutListItemBorder2["squared"] = "squared";
+  ReadoutListItemBorder2["round"] = "round";
+  ReadoutListItemBorder2["roundCorners"] = "round-corners";
+  return ReadoutListItemBorder2;
+})(ReadoutListItemBorder || {});
+var ReadoutListItemSetpointInteraction = /* @__PURE__ */ ((ReadoutListItemSetpointInteraction2) => {
+  ReadoutListItemSetpointInteraction2["alwaysVisible"] = "always-visible";
+  ReadoutListItemSetpointInteraction2["flipFlop"] = "flip-flop";
+  ReadoutListItemSetpointInteraction2["popUp"] = "pop-up";
+  return ReadoutListItemSetpointInteraction2;
+})(ReadoutListItemSetpointInteraction || {});
 let ObcReadoutListItem = class extends LitElement {
   constructor() {
     super(...arguments);
-    this.size = "base";
-    this.stacking = "trailing-unit";
-    this.priority = "regular";
-    this.dataState = "none";
-    this.alert = false;
-    this.label = "";
-    this.unit = "";
-    this.src = "";
-    this.value = void 0;
-    this.setpointValue = void 0;
+    this.hasValue = true;
+    this.value = null;
+    this.off = false;
     this.hasSetpoint = false;
-    this.hasDegree = false;
-    this.hasUnit = false;
-    this.hasLabel = false;
-    this.hasSource = false;
+    this.hasAdvice = false;
+    this.clickable = false;
     this.hasLeadingIcon = false;
-    this.hasValueIcon = false;
+    this.hasDegree = false;
+    this.hasDegreeSpacer = false;
     this.fractionDigits = 0;
-    this.showZeroPadding = false;
-    this.minValueLength = 0;
-    this.hasHintedZeros = false;
-    this.labelOnly = false;
-  }
-  get resolvedMainValueSize() {
-    return this.size === "enhanced" ? ReadoutSetpointSize.large : this.size === "priority" ? ReadoutSetpointSize.medium : ReadoutSetpointSize.regular;
-  }
-  get resolvedValueSize() {
-    if (this.priority === "setpoint-flip-flop") {
-      if (this.size === "priority") {
-        return ReadoutSetpointSize.small;
-      }
-      if (this.size === "enhanced") {
-        return ReadoutSetpointSize.regular;
-      }
-    }
-    if (this.size === "enhanced") {
-      return ReadoutSetpointSize.large;
-    }
-    return ReadoutSetpointSize.regular;
+    this.maxDigits = 0;
+    this.alert = false;
+    this.deferredSetpointHidePhase = "none";
+    this.hasCompletedFirstUpdate = false;
+  }
+  get resolvedSize() {
+    return this.size ?? "small";
   }
-  get resolvedValueTypography() {
-    if (this.priority === "setpoint-flip-flop" && this.resolvedValueSize === ReadoutSetpointSize.small) {
-      return void 0;
+  get resolvedStacking() {
+    return this.stacking ?? "trailing-unit";
+  }
+  get resolvedPriority() {
+    return this.priority ?? "regular";
+  }
+  get resolvedFractionDigits() {
+    return this.fractionDigits ?? 0;
+  }
+  get resolvedMaxDigits() {
+    return this.maxDigits ?? 0;
+  }
+  get resolvedClickable() {
+    const clickable = this.clickable;
+    if (!clickable) {
+      return false;
     }
-    if (this.priority === "setpoint-flip-flop" && this.size === "enhanced") {
-      return ReadoutSetpointValueTypography.regular;
+    if (clickable === true) {
+      return {
+        border: "squared"
+        /* squared */
+      };
     }
-    switch (this.size) {
-      case "enhanced":
-        return ReadoutSetpointValueTypography.large;
-      case "priority":
-        return ReadoutSetpointValueTypography.medium;
-      case "base":
-      default:
-        return ReadoutSetpointValueTypography.regular;
+    return {
+      border: clickable.border ?? "squared"
+      /* squared */
+    };
+  }
+  get isAtSetpoint() {
+    if (!this.hasSetpoint || this.value === null || this.setpoint === void 0) {
+      return false;
     }
+    const formatOptions = this.numericFormatOptions(this.resolvedMaxDigits);
+    return formatNumericValue(this.value, formatOptions) === formatNumericValue(this.setpoint, formatOptions);
+  }
+  get resolvedSetpointInteraction() {
+    return this.setpointOptions?.interaction ?? "always-visible";
+  }
+  get isFlipFlop() {
+    return this.resolvedSetpointInteraction === "flip-flop";
   }
-  get resolvedSetpointSize() {
+  get isPopUp() {
+    return this.resolvedSetpointInteraction === "pop-up";
+  }
+  get setpointTouching() {
+    return this.setpointOptions?.touching ?? false;
+  }
+  /**
+   * The setpoint is rendered "emphasised" (primary size + SemiBold weight) when
+   * it is the focus of attention: while actively adjusting (`touching`), or while
+   * a flip-flop has the value away from the setpoint. Otherwise it is a secondary
+   * (smaller, regular-weight) reference next to the value.
+   */
+  get isSetpointEmphasized() {
     if (!this.hasSetpoint) {
-      return ReadoutSetpointSize.small;
+      return false;
     }
-    if (this.priority === "setpoint" || this.priority === "setpoint-flip-flop") {
-      return this.resolvedMainValueSize;
+    if (this.setpointTouching) {
+      return true;
     }
-    return ReadoutSetpointSize.small;
+    return this.isFlipFlop && !this.isAtSetpoint;
   }
-  get resolvedActualPriority() {
-    if (this.priority === "enhanced" || this.priority === "setpoint" && !this.hasSetpoint || this.priority === "setpoint-flip-flop") {
-      return Priority.enhanced;
-    }
-    return Priority.regular;
+  /**
+   * The row's enhanced (in-command) colour state, applied uniformly to BOTH the
+   * value and the setpoint — they are always either both neutral or both enhanced
+   * (never a blue setpoint next to a grey value). Driven by `priority` only;
+   * `valueOptions.weight` changes weight, not colour.
+   */
+  get rowEnhanced() {
+    return this.resolvedPriority === "enhanced";
   }
-  get resolvedActualMode() {
-    return this.priority === "enhanced" ? ReadoutSetpointMode.setpoint : ReadoutSetpointMode.display;
+  /** Primary value-typography size for the current density tier. */
+  get primarySize() {
+    switch (this.resolvedSize) {
+      case "large":
+        return ObcTextboxSize.l;
+      case "medium":
+        return ObcTextboxSize.m;
+      default:
+        return ObcTextboxSize.s;
+    }
   }
-  get resolvedSetpointPriority() {
-    if (!this.hasSetpoint || this.priority === "regular") {
-      return Priority.regular;
+  /** Secondary (de-emphasised) value-typography size for the current density tier. */
+  get secondarySize() {
+    switch (this.resolvedSize) {
+      case "large":
+        return ObcTextboxSize.s;
+      case "medium":
+        return ObcTextboxSize.s;
+      default:
+        return ObcTextboxSize.xs;
     }
-    return Priority.enhanced;
   }
-  get resolvedSetpointMode() {
-    if (this.hasSetpoint && this.priority === "setpoint") {
-      return ReadoutSetpointMode.setpoint;
+  get valueSize() {
+    if (this.isSetpointEmphasized) {
+      return this.secondarySize;
     }
-    return ReadoutSetpointMode.display;
+    return this.primarySize;
   }
-  get showsTrailingSource() {
-    return this.hasSource && this.stacking !== "leading-src";
+  get setpointSize() {
+    return this.isSetpointEmphasized ? this.primarySize : this.secondarySize;
   }
-  get stacksLeadingUnitVertically() {
-    return this.stacking === "leading-unit" && this.size === "enhanced";
+  /** Value font weight passes straight to obc-textbox; regular when unset. Colour is separate. */
+  get valueWeight() {
+    return this.valueOptions?.weight ?? ObcTextboxFontWeight.regular;
   }
-  get stacksLeadingSrcVertically() {
-    return this.stacking === "leading-src" && this.size === "enhanced";
+  /** Setpoint is SemiBold only while emphasised, otherwise regular weight. */
+  get setpointWeight() {
+    return this.isSetpointEmphasized ? ObcTextboxFontWeight.semibold : ObcTextboxFontWeight.regular;
   }
-  renderLabelContainer() {
-    if (!this.hasLabel) {
-      return nothing;
+  numericFormatOptions(maxDigits) {
+    return {
+      showZeroPadding: false,
+      minValueLength: maxDigits,
+      fractionDigits: this.resolvedFractionDigits
+    };
+  }
+  /** Widest possible value string for width reservation (e.g. `"000.0"`). */
+  get reserverText() {
+    const maxDigits = this.resolvedMaxDigits;
+    if (maxDigits <= 0) {
+      return "";
     }
-    const showsLeadingUnit = this.stacking === "leading-unit" && this.hasUnit;
-    const showsLeadingSrc = this.stacking === "leading-src" && this.hasSource;
-    if (showsLeadingUnit && !this.stacksLeadingUnitVertically) {
-      return html`
-        <div class="label-inline" part="label-inline">
-          <div class="label" part="label">${this.label}</div>
-          <div class="unit unit-leading" part="unit-leading">${this.unit}</div>
-        </div>
-      `;
+    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.
+   */
+  widerReserver(explicit, derived) {
+    if (!explicit) {
+      return derived;
     }
-    if (showsLeadingSrc && !this.stacksLeadingSrcVertically) {
-      return html`
-        <div class="label-inline" part="label-inline">
-          <div class="label" part="label">${this.label}</div>
-          <div class="source source-inline" part="source-inline">
-            ${this.src}
-          </div>
-        </div>
-      `;
+    if (!derived) {
+      return explicit;
     }
-    return html`
-      <div class="label-stack" part="label-stack">
-        <div class="label" part="label">${this.label}</div>
-        ${showsLeadingUnit ? html`<div class="unit unit-leading" part="unit-leading">
-              ${this.unit}
-            </div>` : nothing}
-        ${showsLeadingSrc ? html`<div class="source source-inline" part="source-inline">
-              ${this.src}
-            </div>` : nothing}
+    return explicit.length >= derived.length ? explicit : derived;
+  }
+  /** classMap fragment for a block / source carrying per-block data quality. */
+  dataQualityClasses(dataQuality) {
+    return {
+      "data-low-integrity": dataQuality === "low-integrity",
+      "data-invalid": dataQuality === "invalid"
+      /* invalid */
+    };
+  }
+  renderIcon(role) {
+    if (role === "value") {
+      if (!this.valueOptions?.hasIcon) {
+        return nothing;
+      }
+      return html`<span class="block-icon" aria-hidden="true"
+        ><slot name="value-icon"></slot
+      ></span>`;
+    }
+    if (role === "setpoint") {
+      return html`<span class="block-icon" aria-hidden="true">
+        <slot name="setpoint-icon"><obi-input-right></obi-input-right></slot>
+      </span>`;
+    }
+    return html`<span class="block-icon" aria-hidden="true">
+      <slot name="advice-icon"
+        ><obi-notification-advice></obi-notification-advice
+      ></slot>
+    </span>`;
+  }
+  renderBlock(config) {
+    const formatOptions = this.numericFormatOptions(this.resolvedMaxDigits);
+    const valueForFormat = config.value ?? void 0;
+    const text = config.off ? "OFF" : formatNumericValue(valueForFormat, formatOptions);
+    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}"
+      >
+        ${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>
     `;
+    return wrapWithAlertFrame(config.alert ?? false, block);
+  }
+  /**
+   * A cap-height `°` column whose width scales with the value size. Used after
+   * the value (as the value↔unit boundary, via {@link renderValueUnitGap}) and
+   * inside the setpoint / advice blocks. `inherit` makes the glyph take the
+   * surrounding block's colour (setpoint/advice); otherwise it uses the value
+   * colour, optionally `enhanced`.
+   */
+  renderDegreeGlyph(size, opts = {}) {
+    return html`
+      <span
+        class=${classMap({
+      "degree-column": true,
+      [`degree-${size}`]: true,
+      "tone-enhanced": !opts.inherit && Boolean(opts.enhanced),
+      "degree-inherit": Boolean(opts.inherit)
+    })}
+        part="degree"
+      >
+        <obc-textbox class="degree-glyph" .size=${size} alignment="center"
+          >°</obc-textbox
+        >
+      </span>
+    `;
   }
-  renderValueIconSlot() {
-    if (!this.hasValueIcon) {
+  /**
+   * The gap rendered between the value digits and the unit.
+   *
+   * - `hasDegree`: a cap-height `°` column whose width scales with the value
+   *   size (the `°` replaces the default gap).
+   * - otherwise: the default 2px gap (only when a trailing unit follows).
+   *
+   * `hasDegreeSpacer` deliberately does NOT add anything here — it keeps the 2px
+   * gap and instead widens the unit column via {@link renderDegreeSpacer} (a
+   * spacer AFTER the unit). That way a non-degree row's value digits stay
+   * aligned with degree rows (degree column width = spacer width + 2px gap)
+   * while its unit shifts left. Mirrors Figma `1:2920` (spacer) / `1:2970`
+   * (degree).
+   *
+   * TODO(designer): cross-size alignment is deferred. Degree rows of different
+   * value sizes have different `°` column widths (6/8/12px), so their value digit
+   * edges stagger by `degree-width`. For degree rows of mixed sizes you cannot
+   * align the value digit edges AND keep the unit column aligned — resolving it
+   * needs a design decision (a constant degree reserve, which widens the smaller
+   * rows' `°`, OR pinning the value edge and letting the unit column stagger).
+   */
+  renderValueUnitGap() {
+    if (!this.hasValue) {
       return nothing;
     }
-    return html`<span class="value-icon" slot="icon" aria-hidden="true">
-      <slot name="value-icon"></slot>
-    </span>`;
+    const hasTrailingUnit = Boolean(this.unit) && this.resolvedStacking !== "leading-unit";
+    if ((this.hasDegree ?? false) && !this.off) {
+      return this.renderDegreeGlyph(this.valueSize, {
+        enhanced: this.rowEnhanced
+      });
+    }
+    if (hasTrailingUnit) {
+      return html`<span class="value-unit-gap" aria-hidden="true"></span>`;
+    }
+    return nothing;
   }
-  renderSetpoint() {
-    if (!this.hasSetpoint) {
+  /**
+   * A spacer rendered AFTER the unit when `hasDegreeSpacer` is set on a
+   * non-degree row. Its width (`degree-compensation-padding`) = the degree
+   * column width minus the 2px gap, so the row's value digits align with degree
+   * rows in the same column while its unit shifts left. See
+   * {@link renderValueUnitGap}.
+   */
+  renderDegreeSpacer() {
+    const hasDegree = this.hasDegree ?? false;
+    const hasDegreeSpacer = this.hasDegreeSpacer ?? false;
+    if (hasDegree || !hasDegreeSpacer) {
       return nothing;
     }
-    return html`
-      <obc-readout-setpoint
-        .variant=${"setpoint"}
-        .readoutStyle=${"regular"}
-        .direction=${"horizontal"}
-        .size=${this.resolvedSetpointSize}
-        .priority=${this.resolvedSetpointPriority}
-        .mode=${this.resolvedSetpointMode}
-        .hugContent=${true}
-        .value=${this.setpointValue}
-        .showZeroPadding=${this.showZeroPadding}
-        .fractionDigits=${this.fractionDigits}
-        .minValueLength=${this.minValueLength}
-        .hasHintedZeros=${this.hasHintedZeros}
-        .hasDegree=${this.hasDegree}
+    return html`<span
+      class="degree-spacer"
+      part="degree-spacer"
+      aria-hidden="true"
+    ></span>`;
+  }
+  renderTextbox(role, text, reserver, state2) {
+    const weight = role === "label" ? ObcTextboxFontWeight.semibold : ObcTextboxFontWeight.regular;
+    const box = html`
+      <obc-textbox
+        class=${classMap({
+      [role]: true,
+      ...this.dataQualityClasses(state2?.dataQuality)
+    })}
+        part=${role}
+        .size=${ObcTextboxSize.xs}
+        .fontWeight=${weight}
+        alignment="left"
       >
-        <obi-input-right slot="icon"></obi-input-right>
-      </obc-readout-setpoint>
+        ${text}
+        ${reserver ? html`<span slot="length">${reserver}</span>` : nothing}
+      </obc-textbox>
     `;
+    return wrapWithAlertFrame(state2?.alert ?? false, box);
   }
-  renderActualValue() {
+  renderValueCluster() {
+    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
+    };
     return html`
-      <obc-readout-setpoint
-        .variant=${"value"}
-        .readoutStyle=${"regular"}
-        .direction=${"horizontal"}
-        .size=${this.resolvedValueSize}
-        .valueTypography=${this.resolvedValueTypography ?? void 0}
-        .priority=${this.resolvedActualPriority}
-        .mode=${this.resolvedActualMode}
-        .hugContent=${true}
-        .value=${this.value}
-        .showZeroPadding=${this.showZeroPadding}
-        .fractionDigits=${this.fractionDigits}
-        .minValueLength=${this.minValueLength}
-        .hasHintedZeros=${this.hasHintedZeros}
-        .hasDegree=${this.hasDegree}
-      >
-        ${this.renderValueIconSlot()}
-      </obc-readout-setpoint>
+      <div class="value-cluster" part="value-cluster">
+        ${this.hasAdvice ? this.renderBlock({
+      role: "advice",
+      value: this.advice,
+      size: this.secondarySize,
+      enhanced: false,
+      weight: ObcTextboxFontWeight.regular,
+      hintedZeros: this.adviceOptions?.hintedZeros ?? false,
+      spaceReserver: this.adviceOptions?.spaceReserver,
+      hasDegree: this.hasDegree ?? false,
+      dataQuality: this.adviceOptions?.dataQuality,
+      alert: this.adviceOptions?.alert
+    }) : nothing}
+        ${this.hasSetpoint ? this.renderBlock({
+      role: "setpoint",
+      value: this.setpoint,
+      size: 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,
+      weight: this.setpointWeight,
+      hintedZeros: this.setpointOptions?.hintedZeros ?? false,
+      spaceReserver: this.setpointOptions?.spaceReserver,
+      hasDegree: this.hasDegree ?? false,
+      extraClasses: setpointExtraClasses,
+      dataQuality: this.setpointOptions?.dataQuality,
+      alert: this.setpointOptions?.alert
+    }) : nothing}
+        ${this.hasValue ? this.renderBlock({
+      role: "value",
+      value: this.value,
+      size: this.valueSize,
+      enhanced: this.rowEnhanced,
+      weight: this.valueWeight,
+      hintedZeros: this.valueOptions?.hintedZeros ?? false,
+      spaceReserver: this.valueOptions?.spaceReserver,
+      off: this.off,
+      dataQuality: this.valueOptions?.dataQuality,
+      alert: this.valueOptions?.alert
+    }) : nothing}
+      </div>
     `;
   }
-  renderValue() {
+  renderLabelContainer() {
+    const stacking = this.resolvedStacking;
+    const showLeadingUnit = stacking === "leading-unit" && Boolean(this.unit);
+    const showLeadingSrc = stacking === "leading-src" && Boolean(this.src);
     return html`
-      <div class="value-wrap" part="value-wrap">
-        ${this.hasSetpoint ? html`<div class="value-cluster" part="value-cluster">
-              ${this.renderSetpoint()} ${this.renderActualValue()}
-            </div>` : this.renderActualValue()}
+      <div class="label-container" part="label-container">
+        ${this.hasLeadingIcon ? html`<span class="leading-icon" aria-hidden="true"
+              ><slot name="leading-icon"></slot
+            ></span>` : nothing}
+        <div class="label-stack" part="label-stack">
+          ${this.label ? this.renderTextbox("label", this.label) : nothing}
+          ${showLeadingUnit ? this.renderTextbox(
+      "unit",
+      this.unit ?? "",
+      this.unitOptions?.spaceReserver
+    ) : nothing}
+          ${showLeadingSrc ? this.renderTextbox(
+      "source",
+      this.src ?? "",
+      this.srcOptions?.spaceReserver,
+      this.srcOptions
+    ) : nothing}
+        </div>
       </div>
     `;
   }
   renderTrailingUnit() {
-    if (!this.hasUnit || this.stacking === "leading-unit") {
+    if (this.resolvedStacking === "leading-unit" || !this.unit) {
       return nothing;
     }
-    return html`<div class="unit unit-trailing" part="unit-trailing">
-      ${this.unit}
-    </div>`;
+    return this.renderTextbox(
+      "unit",
+      this.unit,
+      this.unitOptions?.spaceReserver
+    );
   }
   renderTrailingSource() {
-    if (!this.showsTrailingSource) {
+    if (this.resolvedStacking === "leading-src" || !this.src) {
       return nothing;
     }
     return html`
       <div class="divider" part="divider" aria-hidden="true"></div>
-      <div class="source source-trailing" part="source-trailing">
-        ${this.src}
-      </div>
+      ${this.renderTextbox(
+      "source",
+      this.src,
+      this.srcOptions?.spaceReserver,
+      this.srcOptions
+    )}
     `;
   }
-  render() {
-    return wrapWithAlertFrame(
-      this.alert,
-      html`
-        <div
-          class=${classMap({
-        root: true,
-        [`size-${this.size}`]: true,
-        [`stacking-${this.stacking}`]: true,
-        "priority-enhanced": this.priority === "enhanced",
-        "priority-setpoint": this.priority === "setpoint",
-        "priority-setpoint-flip-flop": this.priority === "setpoint-flip-flop",
-        "data-none": this.dataState === "none",
-        "data-low-integrity": this.dataState === "low-integrity",
-        "data-invalid": this.dataState === "invalid",
-        "has-leading-icon": this.hasLeadingIcon,
-        "has-value-icon": this.hasValueIcon
-      })}
-          part="root"
-        >
-          <div class="content" part="content">
-            <div class="label-container" part="label-container">
-              ${this.hasLeadingIcon ? html`<span class="leading-icon" aria-hidden="true"
-                    ><slot name="leading-icon"></slot
-                  ></span>` : nothing}
-              ${this.renderLabelContainer()}
-            </div>
-
-            ${this.labelOnly ? nothing : html`
-                  <div class="value-container" part="value-container">
-                    ${this.renderValue()} ${this.renderTrailingUnit()}
-                  </div>
-
-                  ${this.renderTrailingSource()}
-                `}
+  renderContent() {
+    return html`
+      <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>
         </div>
-      `,
-      true
-    );
+        ${this.renderTrailingSource()}
+      </div>
+    `;
+  }
+  updated(changed) {
+    super.updated(changed);
+    const firstUpdate = !this.hasCompletedFirstUpdate;
+    this.hasCompletedFirstUpdate = true;
+    if (!this.isPopUp || this.setpointTouching) {
+      this.clearDeferredSetpointHide();
+      return;
+    }
+    const shouldHide = this.hasSetpoint && this.isAtSetpoint;
+    if (firstUpdate) {
+      this.deferredSetpointHidePhase = shouldHide ? "hidden" : "none";
+      return;
+    }
+    if (!shouldHide) {
+      this.clearDeferredSetpointHide();
+      return;
+    }
+    if (this.deferredSetpointHidePhase !== "none") {
+      return;
+    }
+    this.deferredSetpointHidePhase = "hiding";
+    window.clearTimeout(this.deferredSetpointHideTimer);
+    this.deferredSetpointHideTimer = window.setTimeout(() => {
+      this.deferredSetpointHidePhase = "hidden";
+      this.deferredSetpointHideTimer = void 0;
+    }, 100);
+  }
+  clearDeferredSetpointHide() {
+    if (this.deferredSetpointHidePhase !== "none") {
+      this.deferredSetpointHidePhase = "none";
+    }
+    window.clearTimeout(this.deferredSetpointHideTimer);
+    this.deferredSetpointHideTimer = void 0;
+  }
+  disconnectedCallback() {
+    window.clearTimeout(this.deferredSetpointHideTimer);
+    this.deferredSetpointHideTimer = void 0;
+    if (this.deferredSetpointHidePhase === "hiding") {
+      this.deferredSetpointHidePhase = "hidden";
+    }
+    super.disconnectedCallback();
+  }
+  render() {
+    const clickable = this.resolvedClickable;
+    const dataQuality = this.dataQuality;
+    const classes = classMap({
+      root: true,
+      [`size-${this.resolvedSize}`]: true,
+      [`stacking-${this.resolvedStacking}`]: true,
+      [`priority-${this.resolvedPriority}`]: true,
+      "data-low-integrity": dataQuality === "low-integrity",
+      "data-invalid": dataQuality === "invalid",
+      "flip-flop": this.isFlipFlop,
+      clickable: Boolean(clickable),
+      [`border-${clickable ? clickable.border : "squared"}`]: Boolean(clickable)
+    });
+    const surface = html`<div class="surface" part="surface">
+      ${this.renderContent()}
+    </div>`;
+    const root = clickable ? html`<button class=${classes} part="root" type="button">
+          ${surface}
+        </button>` : html`<div class=${classes} part="root">${surface}</div>`;
+    const alert = this.alert === true ? {} : this.alert;
+    return wrapWithAlertFrame(alert, root, true);
   }
 };
 ObcReadoutListItem.styles = unsafeCSS(componentStyle);
-__decorateClass([
-  property({ type: String })
-], ObcReadoutListItem.prototype, "size", 2);
-__decorateClass([
-  property({ type: String })
-], ObcReadoutListItem.prototype, "stacking", 2);
-__decorateClass([
-  property({ type: String })
-], ObcReadoutListItem.prototype, "priority", 2);
-__decorateClass([
-  property({ type: String })
-], ObcReadoutListItem.prototype, "dataState", 2);
-__decorateClass([
-  property({ type: Object })
-], ObcReadoutListItem.prototype, "alert", 2);
 __decorateClass([
   property({ type: String })
 ], ObcReadoutListItem.prototype, "label", 2);
@@ -326,55 +575,88 @@ __decorateClass([
 __decorateClass([
   property({ type: String })
 ], ObcReadoutListItem.prototype, "src", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: false })
+], ObcReadoutListItem.prototype, "hasValue", 2);
 __decorateClass([
   property({ type: Number })
 ], ObcReadoutListItem.prototype, "value", 2);
 __decorateClass([
-  property({ type: Number })
-], ObcReadoutListItem.prototype, "setpointValue", 2);
+  property({ type: Boolean })
+], ObcReadoutListItem.prototype, "off", 2);
 __decorateClass([
   property({ type: Boolean })
 ], ObcReadoutListItem.prototype, "hasSetpoint", 2);
 __decorateClass([
-  property({ type: Boolean })
-], ObcReadoutListItem.prototype, "hasDegree", 2);
+  property({ type: Number })
+], ObcReadoutListItem.prototype, "setpoint", 2);
 __decorateClass([
   property({ type: Boolean })
-], ObcReadoutListItem.prototype, "hasUnit", 2);
+], ObcReadoutListItem.prototype, "hasAdvice", 2);
 __decorateClass([
-  property({ type: Boolean })
-], ObcReadoutListItem.prototype, "hasLabel", 2);
+  property({ type: Number })
+], ObcReadoutListItem.prototype, "advice", 2);
 __decorateClass([
-  property({ type: Boolean })
-], ObcReadoutListItem.prototype, "hasSource", 2);
+  property({ type: String })
+], ObcReadoutListItem.prototype, "size", 2);
+__decorateClass([
+  property({ type: String })
+], ObcReadoutListItem.prototype, "priority", 2);
+__decorateClass([
+  property({ type: String })
+], ObcReadoutListItem.prototype, "stacking", 2);
+__decorateClass([
+  property({ type: Object })
+], ObcReadoutListItem.prototype, "clickable", 2);
 __decorateClass([
   property({ type: Boolean })
 ], ObcReadoutListItem.prototype, "hasLeadingIcon", 2);
 __decorateClass([
   property({ type: Boolean })
-], ObcReadoutListItem.prototype, "hasValueIcon", 2);
+], ObcReadoutListItem.prototype, "hasDegree", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcReadoutListItem.prototype, "hasDegreeSpacer", 2);
 __decorateClass([
   property({ type: Number })
 ], ObcReadoutListItem.prototype, "fractionDigits", 2);
-__decorateClass([
-  property({ type: Boolean })
-], ObcReadoutListItem.prototype, "showZeroPadding", 2);
 __decorateClass([
   property({ type: Number })
-], ObcReadoutListItem.prototype, "minValueLength", 2);
+], ObcReadoutListItem.prototype, "maxDigits", 2);
 __decorateClass([
-  property({ type: Boolean })
-], ObcReadoutListItem.prototype, "hasHintedZeros", 2);
+  property({ type: String })
+], ObcReadoutListItem.prototype, "dataQuality", 2);
 __decorateClass([
-  property({ type: Boolean })
-], ObcReadoutListItem.prototype, "labelOnly", 2);
+  property({ type: Object })
+], ObcReadoutListItem.prototype, "alert", 2);
+__decorateClass([
+  property({ type: Object })
+], ObcReadoutListItem.prototype, "valueOptions", 2);
+__decorateClass([
+  property({ type: Object })
+], ObcReadoutListItem.prototype, "setpointOptions", 2);
+__decorateClass([
+  property({ type: Object })
+], ObcReadoutListItem.prototype, "adviceOptions", 2);
+__decorateClass([
+  property({ type: Object })
+], ObcReadoutListItem.prototype, "unitOptions", 2);
+__decorateClass([
+  property({ type: Object })
+], ObcReadoutListItem.prototype, "srcOptions", 2);
+__decorateClass([
+  state()
+], ObcReadoutListItem.prototype, "deferredSetpointHidePhase", 2);
 ObcReadoutListItem = __decorateClass([
   customElement("obc-readout-list-item")
 ], ObcReadoutListItem);
 export {
   ObcReadoutListItem,
-  ReadoutListItemDataState,
+  ObcTextboxFontWeight,
+  ReadoutListItemBorder,
+  ReadoutListItemDataQuality,
   ReadoutListItemPriority,
+  ReadoutListItemSetpointInteraction,
   ReadoutListItemSize,
   ReadoutListItemStacking
 };