@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.155 → 2.0.0-next.157

package/src/automation/transmitter-stack/transmitter-stack.stories.ts

@@ -0,0 +1,149 @@
+import type {Meta, StoryObj} from '@storybook/web-components-vite';
+import {html} from 'lit';
+import {
+  ObcTransmitterStack,
+  type TransmitterStackValue,
+} from './transmitter-stack.js';
+import './transmitter-stack.js';
+import {TransmitterOrientation} from '../transmitter/transmitter.js';
+import {crossDecorator} from '../../storybook-util.js';
+import '../../icons/icon-temperature-air.js';
+import '../../icons/icon-pressure.js';
+import '../../icons/icon-placeholder.js';
+import '../horizontal-line/horizontal-line.js';
+import {LineMedium, LineType} from '../index.js';
+
+const designValues: TransmitterStackValue[] = [
+  {
+    value: 12.3,
+    unit: 'C',
+    hasDegree: true,
+    idTag: '#0000',
+    iconSlotName: 'temperature',
+  },
+  {value: 12.3, unit: 'mVs', idTag: '#0000', iconSlotName: 'pressure'},
+  {value: 12.3, unit: 'm', idTag: '#0000', iconSlotName: 'level'},
+];
+
+const meta: Meta<typeof ObcTransmitterStack> = {
+  title: 'Automation/Transmitter/Transmitter Stack',
+  tags: ['autodocs', 'experimental'],
+  component: 'obc-transmitter-stack',
+  decorators: [crossDecorator],
+  args: {
+    orientation: TransmitterOrientation.bottom,
+    lineType: LineType.fluid,
+    values: designValues,
+  },
+  argTypes: {
+    orientation: {
+      options: [
+        TransmitterOrientation.top,
+        TransmitterOrientation.right,
+        TransmitterOrientation.bottom,
+        TransmitterOrientation.left,
+      ],
+      control: {type: 'radio'},
+    },
+    lineType: {
+      options: [
+        LineType.air,
+        LineType.connector,
+        LineType.electric,
+        LineType.fluid,
+      ],
+      control: {type: 'radio'},
+    },
+  },
+} satisfies Meta<ObcTransmitterStack>;
+
+export default meta;
+type Story = StoryObj<ObcTransmitterStack>;
+
+function renderComponent(args: ObcTransmitterStack) {
+  return html`
+    <obc-transmitter-stack
+      .orientation=${args.orientation}
+      .lineType=${args.lineType}
+      .values=${args.values}
+    >
+      <obi-temperature-air slot="temperature"></obi-temperature-air>
+      <obi-pressure slot="pressure"></obi-pressure>
+      <obi-placeholder slot="level"></obi-placeholder>
+    </obc-transmitter-stack>
+  `;
+}
+
+export const Bottom: Story = {
+  render: (args) => renderComponent(args as ObcTransmitterStack),
+};
+
+export const Top: Story = {
+  args: {orientation: TransmitterOrientation.top},
+  render: (args) => renderComponent(args as ObcTransmitterStack),
+};
+
+export const Left: Story = {
+  args: {orientation: TransmitterOrientation.left},
+  render: (args) => renderComponent(args as ObcTransmitterStack),
+};
+
+export const Right: Story = {
+  args: {orientation: TransmitterOrientation.right},
+  render: (args) => renderComponent(args as ObcTransmitterStack),
+};
+
+export const WithoutIdTags: Story = {
+  args: {
+    values: designValues.map((entry) => ({...entry, idTag: undefined})),
+  },
+  render: (args) => renderComponent(args as ObcTransmitterStack),
+};
+
+export const MixedIdTags: Story = {
+  args: {
+    values: designValues.map((entry, index) => ({
+      ...entry,
+      idTag: index === 0 ? '#0000' : undefined,
+    })),
+  },
+  render: (args) => renderComponent(args as ObcTransmitterStack),
+};
+
+export const MissingValues: Story = {
+  args: {
+    values: [
+      {...designValues[0], value: null, maxDigits: 3, hintedZeros: true},
+      {...designValues[1], value: NaN},
+      designValues[2],
+    ],
+  },
+  render: (args) => renderComponent(args as ObcTransmitterStack),
+};
+
+export const UsageWithPipe: Story = {
+  render: (args) => html`
+    <style>
+      .canvas {
+        position: relative;
+        width: 400px;
+        height: 400px;
+      }
+
+      #line-bottom {
+        position: absolute;
+        top: 0;
+        left: calc(-2.5 * 24px);
+      }
+    </style>
+    <div class="canvas">
+      ${renderComponent(args as ObcTransmitterStack)}
+      <obc-horizontal-line
+        .medium=${LineMedium.water}
+        .lineType=${args.lineType || LineType.fluid}
+        length="5"
+        id="line-bottom"
+      ></obc-horizontal-line>
+    </div>
+  `,
+};

