@oicl/openbridge-webcomponents 2.0.0-next.49 → 2.0.0-next.50

package/bundle/openbridge-webcomponents.bundle.js

@@ -18510,16 +18510,6 @@ const compentStyle$16 = i$7`
   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
@@ -18643,7 +18633,7 @@ const compentStyle$16 = i$7`
   grid-row: 1;
   grid-column: 2;
   justify-self: end;
-  align-self: center;
+  align-self: start;
 }
 
 .tank-frame:not(.orientation-horizontal) .grid > .readout {
@@ -18673,7 +18663,7 @@ const compentStyle$16 = i$7`
   grid-row: 1;
   grid-column: 2;
   justify-self: end;
-  align-self: center;
+  align-self: start;
 }
 
 .tank-frame.orientation-horizontal .grid > .bar-container {
@@ -18685,7 +18675,6 @@ const compentStyle$16 = i$7`
   grid-row: 2;
   grid-column: 2;
   align-self: stretch;
-  padding-left: 8px;
   min-width: 96px;
 }
 
@@ -18694,7 +18683,7 @@ const compentStyle$16 = i$7`
 .badges {
   display: flex;
   justify-content: end;
-  min-height: 24px;
+  gap: 4px;
   pointer-events: auto;
 }
 
@@ -18708,7 +18697,7 @@ const compentStyle$16 = i$7`
     "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;
@@ -18729,28 +18718,63 @@ const compentStyle$16 = i$7`
   /* 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 {
@@ -18764,18 +18788,26 @@ const compentStyle$16 = i$7`
     "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 {
@@ -18808,11 +18840,15 @@ const compentStyle$16 = i$7`
     "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 {
@@ -18823,8 +18859,110 @@ const compentStyle$16 = i$7`
     "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. */
@@ -36624,6 +36762,7 @@ let ObcAutomationTank = class extends i$4 {
     this.showAlertIcon = false;
     this.showTrendSymbol = true;
     this.percentFractionDigits = 0;
+    this.readout = [];
     this.badgeControl = AutomationButtonBadgeControl.None;
     this.badgeAlert = AutomationButtonBadgeAlert.None;
     this.badgeInterlock = AutomationButtonBadgeInterlock.None;
@@ -36972,6 +37111,30 @@ let ObcAutomationTank = class extends i$4 {
                     <slot class="unit" name="unit">m<sup>3</sup></slot>
                   </div>
                 </div>
+                <slot name="rich">
+                  ${this.readout.length > 0 ? b`
+                        <div class="rich-divider"></div>
+                        <div class="rich">
+                          ${this.readout.map(
+      (row) => b`
+                              <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 ? b`<span class="rich-glyph">°</span>` : A}${row.hasPercentage ? b`<span class="rich-glyph">%</span>` : A}<span class="rich-unit"
+                                    >${row.unit}</span
+                                  ></span
+                                >
+                              </div>
+                            `
+    )}
+                        </div>
+                      ` : A}
+                </slot>
               </slot>
             </div>
           `;
@@ -37194,6 +37357,9 @@ __decorateClass$xq([
 __decorateClass$xq([
   n$3({ type: Number })
 ], ObcAutomationTank.prototype, "percentFractionDigits", 2);
+__decorateClass$xq([
+  n$3({ type: Array, attribute: false })
+], ObcAutomationTank.prototype, "readout", 2);
 __decorateClass$xq([
   n$3({ type: String })
 ], ObcAutomationTank.prototype, "badgeControl", 2);
@@ -54907,18 +55073,10 @@ const compentStyle$$ = i$7`
     gap: var(--app-components-message-menu-item-label-spacing);
 
     color: var(--element-neutral-color);
+    white-space: nowrap;
+    text-wrap: nowrap;
   }
 
-:is(.wrapper .date-container) .day,:is(.wrapper .date-container) .time {
-      font-family: var(--font-family-main);
-      font-size: var(--global-typography-ui-label-font-size);
-      line-height: var(--global-typography-ui-label-line-height);
-      font-feature-settings:
-    "liga" off,
-    "clig" off,
-    "ss04" on;
-    }
-
 .wrapper .chevron {
     grid-area: chevron;
     width: var(--app-components-message-menu-item-icon-size-regular);