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

package/src/automation/automation-tank/automation-tank.css

@@ -212,14 +212,6 @@
 :host([static]) .halo > .tag {
   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
@@ -331,7 +323,7 @@
   grid-row: 1;
   grid-column: 2;
   justify-self: end;
-  align-self: center;
+  align-self: start;
 }
 .tank-frame:not(.orientation-horizontal) .grid > .readout {
   grid-row: 2;
@@ -357,7 +349,7 @@
   grid-row: 1;
   grid-column: 2;
   justify-self: end;
-  align-self: center;
+  align-self: start;
 }
 .tank-frame.orientation-horizontal .grid > .bar-container {
   grid-row: 2;
@@ -367,7 +359,6 @@
   grid-row: 2;
   grid-column: 2;
   align-self: stretch;
-  padding-left: 8px;
   min-width: 96px;
 }
 
@@ -375,7 +366,7 @@
 .badges {
   display: flex;
   justify-content: end;
-  min-height: 24px;
+  gap: 4px;
   pointer-events: auto;
 }
 
@@ -383,7 +374,7 @@
   display: block;
   pointer-events: auto;
   @mixin font-instrument-label;
-  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;
@@ -403,11 +394,31 @@
   /* Keep `90%` together — the parent flex prevents flex-item wrapping but
    * not text wrapping inside `.percent` (number + `<span>%</span>`). */
   white-space: nowrap;
-  @mixin font-instrument-label;
-  color: var(--instrument-regular-secondary-color);
+  color: var(--element-neutral-color);
+
+  .percent {
+    @mixin font-instrument-value-regular-neutral;
+  }
+
+  .percent-symbol {
+    @mixin font-instrument-unit;
+    margin-left: 1px;
+  }
 }
-.readout-compact .percent-symbol {
-  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;
+
+  slot[name="max-value"] {
+    @mixin font-instrument-value-small-neutral;
+  }
+
+  slot[name="unit"] {
+    @mixin font-instrument-unit;
+  }
 }
 
 .header {
@@ -415,18 +426,23 @@
   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;
 
   .percent {
     @mixin font-instrument-value-enhanced-neutral;
+    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;
   }
 
   .percent-symbol {
-    @mixin font-body;
+    @mixin font-instrument-unit;
+    /* `inline-block` so `padding-bottom` actually applies (ignored on
+     * plain inline text). */
+    display: inline-block;
+    padding-bottom: var(--global-typography-instrument-unit-padding-bottom);
   }
 }
 
