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

package/src/components/table/table.ts

@@ -197,6 +197,9 @@ export type ObcTableExpandToggleEvent = CustomEvent<{
   expanded: boolean;
 }>;
 
+const INTERACTIVE_SELECTOR =
+  'button, a[href], input, select, textarea, [role="button"], [role="link"], [role="checkbox"]';
+
 function cssPart(value: ObcTableCellData, subpart: string): string | undefined {
   if (value.cssPart) {
     return `${value.cssPart} ${subpart}`;
@@ -397,7 +400,16 @@ export class ObcTable extends LitElement {
     }
   }
 
-  private _handleRowClick(row: ObcTableRow) {
+  private _handleRowClick(event: MouseEvent, row: ObcTableRow) {
+    const rowElement = event.currentTarget;
+    for (const node of event.composedPath()) {
+      if (node === rowElement) break;
+      // Stopping propagation in the cell instead would break listeners
+      // delegated to the document, such as Svelte's.
+      if (node instanceof Element && node.matches(INTERACTIVE_SELECTOR)) {
+        return;
+      }
+    }
     this.dispatchEvent(
       new CustomEvent('row-click', {detail: {row}}) as ObcTableRowClickEvent
     );
@@ -883,7 +895,8 @@ export class ObcTable extends LitElement {
                     'selected-with-next': isRowSelected && hasSelectedNextRow,
                     striped: isStriped,
                   })}
-                  @click=${() => this._handleRowClick(row)}
+                  @click=${(event: MouseEvent) =>
+                    this._handleRowClick(event, row)}
                   @keydown=${this._handleRowKeyDown}
                   data-row-id=${row.id}
                   style="grid-row: ${rowIndex + 1}"

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,

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

@@ -39,8 +39,11 @@ export enum ObcUserMenuSize {
 export type ObcUserMenuUser = {
   initials: string;
   label: string;
+  role?: string;
 };
 
+export type ObcUserMenuRecentUserClickEvent = CustomEvent<ObcUserMenuUser>;
+
 export type ObcUserMenuSignedInAction = {
   id: string;
   label: string;
@@ -80,8 +83,13 @@ export type ObcUserMenuSignedInAction = {
  * - `passwordError` (`string`): Error message for the password field.
  * - `userInitials` (`string`): Initials for the primary user profile.
  * - `userLabel` (`string`): Label for the primary user profile.
+ * - `userRole` (`string`): Role shown under the primary user's label. Omit it
+ *   to show no role; only the regular size draws one.
  * - `recentUsers` (`ObcUserMenuUser[]`): List of recent users shown in the
- *   "Recently signed in" section. Empty renders no section.
+ *   "Recently signed in" section. Empty renders no section. Each user may
+ *   carry its own `role`.
+ * - `showUseAnotherAccount` (`boolean`): Toggles the "Use another account"
+ *   button in the `user-sign-in` layouts, both sizes. Defaults to `true`.
  * - `signedInActions` (`ObcUserMenuSignedInAction[]`): Actions shown in the
  *   signed-in navigation list. Empty renders no actions.
  * - `primaryActionId` (`string`): Id of the action promoted to a button in the
@@ -90,6 +98,9 @@ export type ObcUserMenuSignedInAction = {
  * ### Events
  * - `sign-in-click` – Fired when a sign-in button is clicked.
  * - `sign-out-click` – Fired when the sign-out button is clicked.
+ * - `use-another-account-click` – Fired when the "Use another account" button
+ *   is clicked. The menu does not change its own type; set it to `sign-in` in
+ *   the handler to show the full form.
  * - `signed-in-action-click` – Fired when a signed-in action is clicked.
  * - `recent-user-click` – Fired when a recent user button is clicked.
  *
@@ -124,6 +135,8 @@ export type ObcUserMenuSignedInAction = {
  * @availableWhen userInitials type!=signIn
  * @property userLabel - Label for the primary user profile.
  * @availableWhen userLabel type!=signIn
+ * @property userRole - Role shown under the primary user's label; omit it to show no role.
+ * @availableWhen userRole type!=signIn && size==regular
  * @property recentUsers - Recent users for the "Recently signed in" section.
  * @property signedInActions - Actions shown in the signed-in navigation list.
  * @availableWhen signedInActions type==signedIn
@@ -133,11 +146,14 @@ export type ObcUserMenuSignedInAction = {
  * @availableWhen showPassword type in [signIn, userSignIn]
  * @property primaryActionId - Id of the action promoted to a button in the small signed-in layout.
  * @availableWhen primaryActionId type==signedIn && size==small
+ * @property showUseAnotherAccount - Controls the visibility of the "Use another account" button.
+ * @availableWhen showUseAnotherAccount type==userSignIn
  * @slot signed-in-action-icon-<id> - Optional icon for a signed-in action, one per action; `<id>` is the normalized action id (shown in the `signed-in` type).
  * @fires {CustomEvent<{username?: string, password?: string}>} sign-in-click - Fired when a sign-in button is clicked.
  * @fires {CustomEvent<void>} sign-out-click - Fired when the sign-out button is clicked.
+ * @fires {CustomEvent<void>} use-another-account-click - Fired when the "Use another account" button is clicked.
  * @fires {CustomEvent<{id: string, label: string}>} signed-in-action-click - Fired when a signed-in action is clicked.
- * @fires {CustomEvent<{initials: string, label: string}>} recent-user-click - Fired when a recent user button is clicked.
+ * @fires {ObcUserMenuRecentUserClickEvent} recent-user-click - Fired when a recent user button is clicked, carrying that user's entry.
  * @stable
  */
 @customElement('obc-user-menu')
@@ -168,6 +184,8 @@ export class ObcUserMenu extends LitElement {
 
   @property({type: String}) userLabel?: string;
 
+  @property({type: String}) userRole?: string;
+
   @property({type: Array, attribute: false})
   recentUsers: ObcUserMenuUser[] = [];
 
@@ -176,6 +194,9 @@ export class ObcUserMenu extends LitElement {
 
   @property({type: String}) primaryActionId?: string;
 
+  @property({type: Boolean, attribute: false})
+  showUseAnotherAccount = true;
+
   private get showRecentUsers() {
     return this.hasRecentlySignedIn && this.recentUsers.length > 0;
   }
@@ -223,6 +244,7 @@ export class ObcUserMenu extends LitElement {
               .size=${size}
               .initials=${user.initials}
               .label=${user.label}
+              .sublabel=${isLarge ? user.role : undefined}
               @click=${() => this.handleRecentUserClick(user)}
             ></obc-user-button>
           `
@@ -239,6 +261,7 @@ export class ObcUserMenu extends LitElement {
       return nothing;
     }
     const userButtonSize = size === 'large' ? Size.large : Size.regular;
+    const role = size === 'large' ? this.userRole : undefined;
     return html`
       <div
         class=${classMap({
@@ -250,12 +273,14 @@ export class ObcUserMenu extends LitElement {
           class=${classMap({
             'user-avatar': 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>
     `;
@@ -293,8 +318,8 @@ export class ObcUserMenu extends LitElement {
 
   private handleRecentUserClick(user: ObcUserMenuUser) {
     this.dispatchEvent(
-      new CustomEvent('recent-user-click', {
-        detail: {initials: user.initials, label: user.label},
+      new CustomEvent<ObcUserMenuUser>('recent-user-click', {
+        detail: {...user},
       })
     );
   }
@@ -352,6 +377,10 @@ export class ObcUserMenu extends LitElement {
     this.dispatchEvent(new CustomEvent('sign-out-click'));
   }
 
+  private handleUseAnotherAccountClick() {
+    this.dispatchEvent(new CustomEvent('use-another-account-click'));
+  }
+
   private renderSignIn() {
     return html`
       <div class="title-container">
@@ -488,6 +517,17 @@ export class ObcUserMenu extends LitElement {
           >
             ${msg('Sign in')}
           </obc-button>
+          ${this.showUseAnotherAccount
+            ? html`
+                <obc-button
+                  variant=${ButtonVariant.normal}
+                  fullWidth
+                  @click=${this.handleUseAnotherAccountClick}
+                >
+                  ${msg('Use another account')}
+                </obc-button>
+              `
+            : nothing}
         </div>
       </div>
       ${this.showRecentUsers
@@ -535,6 +575,17 @@ export class ObcUserMenu extends LitElement {
         >
           ${msg('Sign in')}
         </obc-button>
+        ${this.showUseAnotherAccount
+          ? html`
+              <obc-button
+                variant=${ButtonVariant.normal}
+                fullWidth
+                @click=${this.handleUseAnotherAccountClick}
+              >
+                ${msg('Use another account')}
+              </obc-button>
+            `
+          : nothing}
       </div>
       ${this.showRecentUsers
         ? html`

package/src/generated/locales/es-419.ts

@@ -77,6 +77,7 @@
 'sf6e1665c7022a1f8': `Password`,
 's981f6febad4df84a': `Recently signed in`,
 'sbce70cbdb856635e': `Recent`,
+'s8506875a9d95f22c': `Use another account`,
 's7cfe12cd14df9950': `Sign out`,
 's5be3c6d61cd9182f': `Notifications`,
 's744d993d03f29851': `Screen`,

package/src/generated/locales/fi-FI.ts

@@ -87,6 +87,7 @@
 'sf6e1665c7022a1f8': `Password`,
 's981f6febad4df84a': `Recently signed in`,
 'sbce70cbdb856635e': `Recent`,
+'s8506875a9d95f22c': `Use another account`,
 's7cfe12cd14df9950': `Sign out`,
 's5be3c6d61cd9182f': `Notifications`,
 's744d993d03f29851': `Screen`,