@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.143 → 2.0.0-next.144

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

@@ -1,6 +1,6 @@
 import type {Meta, StoryObj} from '@storybook/web-components-vite';
 import {html, nothing} from 'lit';
-import {userEvent} from 'storybook/test';
+import {expect, spyOn, userEvent} from 'storybook/test';
 import {gsap} from 'gsap';
 import './readout.js';
 import '../../components/navigation-item/navigation-item.js';
@@ -1587,20 +1587,17 @@ export const TestCases: Story = {
       </style>
       <div class="test-case-container">
         <obc-readout
-          .size=${ReadoutSize.small}
           .direction=${ReadoutDirection.horizontal}
           .value=${123}
           .unit=${'kn'}
         ></obc-readout>
         <obc-readout
-          .size=${ReadoutSize.small}
           .direction=${ReadoutDirection.horizontal}
           .value=${'Thermo On'}
           .valueType=${ReadoutValueType.text}
           .label=${'Operating mode'}
         ></obc-readout>
         <obc-readout
-          .size=${ReadoutSize.small}
           .direction=${ReadoutDirection.horizontal}
           .value=${'Normal'}
           .valueType=${ReadoutValueType.text}
@@ -1610,6 +1607,62 @@ export const TestCases: Story = {
   },
 };
 
+/**
+ * A horizontal readout given a `size` other than `large` warns once per
+ * element. The tier is discarded (the arrangement exists in the large tier
+ * only), and a silent discard is indistinguishable from a bug to a consumer
+ * (#1182). A removed `size` attribute arrives as `null` through Lit's String
+ * converter and counts as unset. Driven through `willUpdate` on detached
+ * elements, like `Readout Block → TestValidationSurvivesUnrelatedUpdate`.
+ */
+export const TestHorizontalSizeWarning: Story = {
+  render: () => html`<span>Regression test — see the play function.</span>`,
+  play: async () => {
+    type Probe = HTMLElement & {
+      size?: ReadoutSize;
+      direction?: ReadoutDirection;
+      willUpdate: (changed: Map<string, unknown>) => void;
+    };
+    const probe = (
+      size: ReadoutSize | undefined,
+      direction: ReadoutDirection
+    ) => {
+      const el = document.createElement('obc-readout') as Probe;
+      el.size = size;
+      el.direction = direction;
+      return el;
+    };
+    const update = (el: Probe) => el.willUpdate(new Map());
+    const warn = spyOn(console, 'warn').mockImplementation(() => undefined);
+    try {
+      update(probe(ReadoutSize.large, ReadoutDirection.horizontal));
+      update(probe(ReadoutSize.small, ReadoutDirection.vertical));
+      update(probe(undefined, ReadoutDirection.horizontal));
+      const removed = probe(ReadoutSize.small, ReadoutDirection.horizontal);
+      removed.setAttribute('size', ReadoutSize.small);
+      removed.removeAttribute('size');
+      update(removed);
+      await expect(warn).not.toHaveBeenCalled();
+
+      const small = probe(ReadoutSize.small, ReadoutDirection.horizontal);
+      update(small);
+      await expect(warn).toHaveBeenCalledTimes(1);
+      await expect(warn.mock.calls[0][0]).toMatch(
+        /\[obc-readout\].*size.*horizontal/
+      );
+      await expect(warn.mock.calls[0][1]).toBe(small);
+
+      update(small);
+      await expect(warn).toHaveBeenCalledTimes(1);
+
+      update(probe(ReadoutSize.medium, ReadoutDirection.horizontal));
+      await expect(warn).toHaveBeenCalledTimes(2);
+    } finally {
+      warn.mockRestore();
+    }
+  },
+};
+
 /**
  * Figma 6.1 "Equal size": value and setpoint always share the primary size —
  * the missing fourth mode beside primary-secondary (`always-visible`),

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

@@ -249,7 +249,8 @@ export interface ReadoutSourceOptions extends ReadoutSrcOptions {
  * @property size - Density tier. Applies to the vertical direction only — the horizontal
  *   arrangement exists in the large tier alone (Figma 6.1: it relies on the
  *   label+unit stack aligning with the L-size value caps), so `size` is
- *   ignored when `direction` is `horizontal`.
+ *   ignored when `direction` is `horizontal`; a horizontal readout given any
+ *   other `size` logs a console warning once per element.
  * @availableWhen size direction==vertical
  * @availableWhen stacking direction==vertical
  * @availableWhen alignment direction==vertical && stacking==stacked
@@ -365,6 +366,7 @@ export class ObcReadout extends LitElement {
     ReadoutBlockHidePhase.none;
   private deferredSetpointHideTimer?: number;
   private hasCompletedFirstUpdate = false;
+  private hasWarnedHorizontalSize = false;
 
   @state() private sourcePickerContentVisible = false;
   @state() private sourcePickerOptions: ContextMenuOption[] = [];
@@ -1310,6 +1312,31 @@ export class ObcReadout extends LitElement {
     // exactly the silent failure this assertion exists to prevent.
     assertReadoutValueType('obc-readout', this.value, this.valueType);
     assertReadoutFractionDigits('obc-readout', this.fractionDigits);
+    this.warnHorizontalSizeIgnored();
+  }
+
+  /**
+   * A horizontal readout discards any `size` but `large` (see `resolvedSize`).
+   * A silent discard is indistinguishable from a bug to a consumer, so each
+   * offending element says so once and logs itself for locating (#1182).
+   * A removed `size` attribute arrives as `null` and counts as unset.
+   */
+  private warnHorizontalSizeIgnored(): void {
+    if (
+      this.hasWarnedHorizontalSize ||
+      !this.isHorizontal ||
+      !this.size ||
+      this.size === ReadoutSize.large
+    ) {
+      return;
+    }
+    this.hasWarnedHorizontalSize = true;
+    console.warn(
+      `[obc-readout] size="${this.size}" is ignored when direction="horizontal": ` +
+        'the horizontal arrangement exists in the large tier only. Remove the ' +
+        'size, or use direction="vertical" for the small / medium tiers.',
+      this
+    );
   }
 
   override updated(changed: Map<string, unknown>): void {

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

@@ -6,9 +6,12 @@ import {
   ReadoutListItemSize,
   ReadoutListItemPriority,
   ReadoutListItemDataQuality,
+  ReadoutListItemStacking,
+  ObcTextboxFontWeight,
   type ReadoutValueOptions,
   ReadoutValueType,
 } from '../readout-list-item/readout-list-item.js';
+import {ObcTextboxSize} from '../../components/textbox/textbox.js';
 import '../readout-list-item/readout-list-item.js';
 import type {AlertFrameConfig} from '../../components/alert-frame/alert-frame.js';
 import {
@@ -23,13 +26,17 @@ type ListArgs = {
 
 type Row = {
   label: string;
+  src?: string;
   value: number | string | null;
   valueType?: ReadoutValueType;
   unit: string;
   size?: ReadoutListItemSize;
+  stacking?: ReadoutListItemStacking;
+  labelSize?: ObcTextboxSize;
   hasDegree?: boolean;
   fractionDigits?: number;
   priority?: ReadoutListItemPriority;
+  weight?: ObcTextboxFontWeight;
   hasSetpoint?: boolean;
   setpoint?: number;
   hasAdvice?: boolean;
@@ -46,8 +53,12 @@ type Row = {
 
 function renderRow(row: Row) {
   const valueOptions =
-    row.valueDataQuality || row.valueAlert
-      ? {dataQuality: row.valueDataQuality, alert: row.valueAlert}
+    row.valueDataQuality || row.valueAlert || row.weight
+      ? {
+          dataQuality: row.valueDataQuality,
+          alert: row.valueAlert,
+          weight: row.weight,
+        }
       : undefined;
   const setpointOptions = row.setpointDataQuality
     ? {dataQuality: row.setpointDataQuality}
@@ -55,10 +66,13 @@ function renderRow(row: Row) {
   return html`
     <obc-readout-list-item
       .label=${row.label}
+      .src=${row.src}
       .unit=${row.unit}
       .value=${row.value}
       .valueType=${row.valueType ?? ReadoutValueType.number}
       .size=${row.size ?? ReadoutListItemSize.small}
+      .stacking=${row.stacking}
+      .labelOptions=${row.labelSize ? {size: row.labelSize} : undefined}
       .hasDegree=${row.hasDegree ?? false}
       .fractionDigits=${row.fractionDigits ?? 0}
       .priority=${row.priority}
@@ -169,6 +183,52 @@ export const Degrees: Story = {
   render: (args) => renderList(DEGREE_ROWS, args.showDebugOverlay),
 };
 
+/**
+ * **Source on the label's line.** `stacking="leading-src-inline"` keeps each
+ * row one line high with the source after the label (Figma 46596:102880 pairs
+ * an `s` label with the `xs` source). Inside a list the source column is
+ * reserved to the longest source, so the readings stay aligned across rows
+ * that have no source at all. The unit column is likewise reserved to the
+ * longest unit (`/min`); standalone rows let each unit hug its value instead
+ * (see `Readout List Item → ColumnAlignment`, "without reservers").
+ */
+const INLINE_SOURCE_ROWS: Row[] = [
+  {
+    label: 'HDG',
+    src: 'GPS1',
+    value: 355,
+    unit: '',
+    hasDegree: true,
+    priority: ReadoutListItemPriority.enhanced,
+    weight: ObcTextboxFontWeight.semibold,
+  },
+  {label: 'COG', src: 'POS1', value: 5, unit: '', hasDegree: true},
+  {label: 'ROT', src: 'GYRO2', value: 10, unit: '/min', hasDegree: true},
+  {
+    label: 'SOG',
+    src: 'LOG1',
+    value: 9.8,
+    unit: 'kn',
+    fractionDigits: 1,
+    priority: ReadoutListItemPriority.enhanced,
+    weight: ObcTextboxFontWeight.semibold,
+  },
+  {label: 'STW', src: 'GPS1', value: 10.2, unit: 'kn', fractionDigits: 1},
+  {label: 'DPTH', src: 'ECHO1', value: 534, unit: 'm'},
+  {label: 'Pitch', value: 5.3, unit: '', hasDegree: true, fractionDigits: 1},
+  {label: 'Draft fore', value: 3.78, unit: 'm', fractionDigits: 2},
+].map((row) => ({
+  ...row,
+  size: ReadoutListItemSize.medium,
+  stacking: ReadoutListItemStacking.leadingSrcInline,
+  labelSize: ObcTextboxSize.s,
+}));
+
+export const LeadingSrcInline: Story = {
+  args: {showDebugOverlay: false},
+  render: (args) => renderList(INLINE_SOURCE_ROWS, args.showDebugOverlay),
+};
+
 const WARNING_FRAME: AlertFrameConfig = {
   status: AlertType.Warning,
   mode: ObcAlertFrameMode.ackedActive,

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

@@ -550,6 +550,27 @@ obc-readout-block {
   gap: var(--global-size-spacing-target-padding);
 }
 
+/* leading-src-inline: the source follows the label on one line, bottom-aligned
+   so the `xs` source and the label share a cap baseline. The label↔source gap
+   reuses the tier's content gap (8px, matching Figma 46596:102880). */
+.stacking-leading-src-inline .label-stack {
+  flex-direction: row;
+  align-items: flex-end;
+}
+.size-small.stacking-leading-src-inline .label-stack {
+  gap: var(
+    --instrument-components-readout-new-list-item-regular-content-container-gap
+  );
+}
+.size-medium.stacking-leading-src-inline .label-stack {
+  gap: var(
+    --instrument-components-readout-new-list-item-medium-content-container-gap
+  );
+}
+.size-large.stacking-leading-src-inline .label-stack {
+  gap: var(--instrument-components-readout-new-list-item-large-content-gap);
+}
+
 /* ---------- Data quality ----------
  * Orthogonal to the alert frame — both can apply at once. */
 .root.data-low-integrity .surface,

package/src/navigation-instruments/readout-list-item/readout-list-item.stories.ts

@@ -726,6 +726,42 @@ export const LeadingSrc: Story = {
     ]),
 };
 
+/**
+ * `leading-src-inline` keeps the source on the label's line, so a row with a
+ * source stays one line high (Figma 46596:102880 pairs an `s` label with the
+ * `xs` source; the dense default label stays `xs` unless `labelOptions.size`
+ * says otherwise).
+ */
+export const LeadingSrcInline: Story = {
+  render: () =>
+    renderShowcase([
+      {
+        title: 'Stacking: leading-src-inline',
+        columns: 3,
+        cases: stackingCases(ReadoutListItemStacking.leadingSrcInline),
+      },
+      {
+        title: 'Label s + source xs (Figma 46596:102880)',
+        columns: 3,
+        cases: SIZES.map((size) => ({
+          label: `${size} / label s`,
+          config: {
+            label: 'HDG',
+            src: 'GPS1',
+            value: 355,
+            unit: '',
+            options: {
+              size,
+              stacking: ReadoutListItemStacking.leadingSrcInline,
+              hasDegree: true,
+              label: {size: ObcTextboxSize.s},
+            },
+          },
+        })),
+      },
+    ]),
+};
+
 export const SetpointFlipFlop: Story = {
   render: () =>
     renderShowcase([
@@ -1781,8 +1817,12 @@ export const MissingParts: Story = {
  * same width regardless of each row's own value length / `fractionDigits`, and
  * the columns line up.
  *
- * (Source/stacking variations are exercised in the `LeadingSrc` / `LeadingUnit`
- * stories; mixing them here would move the unit out of the rightmost column.)
+ * The Heading row has no unit and carries its source inline
+ * (`leading-src-inline`): in the aligned column it still renders the blank
+ * reserved unit column, so its degree lines up with the rows that have a unit.
+ * (`leading-src` and `leading-unit` are exercised in their own stories:
+ * `leading-unit` would move the unit out of the rightmost column, and
+ * `leading-src` would make the row two lines high.)
  *
  * The last two rows use `size=medium` / `size=large`. Their value digit edges do
  * NOT fully align with the small rows (~8px stagger): the `°` column scales with
@@ -1800,10 +1840,12 @@ export const MissingParts: Story = {
  */
 type AlignmentRow = {
   label: string;
+  src?: string;
   value: number | string | null;
   valueType?: ReadoutValueType;
   unit: string;
   size?: ReadoutListItemSize;
+  stacking?: ReadoutListItemStacking;
   hasDegree?: boolean;
   fractionDigits?: number;
   priority?: ReadoutListItemPriority;
@@ -1849,6 +1891,16 @@ const ALIGNMENT_ROWS: AlignmentRow[] = [
     // per-block advice low-integrity — the advice chip must not shift the columns
     adviceDataQuality: ReadoutListItemDataQuality.lowIntegrity,
   },
+  // no unit + degree + inline source — the blank reserved unit column keeps
+  // the degree glyph aligned with the unit rows
+  {
+    label: 'Heading',
+    src: 'GPS1',
+    value: 355,
+    unit: '',
+    hasDegree: true,
+    stacking: ReadoutListItemStacking.leadingSrcInline,
+  },
   // negative value + fraction + low-integrity data quality
   {
     label: 'Flow speed',
@@ -1987,7 +2039,7 @@ function renderAlignmentColumn(aligned: boolean, showDebugOverlay: boolean) {
         renderItem({
           label: row.label,
           unit: row.unit,
-          src: '',
+          src: row.src ?? '',
           value: row.value,
           valueType: row.valueType,
           hasSetpoint: row.hasSetpoint,
@@ -1999,6 +2051,7 @@ function renderAlignmentColumn(aligned: boolean, showDebugOverlay: boolean) {
           showDebugOverlay,
           options: {
             size: row.size ?? ReadoutListItemSize.small,
+            stacking: row.stacking,
             hasDegree: row.hasDegree ?? false,
             fractionDigits: row.fractionDigits ?? 0,
             priority: row.priority,

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

@@ -71,12 +71,15 @@ export type ReadoutListItemSize = ReadoutBlockSize;
  * Placement of the unit/source relative to the label and value.
  * - `trailing-unit`: unit after the value, source after a trailing divider.
  * - `leading-unit`: unit beside/under the label.
- * - `leading-src`: source beside/under the label (no trailing source).
+ * - `leading-src`: source under the label (no trailing source).
+ * - `leading-src-inline`: source on the label's line, after it (no trailing
+ *   source); keeps the row one line high.
  */
 export enum ReadoutListItemStacking {
   trailingUnit = 'trailing-unit',
   leadingUnit = 'leading-unit',
   leadingSrc = 'leading-src',
+  leadingSrcInline = 'leading-src-inline',
 }
 
 /**
@@ -208,7 +211,12 @@ export interface ReadoutAdviceOptions extends ReadoutBlockState {
 }
 
 export interface ReadoutReserverOptions {
-  /** Longest expected string to reserve width for (aligns multiple rows), e.g. `"miles"`. */
+  /**
+   * Longest expected string to reserve width for (aligns multiple rows), e.g.
+   * `"miles"`. A row without a unit still renders the reserved (blank)
+   * trailing column, so its value and degree stay on the grid of the rows
+   * that have one. `leading-unit` stacking has no trailing column to reserve.
+   */
   spaceReserver?: string;
 }
 
@@ -273,7 +281,8 @@ export interface ReadoutSrcOptions extends ReadoutBlockState {
  * - **Building blocks:** value, optional setpoint, and optional advice segments,
  *   each cap-height-aligned and able to reserve a stable width.
  * - **Sizes:** `small`, `medium`, `large` density scales.
- * - **Stacking:** `trailing-unit`, `leading-unit`, `leading-src` placement.
+ * - **Stacking:** `trailing-unit`, `leading-unit`, `leading-src`,
+ *   `leading-src-inline` placement.
  * - **Priority:** `regular`/`enhanced` colour emphasis; per-value `weight`
  *   (`regular`/`semibold`/`bold`) is independent of colour.
  * - **Setpoint flip-flop:** swaps emphasis between value and setpoint as the
@@ -406,10 +415,30 @@ export class ObcReadoutListItem extends LitElement {
     return this.stacking ?? ReadoutListItemStacking.trailingUnit;
   }
 
+  /** Both leading-src stackings move the source into the label stack. */
+  private get hasLeadingSrc(): boolean {
+    const stacking = this.resolvedStacking;
+    return (
+      stacking === ReadoutListItemStacking.leadingSrc ||
+      stacking === ReadoutListItemStacking.leadingSrcInline
+    );
+  }
+
   private get resolvedPriority(): ReadoutListItemPriority {
     return this.priority ?? ReadoutListItemPriority.regular;
   }
 
+  /**
+   * Whether a unit box follows the value: a unit, or a reserver alone — the
+   * blank reserved column keeps a unit-less row aligned with its neighbours.
+   */
+  private get hasTrailingUnitBox(): boolean {
+    return (
+      this.resolvedStacking !== ReadoutListItemStacking.leadingUnit &&
+      (Boolean(this.unit) || Boolean(this.unitOptions?.spaceReserver))
+    );
+  }
+
   private get resolvedFractionDigits(): number {
     return this.fractionDigits ?? 0;
   }
@@ -713,16 +742,12 @@ export class ObcReadoutListItem extends LitElement {
     if (!this.hasValue) {
       return nothing;
     }
-    const hasTrailingUnit =
-      Boolean(this.unit) &&
-      this.resolvedStacking !== ReadoutListItemStacking.leadingUnit;
-
     if ((this.hasDegree ?? false) && !this.off) {
       return this.renderDegreeGlyph(this.valueSize, {
         enhanced: this.rowEnhanced,
       });
     }
-    if (hasTrailingUnit) {
+    if (this.hasTrailingUnitBox) {
       return html`<span class="value-unit-gap" aria-hidden="true"></span>`;
     }
     return nothing;
@@ -914,8 +939,7 @@ export class ObcReadoutListItem extends LitElement {
     const stacking = this.resolvedStacking;
     const showLeadingUnit =
       stacking === ReadoutListItemStacking.leadingUnit && Boolean(this.unit);
-    const showLeadingSrc =
-      stacking === ReadoutListItemStacking.leadingSrc && Boolean(this.src);
+    const showLeadingSrc = this.hasLeadingSrc && Boolean(this.src);
 
     return html`
       <div class="label-container" part="label-container">
@@ -946,15 +970,12 @@ export class ObcReadoutListItem extends LitElement {
   }
 
   private renderTrailingUnit(): TemplateResult | typeof nothing {
-    if (
-      this.resolvedStacking === ReadoutListItemStacking.leadingUnit ||
-      !this.unit
-    ) {
+    if (!this.hasTrailingUnitBox) {
       return nothing;
     }
     return this.renderTextbox(
       'unit',
-      this.unit,
+      this.unit ?? '',
       this.unitOptions?.spaceReserver
     );
   }
@@ -1004,10 +1025,7 @@ export class ObcReadoutListItem extends LitElement {
   }
 
   private renderTrailingSource(): TemplateResult | typeof nothing {
-    if (
-      this.resolvedStacking === ReadoutListItemStacking.leadingSrc ||
-      !this.src
-    ) {
+    if (this.hasLeadingSrc || !this.src) {
       return nothing;
     }
     return html`