@@ -444,18 +460,100 @@
 
   .current-value {
     @mixin font-instrument-value-regular-active;
+    padding-bottom: var(
+      --global-typography-instrument-value-regular-padding-bottom
+    );
   }
 
   .divider {
     padding-left: 4px;
     padding-right: 4px;
+    padding-bottom: var(--global-typography-instrument-unit-padding-bottom);
   }
 
   .max-value {
     @mixin font-instrument-value-regular-neutral;
+    padding-bottom: var(
+      --global-typography-instrument-value-regular-padding-bottom
+    );
+  }
+
+  .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;
+  @mixin font-instrument-unit;
+}
+
+.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 {
+  @mixin font-instrument-label;
+  color: var(--element-inactive-color);
+  padding-right: 8px;
+  text-align: left;
+}
+
+.rich-value {
+  @mixin font-instrument-value-regular-neutral;
+  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 {
+  @mixin font-instrument-value-regular-neutral;
+  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/src/automation/automation-tank/automation-tank.stories.ts

@@ -6,6 +6,7 @@ import {
   TankPositioning,
   TankTrend,
   TankType,
+  type TankReadoutItem,
 } from './automation-tank.js';
 import './automation-tank.js';
 import {html} from 'lit';
@@ -56,6 +57,12 @@ const SAMPLE_ADVICE: LinearAdvice[] = [
   {min: 7500, max: 9000, type: AdviceType.advice, hinted: false},
 ];
 
+const SAMPLE_READOUT: TankReadoutItem[] = [
+  {label: 'Temperature', value: 45, hasDegree: true, unit: 'C'},
+  {label: 'Pressure', value: 45, unit: 'Pa'},
+  {label: 'Flow speed', value: 45, unit: 'm/s'},
+];
+
 const renderTank = (args: StoryArgs) => html`
   <obc-automation-tank
     .value=${args.value}
@@ -74,6 +81,7 @@ const renderTank = (args: StoryArgs) => html`
     .hasGraphIcon=${args.hasGraphIcon}
     .showTrendSymbol=${args.showTrendSymbol}
     .percentFractionDigits=${args.percentFractionDigits}
+    .readout=${args.readout}
     ?alert=${args.alert}
     .alertFrameType=${args.alertFrameType}
     .alertFrameThickness=${args.alertFrameThickness}
@@ -110,6 +118,7 @@ const meta: Meta<StoryArgs> = {
     hasGraphIcon: false,
     showTrendSymbol: true,
     percentFractionDigits: 0,
+    readout: [],
     alert: false,
     alertFrameType: ObcAlertFrameType.SmallSideFlip,
     alertFrameThickness: ObcAlertFrameThickness.Small,
@@ -177,6 +186,11 @@ const meta: Meta<StoryArgs> = {
       description:
         'Advice overlay bands. `min`/`max` are in the same units as `max`. Toggle visibility with `hasAdvice`. Works in all three `chartMode` variants — `bar` overlays advice pills on the static bar, `graph` and `graph-and-bar` forward them to the embedded `obc-gauge-trend`.',
     },
+    readout: {
+      control: {type: 'object'},
+      description:
+        'Rich detail rows shown below the main percent/value block in the regular (non-compact, non-static) layout, separated by a divider. Each row: `{label, value, hasDegree?, hasPercentage?, unit}`. Empty array — nothing is rendered. Values use `percentFractionDigits` for formatting. Override the whole block via `slot="rich"`.',
+    },
     badgeControl: {
       options: Object.values(AutomationButtonBadgeControl),
       control: {type: 'select'},
@@ -355,6 +369,23 @@ export const BatteryWithGraphIcon: Story = {
   },
 };
 
+export const Rich: Story = {
+  args: {
+    type: TankType.atmospheric,
+    chartMode: TankChartMode.graphAndBar,
+    readout: SAMPLE_READOUT,
+  },
+};
+
+export const HorizontalRich: Story = {
+  args: {
+    type: TankType.atmospheric,
+    orientation: TankOrientation.horizontal,
+    chartMode: TankChartMode.graphAndBar,
+    readout: SAMPLE_READOUT,
+  },
+};
+
 /**
  * Demonstrates fractional precision in the non-compact readout. The percent
  * readout is controlled by the `percentFractionDigits` property (here `1`,
@@ -367,6 +398,10 @@ export const BatteryWithGraphIcon: Story = {
  * The compact / static layouts only show the percent (no absolute value)
  * and always render it as an integer to keep their fixed-width footprint
  * stable, so fraction-digit control only applies to the non-compact layout.
+ *
+ * `percentFractionDigits` is also applied uniformly to every row of the
+ * `readout` rich list (see the `Rich` story) — all rows share one digit
+ * count so the right-aligned numeric column stays visually consistent.
  */
 export const WithFractionDigits: Story = {
   args: {
@@ -396,6 +431,7 @@ export const WithFractionDigits: Story = {
       .showTrendSymbol=${args.showTrendSymbol}
       .priority=${args.priority}
       .percentFractionDigits=${args.percentFractionDigits}
+      .readout=${args.readout}
     >
       <span slot="current-value">${args.value.toFixed(2)}</span>
       <span slot="max-value">${args.max.toFixed(2)}</span>
@@ -434,6 +470,7 @@ export const WithAlertAlarm: Story = {
       .hasGraphIcon=${args.hasGraphIcon}
       .showTrendSymbol=${args.showTrendSymbol}
       .percentFractionDigits=${args.percentFractionDigits}
+      .readout=${args.readout}
       ?alert=${args.alert}
       .alertFrameType=${args.alertFrameType}
       .alertFrameThickness=${args.alertFrameThickness}
@@ -534,6 +571,7 @@ export const Responsive: Story = {
           .hasGraphIcon=${args.hasGraphIcon}
           .showTrendSymbol=${args.showTrendSymbol}
           .percentFractionDigits=${args.percentFractionDigits}
+          .readout=${args.readout}
           ?alert=${args.alert}
           .alertFrameType=${args.alertFrameType}
           .alertFrameThickness=${args.alertFrameThickness}

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

@@ -94,6 +94,25 @@ 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;
+}
+
 /**
  *
  *
@@ -221,6 +240,21 @@ 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
@@ -703,6 +737,36 @@ 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>
               </slot>
             </div>
           `;

package/src/components/calendar/calendar.css

@@ -45,7 +45,7 @@
   flex: 1 1 0;
   min-width: 0;
   @mixin font-body;
-  color: var(--on-container-active-color);
+  color: var(--on-flat-active-color);
 }
 
 .month-label {

package/src/components/check-button/check-button.css

@@ -30,7 +30,7 @@
     width: 100%;
 
     &.has-custom-width {
-      width: var(--custom-width);
+      width: var(--custom-width, auto);
     }
   }
 

package/src/components/icon-button/icon-button.css

@@ -133,7 +133,7 @@
   }
 
   &.variant-integration {
-    @mixin style style=integration-normal visibleWrapperClass=.visible-wrapper;
+    @mixin style style=integration-flat visibleWrapperClass=.visible-wrapper;
     color: var(--integration-on-normal-neutral-color);
 
     .visible-wrapper {

package/src/components/icon-button/icon-button.ts

@@ -9,6 +9,7 @@ import {customElement} from '../../decorator.js';
  * - `normal`: Standard appearance for most use cases.
  * - `raised`: Adds elevation/shadow for prominence.
  * - `flat`: Minimal, backgroundless style for subtle actions.
+ * - `integration`: For use in Integration Bar components
  */
 export enum IconButtonVariant {
   normal = 'normal',
@@ -29,6 +30,7 @@ export enum IconButtonVariant {
  *   - `normal` (default): Standard appearance for most use cases.
  *   - `raised`: Adds elevation/shadow for prominence.
  *   - `flat`: Minimal, backgroundless style for subtle actions.
+ *   - `integration`: For use in Integration Bar components
  * - **Progress Indicator:**
  *   - Shows a circular progress spinner overlay when the `progress` property is set (0–100). Useful for indicating loading or ongoing actions.
  * - **Label Support:**

package/src/components/message-menu-item/message-menu-item.css

@@ -88,11 +88,8 @@
     gap: var(--app-components-message-menu-item-label-spacing);
 
     color: var(--element-neutral-color);
-
-    .day,
-    .time {
-      @mixin font-label;
-    }
+    white-space: nowrap;
+    text-wrap: nowrap;
   }
 
   .chevron {

package/src/components/sequence-item/sequence-item.css

@@ -57,7 +57,7 @@
       .title-row,
       .meta-row {
         padding: var(
-            --global-size-spacing-list-item-menu-padding-horizonal-list-item
+            --global-size-spacing-nav-item-and-menus-padding-horizonal-list-item
           )
           0;
       }
@@ -137,7 +137,9 @@
 
   .title-row {
     display: flex;
-    gap: var(--global-size-spacing-list-item-menu-padding-horizonal-list-item);
+    gap: var(
+      --global-size-spacing-nav-item-and-menus-padding-horizonal-list-item
+    );
     justify-content: space-between;
     align-items: flex-start;
   }
@@ -186,7 +188,7 @@
     @mixin font-instrument-value-small-neutral;
     display: flex;
     flex-direction: column;
-    gap: var(--alert-components-badge-label-spacing);
+    gap: var(--ui-components-badge-label-spacing);
   }
 
   /* === Label Variants === */

package/src/components/sequence-loading-spinner/sequence-loading-spinner.css

@@ -103,8 +103,8 @@
       background: conic-gradient(
         from 0deg,
         var(--element-neutral-enhanced-color) 0deg,
-        var(--element-neutral-enhanced-color) var(--spinner-progress-deg),
-        transparent var(--spinner-progress-deg),
+        var(--element-neutral-enhanced-color) var(--spinner-progress-deg, 0deg),
+        transparent var(--spinner-progress-deg, 0deg),
         transparent 360deg
       );
     }
@@ -120,7 +120,7 @@
     }
 
     .cap-end {
-      transform: translate(-50%, -50%) rotate(var(--spinner-progress-deg))
+      transform: translate(-50%, -50%) rotate(var(--spinner-progress-deg, 0deg))
         translateY(calc(-1 * var(--spinner-radius)));
     }
   }

package/src/components/tab-item/tab-item.css

@@ -111,7 +111,7 @@
 
   .divider {
     width: 1px;
-    height: var(--menu-navigation-components-tab-item-divider-height);
+    height: var(--menu-navigation-components-tab-action-button-divider-height);
     flex-shrink: 0;
     color: var(--border-divider-color);
     fill: var(--border-divider-color);
@@ -124,7 +124,7 @@
     position: absolute;
     left: 0;
     width: 1px;
-    height: var(--menu-navigation-components-tab-item-divider-height);
+    height: var(--menu-navigation-components-tab-action-button-divider-height);
     background: var(--border-divider-color);
   }
 

package/src/components/table/table.css

@@ -10,7 +10,7 @@
 .grid-container {
   display: grid;
   height: 100%;
-  grid-template-columns: repeat(var(--grid-columns), auto);
+  grid-template-columns: repeat(var(--grid-columns, 1), auto);
   align-content: start;
   grid-template-rows: min-content min-content 1fr;
 
@@ -20,7 +20,7 @@
         --selection-column-width,
         var(--menu-navigation-components-table-item-touch-target-size)
       )
-      repeat(var(--grid-columns-rest), minmax(0, 1fr));
+      repeat(var(--grid-columns-rest, 1), minmax(0, 1fr));
   }
 
   .grid-header {

package/src/components/toggle-button-option/toggle-button-option.css

@@ -5,9 +5,7 @@
 .wrapper {
   height: var(--ui-components-button-touch-target-size);
   width: 100%;
-  min-width: var(
-    --ui-components-icon-toggle-button-horizontal-item-touch-target-size
-  );
+  min-width: var(--ui-components-toggle-button-touch-target-size);
   min-height: var(
     --ui-components-toggle-button-toggle-button-item-touch-target-size
   );

package/src/integration-systems/integration-app-bar/integration-app-bar.stories.ts

@@ -7,7 +7,7 @@ import {html} from 'lit';
 
 const meta: Meta<typeof ObcIntegrationAppBar> = {
   title: 'Integration Systems/App Bar',
-  tags: ['6.0'],
+  tags: ['alpha'],
   component: 'obc-integration-app-bar',
   args: {},
   render: () => html`

package/src/integration-systems/integration-bar/integration-bar.css

@@ -0,0 +1,86 @@
+* {
+  box-sizing: border-box;
+}
+
+:host {
+  display: block;
+  width: 100%;
+}
+
+.wrapper {
+  display: flex;
+  padding: 0 var(--app-components-integration-system-topbar-margin-global);
+  justify-content: space-between;
+  align-items: center;
+  background: var(--integration-container-global-color);
+  box-shadow: var(--shadow-flat-x) var(--shadow-flat-y) var(--shadow-flat-blur)
+    var(--shadow-flat-spread) var(--shadow-flat-color);
+}
+
+.content-container {
+  display: flex;
+  flex: 1;
+}
+
+.fleet-vessel-container {
+  display: flex;
+  align-items: flex-start;
+  flex: 1 1 auto;
+}
+
+.fleet-button {
+  flex: initial;
+}
+
+.vessel-container {
+  display: flex;
+  flex: 1 1 auto;
+}
+
+.integration-buttons-slot::slotted(obc-integration-button) {
+  flex: 1;
+}
+
+.hug-buttons-slot::slotted(obc-integration-button) {
+  flex: 0 1 auto;
+}
+
+.home-button,
+.link-button {
+  width: var(--app-components-integration-system-icon-button-touch-target);
+  height: var(--app-components-integration-system-icon-button-touch-target);
+  justify-content: center;
+  align-items: center;
+  gap: 14px;
+  flex: initial;
+}
+
+.right-content-container {
+  display: flex;
+  align-self: stretch;
+  align-items: center;
+  flex: initial;
+}
+
+.right-content-container.buttons-on-bar {
+  border-left: var(
+      --app-components-integration-system-navigation-item-horizontal-stroke-weight-right,
+      1px
+    )
+    solid
+    var(
+      --integration-beta-flat-enabled-border-color,
+      var(--integration-border-outline)
+    );
+}
+
+.right-side-system-menu-container {
+  position: absolute;
+  position-anchor: --settings-menu-anchor;
+  top: anchor(bottom);
+  justify-self: anchor-center;
+}
+
+.vessel-button-placeholder {
+  flex: 1 1 auto;
+}