@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.97 → 2.0.0-next.99

package/src/automation/automation-tank/automation-tank.ts

@@ -94,25 +94,6 @@ export enum TankChartMode {
   graphAndBar = 'graph-and-bar',
 }
 
-/**
- * A single detail row rendered in the tank's `readout` rich list (below the
- * main percent / value block, separated by a divider). Each row is rendered
- * as `<label>` on the left and `<value><degree?><percent?><unit>` on the
- * right, all on a single line.
- */
-export interface TankReadoutItem {
-  /** Left-aligned label text (e.g. `Temperature`). */
-  label: string;
-  /** Numeric value, formatted with the tank's `percentFractionDigits`. */
-  value: number;
-  /** Append a `°` glyph directly after the value with no gap. */
-  hasDegree?: boolean;
-  /** Append a `%` glyph directly after the value with no gap. */
-  hasPercentage?: boolean;
-  /** Unit text (e.g. `C`, `Pa`, `m/s`). Rendered after the value/glyph. */
-  unit: string;
-}
-
 /**
  *
  *
@@ -122,7 +103,11 @@ export interface TankReadoutItem {
  * @slot max-value - Content for the capacity value.
  * @slot unit - Content for the unit of measurement.
  * @slot current-value - Content for the current level value.
- * @slot rich - Content for additional detail rows.
+ * @slot rich - Detail rows below the main readout, shown in the regular
+ *   (non-compact, non-static) layout. Slot an `<obc-readout-list>` of
+ *   `<obc-readout-list-item>` rows — it owns the row typography and cross-row
+ *   column alignment; the tank renders a divider above it automatically when
+ *   the slot is filled.
  * @slot alert-icon - Custom icon for the alert frame.
  * @slot alert-label - Label for the alert frame.
  * @slot alert-timer - Timer for the alert frame.
@@ -249,21 +234,6 @@ export class ObcAutomationTank extends LitElement {
    */
   @property({type: Number}) percentFractionDigits: number = 0;
 
-  /**
-   * Rich detail rows shown below the main percent/value block in the regular
-   * (non-compact, non-static) layout, separated by a divider. When empty (the
-   * default), nothing is rendered — neither the divider nor the list. In
-   * vertical orientation the chart cell shrinks to make room; in horizontal
-   * orientation the readout column already has reserved whitespace so the
-   * chart is unaffected.
-   *
-   * Values are formatted using `percentFractionDigits`. Consumers that need
-   * full control over the markup can replace the entire fallback by slotting
-   * arbitrary content into `slot="rich"` (note: this is a different name from
-   * the existing `slot="readout"` which replaces the whole readout block).
-   */
-  @property({type: Array, attribute: false}) readout: TankReadoutItem[] = [];
-
   /**
    * Enum-driven badges rendered inside the `badges` cell. Mirrors the API
    * introduced for `ObcAbstractAutomationButton` in PR #839 (#829). When set
@@ -297,6 +267,13 @@ export class ObcAutomationTank extends LitElement {
    */
   @state() private _hasBadges = false;
   @state() private _hasTagSlot = false;
+  /**
+   * Tracks whether the `rich` slot has assigned content, so the regular
+   * (non-compact) layout only draws the rich divider when a consumer has
+   * slotted detail rows (canonically an `<obc-readout-list>`). Mirrors
+   * `_hasBadges` / `_hasTagSlot`.
+   */
+  @state() private _hasRichSlot = false;
   private _chartResizeObserver?: ResizeObserver;
   private _observedCell?: Element;
 
@@ -396,6 +373,17 @@ export class ObcAutomationTank extends LitElement {
       );
   }
 
