@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.49 → 2.0.0-next.52

package/dist/ar/building-blocks/poi-header/poi-header.css.js

@@ -75,7 +75,8 @@ const componentStyle = css`
 }
 
 .id-only-text {
-  font-family: var(--font-family-main);
+  font-family: var(--global-typography-font-family);
+  font-weight: var(--global-typography-ui-label-active-font-weight);
   font-size: var(--global-typography-ui-label-active-font-size);
   line-height: var(--global-typography-ui-label-active-line-height);
   font-feature-settings:
@@ -132,7 +133,8 @@ const componentStyle = css`
 }
 
 .id-text {
-  font-family: var(--font-family-main);
+  font-family: var(--global-typography-font-family);
+  font-weight: var(--global-typography-ui-label-active-font-weight);
   font-size: var(--global-typography-ui-label-active-font-size);
   line-height: var(--global-typography-ui-label-active-line-height);
   font-feature-settings:
@@ -160,7 +162,8 @@ const componentStyle = css`
 }
 
 .label-text {
-  font-family: var(--font-family-main);
+  font-family: var(--global-typography-font-family);
+  font-weight: var(--global-typography-ui-label-active-font-weight);
   font-size: var(--global-typography-ui-label-active-font-size);
   line-height: var(--global-typography-ui-label-active-line-height);
   font-feature-settings:
@@ -175,7 +178,8 @@ const componentStyle = css`
 .wrapper.type-id.state-enabled .id-only-text,
 .wrapper.type-data.state-enabled .id-text,
 .wrapper.type-data.state-enabled .label-text {
-  font-family: var(--font-family-main);
+  font-family: var(--global-typography-font-family);
+  font-weight: var(--global-typography-ui-label-active-font-weight);
   font-size: var(--global-typography-ui-label-active-font-size);
   line-height: var(--global-typography-ui-label-active-line-height);
   font-feature-settings:

package/dist/ar/building-blocks/poi-header/poi-header.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"poi-header.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"poi-header.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/ar/chart-object-vessel-button/chart-object-vessel-button.css.js

@@ -360,7 +360,7 @@ const compentStyle = css`
 .course-arrow {
   position: absolute;
   left: 50%;
-  transform: translate(-50%, -50%) rotate(calc(var(--course)));
+  transform: translate(-50%, -50%) rotate(calc(var(--course, 0deg)));
   transform-origin: center bottom;
 }
 
@@ -368,7 +368,7 @@ const compentStyle = css`
   position: absolute;
   left: 50%;
   top: 50%;
-  transform: translate(-50%, -50%) rotate(calc(var(--heading)));
+  transform: translate(-50%, -50%) rotate(calc(var(--heading, 0deg)));
   transform-origin: center center;
 }
 
@@ -376,18 +376,18 @@ const compentStyle = css`
   position: absolute;
   left: 50%;
   top: 50%;
-  transform: translate(-50%, -50%) rotate(calc(var(--heading)));
+  transform: translate(-50%, -50%) rotate(calc(var(--heading, 0deg)));
   transform-origin: center center;
 }
 
 .vessel-image-wrapper > slot {
-    width: var(--image-size);
-    height: var(--image-size);
+    width: var(--image-size, 0px);
+    height: var(--image-size, 0px);
   }
 
 .vessel-image-wrapper > svg {
-    width: calc(var(--image-size) * 160 / 136.87);
-    height: calc(var(--image-size) * 160 / 136.87);
+    width: calc(var(--image-size, 0px) * 160 / 136.87);
+    height: calc(var(--image-size, 0px) * 160 / 136.87);
   }
 `;
 export {

package/dist/ar/poi-card-header/poi-card-header.css.js

@@ -82,7 +82,8 @@ const componentStyle = css`
 }
 
 .index-text {
-  font-family: var(--font-family-main);
+  font-family: var(--global-typography-font-family);
+  font-weight: var(--global-typography-ui-label-active-font-weight);
   font-size: var(--global-typography-ui-label-active-font-size);
   line-height: var(--global-typography-ui-label-active-line-height);
   font-feature-settings:
@@ -123,7 +124,8 @@ const componentStyle = css`
 }
 
 .title {
-  font-family: var(--font-family-main);
+  font-family: var(--global-typography-font-family);
+  font-weight: var(--global-typography-ui-overline-font-weight);
   font-feature-settings:
     "liga" off,
     "clig" off,
@@ -134,7 +136,8 @@ const componentStyle = css`
 }
 
 .title.detailed-title {
-  font-family: var(--font-family-main);
+  font-family: var(--global-typography-font-family);
+  font-weight: var(--global-typography-ui-body-active-font-weight);
   font-size: var(--global-typography-ui-body-active-font-size);
   line-height: var(--global-typography-ui-body-active-line-height);
   font-feature-settings:
@@ -174,7 +177,8 @@ const componentStyle = css`
 }
 
 .source-text {
-  font-family: var(--font-family-main);
+  font-family: var(--global-typography-font-family);
+  font-weight: var(--global-typography-ui-label-active-font-weight);
   font-size: var(--global-typography-ui-label-active-font-size);
   line-height: var(--global-typography-ui-label-active-line-height);
   font-feature-settings:
@@ -221,7 +225,8 @@ const componentStyle = css`
 }
 
 .description {
-  font-family: var(--font-family-main);
+  font-family: var(--global-typography-font-family);
+  font-weight: var(--global-typography-ui-label-font-weight);
   font-size: var(--global-typography-ui-label-font-size);
   line-height: var(--global-typography-ui-label-line-height);
   font-feature-settings:
@@ -248,7 +253,8 @@ const componentStyle = css`
 }
 
 .timestamp {
-  font-family: var(--font-family-main);
+  font-family: var(--global-typography-font-family);
+  font-weight: var(--global-typography-ui-label-font-weight);
   font-size: var(--global-typography-ui-label-font-size);
   line-height: var(--global-typography-ui-label-line-height);
   font-feature-settings:

package/dist/ar/poi-card-header/poi-card-header.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"poi-card-header.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"poi-card-header.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/automation/automation-tank/automation-tank.css.js

@@ -307,16 +307,6 @@ const compentStyle = css`
   flex: 0 0 auto;
 }
 
-/* Override the global \`min-height: 24px\` on \`.badges\` so empty badge rows
- * don't reserve space in compact/static — the spec says "if there are no
- * badges it would grow upward". The slot-driven \`?hidden\` attribute on
- * empty cells makes them \`display: none\` (see below). */
-
-:host([compact]) .halo > .badges,
-:host([static]) .halo > .badges {
-  min-height: 0;
-}
-
 /* \`hidden\` attribute support: needed because the cells set an explicit
  * display value (\`flex\` / \`block\`), which would otherwise override
  * \`hidden\`'s default \`display: none\`. Removing the cell from the flex
@@ -440,7 +430,7 @@ const compentStyle = css`
   grid-row: 1;
   grid-column: 2;
   justify-self: end;
-  align-self: center;
+  align-self: start;
 }
 
 .tank-frame:not(.orientation-horizontal) .grid > .readout {
@@ -470,7 +460,7 @@ const compentStyle = css`
   grid-row: 1;
   grid-column: 2;
   justify-self: end;
-  align-self: center;
+  align-self: start;
 }
 
 .tank-frame.orientation-horizontal .grid > .bar-container {
@@ -482,7 +472,6 @@ const compentStyle = css`
   grid-row: 2;
   grid-column: 2;
   align-self: stretch;
-  padding-left: 8px;
   min-width: 96px;
 }
 
@@ -491,7 +480,7 @@ const compentStyle = css`
 .badges {
   display: flex;
   justify-content: end;
-  min-height: 24px;
+  gap: 4px;
   pointer-events: auto;
 }
 
@@ -505,7 +494,7 @@ const compentStyle = css`
     "liga" off,
     "clig" off,
     "ss04" on;
-  color: var(--instrument-regular-secondary-color);
+  color: var(--element-neutral-color);
   /* Tag text must never break across lines — it is a fixed identifier
    * (e.g. \`FUEL\`, \`#0000\`) that loses meaning if hyphenated or wrapped. */
   white-space: nowrap;
@@ -526,28 +515,63 @@ const compentStyle = css`
   /* Keep \`90%\` together — the parent flex prevents flex-item wrapping but
    * not text wrapping inside \`.percent\` (number + \`<span>%</span>\`). */
   white-space: nowrap;
-  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:
+  color: var(--element-neutral-color);
+}
+
+.readout-compact .percent {
+    font-family: var(--global-typography-font-family);
+    font-size: var(--global-typography-instrument-value-regular-font-size);
+    line-height: var(--global-typography-instrument-value-regular-line-height);
+    font-feature-settings:
     "liga" off,
     "clig" off,
     "ss04" on;
-  color: var(--instrument-regular-secondary-color);
-}
+  }
 
 .readout-compact .percent-symbol {
-  margin-left: 1px;
+    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;
+    margin-left: 1px;
+  }
+
+/* Static readout: max-value + unit (no percent, no trend icon). Tighter
+ * 2px gap and small-neutral value sizing per design spec. Color is
+ * inherited from \`.readout-compact\`. */
+
+.readout-static {
+  gap: 2px;
 }
 
+.readout-static slot[name="max-value"] {
+    font-family: var(--global-typography-font-family);
+    font-size: var(--global-typography-instrument-value-small-font-size);
+    line-height: var(--global-typography-instrument-value-small-line-height);
+    font-feature-settings:
+    "liga" off,
+    "clig" off,
+    "ss04" on;
+  }
+
+.readout-static slot[name="unit"] {
+    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;
+  }
+
 .header {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 4px;
-  /* TODO: we will need such divider in the future for the 'rich' option */
-  /* border-bottom: 1px solid var(--border-outline-color); */
-  padding-bottom: 2px;
 }
 
 .header .percent {
@@ -561,18 +585,26 @@ const compentStyle = css`
     "liga" off,
     "clig" off,
     "ss04" on;
+    color: var(--element-neutral-color);
+    padding-bottom: var(
+      --global-typography-instrument-value-large-padding-bottom
+    );
     /* Keep the number and the trailing \`%\` symbol on one line. */
     white-space: nowrap;
   }
 
 .header .percent-symbol {
-    font-family: var(--font-family-main);
-    font-size: var(--global-typography-ui-body-font-size);
-    line-height: var(--global-typography-ui-body-line-height);
+    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;
+    /* \`inline-block\` so \`padding-bottom\` actually applies (ignored on
+     * plain inline text). */
+    display: inline-block;
+    padding-bottom: var(--global-typography-instrument-unit-padding-bottom);
   }
 
 .value {
@@ -605,11 +637,15 @@ const compentStyle = css`
     "liga" off,
     "clig" off,
     "ss04" on;
+    padding-bottom: var(
+      --global-typography-instrument-value-regular-padding-bottom
+    );
   }
 
 .value .divider {
     padding-left: 4px;
     padding-right: 4px;
+    padding-bottom: var(--global-typography-instrument-unit-padding-bottom);
   }
 
 .value .max-value {
@@ -620,8 +656,110 @@ const compentStyle = css`
     "liga" off,
     "clig" off,
     "ss04" on;
+    padding-bottom: var(
+      --global-typography-instrument-value-regular-padding-bottom
+    );
+  }
+
+.value .unit {
+    padding-bottom: var(--global-typography-instrument-unit-padding-bottom);
   }
 
