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

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

@@ -0,0 +1,130 @@
+import type {Meta, StoryObj} from '@storybook/web-components-vite';
+import {ObcIntegrationAppBar} from './integration-app-bar.js';
+import './integration-app-bar.js';
+import '../../components/app-button/app-button.js';
+import '../../icons/icon-placeholder.js';
+import {html} from 'lit';
+
+const appLabels = [
+  'Home',
+  'Diagnostics',
+  'Data Explorer',
+  'Settings',
+  'Alerts',
+  'Reports',
+  'System Overview',
+  'Logs',
+];
+
+const appBar = (labels: string[]) => html`
+  <obc-integration-app-bar>
+    ${labels.map(
+      (label, i) => html`
+        <obc-app-button
+          slot="apps"
+          size="small"
+          label=${label}
+          integration
+          ?checked=${i === 0}
+        >
+          <obi-placeholder slot="icon"></obi-placeholder>
+        </obc-app-button>
+      `
+    )}
+  </obc-integration-app-bar>
+`;
+
+const meta: Meta<typeof ObcIntegrationAppBar> = {
+  title: 'Integration Systems/App Bar/Sizing',
+  tags: ['experimental'],
+  component: 'obc-integration-app-bar',
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'How `obc-integration-app-bar` sizes labelled app buttons. The app row is a grid of auto-placed columns sized `minmax(var(--obc-integration-app-bar-app-width, max-content), 1fr)`; the cases below show how those equal-width tracks respond to mixed label lengths, narrow containers and wrapper elements.',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<ObcIntegrationAppBar>;
+
+export const EightLabelledApps: Story = {
+  render: () => appBar(appLabels),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'In a wide bar, the grid gives every app the same column width, resolved from the widest label in the set. Short labels keep extra inline space, long labels stay on one line, and the row remains centred because every track uses the same size.',
+      },
+    },
+  },
+};
+
+export const NarrowBar: Story = {
+  render: () => html`
+    <div style="width: 560px; outline: 1px dashed magenta;">
+      ${appBar(appLabels)}
+    </div>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The same eight buttons in a 560px wide bar. The grid keeps equal columns, but their combined minimum width can still exceed the available space, so the centred app row overflows the dashed frame instead of shrinking the buttons.',
+      },
+    },
+  },
+};
+
+export const LabelsSetAfterFirstRender: Story = {
+  render: () =>
+    appBar(['App', 'App', 'App', 'App', 'App', 'App', 'App', 'App']),
+  play: async ({canvasElement}) => {
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+    const buttons = canvasElement.querySelectorAll('obc-app-button');
+    buttons.forEach((button, i) => {
+      button.label = appLabels[i];
+    });
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The bar renders with placeholder labels and the real labels are assigned a second later, which matches data-bound or translated labels. CSS Grid recalculates the column sizing from the updated content, so the buttons expand from the placeholder width to the widest final label without a second measurement pass.',
+      },
+    },
+  },
+};
+
+export const ButtonsWrappedInAnElement: Story = {
+  render: () => html`
+    <obc-integration-app-bar>
+      ${appLabels.map(
+        (label, i) => html`
+          <div slot="apps">
+            <obc-app-button
+              size="small"
+              label=${label}
+              integration
+              ?checked=${i === 0}
+            >
+              <obi-placeholder slot="icon"></obi-placeholder>
+            </obc-app-button>
+          </div>
+        `
+      )}
+    </obc-integration-app-bar>
+  `,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Every app button sits inside a wrapper element, here a plain `div` standing in for the tooltip trigger a framework wrapper emits. The slotted wrapper is flattened with `display: contents`, so the button still becomes the grid item and keeps the same equal-width column sizing as the unwrapped case.',
+      },
+    },
+  },
+};

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

@@ -24,8 +24,18 @@
   }
 
   .center {
-    display: flex;
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: minmax(
+      var(--obc-integration-app-bar-app-width, max-content),
+      1fr
+    );
     gap: var(--app-components-app-menu-app-button-spacing);
     justify-content: center;
   }
 }
+
+/* Svelte wrappers add a slot container that must not become a grid item. */
+slot[name="apps"]::slotted(:not(obc-app-button)) {
+  display: contents;
+}

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

@@ -3,7 +3,8 @@ import {customElement} from '../../decorator.js';
 import compentStyle from './integration-app-bar.css?inline';
 
 /**
- * @slot apps - Application buttons; slotted elements are normalized to a uniform width
+ * @slot apps - Application buttons; every button is laid out at the width of the widest one
+ * @cssprop [--obc-integration-app-bar-app-width=max-content] - Minimum width of each app-button grid track. Tracks may grow equally to fit wider content.
  * @experimental
  */
 @customElement('obc-integration-app-bar')
@@ -13,38 +14,13 @@ export class ObcIntegrationAppBar extends LitElement {
       <div class="wrapper">
         <div class="left-side"></div>
         <div class="center">
-          <slot name="apps" @slotchange=${this.handleAppsSlotChange}></slot>
+          <slot name="apps"></slot>
         </div>
         <div class="right-side"></div>
       </div>
     `;
   }
 
-  private handleAppsSlotChange(event: Event) {
-    const slot = event.target as HTMLSlotElement;
-    const buttons = slot.assignedElements() as HTMLElement[];
-
-    if (buttons.length === 0) {
-      return;
-    }
-
-    for (const btn of buttons) {
-      btn.style.width = '';
-    }
-
-    requestAnimationFrame(() => {
-      const maxWidth = Math.max(
-        ...buttons.map((btn) => btn.getBoundingClientRect().width)
-      );
-
-      if (maxWidth > 0) {
-        for (const btn of buttons) {
-          btn.style.width = `${maxWidth}px`;
-        }
-      }
-    });
-  }
-
   static override styles = unsafeCSS(compentStyle);
 }
 

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,