@oicl/openbridge-webcomponents 2.0.0-next.153 → 2.0.0-next.155

package/bundle/openbridge-webcomponents.bundle.js

@@ -84020,6 +84020,7 @@ const compentStyle$W = i$7`* {
 .alert-list {
   min-height: 0;
   flex-grow: 0;
+  --alert-list-grid-columns: 1fr;
 }
 
 .spacer {
@@ -84044,13 +84045,8 @@ const compentStyle$W = i$7`* {
   }
 
 obc-table::part(grid) {
-  grid-template-columns: 1fr repeat(4, min-content);
-}
-
-.wrapper.small obc-table::part(grid) {
-  grid-template-columns: 1fr min-content var(
-      --app-components-alert-table-row-ack-container-width-small
-    );
+  /* set from columns[].width */
+  grid-template-columns: var(--alert-list-grid-columns);
 }
 
 .empty-list {
@@ -85431,6 +85427,7 @@ var ObcTableCellType = /* @__PURE__ */ ((ObcTableCellType2) => {
   ObcTableCellType2["HorizontalBar"] = "horizontal-bar";
   return ObcTableCellType2;
 })(ObcTableCellType || {});
+const INTERACTIVE_SELECTOR = 'button, a[href], input, select, textarea, [role="button"], [role="link"], [role="checkbox"]';
 function cssPart(value, subpart) {
   if (value.cssPart) {
     return `${value.cssPart} ${subpart}`;
@@ -85537,7 +85534,14 @@ let ObcTable = class extends i$4 {
       this._sortDirection = "asc";
     }
   }
-  _handleRowClick(row) {
+  _handleRowClick(event, row) {
+    const rowElement = event.currentTarget;
+    for (const node of event.composedPath()) {
+      if (node === rowElement) break;
+      if (node instanceof Element && node.matches(INTERACTIVE_SELECTOR)) {
+        return;
+      }
+    }
     this.dispatchEvent(
       new CustomEvent("row-click", { detail: { row } })
     );
@@ -85904,7 +85908,7 @@ let ObcTable = class extends i$4 {
           "selected-with-next": isRowSelected && hasSelectedNextRow,
           striped: isStriped
         })}
-                  @click=${() => this._handleRowClick(row)}
+                  @click=${(event) => this._handleRowClick(event, row)}
                   @keydown=${this._handleRowKeyDown}
                   data-row-id=${row.id}
                   style="grid-row: ${rowIndex + 1}"
@@ -86303,8 +86307,8 @@ var __decorateClass$v3 = (decorators, target, key, kind) => {
   if (kind && result) __defProp$u$(target, key, result);
   return result;
 };
-function getAlertListModeData$1(selectedMode) {
-  if (selectedMode === "all")
+function getFilterModeData(filterMode) {
+  if (filterMode === "all")
     return {
       name: "all",
       title: msg("All"),
@@ -86312,7 +86316,7 @@ function getAlertListModeData$1(selectedMode) {
       emptyIcon: b`<obi-alerts></obi-alerts>`,
       filter: (alert) => !isShelved(alert) && isActive(alert)
     };
-  else if (selectedMode === "unacked")
+  else if (filterMode === "unacked")
     return {
       name: "unacked",
       title: msg("Unacked"),
@@ -86320,7 +86324,7 @@ function getAlertListModeData$1(selectedMode) {
       emptyIcon: b`<obi-unacknowledged></obi-unacknowledged>`,
       filter: (alert) => !isAcknowledged(alert) && isActive(alert) && !excludedFromUnackedFilter(alert.type) && !isShelved(alert)
     };
-  else if (selectedMode === "shelved")
+  else if (filterMode === "shelved")
     return {
       name: "shelved",
       title: msg("Shelved"),
@@ -86328,7 +86332,7 @@ function getAlertListModeData$1(selectedMode) {
       emptyIcon: b`<obi-alerts-shelf></obi-alerts-shelf>`,
       filter: (alert) => isShelved(alert)
     };
-  else if (selectedMode === "blocked")
+  else if (filterMode === "blocked")
     return {
       name: "blocked",
       title: msg("Blocked"),
@@ -86336,7 +86340,7 @@ function getAlertListModeData$1(selectedMode) {
       emptyIcon: b`<obi-alerts-active></obi-alerts-active>`,
       filter: (alert) => isBlocked(alert)
     };
-  else if (selectedMode === "rectified")
+  else if (filterMode === "rectified")
     return {
       name: "rectified",
       title: msg("Rectified"),
@@ -86344,19 +86348,196 @@ function getAlertListModeData$1(selectedMode) {
       emptyIcon: b`<obi-alarm-rectified-iec></obi-alarm-rectified-iec>`,
       filter: (alert) => !isActive(alert)
     };
-  else throw new Error("Invalid selected mode");
+  else throw new Error("Invalid filter mode");
+}
+function alertListCellSlotName(columnKey, rowId) {
+  return `cell-${encodeURIComponent(columnKey)}:${rowId}`;
+}
+function statusColumn(options = {}) {
+  return {
+    key: "status",
+    label: "Status",
+    sortDirection: "desc",
+    compare: comparePriorityAlerts,
+    cell: (alert) => ({
+      type: ObcTableCellType.Regular,
+      largeIcon: true,
+      text: alert.text,
+      title: alert.source,
+      noWrap: true,
+      icon: b`<obc-alert-icon
+        .type=${alert.type}
+        .acknowledged=${isAcknowledged(alert)}
+        .active=${isActive(alert)}
+      ></obc-alert-icon>`
+    }),
+    ...options
+  };
+}
+function ackColumn(options = {}) {
+  return {
+    key: "ack",
+    label: "ACK-status",
+    cell: (alert) => {
+      if (isAcknowledged(alert) || !isActive(alert) || !requiresAcknowledgement(alert.type)) {
+        return { type: ObcTableCellType.Regular };
+      }
+      if (alert.noAck) {
+        const icon = usesAlarmNoAckIcon(alert.type) ? b`<obi-alarm-noack-iec usecsscolor></obi-alarm-noack-iec>` : b`<obi-warning-noack-iec usecsscolor></obi-warning-noack-iec>`;
+        return {
+          type: ObcTableCellType.Regular,
+          largeIcon: true,
+          icon,
+          align: "center"
+        };
+      }
+      return { type: ObcTableCellType.Button, text: msg("ACK") };
+    },
+    ...options
+  };
+}
+function tagIdColumn(options = {}) {
+  return {
+    key: "tagId",
+    label: "Tag ID",
+    compare: (a2, b2) => a2.tagId.localeCompare(b2.tagId),
+    cell: (alert) => ({
+      type: ObcTableCellType.Regular,
+      text: "#" + alert.tagId,
+      align: "right"
+    }),
+    ...options
+  };
+}
+function isSlotColumn(column) {
+  return "slot" in column && column.slot === true;
+}
+function parentRowIdOf(rowId) {
+  const separatorIndex = rowId.lastIndexOf("/");
+  return separatorIndex === -1 ? void 0 : rowId.slice(0, separatorIndex);
+}
+const TABLE_KEY_PREFIX = "column-";
+function walkAlertRows(alerts, isExpanded) {
+  const alertIds = new Set(alerts.map((alert) => alert.id));
+  const membersByGroupId = /* @__PURE__ */ new Map();
+  const roots = [];
+  for (const alert of alerts) {
+    const groupIds = (alert.memberOf ?? []).filter(
+      (groupId) => groupId !== alert.id && alertIds.has(groupId)
+    );
+    if (groupIds.length === 0) {
+      roots.push(alert);
+      continue;
+    }
+    for (const groupId of groupIds) {
+      const members = membersByGroupId.get(groupId) ?? [];
+      members.push(alert);
+      membersByGroupId.set(groupId, members);
+    }
+  }
+  const reachable = /* @__PURE__ */ new Set();
+  const markReachable = (alert) => {
+    if (reachable.has(alert.id)) {
+      return;
+    }
+    reachable.add(alert.id);
+    for (const member of membersByGroupId.get(alert.id) ?? []) {
+      markReachable(member);
+    }
+  };
+  roots.forEach(markReachable);
+  for (const alert of alerts) {
+    if (!reachable.has(alert.id)) {
+      roots.push(alert);
+      markReachable(alert);
+    }
+  }
+  const rows = [];
+  const visit = (alert, level, parentRowId, ancestors) => {
+    const segment = encodeURIComponent(alert.id);
+    const rowId = parentRowId === void 0 ? segment : `${parentRowId}/${segment}`;
+    const members = membersByGroupId.get(alert.id) ?? [];
+    const expandableMembers = members.filter(
+      (member) => !ancestors.has(member.id)
+    );
+    rows.push({
+      rowId,
+      parentRowId,
+      alert,
+      level,
+      expandable: expandableMembers.length > 0
+    });
+    if (!isExpanded(rowId)) {
+      return;
+    }
+    const nextAncestors = new Set(ancestors).add(alert.id);
+    for (const member of expandableMembers) {
+      visit(member, level + 1, rowId, nextAncestors);
+    }
+  };
+  for (const alert of roots) {
+    visit(alert, 0, void 0, /* @__PURE__ */ new Set());
+  }
+  return rows;
+}
+function getAlertRows(alerts, filterMode) {
+  const { filter } = getFilterModeData(filterMode);
+  return walkAlertRows(alerts.filter(filter), () => true);
 }
 let ObcAlertListDetailsExperimental = class extends i$4 {
   constructor() {
     super(...arguments);
-    this.selectedMode = "all";
+    this.filterMode = "all";
     this.alerts = [];
-    this.showTime = false;
-    this.timeFormatter = (time) => time.toLocaleTimeString(void 0, { hour12: false });
-    this.small = false;
+    this.columns = [
+      statusColumn(),
+      ackColumn({ dividerRight: true }),
+      tagIdColumn()
+    ];
+    this.showHeader = true;
     this.defaultExpanded = true;
     this.expansionOverrides = /* @__PURE__ */ new Map();
     this.alertByRowId = /* @__PURE__ */ new Map();
+    this.allRowIds = /* @__PURE__ */ new Set();
+    this._cellSlots = [];
+    this.cellSlotsChanged = false;
+  }
+  /** Slot of every cell in a slot column, rows in collapsed groups included. */
+  get cellSlots() {
+    return this._cellSlots;
+  }
+  willUpdate(changed) {
+    if (!changed.has("alerts") && !changed.has("columns") && !changed.has("filterMode")) {
+      return;
+    }
+    const rows = getAlertRows(this.alerts, this.filterMode);
+    this.allRowIds = new Set(rows.map((row) => row.rowId));
+    const slotColumns = this.columns.filter(isSlotColumn);
+    const next = getAlertRows(this.alerts, this.filterMode).flatMap(
+      (row) => slotColumns.map((column) => ({
+        name: alertListCellSlotName(column.key, row.rowId),
+        alert: row.alert,
+        rowId: row.rowId,
+        columnKey: column.key
+      }))
+    );
+    const unchanged = next.length === this._cellSlots.length && next.every(
+      (slot, index2) => slot.name === this._cellSlots[index2].name && slot.alert === this._cellSlots[index2].alert
+    );
+    if (!unchanged) {
+      this._cellSlots = next;
+      this.cellSlotsChanged = true;
+    }
+  }
+  updated() {
+    if (this.cellSlotsChanged) {
+      this.cellSlotsChanged = false;
+      this.dispatchEvent(
+        new CustomEvent("cell-slots-change", {
+          detail: this._cellSlots
+        })
+      );
+    }
   }
   getVisibleAlerts() {
     const seen = /* @__PURE__ */ new Set();
@@ -86369,19 +86550,27 @@ let ObcAlertListDetailsExperimental = class extends i$4 {
     });
   }
   onRowClick(e2) {
-    const row = this.alertByRowId.get(e2.detail.row.id);
-    if (row) {
+    const rowId = e2.detail.row.id;
+    const alert = this.alertByRowId.get(rowId);
+    if (alert) {
       this.dispatchEvent(
-        new CustomEvent("row-click", { detail: { alert: row } })
+        new CustomEvent("row-click", {
+          detail: { alert, rowId }
+        })
       );
     }
   }
   onCellButtonClick(e2) {
-    const row = this.alertByRowId.get(e2.detail.rowId);
-    if (row) {
+    const { rowId, columnKey } = e2.detail;
+    const alert = this.alertByRowId.get(rowId);
+    if (alert) {
       this.dispatchEvent(
-        new CustomEvent("ack-click", {
-          detail: { alert: row },
+        new CustomEvent("cell-click", {
+          detail: {
+            alert,
+            columnKey: columnKey.slice(TABLE_KEY_PREFIX.length),
+            rowId
+          },
           bubbles: false
         })
       );
@@ -86395,226 +86584,114 @@ let ObcAlertListDetailsExperimental = class extends i$4 {
   isExpanded(rowId) {
     return this.expansionOverrides.get(rowId) ?? this.defaultExpanded;
   }
-  get columns() {
-    if (this.small) {
-      const columns = [
-        {
-          label: "Status",
-          key: "status",
-          sortDirection: "desc",
-          sortable: true,
-          compareFunction: (_a, _b, aRow, bRow) => {
-            const aAlert = this.alertByRowId.get(aRow.id);
-            const bAlert = this.alertByRowId.get(bRow.id);
-            if (aAlert && bAlert) {
-              return comparePriorityAlerts(aAlert, bAlert);
-            }
-            return 0;
-          }
-        }
-      ];
-      if (this.showTime) {
-        columns.push({
-          label: "Activated",
-          key: "time"
-        });
+  compareRows(compare, aRow, bRow) {
+    const aAlert = this.alertByRowId.get(aRow.id);
+    const bAlert = this.alertByRowId.get(bRow.id);
+    return aAlert && bAlert ? compare(aAlert, bAlert) : 0;
+  }
+  get tableColumns() {
+    return this.columns.map((column) => {
+      const base = {
+        label: column.label,
+        key: TABLE_KEY_PREFIX + column.key,
+        dividerRight: column.dividerRight
+      };
+      if (isSlotColumn(column)) {
+        return {
+          ...base,
+          renderCell: (_value, row) => b`<slot
+              name=${alertListCellSlotName(column.key, row.id)}
+            ></slot>`
+        };
       }
-      columns.push({
-        label: "ACK-status",
-        key: "action"
-      });
-      return columns;
-    } else {
-      const columns = [
-        {
-          label: "Status",
-          key: "status",
-          sortDirection: "desc",
-          sortable: true,
-          compareFunction: (_a, _b, aRow, bRow) => {
-            const aAlert = this.alertByRowId.get(aRow.id);
-            const bAlert = this.alertByRowId.get(bRow.id);
-            if (aAlert && bAlert) {
-              return comparePriorityAlerts(aAlert, bAlert);
-            }
-            return 0;
-          }
-        },
-        {
-          label: "ACK-status",
-          key: "action",
-          dividerRight: true
-        }
-      ];
-      if (this.showTime) {
-        columns.push({
-          label: "Activated",
-          key: "time",
+      const { compare } = column;
+      if (compare) {
+        return {
+          ...base,
           sortable: true,
-          compareFunction: (_a, _b, aRow, bRow) => {
-            const aAlert = this.alertByRowId.get(aRow.id);
-            const bAlert = this.alertByRowId.get(bRow.id);
-            if (aAlert && bAlert) {
-              const aTime = new Date(aAlert.time);
-              const bTime = new Date(bAlert.time);
-              return aTime.getTime() - bTime.getTime();
-            }
-            return 0;
-          }
-        });
+          sortDirection: column.sortDirection,
+          compareFunction: (_a, _b, aRow, bRow) => this.compareRows(compare, aRow, bRow)
+        };
       }
-      columns.push({
-        label: "Tag ID",
-        key: "tagId",
-        sortable: true,
-        compareFunction: (a2, b2) => {
-          const aText = a2?.type === ObcTableCellType.Regular ? String(a2.text ?? "") : "";
-          const bText = b2?.type === ObcTableCellType.Regular ? String(b2.text ?? "") : "";
-          return aText.localeCompare(bText);
-        }
-      });
-      return columns;
-    }
+      return base;
+    });
   }
-  get metadata() {
-    return getAlertListModeData$1(this.selectedMode);
+  get gridColumns() {
+    const columnTracks = this.columns.map(
+      (column, index2) => column.width ?? (index2 === 0 ? "1fr" : "min-content")
+    );
+    return [...columnTracks, "min-content"].join(" ");
   }
-  get filteredAlerts() {
-    return this.alerts.filter(this.metadata.filter);
+  get metadata() {
+    return getFilterModeData(this.filterMode);
   }
   buildVisibleRows() {
-    const alerts = this.filteredAlerts;
-    const alertIds = new Set(alerts.map((alert) => alert.id));
-    const membersByGroupId = /* @__PURE__ */ new Map();
-    const roots = [];
-    for (const alert of alerts) {
-      const groupIds = (alert.memberOf ?? []).filter(
-        (groupId) => groupId !== alert.id && alertIds.has(groupId)
-      );
-      if (groupIds.length === 0) {
-        roots.push(alert);
-        continue;
-      }
-      for (const groupId of groupIds) {
-        const members = membersByGroupId.get(groupId) ?? [];
-        members.push(alert);
-        membersByGroupId.set(groupId, members);
-      }
+    const rows = walkAlertRows(
+      this.alerts.filter(this.metadata.filter),
+      (rowId) => this.isExpanded(rowId)
+    );
+    this.alertByRowId = new Map(rows.map((row) => [row.rowId, row.alert]));
+    const highlightedRowId = this.highlightedRowId();
+    return rows.map((row) => ({
+      ...this.buildRowCells(row.alert),
+      id: row.rowId,
+      parentId: row.parentRowId,
+      level: row.level,
+      expandable: row.expandable,
+      expanded: this.isExpanded(row.rowId),
+      selected: row.rowId === highlightedRowId
+    }));
+  }
+  /** The selected row, or the nearest visible group row when a collapsed group hides it. */
+  highlightedRowId() {
+    if (this.selectedRowId === void 0 || !this.allRowIds.has(this.selectedRowId)) {
+      return void 0;
     }
-    const reachable = /* @__PURE__ */ new Set();
-    const markReachable = (alert) => {
-      if (reachable.has(alert.id)) {
-        return;
-      }
-      reachable.add(alert.id);
-      for (const member of membersByGroupId.get(alert.id) ?? []) {
-        markReachable(member);
-      }
-    };
-    roots.forEach(markReachable);
-    for (const alert of alerts) {
-      if (!reachable.has(alert.id)) {
-        roots.push(alert);
-        markReachable(alert);
-      }
+    let rowId = this.selectedRowId;
+    while (rowId !== void 0 && !this.alertByRowId.has(rowId)) {
+      rowId = parentRowIdOf(rowId);
     }
-    const rows = [];
-    this.alertByRowId = /* @__PURE__ */ new Map();
-    const visit = (alert, level, parentRowId, ancestors) => {
-      const segment = encodeURIComponent(alert.id);
-      const rowId = parentRowId === void 0 ? segment : `${parentRowId}/${segment}`;
-      const members = membersByGroupId.get(alert.id) ?? [];
-      const expandableMembers = members.filter(
-        (member) => !ancestors.has(member.id)
-      );
-      const expanded = this.isExpanded(rowId);
-      this.alertByRowId.set(rowId, alert);
-      rows.push({
-        ...this.buildRowCells(alert),
-        id: rowId,
-        parentId: parentRowId,
-        level,
-        expandable: expandableMembers.length > 0,
-        expanded
-      });
-      if (!expanded) {
-        return;
-      }
-      const nextAncestors = new Set(ancestors).add(alert.id);
-      for (const member of expandableMembers) {
-        visit(member, level + 1, rowId, nextAncestors);
-      }
-    };
-    for (const alert of roots) {
-      visit(alert, 0, void 0, /* @__PURE__ */ new Set());
-    }
-    return rows;
+    return rowId;
   }
   buildRowCells(alert) {
-    let action = {
-      type: ObcTableCellType.Regular
-    };
-    if (!isAcknowledged(alert) && isActive(alert) && requiresAcknowledgement(alert.type)) {
-      if (alert.noAck) {
-        const icon = usesAlarmNoAckIcon(alert.type) ? b`<obi-alarm-noack-iec usecsscolor></obi-alarm-noack-iec>` : b`<obi-warning-noack-iec usecsscolor></obi-warning-noack-iec>`;
-        action = {
-          type: ObcTableCellType.Regular,
-          largeIcon: true,
-          icon,
-          align: "center"
-        };
-      } else {
-        action = {
-          type: ObcTableCellType.Button,
-          text: msg("ACK")
-        };
-      }
-    }
-    const status = {
-      type: ObcTableCellType.Regular,
-      largeIcon: true,
-      text: alert.text,
-      title: alert.source,
-      noWrap: true,
-      icon: b`<obc-alert-icon
-        .type=${alert.type}
-        .acknowledged=${isAcknowledged(alert)}
-        .active=${isActive(alert)}
-      ></obc-alert-icon>`
-    };
-    const time = this.showTime ? {
-      type: ObcTableCellType.Regular,
-      text: this.timeFormatter(alert.time),
-      align: "center",
-      neutral: true
-    } : void 0;
-    const tagId = this.small ? void 0 : {
-      type: ObcTableCellType.Regular,
-      text: "#" + alert.id,
-      align: "right"
-    };
-    return {
-      status,
-      time,
-      action,
-      tagId
-    };
+    const cells = {};
+    for (const column of this.columns) {
+      cells[TABLE_KEY_PREFIX + column.key] = isSlotColumn(column) ? (
+        // obc-table skips renderCell for an undefined value.
+        { type: ObcTableCellType.Regular }
+      ) : column.cell(alert);
+    }
+    return cells;
+  }
+  slotNames(rows) {
+    const slotColumns = this.columns.filter(isSlotColumn);
+    return rows.flatMap(
+      (row) => slotColumns.map((column) => alertListCellSlotName(column.key, row.id))
+    );
   }
   render() {
     const selectedList = this.metadata;
     const data = this.buildVisibleRows();
     return b`
-      <div class="wrapper ${this.small ? "small" : ""}">
+      <div class="wrapper">
         ${data.length > 0 ? b` <obc-table
                 class="alert-list"
+                style="--alert-list-grid-columns: ${this.gridColumns}"
                 .data=${data}
-                .columns=${this.columns}
+                .columns=${this.tableColumns}
                 .striped=${true}
-                .showHeader=${!this.small}
+                .showHeader=${this.showHeader}
                 @row-click=${this.onRowClick}
                 @cell-button-click=${this.onCellButtonClick}
                 @expand-toggle=${this.onExpandToggle}
-              ></obc-table>
+              >
+                ${c(
+      this.slotNames(data),
+      (name) => name,
+      // Forwards the host's slot into the one obc-table renders in the cell.
+      (name) => b`<slot name=${name} slot=${name}></slot>`
+    )}
+              </obc-table>
               <div class="spacer"></div>` : b` <div class="empty-list">
               <div class="icon">${selectedList.emptyIcon}</div>
               <div class="empty-title">${selectedList.emptyTitle}</div>
@@ -86626,22 +86703,22 @@ let ObcAlertListDetailsExperimental = class extends i$4 {
 ObcAlertListDetailsExperimental.styles = r$7(compentStyle$W);
 __decorateClass$v3([
   n$3({ type: String })
-], ObcAlertListDetailsExperimental.prototype, "selectedMode", 2);
+], ObcAlertListDetailsExperimental.prototype, "filterMode", 2);
 __decorateClass$v3([
   n$3({ type: Array })
 ], ObcAlertListDetailsExperimental.prototype, "alerts", 2);
 __decorateClass$v3([
-  n$3({ type: Boolean })
-], ObcAlertListDetailsExperimental.prototype, "showTime", 2);
-__decorateClass$v3([
-  n$3({ attribute: false })
-], ObcAlertListDetailsExperimental.prototype, "timeFormatter", 2);
+  n$3({ type: Array, attribute: false })
+], ObcAlertListDetailsExperimental.prototype, "columns", 2);
 __decorateClass$v3([
-  n$3({ type: Boolean })
-], ObcAlertListDetailsExperimental.prototype, "small", 2);
+  n$3({ type: Boolean, attribute: false })
+], ObcAlertListDetailsExperimental.prototype, "showHeader", 2);
 __decorateClass$v3([
   n$3({ type: Boolean, attribute: false })
 ], ObcAlertListDetailsExperimental.prototype, "defaultExpanded", 2);
+__decorateClass$v3([
+  n$3({ type: String })
+], ObcAlertListDetailsExperimental.prototype, "selectedRowId", 2);
 __decorateClass$v3([
   e$3("obc-table")
 ], ObcAlertListDetailsExperimental.prototype, "alertList", 2);
@@ -93512,6 +93589,39 @@ const compentStyle$K = i$7`* {
     "ss04" on;
     }
 
+.wrapper.size-large .user-label {
+      font-family: var(--global-typography-font-family);
+      font-weight: var(--global-typography-ui-body-font-weight);
+      font-size: var(--global-typography-ui-body-font-size);
+      line-height: var(--global-typography-ui-body-line-height);
+      font-feature-settings:
+    "liga" off,
+    "clig" off,
+    "ss04" on;
+    }
+
+.wrapper.size-large .user-sublabel {
+      font-family: var(--global-typography-font-family);
+      font-weight: var(--global-typography-ui-body-font-weight);
+      font-size: var(--global-typography-ui-body-font-size);
+      line-height: var(--global-typography-ui-body-line-height);
+      font-feature-settings:
+    "liga" off,
+    "clig" off,
+    "ss04" on;
+    }
+
+.wrapper.size-large.has-sublabel .user-label {
+      font-family: var(--global-typography-font-family);
+      font-weight: var(--global-typography-ui-body-active-font-weight);
+      font-size: var(--global-typography-ui-body-active-font-size);
+      line-height: var(--global-typography-ui-body-active-line-height);
+      font-feature-settings:
+    "liga" off,
+    "clig" off,
+    "ss04" on;
+    }
+
 .wrapper.size-large.style-selected .user-initials {
       font-family: var(--global-typography-font-family);
       font-weight: var(--font-weight-bold);
@@ -93524,6 +93634,17 @@ const compentStyle$K = i$7`* {
     "ss04" on;
     }
 
+.wrapper.size-large.style-selected .user-label {
+      font-family: var(--global-typography-font-family);
+      font-weight: var(--global-typography-ui-body-active-font-weight);
+      font-size: var(--global-typography-ui-body-active-font-size);
+      line-height: var(--global-typography-ui-body-active-line-height);
+      font-feature-settings:
+    "liga" off,
+    "clig" off,
+    "ss04" on;
+    }
+
 .wrapper.size-large.state-static {
       width: var(--ui-components-user-button-visual-size-enhanced);
       height: var(--ui-components-user-button-visual-size-enhanced);
@@ -93545,7 +93666,30 @@ const compentStyle$K = i$7`* {
     color: var(--element-active-color);
   }
 
-.wrapper:disabled .user-label {
+.wrapper .user-sublabel {
+    font-family: var(--global-typography-font-family);
+    font-weight: var(--global-typography-ui-label-font-weight);
+    font-size: var(--global-typography-ui-label-font-size);
+    line-height: var(--global-typography-ui-label-line-height);
+    font-feature-settings:
+    "liga" off,
+    "clig" off,
+    "ss04" on;
+    color: var(--element-active-color);
+  }
+
+.wrapper.has-sublabel .user-label {
+    font-family: var(--global-typography-font-family);
+    font-weight: var(--global-typography-ui-label-active-font-weight);
+    font-size: var(--global-typography-ui-label-active-font-size);
+    line-height: var(--global-typography-ui-label-active-line-height);
+    font-feature-settings:
+    "liga" off,
+    "clig" off,
+    "ss04" on;
+  }
+
+.wrapper:disabled .user-label,.wrapper:disabled .user-sublabel {
     color: var(--element-disabled-color);
   }
 
@@ -93953,15 +94097,21 @@ let ObcUserButton = class extends i$4 {
       "mode-icon": this.shouldShowIcon,
       "mode-initials": !this.shouldShowIcon,
       "state-static": this.static,
-      [`size-${this.size}`]: true
+      [`size-${this.size}`]: true,
+      "has-sublabel": Boolean(this.sublabel) && !this.static
     };
     const tag = this.static ? i$2`div` : i$2`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 ? u$2`<span class="user-label" part="label">${this.label}</span>` : A;
+    const sublabel = this.sublabel && !this.static ? u$2`<span class="user-sublabel" part="sublabel">
+            ${this.sublabel}
+          </span>` : A;
     return u$2`
         <${tag}
           class=${e$1(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">
@@ -93978,7 +94128,7 @@ let ObcUserButton = class extends i$4 {
                     </span>
                   `}
           </div>
-          ${label}
+          ${label} ${sublabel}
         </div>
         </${tag}>
       `;
@@ -94006,6 +94156,9 @@ __decorateClass$uA([
 __decorateClass$uA([
   n$3({ type: String })
 ], ObcUserButton.prototype, "label", 2);
+__decorateClass$uA([
+  n$3({ type: String })
+], ObcUserButton.prototype, "sublabel", 2);
 ObcUserButton = __decorateClass$uA([
   customElement("obc-user-button")
 ], ObcUserButton);
@@ -124095,6 +124248,21 @@ const componentStyle$l = i$7`* {
       color: var(--element-neutral-color);
     }
 
+:is(.card .user-profile) obc-user-button:not(.has-role)::part(label) {
+      font-weight: var(--font-weight-regular);
+    }
+
+:is(.card .user-profile) obc-user-button::part(sublabel) {
+      font-family: var(--global-typography-font-family);
+      font-weight: var(--global-typography-ui-body-font-weight);
+      font-size: var(--global-typography-ui-body-font-size);
+      line-height: var(--global-typography-ui-body-line-height);
+      font-feature-settings:
+    "liga" off,
+    "clig" off,
+    "ss04" on;
+    }
+
 .card .user-primary {
     padding: 0;
   }
@@ -124186,6 +124354,7 @@ let ObcUserMenu = class extends i$4 {
     this.passwordError = "";
     this.recentUsers = [];
     this.signedInActions = [];
+    this.showUseAnotherAccount = true;
   }
   get showRecentUsers() {
     return this.hasRecentlySignedIn && this.recentUsers.length > 0;
@@ -124226,6 +124395,7 @@ let ObcUserMenu = class extends i$4 {
               .size=${size}
               .initials=${user.initials}
               .label=${user.label}
+              .sublabel=${isLarge ? user.role : void 0}
               @click=${() => this.handleRecentUserClick(user)}
             ></obc-user-button>
           `
@@ -124238,6 +124408,7 @@ let ObcUserMenu = class extends i$4 {
       return A;
     }
     const userButtonSize = size === "large" ? Size.large : Size.regular;
+    const role = size === "large" ? this.userRole : void 0;
     return b`
       <div
         class=${e$1({
@@ -124248,13 +124419,15 @@ let ObcUserMenu = class extends i$4 {
         <obc-user-button
           class=${e$1({
       "user-avatar": true,
-      [`size-${size}`]: true
+      [`size-${size}`]: true,
+      "has-role": Boolean(role)
     })}
           .variant=${Variant.initials}
           .styleType=${StyleType.normal}
           .size=${userButtonSize}
           .initials=${this.userInitials ?? ""}
           .label=${this.userLabel ?? ""}
+          .sublabel=${role}
         ></obc-user-button>
       </div>
     `;
@@ -124286,7 +124459,7 @@ let ObcUserMenu = class extends i$4 {
   handleRecentUserClick(user) {
     this.dispatchEvent(
       new CustomEvent("recent-user-click", {
-        detail: { initials: user.initials, label: user.label }
+        detail: { ...user }
       })
     );
   }
@@ -124334,6 +124507,9 @@ let ObcUserMenu = class extends i$4 {
   handleSignOutClick() {
     this.dispatchEvent(new CustomEvent("sign-out-click"));
   }
+  handleUseAnotherAccountClick() {
+    this.dispatchEvent(new CustomEvent("use-another-account-click"));
+  }
   renderSignIn() {
     return b`
       <div class="title-container">
@@ -124454,6 +124630,15 @@ let ObcUserMenu = class extends i$4 {
           >
             ${msg("Sign in")}
           </obc-button>
+          ${this.showUseAnotherAccount ? b`
+                <obc-button
+                  variant=${ButtonVariant.normal}
+                  fullWidth
+                  @click=${this.handleUseAnotherAccountClick}
+                >
+                  ${msg("Use another account")}
+                </obc-button>
+              ` : A}
         </div>
       </div>
       ${this.showRecentUsers ? b`
@@ -124496,6 +124681,15 @@ let ObcUserMenu = class extends i$4 {
         >
           ${msg("Sign in")}
         </obc-button>
+        ${this.showUseAnotherAccount ? b`
+              <obc-button
+                variant=${ButtonVariant.normal}
+                fullWidth
+                @click=${this.handleUseAnotherAccountClick}
+              >
+                ${msg("Use another account")}
+              </obc-button>
+            ` : A}
       </div>
       ${this.showRecentUsers ? b`
             <div class="divider" aria-hidden="true"></div>
@@ -124674,6 +124868,9 @@ __decorateClass$sQ([
 __decorateClass$sQ([
   n$3({ type: String })
 ], ObcUserMenu.prototype, "userLabel", 2);
+__decorateClass$sQ([
+  n$3({ type: String })
+], ObcUserMenu.prototype, "userRole", 2);
 __decorateClass$sQ([
   n$3({ type: Array, attribute: false })
 ], ObcUserMenu.prototype, "recentUsers", 2);
@@ -124683,6 +124880,9 @@ __decorateClass$sQ([
 __decorateClass$sQ([
   n$3({ type: String })
 ], ObcUserMenu.prototype, "primaryActionId", 2);
+__decorateClass$sQ([
+  n$3({ type: Boolean, attribute: false })
+], ObcUserMenu.prototype, "showUseAnotherAccount", 2);
 ObcUserMenu = __decorateClass$sQ([
   customElement("obc-user-menu"),
   localized()