+  private _onRichSlotChange(e: Event): void {
+    const slot = e.target as HTMLSlotElement;
+    this._hasRichSlot = slot
+      .assignedNodes({flatten: true})
+      .some(
+        (n) =>
+          n.nodeType === Node.ELEMENT_NODE ||
+          (n.nodeType === Node.TEXT_NODE && !!n.textContent?.trim())
+      );
+  }
+
   override disconnectedCallback(): void {
     super.disconnectedCallback();
     this._chartResizeObserver?.disconnect();
@@ -756,36 +744,8 @@ export class ObcAutomationTank extends LitElement {
                     <slot class="unit" name="unit">m<sup>3</sup></slot>
                   </div>
                 </div>
-                <slot name="rich">
-                  ${this.readout.length > 0
-                    ? html`
-                        <div class="rich-divider"></div>
-                        <div class="rich">
-                          ${this.readout.map(
-                            (row) => html`
-                              <div class="rich-row">
-                                <span class="rich-label">${row.label}</span>
-                                <span class="rich-value"
-                                  >${row.value.toFixed(
-                                    this.percentFractionDigits
-                                  )}</span
-                                >
-                                <span class="rich-suffix"
-                                  >${row.hasDegree
-                                    ? html`<span class="rich-glyph">°</span>`
-                                    : nothing}${row.hasPercentage
-                                    ? html`<span class="rich-glyph">%</span>`
-                                    : nothing}<span class="rich-unit"
-                                    >${row.unit}</span
-                                  ></span
-                                >
-                              </div>
-                            `
-                          )}
-                        </div>
-                      `
-                    : nothing}
-                </slot>
+                <div class="rich-divider" ?hidden=${!this._hasRichSlot}></div>
+                <slot name="rich" @slotchange=${this._onRichSlotChange}></slot>
               </slot>
             </div>
           `;

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

@@ -93,14 +93,17 @@ obc-readout-block {
 .readout.direction-vertical.alignment-left {
   align-items: flex-start;
 }
+
 .readout.direction-vertical.alignment-center {
   align-items: center;
 }
+
 .readout.direction-vertical.alignment-left
   :is(.value-cluster, .advice-row, .setpoint-row, .value-row) {
   align-items: flex-start;
   justify-content: flex-start;
 }
+
 .readout.direction-vertical.alignment-center
   :is(.value-cluster, .advice-row, .setpoint-row, .value-row) {
   align-items: center;
@@ -146,19 +149,23 @@ obc-readout-block {
   align-items: end;
   justify-items: end;
 }
+
 .readout.direction-vertical.setpoint-dynamic
   :is(.setpoint-row, .value-row)
   > * {
   grid-area: 1 / 1;
 }
+
 .readout.direction-vertical.alignment-left.setpoint-dynamic
   :is(.setpoint-row, .value-row) {
   justify-items: start;
 }
+
 .readout.direction-vertical.alignment-center.setpoint-dynamic
   :is(.setpoint-row, .value-row) {
   justify-items: center;
 }
+
 .setpoint-width-reserve {
   visibility: hidden;
   display: inline-flex;
@@ -197,10 +204,12 @@ obc-readout-block {
   outline: 1px solid;
   border-radius: var(--global-border-radius-border-radius-check);
 }
+
 .value-reading.data-low-integrity {
   background: var(--alert-low-integrity-background-color);
   outline-color: var(--alert-low-integrity-border-color);
 }
+
 .value-reading.data-invalid {
   background: var(--alert-invalid-background-color);
   outline-color: var(--alert-invalid-border-color);
@@ -248,18 +257,22 @@ obc-readout-block {
   display: inline-flex;
   padding-inline: var(--_readout-trim);
 }
+
 .meta.meta-inline {
   flex-direction: row;
   align-items: flex-start;
   gap: var(--global-size-spacing-target-padding);
 }
+
 .meta.meta-stacked {
   flex-direction: column;
   align-items: flex-end;
 }
+
 .readout.direction-vertical.alignment-left .meta.meta-stacked {
   align-items: flex-start;
 }
+
 .readout.direction-vertical.alignment-center .meta.meta-stacked {
   align-items: center;
 }
@@ -269,14 +282,24 @@ obc-readout-block {
 .readout.direction-horizontal .meta.meta-stacked {
   align-items: flex-start;
   align-self: center;
+
+  &.label-only {
+    align-self: flex-start;
+  }
+
+  &.unit-only {
+    align-self: flex-end;
+  }
 }
 
 .label {
   color: var(--obc-readout-label-color, var(--element-neutral-color));
 }
+
 .unit {
   color: var(--obc-readout-unit-color, var(--element-neutral-color));
 }
+
 .source {
   color: var(--obc-readout-source-color, var(--element-neutral-color));
 }
@@ -292,11 +315,13 @@ obc-readout-block {
   outline: 1px solid;
   border-radius: var(--global-border-radius-border-radius-check);
 }
+
 .source.data-low-integrity,
 .source-button.data-low-integrity {
   background: var(--alert-low-integrity-background-color);
   outline-color: var(--alert-low-integrity-border-color);
 }
+
 .source.data-invalid,
 .source-button.data-invalid {
   background: var(--alert-invalid-background-color);
@@ -314,11 +339,13 @@ obc-readout-block {
   flex: none;
   background-color: var(--border-divider-color);
 }
+
 .divider.divider-horizontal {
   inline-size: 100%;
   block-size: 1px;
   margin-block: var(--_readout-divider-pad);
 }
+
 .divider.divider-vertical {
   inline-size: 1px;
   align-self: stretch;
@@ -350,27 +377,32 @@ obc-readout-block {
   overflow: clip;
   color: var(--obc-readout-value-color, var(--element-neutral-color));
 }
+
 .degree-column.tone-enhanced {
   color: var(
     --obc-readout-value-enhanced-color,
     var(--element-neutral-enhanced-color)
   );
 }
+
 .degree-column.degree-xs {
   --_readout-degree-width: var(
     --global-typography-instrument-value-small-degree-unit-width
   );
 }
+
 .degree-column.degree-s {
   --_readout-degree-width: var(
     --global-typography-instrument-value-regular-degree-unit-width
   );
 }
+
 .degree-column.degree-m {
   --_readout-degree-width: var(
     --global-typography-instrument-value-medium-degree-unit-width
   );
 }
+
 .degree-column.degree-l,
 .degree-column.degree-xl {
   --_readout-degree-width: var(
@@ -383,16 +415,19 @@ obc-readout-block {
   align-self: stretch;
   inline-size: var(--_readout-degree-spacer-width, 0);
 }
+
 .size-small .degree-spacer {
   --_readout-degree-spacer-width: var(
     --instrument-components-readout-new-general-regular-degree-compensation-padding
   );
 }
+
 .size-medium .degree-spacer {
   --_readout-degree-spacer-width: var(
     --instrument-components-readout-new-general-medium-degree-compensation-padding
   );
 }
+
 .size-large .degree-spacer {
   --_readout-degree-spacer-width: var(
     --instrument-components-readout-new-general-large-degree-compensation-padding
@@ -408,10 +443,12 @@ obc-readout-block {
   background: var(--_readout-data-background);
   border-radius: var(--global-border-radius-border-radius-check);
 }
+
 .readout.data-low-integrity {
   --_readout-data-background: var(--alert-low-integrity-background-color);
   --_readout-data-border: var(--alert-low-integrity-border-color);
 }
+
 .readout.data-invalid {
   --_readout-data-background: var(--alert-invalid-background-color);
   --_readout-data-border: var(--alert-invalid-border-color);
@@ -430,11 +467,13 @@ obc-readout-block {
     --global-typography-instrument-value-regular-container-height
   );
 }
+
 .readout.size-medium {
   --_readout-primary-height: var(
     --global-typography-instrument-value-medium-container-height
   );
 }
+
 .readout.size-large {
   --_readout-primary-height: var(
     --global-typography-instrument-value-large-container-height
@@ -465,6 +504,7 @@ obc-readout-block {
     --instrument-components-readout-new-group-vertical-regular-container-min-height
   );
 }
+
 /* The medium tiers set no `--_readout-min-height`: Figma defines the
  * container-min-height token only for the regular and enhanced tiers, so
  * medium readouts intentionally fall back to `min-block-size: auto`. */
@@ -488,6 +528,7 @@ obc-readout-block {
     --instrument-components-readout-new-group-vertical-medium-divider-padding
   );
 }
+
 .readout.direction-vertical.stacking-inline.size-large {
   --_readout-pad-h: var(
     --instrument-components-readout-new-group-vertical-enhanced-container-padding-horizontal
@@ -536,6 +577,7 @@ obc-readout-block {
     --instrument-components-readout-new-stack-regular-container-min-height
   );
 }
+
 .readout.direction-vertical.stacking-stacked.size-medium {
   --_readout-pad-h: var(
     --instrument-components-readout-new-stack-medium-container-padding-horizontal
@@ -556,6 +598,7 @@ obc-readout-block {
     --instrument-components-readout-new-stack-medium-divider-padding
   );
 }
+
 .readout.direction-vertical.stacking-stacked.size-large {
   --_readout-pad-h: var(
     --instrument-components-readout-new-stack-enhanced-container-padding-horizontal
@@ -591,9 +634,7 @@ obc-readout-block {
   --_readout-trim: var(
     --instrument-components-readout-new-group-horizontal-regular-horizontal-trim-padding
   );
-  --_readout-value-gap: var(
-    --instrument-components-readout-new-group-horizontal-regular-horizontal-value-container-gap
-  );
+  --_readout-value-gap: 0;
   --_readout-value-pad-v: var(
     --instrument-components-readout-new-group-horizontal-regular-value-container-padding-vertical
   );
@@ -604,6 +645,7 @@ obc-readout-block {
     --instrument-components-readout-new-group-horizontal-regular-container-min-height
   );
 }
+
 .readout.direction-horizontal.size-medium {
   --_readout-pad-h: var(
     --instrument-components-readout-new-group-horizontal-medium-container-padding-horizontal
@@ -614,9 +656,7 @@ obc-readout-block {
   --_readout-trim: var(
     --instrument-components-readout-new-group-horizontal-medium-horizontal-trim-padding
   );
-  --_readout-value-gap: var(
-    --instrument-components-readout-new-group-horizontal-medium-horizontal-value-container-gap
-  );
+  --_readout-value-gap: 0;
   --_readout-value-pad-v: var(
     --instrument-components-readout-new-group-horizontal-medium-value-container-padding-vertical
   );
@@ -624,6 +664,7 @@ obc-readout-block {
     --instrument-components-readout-new-group-horizontal-medium-divider-padding
   );
 }
+
 .readout.direction-horizontal.size-large {
   --_readout-pad-h: var(
     --instrument-components-readout-new-group-horizontal-enhanced-container-padding-horizontal
@@ -634,9 +675,7 @@ obc-readout-block {
   --_readout-trim: var(
     --instrument-components-readout-new-group-horizontal-enhanced-horizontal-trim-padding
   );
-  --_readout-value-gap: var(
-    --instrument-components-readout-new-group-horizontal-enhanced-value-container-gap
-  );
+  --_readout-value-gap: 4px;
   --_readout-value-pad-v: var(
     --instrument-components-readout-new-group-horizontal-enhanced-value-container-padding
   );
@@ -656,11 +695,13 @@ obc-readout-block {
   outline: 1px solid rgba(220, 0, 0, 0.7);
   outline-offset: -1px;
 }
+
 :host([showDebugOverlay]) obc-readout-block::part(degree),
 :host([showDebugOverlay]) .degree-column {
   outline: 1px solid rgba(0, 0, 220, 0.7);
   outline-offset: -1px;
 }
+
 :host([showDebugOverlay]) .degree-spacer {
   outline: 1px solid rgba(0, 160, 0, 0.8);
   outline-offset: -1px;

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

@@ -742,6 +742,8 @@ export class ObcReadout extends LitElement {
           meta: true,
           'meta-inline': !stacked,
           'meta-stacked': stacked,
+          'label-only': !!this.label && !this.unit,
+          'unit-only': !!this.unit && !this.label,
         })}
         part="meta-wrapper"
       >