+.rich-divider {
+  border-top: 1px solid var(--border-divider-color);
+  margin-top: 8px;
+}
+
+.rich {
+  display: grid;
+  /* label takes remaining space; value (right-aligned) and suffix
+   * (left-aligned) form fixed content columns so digit right edges and
+   * suffix left edges align vertically across all rows. */
+  grid-template-columns: 1fr auto auto;
+  align-items: baseline;
+  row-gap: 4px;
+  padding-top: 8px;
+  white-space: nowrap;
+  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;
+}
+
+.rich-row {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 1 / -1;
+  align-items: baseline;
+  padding-left: var(
+    --instrument-components-readout-new-list-item-regular-container-padding-horizontal
+  );
+  padding-right: var(
+    --instrument-components-readout-new-list-item-regular-container-padding-horizontal
+  );
+}
+
+.rich-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;
+  color: var(--element-inactive-color);
+  padding-right: 8px;
+  text-align: left;
+}
+
+.rich-value {
+  font-family: var(--global-typography-font-family);
+  font-size: var(--global-typography-instrument-value-regular-font-size);
+  line-height: var(--global-typography-instrument-value-regular-line-height);
+  font-feature-settings:
+    "liga" off,
+    "clig" off,
+    "ss04" on;
+  color: var(--element-neutral-color);
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+
+.rich-suffix {
+  display: inline-flex;
+  align-items: baseline;
+  /* Default 2px gap between value and unit when there is no degree/percent
+   * glyph. When a glyph is present it sits flush against the value and the
+   * unit follows flush after the glyph (see \`.rich-glyph + .rich-unit\`). */
+  padding-left: 2px;
+}
+
+.rich-suffix:has(.rich-glyph) {
+  padding-left: 0;
+}
+
+.rich-glyph {
+  font-family: var(--global-typography-font-family);
+  font-size: var(--global-typography-instrument-value-regular-font-size);
+  line-height: var(--global-typography-instrument-value-regular-line-height);
+  font-feature-settings:
+    "liga" off,
+    "clig" off,
+    "ss04" on;
+  color: var(--element-neutral-color);
+}
+
+.rich-unit {
+  color: var(--element-inactive-color);
+}
+
+.rich-glyph + .rich-unit {
+  padding-left: 0;
+}
+
 /* The chart cell is a plain sizing/clipping box. Both child renderers —
  * \`obc-gauge-trend\` (graph / graph-and-bar modes) and \`obc-bar-vertical\`
  * (bar mode) — paint their own background, border and border-radius. */

package/dist/automation/automation-tank/automation-tank.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"automation-tank.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"automation-tank.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/automation/automation-tank/automation-tank.d.ts

@@ -61,6 +61,24 @@ export declare enum TankChartMode {
     /** Embedded `obc-gauge-trend` line/area chart with a side bar. */
     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;
+}
 /**
  *
  *
@@ -168,6 +186,20 @@ export declare class ObcAutomationTank extends LitElement {
      * precision is needed (see the `WithFractionDigits` story).
      */
     percentFractionDigits: number;
+    /**
+     * 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).
+     */
+    readout: TankReadoutItem[];
     /**
      * Enum-driven badges rendered inside the `badges` cell. Mirrors the API
      * introduced for `ObcAbstractAutomationButton` in PR #839 (#829). When set

package/dist/automation/automation-tank/automation-tank.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"automation-tank.d.ts","sourceRoot":"","sources":["../../../src/automation/automation-tank/automation-tank.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"automation-tank.d.ts","sourceRoot":"","sources":["../../../src/automation/automation-tank/automation-tank.ts"],"names":[],"mappings":"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"}

package/dist/automation/automation-tank/automation-tank.js

@@ -87,6 +87,7 @@ let ObcAutomationTank = class extends LitElement {
     this.showAlertIcon = false;
     this.showTrendSymbol = true;
     this.percentFractionDigits = 0;
+    this.readout = [];
     this.badgeControl = AutomationButtonBadgeControl.None;
     this.badgeAlert = AutomationButtonBadgeAlert.None;
     this.badgeInterlock = AutomationButtonBadgeInterlock.None;
@@ -435,6 +436,30 @@ let ObcAutomationTank = class 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>
               </slot>
             </div>
           `;
@@ -657,6 +682,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Number })
 ], ObcAutomationTank.prototype, "percentFractionDigits", 2);
+__decorateClass([
+  property({ type: Array, attribute: false })
+], ObcAutomationTank.prototype, "readout", 2);
 __decorateClass([
   property({ type: String })
 ], ObcAutomationTank.prototype, "badgeControl", 2);