package/src/automation/transmitter-stack/transmitter-stack.ts

@@ -0,0 +1,172 @@
+import {LitElement, html, nothing, unsafeCSS} from 'lit';
+import {property} from 'lit/decorators.js';
+import {classMap} from 'lit/directives/class-map.js';
+import componentStyle from './transmitter-stack.css?inline';
+import {customElement} from '../../decorator.js';
+import {LineType} from '../index.js';
+import {
+  TransmitterOrientation,
+  transmitterLeaderOffset,
+} from '../transmitter/transmitter-shared.js';
+import {TransmitterButtonVariant} from '../transmitter-button/transmitter-button.js';
+import '../transmitter-button/transmitter-button.js';
+
+/** One reading of a transmitter stack. */
+export interface TransmitterStackValue {
+  /** The reading; `null` or `NaN` renders the unavailable dash. */
+  value: number | null;
+  unit?: string;
+  /** Identifier shown under the segment (above it for `top`) and read as part of its name. */
+  idTag?: string;
+  /** Decimal precision; `1` when the key is omitted. */
+  fractionDigits?: number;
+  /** Integer digits to reserve; `0` when the key is omitted. */
+  maxDigits?: number;
+  hintedZeros?: boolean;
+  hasSignSpacer?: boolean;
+  /** Show a degree column between the value and the unit (e.g. `12.3°` then `C`). */
+  hasDegree?: boolean;
+  /**
+   * Name of the light-DOM slot projected as this segment's icon. Unique within
+   * the stack: an element is projected once, so a repeated name leaves later
+   * segments with an empty icon.
+   */
+  iconSlotName?: string;
+}
+
+export interface TransmitterStackValueClickDetail {
+  index: number;
+  value: TransmitterStackValue;
+}
+
+/**
+ * `<obc-transmitter-stack>` – Several transmitter readings side by side in one
+ * joined chip, attached to a line by a single leader line.
+ *
+ * Each entry of `values` renders an `<obc-transmitter-button>` segment with its
+ * own icon, value, unit and id tag. The segments take equal widths, set by the
+ * widest reading, and share their borders. Positioning and the leader line
+ * follow `<obc-transmitter>`.
+ *
+ * ### Features / Variants
+ * - **`orientation`** – `top`, `right`, `bottom`, `left`; the edge the leader
+ *   line attaches to. `top` places the id tags above the chip.
+ * - **Values** – `value` and `unit` per segment. `idTag` adds a label row under
+ *   every segment once any value has one, so the chip stays aligned.
+ * - **Formatting** – per value `fractionDigits` (default `1`), `maxDigits`
+ *   (default `0`), `hintedZeros`, `hasSignSpacer` and `hasDegree`, formatted like
+ *   `<obc-transmitter-button>`. An omitted key takes its default; a key set to
+ *   `null`, `undefined` or `NaN` renders the reading as the unavailable dash.
+ * - **Icons** – `iconSlotName` projects the light-DOM element with that slot
+ *   name as the segment's icon; names must be unique within the stack. The
+ *   name is chosen per value, so it carries no `@slot` tag (the wrapper
+ *   generator needs literal names).
+ * - **Accessible name** – each segment is a native button named by its
+ *   reading, unit and `idTag`; the visible tag is hidden from assistive
+ *   technology so it is not read twice.
+ * - **Empty** – with no `values` nothing renders, leader line included.
+ *
+ * ### Usage Guidelines
+ * Use when one source reports several readings that share one leader line. For
+ * a single reading, a tag pill or a trend graph, use `<obc-transmitter>`. Each
+ * segment's hit area is `<obc-transmitter-button>`'s chip (24 px high), below
+ * the 48 px touch-target token; see its design note.
+ *
+ * ### Slots
+ * | Slot Name        | Conditions                      | Purpose                       |
+ * |------------------|---------------------------------|-------------------------------|
+ * | `<iconSlotName>` | a value declares `iconSlotName` | Icon in that value's segment. |
+ *
+ * @property orientation - Edge of the chip the leader line attaches to.
+ * @property lineType - Line the transmitter sits on; offsets the leader line by half its stroke.
+ * @property values - One segment per entry, in order.
+ * @fires {CustomEvent<TransmitterStackValueClickDetail>} value-click - Fired when a segment is activated, with its value and index.
+ * @fires click - Fired when any segment is clicked; `value-click` tells which.
+ * @experimental
+ */
+@customElement('obc-transmitter-stack')
+export class ObcTransmitterStack extends LitElement {
+  @property({type: String}) orientation: TransmitterOrientation =
+    TransmitterOrientation.bottom;
+  @property({type: String}) lineType: LineType | undefined = undefined;
+  @property({type: Array}) values: TransmitterStackValue[] = [];
+
+  private handleValueClick(index: number, value: TransmitterStackValue): void {
+    this.dispatchEvent(
+      new CustomEvent<TransmitterStackValueClickDetail>('value-click', {
+        detail: {index, value},
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  private renderValue(
+    entry: TransmitterStackValue,
+    index: number,
+    hasIdTags: boolean
+  ) {
+    // `in`, not `??` alone: a key that is present but empty is a failed
+    // runtime write and must reach the block as missing (NaN renders the dash,
+    // readout-components.md § 2).
+    return html`
+      <div class="cell" part="cell">
+        <obc-transmitter-button
+          class="segment"
+          .variant=${TransmitterButtonVariant.value}
+          .value=${entry.value}
+          .unit=${entry.unit ?? ''}
+          .fractionDigits=${'fractionDigits' in entry
+            ? (entry.fractionDigits ?? NaN)
+            : 1}
+          .maxDigits=${'maxDigits' in entry ? (entry.maxDigits ?? NaN) : 0}
+          .hintedZeros=${entry.hintedZeros ?? false}
+          .hasSignSpacer=${entry.hasSignSpacer ?? false}
+          .hasDegree=${entry.hasDegree ?? false}
+          .hasIcon=${Boolean(entry.iconSlotName)}
+          .idTag=${entry.idTag ?? ''}
+          @click=${() => this.handleValueClick(index, entry)}
+        >
+          ${entry.iconSlotName
+            ? html`<slot name=${entry.iconSlotName} slot="icon"></slot>`
+            : nothing}
+        </obc-transmitter-button>
+        ${hasIdTags
+          ? html`<div class="id-tag" aria-hidden="true">
+              ${entry.idTag ?? ''}
+            </div>`
+          : nothing}
+      </div>
+    `;
+  }
+
+  override render() {
+    if (this.values.length === 0) {
+      return nothing;
+    }
+    const hasIdTags = this.values.some((entry) => Boolean(entry.idTag));
+    return html`
+      <div
+        class=${classMap({
+          transmitter: true,
+          [`orientation-${this.orientation}`]: true,
+        })}
+        style="--offset: ${transmitterLeaderOffset(this.lineType)}px;"
+      >
+        <div class="values" part="values">
+          ${this.values.map((entry, index) =>
+            this.renderValue(entry, index, hasIdTags)
+          )}
+        </div>
+      </div>
+    `;
+  }
+
+  static override styles = unsafeCSS(componentStyle);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obc-transmitter-stack': ObcTransmitterStack;
+  }
+}

package/src/building-blocks/readout-block/readout-block.stories.ts

@@ -122,7 +122,7 @@ function renderShowcase(cards: ShowcaseCard[]) {
 
 const meta = {
   title: 'Building Blocks/Readout Block',
-  tags: ['autodocs', '6.0', 'beta'],
+  tags: ['autodocs', '6.0'],
   component: 'obc-readout-block',
   decorators: [themedDecorator],
   parameters: {

package/src/building-blocks/readout-block/readout-block.ts

@@ -201,7 +201,7 @@ export enum ReadoutBlockHidePhase {
  * @csspart block-text - The `obc-textbox` rendering the number.
  * @csspart block-icon - The leading marker-icon container.
  * @csspart degree - The trailing degree-glyph column.
- * @beta
+ * @stable
  */
 @customElement('obc-readout-block')
 export class ObcReadoutBlock extends LitElement {

package/src/components/textarea-field/textarea-field.css

@@ -325,13 +325,6 @@ obc-audio-recording-item {
   --on-normal-neutral-color: var(--element-inactive-color);
 }
 
-/* Visually hidden but accessible to screen readers */
 .visually-hidden {
-  clip: rect(0 0 0 0);
-  clip-path: inset(50%);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
+  @mixin visually-hidden;
 }

package/src/components/textbox/textbox.stories.ts

@@ -15,7 +15,7 @@ interface TextboxStoryArgs extends Partial<ObcTextbox> {
 
 const meta: Meta<TextboxStoryArgs> = {
   title: 'Building Blocks/Textbox',
-  tags: ['autodocs', '6.0', 'beta'],
+  tags: ['autodocs', '6.0'],
   component: 'obc-textbox',
   args: {
     size: ObcTextboxSize.m,

package/src/components/textbox/textbox.ts

@@ -66,7 +66,7 @@ export enum ObcTextboxFontWeight {
  *
  * @slot - The visible text content.
  * @slot length - Reserves a minimum width based on its content width.
- * @beta
+ * @stable
  */
 @customElement('obc-textbox')
 export class ObcTextbox extends LitElement {

package/src/mixins/transmitter.css

@@ -0,0 +1,90 @@
+/* obc-transmitter and obc-transmitter-stack attach to a line the same way;
+   what they share lives here. */
+
+/* Leader line and anchor transform. Apply on the element that carries the
+   `orientation-*` class and `--offset` (half the line's stroke width). */
+@define-mixin transmitter-leader {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: fit-content;
+
+  &.orientation-bottom {
+    padding-top: 8px;
+    top: calc(1px + var(--offset));
+    transform: translateX(-50%);
+  }
+
+  &.orientation-top {
+    padding-bottom: 8px;
+    transform: translate(-50%, calc(-100% - 1px - var(--offset)));
+  }
+
+  &.orientation-left {
+    padding-right: 8px;
+    transform: translate(calc(-100% - 4px - var(--offset)), -50%);
+  }
+
+  &.orientation-right {
+    padding-left: 8px;
+    transform: translateY(-50%);
+    right: calc(-4px - var(--offset));
+  }
+
+  &::before {
+    content: "";
+    display: block;
+    position: absolute;
+    border: var(--normal-enabled-border-color) solid 1px;
+  }
+
+  &.orientation-bottom::before,
+  &.orientation-top::before {
+    width: 0;
+    height: 8px;
+  }
+
+  &.orientation-bottom::before {
+    top: -1px;
+  }
+
+  &.orientation-top::before {
+    bottom: -1px;
+  }
+
+  &.orientation-left::before,
+  &.orientation-right::before {
+    height: 0;
+    width: 8px;
+  }
+
+  &.orientation-left::before {
+    right: -4px;
+  }
+
+  &.orientation-right::before {
+    left: -4px;
+  }
+
+  /* Left/right anchor on the chip row's middle (Figma 25656:45233), so the id
+     tag hangs below out of flow; its parent must be the containing block. */
+  &:is(.orientation-left, .orientation-right):not(.has-alert) .id-tag {
+    position: absolute;
+    top: calc(100% + 2px);
+    left: 50%;
+    transform: translateX(-50%);
+    white-space: nowrap;
+  }
+}
+
+@define-mixin transmitter-id-tag {
+  color: var(--element-neutral-color);
+  font-variant-numeric: lining-nums tabular-nums;
+  font-feature-settings: "ss04" on;
+  font-family: var(--global-typography-font-family);
+  font-size: var(--global-typography-instrument-label-font-size);
+  font-style: normal;
+  font-weight: 570;
+  line-height: var(--global-typography-instrument-label-line-height);
+}

package/src/mixins/visually-hidden.css

@@ -0,0 +1,10 @@
+/* Removes content from view while keeping it in the accessibility tree. */
+@define-mixin visually-hidden {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}

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

@@ -16,13 +16,13 @@ obc-readout-block {
 /* ---------- Root ----------
  * The root is an inline flex column (vertical) or row (horizontal). Private
  * `--_readout-*` variables are resolved per layout × size tier below; every
- * layout rule reads only the private variables. */
+ * layout rule reads only the private variables. A readout is as tall as its
+ * rows: the design's container-min-height tokens are not applied (#1252). */
 .readout {
   display: inline-flex;
   position: relative;
   padding-inline: var(--_readout-pad-h);
   padding-block: var(--_readout-pad-v);
-  min-block-size: var(--_readout-min-height, auto);
   border-radius: var(--global-border-radius-border-radius-base);
 }
 
@@ -532,14 +532,8 @@ obc-readout-block {
   --_readout-value-pad-v: var(
     --instrument-components-readout-group-vertical-regular-value-container-padding-vertical
   );
-  --_readout-min-height: var(
-    --instrument-components-readout-group-vertical-regular-container-min-height
-  );
 }
 
-/* The medium tiers set no `--_readout-min-height`: Figma defines the
- * container-min-height token only for the regular and enhanced tiers, so
- * medium readouts intentionally fall back to `min-block-size: auto`. */
 .readout.direction-vertical.stacking-inline.size-medium {
   --_readout-pad-h: var(
     --instrument-components-readout-group-vertical-medium-container-padding-horizontal
@@ -574,9 +568,6 @@ obc-readout-block {
   --_readout-value-pad-v: var(
     --instrument-components-readout-group-vertical-enhanced-vertical-value-container-padding-vertical
   );
-  --_readout-min-height: var(
-    --instrument-components-readout-group-vertical-enhanced-container-min-height
-  );
 }
 
 /* Stack (vertical, stacked meta) */
@@ -596,9 +587,6 @@ obc-readout-block {
   --_readout-value-pad-v: var(
     --instrument-components-readout-stack-regular-value-container-padding-vertical
   );
-  --_readout-min-height: var(
-    --instrument-components-readout-stack-regular-container-min-height
-  );
 }
 
 .readout.direction-vertical.stacking-stacked.size-medium {
@@ -635,9 +623,6 @@ obc-readout-block {
   --_readout-value-pad-v: var(
     --instrument-components-readout-stack-enhanced-vertical-value-container-padding-vertical
   );
-  --_readout-min-height: var(
-    --instrument-components-readout-stack-enhanced-container-min-height
-  );
 }
 
 /* Group horizontal */
@@ -659,8 +644,6 @@ obc-readout-block {
   --_readout-divider-pad: var(
     --instrument-components-readout-group-horizontal-regular-divider-padding
   );
-  /* TODO(designer): verify; must also hold when only a unit is present */
-  --_readout-min-height: auto;
 }
 
 .readout.direction-horizontal.size-medium {
@@ -701,9 +684,6 @@ obc-readout-block {
   --_readout-divider-pad: var(
     --instrument-components-readout-group-horizontal-enhanced-divider-padding
   );
-  --_readout-min-height: var(
-    --instrument-components-readout-group-horizontal-enhanced-container-min-height
-  );
 }
 
 /* ---------- Debug overlay ----------

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

@@ -1,6 +1,14 @@
 import {afterEach, describe, expect, it, vi} from 'vitest';
+import {render} from 'vitest-browser-lit';
+import {html, type TemplateResult} from 'lit';
+import '../../main.css';
 import './readout.js';
-import {ReadoutDirection, ReadoutSize, type ObcReadout} from './readout.js';
+import {
+  ReadoutDirection,
+  ReadoutSize,
+  ReadoutStacking,
+  type ObcReadout,
+} from './readout.js';
 
 /**
  * A horizontal readout given a `size` other than `large` warns once per
@@ -60,3 +68,68 @@ describe('obc-readout horizontal size warning', () => {
     expect(warn).toHaveBeenCalledTimes(2);
   });
 });
+
+/**
+ * A readout is exactly as tall as its rows — the padding plus the value
+ * cluster and the meta zone. No tier applies the design file's
+ * container-min-height token (#1252). Measured over every vertical tier and
+ * both stackings: in the large tiers the content already exceeds the token,
+ * so a reintroduced minimum would stay invisible there.
+ */
+describe('obc-readout height', () => {
+  const SIZES = [ReadoutSize.small, ReadoutSize.medium, ReadoutSize.large];
+  const STACKINGS = [ReadoutStacking.inline, ReadoutStacking.stacked];
+
+  async function mount(template: TemplateResult) {
+    const screen = render(template);
+    const el = screen.container.querySelector('obc-readout') as ObcReadout;
+    await el.updateComplete;
+    return el.shadowRoot!.querySelector('.readout') as HTMLElement;
+  }
+
+  /** The height a column flex root has when nothing but its rows sizes it. */
+  function contentHeight(root: HTMLElement): number {
+    const {paddingTop, paddingBottom} = getComputedStyle(root);
+    const rows = Array.from(root.children).reduce(
+      (sum, row) => sum + row.getBoundingClientRect().height,
+      0
+    );
+    return rows + parseFloat(paddingTop) + parseFloat(paddingBottom);
+  }
+
+  for (const size of SIZES) {
+    for (const stacking of STACKINGS) {
+      it(`hugs its rows: ${size} / ${stacking}`, async () => {
+        const root = await mount(
+          html`<obc-readout
+            .size=${size}
+            .stacking=${stacking}
+            .value=${123}
+            label="SOG"
+            unit="kn"
+          ></obc-readout>`
+        );
+        expect(root.getBoundingClientRect().height).toBeCloseTo(
+          contentHeight(root),
+          0
+        );
+      });
+    }
+  }
+
+  it('hugs its rows: small / stacked, meta zone only', async () => {
+    const root = await mount(
+      html`<obc-readout
+        .size=${ReadoutSize.small}
+        .stacking=${ReadoutStacking.stacked}
+        .hasValue=${false}
+        label="Angle"
+        unit="DEG"
+      ></obc-readout>`
+    );
+    expect(root.getBoundingClientRect().height).toBeCloseTo(
+      contentHeight(root),
+      0
+    );
+  });
+});

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

@@ -367,7 +367,7 @@ function argsToOptions(args: ReadoutStoryArgs): StoryOptions {
 
 const meta = {
   title: 'Instruments/Readout',
-  tags: ['autodocs', '6.0', 'beta'],
+  tags: ['autodocs', '6.0'],
   component: 'obc-readout',
   decorators: [centeredCanvasDecorator],
   render: (args) =>

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

@@ -304,7 +304,7 @@ export interface ReadoutSourceOptions extends ReadoutSrcOptions {
  * @slot src-picker-content - Provides the source picker context menu content.
  * @fires {CustomEvent<{value: string, label?: string}>} source-change - Fired when a source picker option is selected.
  * @fires {CustomEvent<{src: string}>} source-flyout-click - Fired when the source row is clicked while `srcOptions.interaction == 'flyout'`.
- * @beta
+ * @stable
  */
 @customElement('obc-readout')
 export class ObcReadout extends LitElement {

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

@@ -130,6 +130,7 @@ obc-readout-block {
 }
 
 .value-area {
+  margin-inline-start: auto; /* right-aligns a label-less row's value, which has no label container to push it */
   display: inline-flex;
   align-items: flex-end;
   justify-content: flex-end;

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

@@ -346,7 +346,7 @@ function argsToOptions(args: ReadoutListItemStoryArgs): StoryOptions {
 
 const meta = {
   title: 'Instruments/Readout List Item',
-  tags: ['autodocs', '6.0', 'beta'],
+  tags: ['autodocs', '6.0'],
   component: 'obc-readout-list-item',
   decorators: [centeredCanvasDecorator],
   render: (args) =>