@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.154 → 2.0.0-next.156

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/components/user-button/user-button.css

@@ -37,10 +37,26 @@
       @mixin font-subtitle;
     }
 
+    .user-label {
+      @mixin font-body;
+    }
+
+    .user-sublabel {
+      @mixin font-body;
+    }
+
+    &.has-sublabel .user-label {
+      @mixin font-body-active;
+    }
+
     &.style-selected .user-initials {
       @mixin font-title;
     }
 
+    &.style-selected .user-label {
+      @mixin font-body-active;
+    }
+
     &.state-static {
       width: var(--ui-components-user-button-visual-size-enhanced);
       height: var(--ui-components-user-button-visual-size-enhanced);
@@ -55,7 +71,17 @@
     color: var(--element-active-color);
   }
 
-  &:disabled .user-label {
+  .user-sublabel {
+    @mixin font-label;
+    color: var(--element-active-color);
+  }
+
+  &.has-sublabel .user-label {
+    @mixin font-label-active;
+  }
+
+  &:disabled .user-label,
+  &:disabled .user-sublabel {
     color: var(--element-disabled-color);
   }
 

package/src/components/user-button/user-button.stories.ts

@@ -175,3 +175,32 @@ export const TooManyInitials: Story = {
     styleType: StyleType.flat,
   },
 };
+
+export const WithSublabel: Story = {
+  args: {
+    variant: Variant.initials,
+    styleType: StyleType.normal,
+    label: 'Anna',
+    sublabel: 'Captain',
+  },
+};
+
+export const LargeWithSublabel: Story = {
+  args: {
+    variant: Variant.initials,
+    styleType: StyleType.normal,
+    size: Size.large,
+    label: 'Anna',
+    sublabel: 'Captain',
+  },
+};
+
+export const StaticWithSublabel: Story = {
+  args: {
+    variant: Variant.initials,
+    styleType: StyleType.normal,
+    static: true,
+    label: 'Anna',
+    sublabel: 'Captain',
+  },
+};

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

