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

package/bundle/openbridge-webcomponents.bundle.js

@@ -61711,12 +61711,6 @@ var ReadoutSetpointMode = /* @__PURE__ */ ((ReadoutSetpointMode2) => {
   ReadoutSetpointMode2["setpointTemporary"] = "setpoint-temporary";
   return ReadoutSetpointMode2;
 })(ReadoutSetpointMode || {});
-var ReadoutSetpointValueTypography = /* @__PURE__ */ ((ReadoutSetpointValueTypography2) => {
-  ReadoutSetpointValueTypography2["regular"] = "regular";
-  ReadoutSetpointValueTypography2["medium"] = "medium";
-  ReadoutSetpointValueTypography2["large"] = "large";
-  return ReadoutSetpointValueTypography2;
-})(ReadoutSetpointValueTypography || {});
 let ObcReadoutSetpoint = class extends i$4 {
   constructor() {
     super(...arguments);
@@ -104498,11 +104492,18 @@ const compentStyle$n = i$7`* {
     color: var(--on-flat-disabled-color);
   }
 
+.wrapper .badges {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    position: relative;
+  }
+
 .wrapper .badge {
     position: relative;
   }
 
-.wrapper:not(.hug) .badge {
+.wrapper:not(.hug) .badges {
     right: 0;
   }
 
@@ -104629,6 +104630,7 @@ let ObcTabItem = class extends i$4 {
     this.hasLeadingIcon = false;
     this.hasTitle = false;
     this.hasDivider = false;
+    this.badges = [];
     this.hasBadge = false;
     this.icon = "placeholder";
     this.title = "Tab title";
@@ -104668,7 +104670,40 @@ let ObcTabItem = class extends i$4 {
       this.handleClick(event);
     }
   }
+  get effectiveBadges() {
+    if (this.badges.length > 0) {
+      return this.badges;
+    }
+    if (!this.hasBadge) {
+      return [];
+    }
+    return [
+      {
+        type: this.badgeType || BadgeType.regular,
+        size: this.badgeSize || BadgeSize.regular,
+        count: this.badgeShowNumber ? this.badgeCount : void 0,
+        showIcon: this.showLeadingBadgeIcon,
+        iconSlotName: this.showLeadingBadgeIcon ? "badge-icon" : void 0
+      }
+    ];
+  }
+  renderBadge(badge) {
+    return b`
+      <obc-badge
+        class="badge"
+        .number=${badge.count ?? 0}
+        .type=${badge.type || BadgeType.regular}
+        .size=${badge.size || BadgeSize.regular}
+        .showNumber=${badge.count !== void 0}
+        .showIcon=${badge.showIcon ?? false}
+      >
+        ${badge.iconSlotName ? b`<slot name=${badge.iconSlotName} slot="badge-icon"></slot>` : A}
+      </obc-badge>
+    `;
+  }
   render() {
+    const badges = this.effectiveBadges;
+    const hasBadge = badges.length > 0;
     const wrapperClasses = {
       wrapper: true,
       hug: this.hug,
@@ -104676,7 +104711,7 @@ let ObcTabItem = class extends i$4 {
       "has-leading-icon": this.hasLeadingIcon,
       "has-title": this.hasTitle,
       "has-divider": this.hasDivider && !this.checked,
-      "has-badge": this.hasBadge,
+      "has-badge": hasBadge,
       "has-subtitle": this.showSubtitle,
       disabled: this.disabled,
       "center-content": this.centerContent
@@ -104703,31 +104738,13 @@ let ObcTabItem = class extends i$4 {
                   ${this.showSubtitle && this.subtitle ? b`<div class="subtitle">${this.subtitle}</div>` : A}
                 </div>
               ` : A}
-          ${this.centerContent && this.hasBadge ? b`
-                <obc-badge
-                  class="badge"
-                  .number=${this.badgeCount}
-                  .type=${this.badgeType || BadgeType.regular}
-                  .size=${this.badgeSize || BadgeSize.regular}
-                  .showNumber=${this.badgeShowNumber}
-                  .showIcon=${this.showLeadingBadgeIcon}
-                >
-                  ${this.showLeadingBadgeIcon ? b`<slot name="badge-icon" slot="badge-icon"></slot>` : A}
-                </obc-badge>
-              ` : A}
+          ${this.centerContent && hasBadge ? b`<div class="badges">
+                ${badges.map((badge) => this.renderBadge(badge))}
+              </div>` : A}
         </div>
-        ${!this.centerContent && this.hasBadge ? b`
-              <obc-badge
-                class="badge"
-                .number=${this.badgeCount}
-                .type=${this.badgeType || BadgeType.regular}
-                .size=${this.badgeSize || BadgeSize.regular}
-                .showNumber=${this.badgeShowNumber}
-                .showIcon=${this.showLeadingBadgeIcon}
-              >
-                ${this.showLeadingBadgeIcon ? b`<slot name="badge-icon" slot="badge-icon"></slot>` : A}
-              </obc-badge>
-            ` : A}
+        ${!this.centerContent && hasBadge ? b`<div class="badges">
+              ${badges.map((badge) => this.renderBadge(badge))}
+            </div>` : A}
         ${this.hasClose ? b`
               <obc-icon-button
                 class="close-button"
@@ -104764,6 +104781,9 @@ __decorateClass$t1([
 __decorateClass$t1([
   n$3({ type: Boolean, attribute: "has-divider" })
 ], ObcTabItem.prototype, "hasDivider", 2);
+__decorateClass$t1([
+  n$3({ type: Array, attribute: false })
+], ObcTabItem.prototype, "badges", 2);
 __decorateClass$t1([
   n$3({ type: Boolean, attribute: "has-badge" })
 ], ObcTabItem.prototype, "hasBadge", 2);
@@ -104849,6 +104869,7 @@ let ObcTabRow = class extends i$4 {
     this.tabs = [];
     this.selectedTabId = "";
     this.hasClose = false;
+    this.centerContent = false;
     this.hug = false;
     this.showSubtitle = false;
     this.hasAddNewTab = false;
@@ -104893,8 +104914,17 @@ let ObcTabRow = class extends i$4 {
   }
   renderTab(tab, index2) {
     const isFirst = index2 === 0;
+    const previousTabSelected = this.selectedTabId === this.tabs[index2 - 1]?.id;
     const isChecked = tab.id === this.selectedTabId;
     const showSubtitle = tab.showSubtitle ?? this.showSubtitle;
+    const badgeIconSlots = [
+      ...new Set(
+        (tab.badges ?? []).map((badge) => badge.iconSlotName).filter((slotName) => slotName !== void 0)
+      )
+    ];
+    if ((tab.showLeadingBadgeIcon ?? false) && !badgeIconSlots.includes("badge-icon")) {
+      badgeIconSlots.push("badge-icon");
+    }
     return b`
       <obc-tab-item
         .title=${tab.title}
@@ -104904,10 +104934,12 @@ let ObcTabRow = class extends i$4 {
         .hasClose=${this.hasClose}
         .hasLeadingIcon=${tab.hasLeadingIcon ?? true}
         .hasTitle=${true}
-        .hasDivider=${!isFirst}
+        .hasDivider=${!isFirst && !previousTabSelected}
         .hug=${this.hug}
+        .centerContent=${this.centerContent}
         .disabled=${tab.disabled || false}
-        .hasBadge=${tab.hasBadge || tab.badgeCount !== void 0 && tab.badgeCount > 0}
+        .badges=${tab.badges ?? []}
+        .hasBadge=${tab.hasBadge || false}
         .badgeCount=${tab.badgeCount || 0}
         .badgeType=${tab.badgeType ?? BadgeType.regular}
         .badgeSize=${tab.badgeSize ?? BadgeSize.regular}
@@ -104922,11 +104954,13 @@ let ObcTabRow = class extends i$4 {
               </slot>
             ` : ""}
         <span slot="title">${tab.title}</span>
-        ${tab.showLeadingBadgeIcon ? b`
-              <slot name="tab-${tab.id}-badge-icon" slot="badge-icon">
-                <obi-placeholder></obi-placeholder>
-              </slot>
-            ` : ""}
+        ${badgeIconSlots.map(
+      (slotName) => b`
+            <slot name="tab-${tab.id}-${slotName}" slot=${slotName}>
+              <obi-placeholder></obi-placeholder>
+            </slot>
+          `
+    )}
       </obc-tab-item>
     `;
   }
@@ -104962,6 +104996,9 @@ __decorateClass$t0([
 __decorateClass$t0([
   n$3({ type: Boolean, attribute: "has-close" })
 ], ObcTabRow.prototype, "hasClose", 2);
+__decorateClass$t0([
+  n$3({ type: Boolean })
+], ObcTabRow.prototype, "centerContent", 2);
 __decorateClass$t0([
   n$3({ type: Boolean })
 ], ObcTabRow.prototype, "hug", 2);
@@ -106197,6 +106234,11 @@ const componentStyle$o = i$7`* {
   justify-content: var(--alignment-justify, flex-end);
   height: var(--height);
   overflow: hidden;
+  /* Opt-in: animate a \`size\` change (height + font-size below). Defaults to 0s
+     (instant, current behavior) so existing usages and snapshots are unchanged;
+     a consumer sets \`--obc-textbox-size-transition\` (e.g. 300ms) to animate the
+     swap — used by readout-list-item's setpoint flip-flop. */
+  transition: height var(--obc-textbox-size-transition, 0s) ease;
 }
 
 /* The spacer must share the content's exact font metrics so the width it
@@ -106208,6 +106250,8 @@ const componentStyle$o = i$7`* {
   font-size: calc(var(--height) - 2 * var(--padding));
   font-size-adjust: cap-height 1;
   white-space: nowrap;
+  /* Opt-in size animation — see \`.inner-wrapper\`. */
+  transition: font-size var(--obc-textbox-size-transition, 0s) ease;
 }
 
 .content {
@@ -106215,23 +106259,40 @@ const componentStyle$o = i$7`* {
   text-box-edge: cap alphabetic;
 }
 
-.wrapper.size-xs .inner-wrapper {
+/* Opt-in numeric mode: fixed-width lining numerals so values stay
+   column-aligned and width-stable. Applied to the spacer too so the reserved
+   width matches the rendered digits exactly. */
+
+.wrapper.tabular-nums .content,
+.wrapper.tabular-nums .length-spacer {
+  font-variant-numeric: tabular-nums lining-nums;
+  font-feature-settings:
+    "ss04" on,
+    "tnum" on,
+    "lnum" on;
+}
+
+/* Size override is set on \`.wrapper\` (not \`.inner-wrapper\`) so it reaches BOTH
+   the visible \`.content\` AND the sibling \`.length-spacer\`; otherwise the spacer
+   keeps the default (m) \`--height\` and reserves width at the wrong font size. */
+
+.wrapper.size-xs {
   --height: 16px;
 }
 
-.wrapper.size-s .inner-wrapper {
+.wrapper.size-s {
   --height: 20px;
 }
 
-.wrapper.size-m .inner-wrapper {
+.wrapper.size-m {
   --height: 24px;
 }
 
-.wrapper.size-l .inner-wrapper {
+.wrapper.size-l {
   --height: 32px;
 }
 
-.wrapper.size-xl .inner-wrapper {
+.wrapper.size-xl {
   --height: 40px;
 }
 
@@ -106280,12 +106341,27 @@ var __decorateClass$sW = (decorators, target, key, kind) => {
   if (kind && result) __defProp$sU(target, key, result);
   return result;
 };
+var ObcTextboxSize = /* @__PURE__ */ ((ObcTextboxSize2) => {
+  ObcTextboxSize2["xs"] = "xs";
+  ObcTextboxSize2["s"] = "s";
+  ObcTextboxSize2["m"] = "m";
+  ObcTextboxSize2["l"] = "l";
+  ObcTextboxSize2["xl"] = "xl";
+  return ObcTextboxSize2;
+})(ObcTextboxSize || {});
+var ObcTextboxFontWeight = /* @__PURE__ */ ((ObcTextboxFontWeight2) => {
+  ObcTextboxFontWeight2["regular"] = "regular";
+  ObcTextboxFontWeight2["semibold"] = "semibold";
+  ObcTextboxFontWeight2["bold"] = "bold";
+  return ObcTextboxFontWeight2;
+})(ObcTextboxFontWeight || {});
 let ObcTextbox = class extends i$4 {
   constructor() {
     super(...arguments);
     this.alignment = "right";
     this.size = "m";
     this.fontWeight = "regular";
+    this.tabularNums = false;
   }
   render() {
     return b`
@@ -106294,7 +106370,8 @@ let ObcTextbox = class extends i$4 {
       wrapper: true,
       [`alignment-${this.alignment}`]: true,
       [`size-${this.size}`]: true,
-      [`font-weight-${this.fontWeight}`]: true
+      [`font-weight-${this.fontWeight}`]: true,
+      "tabular-nums": this.tabularNums
     })}
       >
         <div class="inner-wrapper">
@@ -106319,6 +106396,9 @@ __decorateClass$sW([
 __decorateClass$sW([
   n$3({ type: String })
 ], ObcTextbox.prototype, "fontWeight", 2);
+__decorateClass$sW([
+  n$3({ type: Boolean })
+], ObcTextbox.prototype, "tabularNums", 2);
 ObcTextbox = __decorateClass$sW([
   customElement("obc-textbox")
 ], ObcTextbox);
@@ -222126,264 +222206,645 @@ const componentStyle$4 = i$7`* {
   width: 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
+ * data-quality background/border, and — when clickable — the flat interaction
+ * states. */
+
 .root {
+  display: block;
+  inline-size: 100%;
+  margin: 0;
+  /* Neutralise the native <button> chrome (default padding + appearance) when
+     \`.root\` is the clickable touch target, so clickable rows don't inset their
+     \`.surface\` and misalign with non-clickable \`<div>\` rows. */
+  padding: 0;
+  border: none;
+  background: none;
+  appearance: none;
+  font: inherit;
+  color: inherit;
+  text-align: inherit;
+}
+
+.root.clickable {
+  cursor: pointer;
+  /* prettier-ignore */
+}
+
+.root.clickable {
+  cursor: pointer;
+}
+
+.root.clickable:focus {
+  outline: none;
+}
+
+.root.clickable .surface {
+  border-color: var(--flat-enabled-border-color);
+  background-color: var(--flat-enabled-background-color);
+  border-width: 1px;
+  border-style: solid;
+  cursor: pointer;
+  --base-border-color: var(--flat-enabled-border-color);
+  --base-background-color: var(--flat-enabled-background-color);
+}
+
+.root.clickable.activated .surface {
+  border-color: var(--flat-activated-border-color);
+  background-color: var(--flat-activated-background-color);
+  --base-border-color: var(--flat-activated-border-color);
+  --base-background-color: var(--flat-activated-background-color);
+}
+
+@media (hover:hover) {
+
+.root.clickable:hover .surface {
+    border-color: color-mix(in srgb, var(--flat-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
+    background-color: color-mix(in srgb, var(--flat-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
+  }
+}
+
+.root.clickable:active .surface {
+  border-color: var(--flat-pressed-border-color);
+  background-color: var(--flat-pressed-background-color);
+}
+
+.root.clickable:focus-visible .surface {
+  outline-color: var(--border-focus-color);
+  outline-width: var(--global-size-spacing-border-weight-focusframe);
+  outline-style: solid;
+  border-color: var(--container-global-color);
+  z-index: 1;
+}
+
+.root.clickable:disabled .surface {
+  border-color: var(--flat-disabled-border-color);
+  background-color: var(--flat-disabled-background-color);
+  cursor: not-allowed;
+  color: var(--on-flat-disabled-color) !important;
+}
+
+.root.clickable.disabled .surface {
+  border-color: var(--flat-disabled-border-color);
+  background-color: var(--flat-disabled-background-color);
+  cursor: not-allowed;
+  color: var(--on-flat-disabled-color) !important;
+}
+
+.root.clickable:disabled {
+  cursor: not-allowed;
+}
+
+.root.clickable.disabled {
+  cursor: not-allowed;
+}
+
+.root.clickable:focus {
+  outline: none;
+}
+
+/* Flip-flop: animate the value↔setpoint cap-height swap by forwarding obc-textbox's
+   opt-in size-transition var. 300ms matches the instrument setpoint marker
+   (svghelpers/setpoint.ts). Override via \`--obc-readout-list-item-flip-flop-duration\`. */
+
+.root.flip-flop {
+  --obc-textbox-size-transition: var(
+    --obc-readout-list-item-flip-flop-duration,
+    300ms
+  );
+}
+
+.surface {
+  display: block;
+  inline-size: 100%;
+  border-radius: var(--global-border-radius-border-radius-base);
+}
+
+/* Clickable corner variants. The \`.clickable\` qualifier is redundant for
+   matching (a \`border-*\` class is only ever set alongside \`.clickable\`) but
+   raises specificity to (0,4,0) so the interactive corner shape wins over the
+   data-quality rules below — which also target \`.surface\` at (0,3,0) — when a
+   row is both clickable and low-integrity/invalid. Standalone data-quality rows
+   keep their own radius. */
+
+.root.clickable.border-squared .surface {
+  border-radius: 0;
+}
+
+.root.clickable.border-round-corners .surface {
+  border-radius: var(--global-border-radius-border-radius-floating);
+}
+
+.root.clickable.border-round .surface {
+  border-radius: var(--global-border-radius-border-radius-round);
+}
+
+/* ---------- Content row ----------
+ * Label on the left, value/unit cluster on the right, optional source after a
+ * trailing divider. All segments bottom-align so cap heights sit on a shared
+ * baseline. */
+
+.content {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  inline-size: 100%;
+  min-inline-size: 0;
+}
+
+/* Reserve the value cap-height per tier so the row height and the bottom
+   baseline stay constant regardless of which parts (label / value / unit / src /
+   setpoint / advice / icons) are present. */
+
+.size-small .content {
+  min-block-size: var(
+    --global-typography-instrument-value-regular-container-height
+  );
+}
+
+.size-medium .content {
+  min-block-size: var(
+    --global-typography-instrument-value-medium-container-height
+  );
+}
+
+.size-large .content {
+  min-block-size: var(
+    --global-typography-instrument-value-large-container-height
+  );
+}
+
+/* The value is the primary data, so under width pressure the label side yields
+   first: the label-container shrinks (and clips a too-long label) while
+   \`.value-area\` keeps its intrinsic width. */
+
+.label-container {
   display: inline-flex;
   align-items: flex-end;
-  border-radius: var(--global-border-radius-border-radius-base);
-  width: 100%;
+  gap: var(--global-size-spacing-target-padding);
+  flex: 1 1 auto;
+  min-inline-size: 0;
+  overflow: hidden;
 }
 
-.root .content {
-    display: inline-flex;
-    align-items: flex-end;
-    justify-content: space-between;
-    flex: 1 1 auto;
-    min-width: 0;
-    max-width: none;
-    width: 100%;
-  }
+.label-stack {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-end;
+  min-inline-size: 0;
+}
 
-.root .label-container {
-    display: inline-flex;
-    align-items: flex-end;
-    gap: var(--global-size-spacing-target-padding);
-    flex: none;
-  }
+.value-area {
+  display: inline-flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+  flex: 0 0 auto;
+  min-inline-size: 0;
+}
 
-.root .leading-icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--element-neutral-color);
-  }
+.value-cluster {
+  display: inline-flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+}
 
-.root .label-stack {
-    display: inline-flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: flex-end;
-  }
+.unit-area {
+  display: inline-flex;
+  align-items: flex-end;
+}
 
-.root .label-inline {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--global-size-spacing-target-padding);
-  }
+/* ---------- Readout building block (advice / setpoint / value) ---------- */
 
-.root .label {
-    font-family: var(--global-typography-font-family);
-    font-size: var(--global-typography-instrument-label-font-size);
-    line-height: var(--global-typography-instrument-label-line-height);
-    font-feature-settings:
-    "liga" off,
-    "clig" off,
-    "ss04" on;
-    display: flex;
-    align-items: flex-end;
-    block-size: var(--global-typography-instrument-label-container-height);
-    max-block-size: var(--global-typography-instrument-label-container-height);
-    padding-bottom: var(--global-typography-instrument-label-padding-bottom);
-    overflow: hidden;
-    font-size: var(--global-typography-instrument-label-font-size);
-    line-height: var(--global-typography-instrument-label-line-height);
-    color: var(--element-inactive-color);
-  }
+.block {
+  display: inline-flex;
+  align-items: flex-end;
+}
 
-.root .unit,.root .source {
-    font-family: var(--global-typography-font-family);
-    font-size: var(--global-typography-instrument-unit-font-size);
-    line-height: var(--global-typography-instrument-unit-line-height);
-    font-feature-settings:
-    "liga" off,
-    "clig" off,
-    "ss04" on;
-    display: flex;
-    align-items: flex-end;
-    block-size: var(--global-typography-instrument-unit-container-height);
-    max-block-size: var(--global-typography-instrument-unit-container-height);
-    padding-bottom: var(--global-typography-instrument-unit-padding-bottom);
-    overflow: hidden;
-    font-size: var(--global-typography-instrument-unit-font-size);
-    line-height: var(--global-typography-instrument-unit-line-height);
-  }
+/* Number + its (setpoint/advice) degree glyph, hugging with no gap — the
+   \`.block\` gap only separates the icon from this group. */
 
-.root .unit {
-    color: var(--element-inactive-color);
-  }
+.block-content {
+  display: inline-flex;
+  align-items: flex-end;
+}
 
-.root .source {
-    color: var(--element-neutral-color);
-  }
+.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;
+}
 
-.root .value-container {
-    display: inline-flex;
-    align-items: flex-end;
-    justify-content: flex-end;
-    flex: 1 1 auto;
-    min-width: 0;
-  }
+.block-icon obi-input-right,
+.block-icon obi-notification-advice,
+.block-icon ::slotted(*) {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+}
 
-.root .value-wrap {
-    display: inline-flex;
-    align-items: flex-end;
-    justify-content: flex-end;
-  }
+.hinted-zero {
+  color: var(
+    --obc-readout-list-item-hinted-color,
+    var(--element-inactive-color)
+  );
+}
 
-.root .value-cluster {
-    display: inline-flex;
-    align-items: flex-end;
-    justify-content: flex-end;
-    gap: var(
-      --instrument-components-readout-new-list-item-medium-value-container-gap
-    );
-  }
+/* ---------- Text colours (overridable via custom properties) ----------
+ * obc-textbox does not set its own colour, so it inherits these. */
 
-.root .value-icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    color: inherit;
-  }
+.block-value {
+  color: var(--obc-readout-list-item-value-color, var(--element-neutral-color));
+}
 
-.root .divider {
-    flex: none;
-    inline-size: 1px;
-    background-color: var(--border-outline-color);
-    align-self: stretch;
-  }
+.block-value.tone-enhanced {
+  color: var(
+    --obc-readout-list-item-value-enhanced-color,
+    var(--element-neutral-enhanced-color)
+  );
+}
 
-.root .unit-trailing {
-    display: inline-flex;
-    align-items: flex-end;
-  }
+/* 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\`. */
 
-.root .source-trailing {
-    display: inline-flex;
-    align-items: center;
-    justify-content: flex-end;
-    padding-inline: calc(var(--global-size-spacing-target-padding) / 2);
-  }
+.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;
+}
 
-.root.size-base {
-    padding-inline: var(
-      --instrument-components-readout-new-list-item-regular-container-padding-horizontal
-    );
-    padding-block: 0;
-  }
+.block-setpoint.tone-enhanced {
+  color: var(
+    --obc-readout-list-item-setpoint-enhanced-color,
+    var(--instrument-enhanced-secondary-color)
+  );
+}
 
-.root.size-base .content {
-      gap: var(
-        --instrument-components-readout-new-list-item-regular-content-container-gap
-      );
-    }
+/* Pop-up: fade the setpoint out once value === setpoint, keeping its space so
+   the value stays column-aligned. */
 
-.root.size-base .value-cluster {
-      gap: var(
-        --instrument-components-readout-new-list-item-regular-value-container-gap
-      );
-    }
+.block-setpoint.is-hiding {
+  opacity: 0;
+}
 
-.root.size-base.stacking-leading-src .content {
-      gap: var(--global-size-spacing-target-padding);
-    }
+.block-setpoint.is-hidden {
+  opacity: 0;
+  visibility: hidden;
+}
 
-.root.size-base .divider {
-      block-size: var(
-        --global-typography-instrument-value-regular-container-height
-      );
-    }
+/* 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. */
 
-.root.size-priority {
-    padding-inline: var(
-      --instrument-components-readout-new-list-item-medium-container-padding-horizontal
-    );
-    padding-block: var(
-      --instrument-components-readout-new-list-item-medium-container-padding-vertical
-    );
-  }
+.block-setpoint.touching {
+  --_touching-outline: var(
+    --obc-readout-list-item-setpoint-touching-outline-color,
+    var(--element-neutral-enhanced-color)
+  );
+}
 
-.root.size-priority .content {
-      gap: var(
-        --instrument-components-readout-new-list-item-medium-content-container-gap
-      );
-    }
+.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));
+}
 
-.root.size-priority .divider {
-      block-size: var(
-        --global-typography-instrument-value-medium-container-height
-      );
-    }
+.block-advice {
+  color: var(
+    --obc-readout-list-item-advice-color,
+    var(--element-neutral-color)
+  );
+}
 
-.root.size-enhanced {
-    padding-inline: var(
-      --instrument-components-readout-new-list-item-large-container-padding-horizontal
-    );
-    padding-block: var(
-      --instrument-components-readout-new-list-item-large-container-padding-vertical
-    );
-  }
+.label {
+  color: var(
+    --obc-readout-list-item-label-color,
+    var(--element-inactive-color)
+  );
+}
 
-.root.size-enhanced .content {
-      gap: var(--instrument-components-readout-new-list-item-large-content-gap);
-    }
+.unit {
+  color: var(--obc-readout-list-item-unit-color, var(--element-inactive-color));
+}
 
-.root.size-enhanced .value-cluster {
-      gap: var(--instrument-components-readout-new-list-item-large-value-gap);
-    }
+.source {
+  color: var(
+    --obc-readout-list-item-source-color,
+    var(--element-neutral-color)
+  );
+}
 
-.root.size-enhanced .divider {
-      block-size: var(
-        --global-typography-instrument-value-large-container-height
-      );
-    }
+/* ---------- Per-block 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. */
 
-.root.size-enhanced.stacking-leading-unit .label-container {
-      align-items: center;
-    }
+.block.data-low-integrity,
+.block.data-invalid,
+.source.data-low-integrity,
+.source.data-invalid {
+  outline: 1px solid;
+  border-radius: var(--global-border-radius-border-radius-check);
+}
 
-.root.size-enhanced.stacking-leading-unit .label-stack {
-      justify-content: flex-end;
-    }
+.block.data-low-integrity,
+.source.data-low-integrity {
+  background: var(--alert-low-integrity-background-color);
+  outline-color: var(--alert-low-integrity-border-color);
+}
 
-.root.size-enhanced.stacking-leading-unit .unit-leading {
-      margin-top: 0;
-    }
+.block.data-invalid,
+.source.data-invalid {
+  background: var(--alert-invalid-background-color);
+  outline-color: var(--alert-invalid-border-color);
+}
 
-.root.stacking-leading-unit .unit-trailing {
-      display: none;
-    }
+.leading-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  color: var(--element-neutral-color);
+}
 
-.root.stacking-leading-src .source-inline {
-      display: inline-flex;
-      align-items: center;
-      justify-content: flex-end;
-    }
+.leading-icon ::slotted(*) {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+}
 
-.root.stacking-leading-src :is(.divider,.source-trailing) {
-      display: none;
-    }
+.divider {
+  flex: none;
+  inline-size: 1px;
+  background-color: var(--border-outline-color);
+  align-self: stretch;
+}
 
-.root:is(.data-low-integrity,.data-invalid) {
-    background: var(--_obc-readout-list-item-data-background);
-    border: 1px solid var(--_obc-readout-list-item-data-border);
-    border-radius: 4px;
-  }
+/* ---------- Value↔unit gap & degree column ----------
+ * Default 2px between the value digits and the unit. A degree (or a
+ * hasDegreeSpacer reserve) replaces the 2px with a cap-height degree column
+ * whose width scales with the value size, so value digits + units align across
+ * degree / no-degree rows of the same value size. */
+
+.value-unit-gap {
+  flex: none;
+  inline-size: var(
+    --instrument-components-readout-new-general-horizontal-trim-padding
+  );
+}
+
+.degree-column {
+  flex: none;
+  display: inline-flex;
+  align-items: flex-end;
+  justify-content: center;
+  inline-size: var(--_obc-readout-list-item-degree-width, 0);
+  overflow: clip;
+  color: var(--obc-readout-list-item-value-color, var(--element-neutral-color));
+}
+
+.degree-column.tone-enhanced {
+  color: var(
+    --obc-readout-list-item-value-enhanced-color,
+    var(--element-neutral-enhanced-color)
+  );
+}
+
+/* Setpoint/advice degree glyphs inherit their block's colour. */
+
+.degree-column.degree-inherit {
+  color: inherit;
+}
+
+.degree-column.degree-xs {
+  --_obc-readout-list-item-degree-width: var(
+    --global-typography-instrument-value-small-degree-unit-width
+  );
+}
+
+.degree-column.degree-s {
+  --_obc-readout-list-item-degree-width: var(
+    --global-typography-instrument-value-regular-degree-unit-width
+  );
+}
+
+.degree-column.degree-m {
+  --_obc-readout-list-item-degree-width: var(
+    --global-typography-instrument-value-medium-degree-unit-width
+  );
+}
+
+.degree-column.degree-l,
+.degree-column.degree-xl {
+  --_obc-readout-list-item-degree-width: var(
+    --global-typography-instrument-value-large-degree-unit-width
+  );
+}
+
+/* Degree spacer: rendered AFTER the unit on a non-degree row that sets
+   hasDegreeSpacer. Its width (degree-compensation-padding = degree-column width
+   minus the 2px value↔unit gap) shifts the unit left so the row's value digits
+   stay aligned with degree rows in the same column. */
+
+.degree-spacer {
+  flex: none;
+  align-self: stretch;
+  inline-size: var(--_obc-readout-list-item-degree-spacer-width, 0);
+}
+
+.size-small .degree-spacer {
+  --_obc-readout-list-item-degree-spacer-width: var(
+    --instrument-components-readout-new-list-item-regular-degree-compensation-padding
+  );
+}
+
+.size-medium .degree-spacer {
+  --_obc-readout-list-item-degree-spacer-width: var(
+    --instrument-components-readout-new-list-item-medium-degree-compensation-padding
+  );
+}
+
+.size-large .degree-spacer {
+  --_obc-readout-list-item-degree-spacer-width: var(
+    --instrument-components-readout-new-list-item-large-degree-compensation-padding
+  );
+}
+
+/* ---------- Size tiers ----------
+ * Public small/medium/large map to the design token regular/medium/large
+ * tiers. */
+
+.size-small .surface {
+  padding-inline: var(
+    --instrument-components-readout-new-list-item-regular-container-padding-horizontal
+  );
+  padding-block: var(
+    --instrument-components-readout-new-list-item-regular-container-padding-vertical
+  );
+}
+
+.size-small .content {
+  gap: var(
+    --instrument-components-readout-new-list-item-regular-content-container-gap
+  );
+}
+
+.size-small .value-cluster {
+  gap: var(
+    --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
+  );
+  block-size: var(
+    --instrument-components-readout-new-general-regular-icon-size
+  );
+}
+
+.size-small .divider {
+  block-size: var(
+    --global-typography-instrument-value-regular-container-height
+  );
+}
+
+.size-medium .surface {
+  padding-inline: var(
+    --instrument-components-readout-new-list-item-medium-container-padding-horizontal
+  );
+  padding-block: var(
+    --instrument-components-readout-new-list-item-medium-container-padding-vertical
+  );
+}
+
+.size-medium .content {
+  gap: var(
+    --instrument-components-readout-new-list-item-medium-content-container-gap
+  );
+}
+
+.size-medium .value-cluster {
+  gap: var(
+    --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
+  );
+  block-size: var(--instrument-components-readout-new-general-medium-icon-size);
+}
+
+.size-medium .divider {
+  block-size: var(--global-typography-instrument-value-medium-container-height);
+}
+
+.size-large .surface {
+  padding-inline: var(
+    --instrument-components-readout-new-list-item-large-container-padding-horizontal
+  );
+  padding-block: var(
+    --instrument-components-readout-new-list-item-large-container-padding-vertical
+  );
+  min-block-size: var(
+    --instrument-components-readout-new-list-item-large-min-height
+  );
+}
+
+.size-large .content {
+  gap: var(--instrument-components-readout-new-list-item-large-content-gap);
+}
+
+.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);
+}
+
+.size-large .divider {
+  block-size: var(--global-typography-instrument-value-large-container-height);
+}
+
+/* ---------- Stacking ----------
+ * leading-unit / leading-src move the unit / source up beside the label and
+ * suppress the trailing variant. (Handled in markup; these rules tighten the
+ * label-stack gap.) */
+
+.stacking-leading-src .content {
+  gap: var(--global-size-spacing-target-padding);
+}
+
+/* ---------- Data quality ----------
+ * Orthogonal to the alert frame — both can apply at once. */
+
+.root.data-low-integrity .surface,
+.root.data-invalid .surface {
+  /* \`outline\` (not \`border\`) so the data-quality frame does not inset the
+     content by 1px — keeps the row's value column-aligned with unframed rows.
+     Matches the per-block data-quality rules. */
+  outline: 1px solid var(--_obc-readout-list-item-data-border);
+  background: var(--_obc-readout-list-item-data-background);
+  border-radius: var(--global-border-radius-border-radius-check);
+}
 
 .root.data-low-integrity {
-    --_obc-readout-list-item-data-background: var(
-      --alert-low-integrity-background-color
-    );
-    --_obc-readout-list-item-data-border: var(
-      --alert-low-integrity-border-color
-    );
-  }
+  --_obc-readout-list-item-data-background: var(
+    --alert-low-integrity-background-color
+  );
+  --_obc-readout-list-item-data-border: var(--alert-low-integrity-border-color);
+}
 
 .root.data-invalid {
-    --_obc-readout-list-item-data-background: var(
-      --alert-invalid-background-color
-    );
-    --_obc-readout-list-item-data-border: var(--alert-invalid-border-color);
-  }
+  --_obc-readout-list-item-data-background: var(
+    --alert-invalid-background-color
+  );
+  --_obc-readout-list-item-data-border: var(--alert-invalid-border-color);
+}
 `;
 var __defProp$f = Object.defineProperty;
 var __getOwnPropDesc$f = Object.getOwnPropertyDescriptor;
@@ -222398,278 +222859,517 @@ var __decorateClass$f = (decorators, target, key, kind) => {
 let ObcReadoutListItem = class extends i$4 {
   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;
+    this.maxDigits = 0;
+    this.alert = false;
+    this.deferredSetpointHidePhase = "none";
+    this.hasCompletedFirstUpdate = false;
   }
-  get resolvedMainValueSize() {
-    return this.size === "enhanced" ? ReadoutSetpointSize.large : this.size === "priority" ? ReadoutSetpointSize.medium : ReadoutSetpointSize.regular;
+  get resolvedSize() {
+    return this.size ?? "small";
   }
-  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;
+  get resolvedStacking() {
+    return this.stacking ?? "trailing-unit";
   }
-  get resolvedValueTypography() {
-    if (this.priority === "setpoint-flip-flop" && this.resolvedValueSize === ReadoutSetpointSize.small) {
-      return void 0;
+  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 resolvedSetpointSize() {
+  get resolvedSetpointInteraction() {
+    return this.setpointOptions?.interaction ?? "always-visible";
+  }
+  get isFlipFlop() {
+    return this.resolvedSetpointInteraction === "flip-flop";
+  }
+  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 A;
+  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 b`
-        <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 b`
-        <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 b`
-      <div class="label-stack" part="label-stack">
-        <div class="label" part="label">${this.label}</div>
-        ${showsLeadingUnit ? b`<div class="unit unit-leading" part="unit-leading">
-              ${this.unit}
-            </div>` : A}
-        ${showsLeadingSrc ? b`<div class="source source-inline" part="source-inline">
-              ${this.src}
-            </div>` : A}
-      </div>
-    `;
+    return explicit.length >= derived.length ? explicit : derived;
   }
-  renderValueIconSlot() {
-    if (!this.hasValueIcon) {
-      return A;
+  /** 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 A;
+      }
+      return b`<span class="block-icon" aria-hidden="true"
+        ><slot name="value-icon"></slot
+      ></span>`;
+    }
+    if (role === "setpoint") {
+      return b`<span class="block-icon" aria-hidden="true">
+        <slot name="setpoint-icon"><obi-input-right></obi-input-right></slot>
+      </span>`;
     }
-    return b`<span class="value-icon" slot="icon" aria-hidden="true">
-      <slot name="value-icon"></slot>
+    return b`<span class="block-icon" aria-hidden="true">
+      <slot name="advice-icon"
+        ><obi-notification-advice></obi-notification-advice
+      ></slot>
     </span>`;
   }
-  renderSetpoint() {
-    if (!this.hasSetpoint) {
-      return A;
-    }
-    return b`
-      <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}
+  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 = b`
+      <div
+        class=${e$1({
+      block: true,
+      [`block-${config.role}`]: true,
+      "tone-enhanced": config.enhanced,
+      ...this.dataQualityClasses(config.dataQuality),
+      ...config.extraClasses ?? {}
+    })}
+        part="block block-${config.role}"
       >
-        <obi-input-right slot="icon"></obi-input-right>
-      </obc-readout-setpoint>
+        ${this.renderIcon(config.role)}
+        <span class="block-content">
+          <obc-textbox
+            class="block-text"
+            .size=${config.size}
+            .fontWeight=${config.weight}
+            .tabularNums=${true}
+          >
+            ${hinted ? b`<span class="hinted-zero" aria-hidden="true"
+                  >${hinted}</span
+                >` : A}${text}
+            ${reserver ? b`<span slot="length">${reserver}</span>` : A}
+          </obc-textbox>
+          ${config.hasDegree ? this.renderDegreeGlyph(config.size, { inherit: true }) : A}
+        </span>
+      </div>
     `;
+    return wrapWithAlertFrame(config.alert ?? false, block);
   }
-  renderActualValue() {
+  /**
+   * 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 b`
-      <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}
+      <span
+        class=${e$1({
+      "degree-column": true,
+      [`degree-${size}`]: true,
+      "tone-enhanced": !opts.inherit && Boolean(opts.enhanced),
+      "degree-inherit": Boolean(opts.inherit)
+    })}
+        part="degree"
       >
-        ${this.renderValueIconSlot()}
-      </obc-readout-setpoint>
+        <obc-textbox class="degree-glyph" .size=${size} alignment="center"
+          >°</obc-textbox
+        >
+      </span>
     `;
   }
-  renderValue() {
+  /**
+   * 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 A;
+    }
+    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 b`<span class="value-unit-gap" aria-hidden="true"></span>`;
+    }
+    return A;
+  }
+  /**
+   * 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 A;
+    }
+    return b`<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 = b`
+      <obc-textbox
+        class=${e$1({
+      [role]: true,
+      ...this.dataQualityClasses(state2?.dataQuality)
+    })}
+        part=${role}
+        .size=${ObcTextboxSize.xs}
+        .fontWeight=${weight}
+        alignment="left"
+      >
+        ${text}
+        ${reserver ? b`<span slot="length">${reserver}</span>` : A}
+      </obc-textbox>
+    `;
+    return wrapWithAlertFrame(state2?.alert ?? false, box);
+  }
+  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 b`
-      <div class="value-wrap" part="value-wrap">
-        ${this.hasSetpoint ? b`<div class="value-cluster" part="value-cluster">
-              ${this.renderSetpoint()} ${this.renderActualValue()}
-            </div>` : this.renderActualValue()}
+      <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
+    }) : A}
+        ${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
+    }) : A}
+        ${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
+    }) : A}
+      </div>
+    `;
+  }
+  renderLabelContainer() {
+    const stacking = this.resolvedStacking;
+    const showLeadingUnit = stacking === "leading-unit" && Boolean(this.unit);
+    const showLeadingSrc = stacking === "leading-src" && Boolean(this.src);
+    return b`
+      <div class="label-container" part="label-container">
+        ${this.hasLeadingIcon ? b`<span class="leading-icon" aria-hidden="true"
+              ><slot name="leading-icon"></slot
+            ></span>` : A}
+        <div class="label-stack" part="label-stack">
+          ${this.label ? this.renderTextbox("label", this.label) : A}
+          ${showLeadingUnit ? this.renderTextbox(
+      "unit",
+      this.unit ?? "",
+      this.unitOptions?.spaceReserver
+    ) : A}
+          ${showLeadingSrc ? this.renderTextbox(
+      "source",
+      this.src ?? "",
+      this.srcOptions?.spaceReserver,
+      this.srcOptions
+    ) : A}
+        </div>
       </div>
     `;
   }
   renderTrailingUnit() {
-    if (!this.hasUnit || this.stacking === "leading-unit") {
+    if (this.resolvedStacking === "leading-unit" || !this.unit) {
       return A;
     }
-    return b`<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 A;
     }
     return b`
       <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,
-      b`
-        <div
-          class=${e$1({
-        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 ? b`<span class="leading-icon" aria-hidden="true"
-                    ><slot name="leading-icon"></slot
-                  ></span>` : A}
-              ${this.renderLabelContainer()}
-            </div>
-
-            ${this.labelOnly ? A : b`
-                  <div class="value-container" part="value-container">
-                    ${this.renderValue()} ${this.renderTrailingUnit()}
-                  </div>
-
-                  ${this.renderTrailingSource()}
-                `}
+  renderContent() {
+    return b`
+      <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 = e$1({
+      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 = b`<div class="surface" part="surface">
+      ${this.renderContent()}
+    </div>`;
+    const root = clickable ? b`<button class=${classes} part="root" type="button">
+          ${surface}
+        </button>` : b`<div class=${classes} part="root">${surface}</div>`;
+    const alert = this.alert === true ? {} : this.alert;
+    return wrapWithAlertFrame(alert, root, true);
   }
 };
 ObcReadoutListItem.styles = r$7(componentStyle$4);
-__decorateClass$f([
-  n$3({ type: String })
-], ObcReadoutListItem.prototype, "size", 2);
-__decorateClass$f([
-  n$3({ type: String })
-], ObcReadoutListItem.prototype, "stacking", 2);
-__decorateClass$f([
-  n$3({ type: String })
-], ObcReadoutListItem.prototype, "priority", 2);
-__decorateClass$f([
-  n$3({ type: String })
-], ObcReadoutListItem.prototype, "dataState", 2);
-__decorateClass$f([
-  n$3({ type: Object })
-], ObcReadoutListItem.prototype, "alert", 2);
 __decorateClass$f([
   n$3({ type: String })
 ], ObcReadoutListItem.prototype, "label", 2);
@@ -222679,48 +223379,78 @@ __decorateClass$f([
 __decorateClass$f([
   n$3({ type: String })
 ], ObcReadoutListItem.prototype, "src", 2);
+__decorateClass$f([
+  n$3({ type: Boolean, attribute: false })
+], ObcReadoutListItem.prototype, "hasValue", 2);
 __decorateClass$f([
   n$3({ type: Number })
 ], ObcReadoutListItem.prototype, "value", 2);
 __decorateClass$f([
-  n$3({ type: Number })
-], ObcReadoutListItem.prototype, "setpointValue", 2);
+  n$3({ type: Boolean })
+], ObcReadoutListItem.prototype, "off", 2);
 __decorateClass$f([
   n$3({ type: Boolean })
 ], ObcReadoutListItem.prototype, "hasSetpoint", 2);
 __decorateClass$f([
-  n$3({ type: Boolean })
-], ObcReadoutListItem.prototype, "hasDegree", 2);
+  n$3({ type: Number })
+], ObcReadoutListItem.prototype, "setpoint", 2);
 __decorateClass$f([
   n$3({ type: Boolean })
-], ObcReadoutListItem.prototype, "hasUnit", 2);
+], ObcReadoutListItem.prototype, "hasAdvice", 2);
 __decorateClass$f([
-  n$3({ type: Boolean })
-], ObcReadoutListItem.prototype, "hasLabel", 2);
+  n$3({ type: Number })
+], ObcReadoutListItem.prototype, "advice", 2);
 __decorateClass$f([
-  n$3({ type: Boolean })
-], ObcReadoutListItem.prototype, "hasSource", 2);
+  n$3({ type: String })
+], ObcReadoutListItem.prototype, "size", 2);
+__decorateClass$f([
+  n$3({ type: String })
+], ObcReadoutListItem.prototype, "priority", 2);
+__decorateClass$f([
+  n$3({ type: String })
+], ObcReadoutListItem.prototype, "stacking", 2);
+__decorateClass$f([
+  n$3({ type: Object })
+], ObcReadoutListItem.prototype, "clickable", 2);
 __decorateClass$f([
   n$3({ type: Boolean })
 ], ObcReadoutListItem.prototype, "hasLeadingIcon", 2);
 __decorateClass$f([
   n$3({ type: Boolean })
-], ObcReadoutListItem.prototype, "hasValueIcon", 2);
+], ObcReadoutListItem.prototype, "hasDegree", 2);
+__decorateClass$f([
+  n$3({ type: Boolean })
+], ObcReadoutListItem.prototype, "hasDegreeSpacer", 2);
 __decorateClass$f([
   n$3({ type: Number })
 ], ObcReadoutListItem.prototype, "fractionDigits", 2);
-__decorateClass$f([
-  n$3({ type: Boolean })
-], ObcReadoutListItem.prototype, "showZeroPadding", 2);
 __decorateClass$f([
   n$3({ type: Number })
-], ObcReadoutListItem.prototype, "minValueLength", 2);
+], ObcReadoutListItem.prototype, "maxDigits", 2);
 __decorateClass$f([
-  n$3({ type: Boolean })
-], ObcReadoutListItem.prototype, "hasHintedZeros", 2);
+  n$3({ type: String })
+], ObcReadoutListItem.prototype, "dataQuality", 2);
 __decorateClass$f([
-  n$3({ type: Boolean })
-], ObcReadoutListItem.prototype, "labelOnly", 2);
+  n$3({ type: Object })
+], ObcReadoutListItem.prototype, "alert", 2);
+__decorateClass$f([
+  n$3({ type: Object })
+], ObcReadoutListItem.prototype, "valueOptions", 2);
+__decorateClass$f([
+  n$3({ type: Object })
+], ObcReadoutListItem.prototype, "setpointOptions", 2);
+__decorateClass$f([
+  n$3({ type: Object })
+], ObcReadoutListItem.prototype, "adviceOptions", 2);
+__decorateClass$f([
+  n$3({ type: Object })
+], ObcReadoutListItem.prototype, "unitOptions", 2);
+__decorateClass$f([
+  n$3({ type: Object })
+], ObcReadoutListItem.prototype, "srcOptions", 2);
+__decorateClass$f([
+  r$3()
+], ObcReadoutListItem.prototype, "deferredSetpointHidePhase", 2);
 ObcReadoutListItem = __decorateClass$f([
   customElement("obc-readout-list-item")
 ], ObcReadoutListItem);