@@ -50,6 +50,8 @@ export enum Variant {
  *   - Provide a custom icon via the `icon` slot when using the `icon` variant.
  * - **Label Support:**
  *   - Optional `label` property displays text next to the button (not shown in static mode).
+ *   - Optional `sublabel` adds a second, lighter line under the label, for a
+ *     secondary detail such as the user's role.
  *
  * ## Usage Guidelines
  * Use `obc-user-button` to represent a user in navigation bars, toolbars, or menus where a compact, recognizable user indicator is needed. Ideal for profile menus, account switching, or user-related quick actions.
@@ -71,7 +73,8 @@ export enum Variant {
  * - Initials longer than two characters are truncated and a warning is logged.
  * - If `initials` is empty or invalid, the button falls back to the user icon.
  * - The `label` is only visible when the button is interactive (not static).
- * - For accessibility, the button uses `aria-label` based on initials or a default.
+ * - For accessibility, the button is named after its visible text — `label` and
+ *   `sublabel` — falling back to the initials when it shows no text.
  * - Only use the `static` property for non-interactive contexts; otherwise, the button is clickable.
  *
  * ## Example:
@@ -88,6 +91,8 @@ export enum Variant {
  * @availableWhen disabled static==false
  * @property label - Optional label text to display next to the button (not shown in static mode).
  * @availableWhen label static==false
+ * @property sublabel - Optional second line under the label, for a secondary detail such as a role (not shown in static mode).
+ * @availableWhen sublabel static==false
  * @slot icon - Custom icon for the user button (used only in `icon` variant; defaults to <obi-user> if not provided)
  * @stable
  */
@@ -122,6 +127,8 @@ export class ObcUserButton extends LitElement {
 
   @property({type: String}) label?: string;
 
+  @property({type: String}) sublabel?: string;
+
   private get formattedInitials() {
     if (!this.initials) return '';
 
@@ -157,21 +164,33 @@ export class ObcUserButton extends LitElement {
       'mode-initials': !this.shouldShowIcon,
       'state-static': this.static,
       [`size-${this.size}`]: true,
+      'has-sublabel': Boolean(this.sublabel) && !this.static,
     };
 
     // Use button element when clickable, div when static
     const tag = this.static ? literal`div` : literal`button`;
 
+    const visibleText = [this.label, this.sublabel].filter(Boolean).join(', ');
+    const accessibleName =
+      (!this.static && visibleText) || this.initials || 'User button';
+
     const label =
       this.label && !this.static
         ? html`<span class="user-label" part="label">${this.label}</span>`
         : nothing;
 
+    const sublabel =
+      this.sublabel && !this.static
+        ? html`<span class="user-sublabel" part="sublabel">
+            ${this.sublabel}
+          </span>`
+        : nothing;
+
     return html`
         <${tag}
           class=${classMap(wrapperClasses)}
           ?disabled=${this.disabled}
-          aria-label=${this.initials || 'User button'}
+          aria-label=${accessibleName}
         >
         <div class="content-container" part="content-container">
           <div class="user-button-circle">
@@ -192,7 +211,7 @@ export class ObcUserButton extends LitElement {
                   `
             }
           </div>
-          ${label}
+          ${label} ${sublabel}
         </div>
         </${tag}>
       `;

package/src/components/user-menu/user-menu.css

@@ -142,6 +142,14 @@
       @mixin font-overline;
       color: var(--element-neutral-color);
     }
+
+    obc-user-button:not(.has-role)::part(label) {
+      font-weight: var(--font-weight-regular);
+    }
+
+    obc-user-button::part(sublabel) {
+      @mixin font-body;
+    }
   }
 
   .user-primary {

package/src/components/user-menu/user-menu.stories.ts

@@ -16,6 +16,7 @@ const meta: Meta<ObcUserMenu> = {
         'sign-out-click',
         'signed-in-action-click',
         'recent-user-click',
+        'use-another-account-click',
       ],
     },
   },
@@ -50,6 +51,8 @@ const meta: Meta<ObcUserMenu> = {
     passwordError: '',
     userInitials: 'AB',
     userLabel: 'Username',
+    userRole: '',
+    showUseAnotherAccount: true,
     recentUsers: [
       {initials: 'AB', label: 'Username'},
       {initials: 'CD', label: 'Username'},
@@ -77,6 +80,8 @@ const meta: Meta<ObcUserMenu> = {
         passwordError=${args.passwordError}
         .userInitials=${args.userInitials}
         .userLabel=${args.userLabel}
+        .userRole=${args.userRole}
+        .showUseAnotherAccount=${args.showUseAnotherAccount}
         .recentUsers=${args.recentUsers}
         .signedInActions=${args.signedInActions}
         .primaryActionId=${args.primaryActionId}
@@ -185,6 +190,54 @@ export const SignedInWithoutActions: Story = {
   },
 };
 
+export const UserSignInWithRoles: Story = {
+  args: {
+    type: ObcUserMenuType.userSignIn,
+    size: ObcUserMenuSize.regular,
+    hasRecentlySignedIn: true,
+    userRole: 'Role',
+    recentUsers: [
+      {initials: 'AB', label: 'Username', role: 'Role'},
+      {initials: 'CD', label: 'Username', role: 'Role'},
+      {initials: 'EF', label: 'Username', role: 'Role'},
+    ],
+  },
+};
+
+export const SignedInWithRole: Story = {
+  args: {
+    type: ObcUserMenuType.signedIn,
+    size: ObcUserMenuSize.regular,
+    userRole: 'Role',
+  },
+};
+
+export const UserSignInWithoutUseAnotherAccount: Story = {
+  args: {
+    type: ObcUserMenuType.userSignIn,
+    size: ObcUserMenuSize.regular,
+    showUseAnotherAccount: false,
+  },
+};
+
+export const UserSignInSmallWithoutUseAnotherAccount: Story = {
+  args: {
+    type: ObcUserMenuType.userSignIn,
+    size: ObcUserMenuSize.small,
+    showUseAnotherAccount: false,
+  },
+};
+
+export const UserSignInSmallIgnoresRole: Story = {
+  args: {
+    type: ObcUserMenuType.userSignIn,
+    size: ObcUserMenuSize.small,
+    hasRecentlySignedIn: true,
+    userRole: 'Role',
+    recentUsers: [{initials: 'AB', label: 'Username', role: 'Role'}],
+  },
+};
+
 export const SignInWithoutRecentUsers: Story = {
   args: {
     type: ObcUserMenuType.signIn,