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

package/dist/components/user-button/user-button.css.js

@@ -58,6 +58,39 @@ const compentStyle = css`* {
     "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);
@@ -70,6 +103,17 @@ const compentStyle = css`* {
     "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);
@@ -91,7 +135,30 @@ const compentStyle = css`* {
     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);
   }
 

package/dist/components/user-button/user-button.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"user-button.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"user-button.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/user-button/user-button.d.ts

@@ -41,6 +41,8 @@ export declare 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.
@@ -62,7 +64,8 @@ export declare 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:
@@ -79,6 +82,8 @@ export declare 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
  */
@@ -117,6 +122,12 @@ export declare class ObcUserButton extends LitElement {
      * Available when `static==false`.
      */
     label?: string;
+    /**
+     * Optional second line under the label, for a secondary detail such as a role (not shown in static mode).
+     *
+     * Available when `static==false`.
+     */
+    sublabel?: string;
     private get formattedInitials();
     private get shouldShowIcon();
     render(): import('lit-html').TemplateResult;

package/dist/components/user-button/user-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"user-button.d.ts","sourceRoot":"","sources":["../../../src/components/user-button/user-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAqB,MAAM,KAAK,CAAC;AAInD,OAAO,0BAA0B,CAAC;AAIlC,oBAAY,SAAS;IACnB,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,QAAQ,aAAa;CACtB;AAED,oBAAY,IAAI;IACd,OAAO,YAAY;IACnB,KAAK,UAAU;CAChB;AAED;;;;GAIG;AACH,oBAAY,OAAO;IACjB,IAAI,SAAS;IACb,QAAQ,aAAa;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+DG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C;;;;OAIG;IACuB,OAAO,EAAE,OAAO,CAAgB;IAChC,IAAI,EAAE,IAAI,CAAgB;IAEpD;;;;;OAKG;IACuB,SAAS,EAAE,SAAS,CAAkB;IAErC,MAAM,EAAE,OAAO,CAAS;IAExB,QAAQ,EAAE,OAAO,CAAS;IAErD;;;;OAIG;IACuB,QAAQ,EAAE,MAAM,CAAM;IAEtB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEzC,OAAO,KAAK,iBAAiB,GAgB5B;IAED,OAAO,KAAK,cAAc,GAEzB;IAEQ,MAAM;IAsDf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}
+{"version":3,"file":"user-button.d.ts","sourceRoot":"","sources":["../../../src/components/user-button/user-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAqB,MAAM,KAAK,CAAC;AAInD,OAAO,0BAA0B,CAAC;AAIlC,oBAAY,SAAS;IACnB,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,QAAQ,aAAa;CACtB;AAED,oBAAY,IAAI;IACd,OAAO,YAAY;IACnB,KAAK,UAAU;CAChB;AAED;;;;GAIG;AACH,oBAAY,OAAO;IACjB,IAAI,SAAS;IACb,QAAQ,aAAa;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoEG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C;;;;OAIG;IACuB,OAAO,EAAE,OAAO,CAAgB;IAChC,IAAI,EAAE,IAAI,CAAgB;IAEpD;;;;;OAKG;IACuB,SAAS,EAAE,SAAS,CAAkB;IAErC,MAAM,EAAE,OAAO,CAAS;IAExB,QAAQ,EAAE,OAAO,CAAS;IAErD;;;;OAIG;IACuB,QAAQ,EAAE,MAAM,CAAM;IAEtB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAE5C,OAAO,KAAK,iBAAiB,GAgB5B;IAED,OAAO,KAAK,cAAc,GAEzB;IAEQ,MAAM;IAkEf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}

package/dist/components/user-button/user-button.js

@@ -65,15 +65,21 @@ let ObcUserButton = class extends LitElement {
       "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 ? 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">
@@ -90,7 +96,7 @@ let ObcUserButton = class extends LitElement {
                     </span>
                   `}
           </div>
-          ${label}
+          ${label} ${sublabel}
         </div>
         </${tag}>
       `;
@@ -118,6 +124,9 @@ __decorateClass([
 __decorateClass([
   property({ type: String })
 ], ObcUserButton.prototype, "label", 2);
+__decorateClass([
+  property({ type: String })
+], ObcUserButton.prototype, "sublabel", 2);
 ObcUserButton = __decorateClass([
   customElement("obc-user-button")
 ], ObcUserButton);

package/dist/components/user-button/user-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"user-button.js","sources":["../../../src/components/user-button/user-button.ts"],"sourcesContent":["import {LitElement, nothing, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport compentStyle from './user-button.css?inline';\nimport '../../icons/icon-user.js';\nimport {html, literal} from 'lit/static-html.js';\nimport {customElement} from '../../decorator.js';\n\nexport enum StyleType {\n  flat = 'flat',\n  normal = 'normal',\n  selected = 'selected',\n}\n\nexport enum Size {\n  regular = 'regular',\n  large = 'large',\n}\n\n/**\n * Defines the visual content of the user button.\n * - `icon`: Shows a user icon (default).\n * - `initials`: Shows up to two uppercase initials.\n */\nexport enum Variant {\n  icon = 'icon',\n  initials = 'initials',\n}\n\n/**\n * `obc-user-button` – A compact, circular button for representing a user via icon or initials.\n *\n * Displays either a user icon or user initials inside a circular button, with optional label text. Commonly used for user profile access, account switching, or avatar actions in toolbars and navigation. The button supports multiple visual styles and can be rendered as a static (non-interactive) element.\n *\n * Appears as a button by default, but switches to a non-interactive div when the `static` property is set.\n *\n * ## Features\n * - **Variants:**\n *   - `icon`: Shows a user icon (default, fallback if initials are invalid or missing).\n *   - `initials`: Shows up to two uppercase initials (falls back to icon if input is empty or longer than two characters).\n * - **Style Types:**\n *   - `flat`: Minimal, flat appearance (default).\n *   - `normal`: Outlined with background and border.\n *   - `selected`: Highlighted to indicate selection or active state.\n * - **Static Mode:**\n *   - Set `static` to render as a non-interactive element for use in read-only or decorative contexts.\n * - **Disabled State:**\n *   - Set `disabled` to visually and functionally disable the button.\n * - **Custom Icon Slot:**\n *   - Provide a custom icon via the `icon` slot when using the `icon` variant.\n * - **Label Support:**\n *   - Optional `label` property displays text next to the button (not shown in static mode).\n *\n * ## Usage Guidelines\n * 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.\n * - Use the `icon` variant for generic user representation, or when no initials are available.\n * - Use the `initials` variant to personalize the button with user initials (max two characters).\n * - Use `styleType=\"selected\"` to indicate the current user or active selection.\n * - Use `static` for non-interactive displays, such as in lists or summaries.\n * - Avoid using for critical actions or as a replacement for full user profile cards.\n *\n * **TODO(designer):** Confirm if there are recommended scenarios for when to use `flat`, `normal`, or `selected` style types, and if there are accessibility guidelines for initials fallback.\n *\n * ## Slots\n *\n * | Slot Name | Renders When... | Purpose |\n * |-----------|-----------------|---------|\n * | `icon`    | `variant=\"icon\"` | Custom icon to display instead of the default user icon. |\n *\n * ## Best Practices & Constraints\n * - Initials longer than two characters are truncated and a warning is logged.\n * - If `initials` is empty or invalid, the button falls back to the user icon.\n * - The `label` is only visible when the button is interactive (not static).\n * - For accessibility, the button uses `aria-label` based on initials or a default.\n * - Only use the `static` property for non-interactive contexts; otherwise, the button is clickable.\n *\n * ## Example:\n * ```html\n * <obc-user-button variant=\"initials\" initials=\"JD\" styleType=\"normal\" label=\"John Doe\"></obc-user-button>\n * <obc-user-button variant=\"icon\" styleType=\"flat\">\n *   <obi-placeholder slot=\"icon\"></obi-placeholder>\n * </obc-user-button>\n * ```\n *\n * @property static - If true, renders the button as a static (non-interactive) element using a `<div>`.\n *   Use for decorative or read-only contexts where user interaction is not required.\n * @property disabled - Disables the button, preventing user interaction and applying a disabled style.\n * @availableWhen disabled static==false\n * @property label - Optional label text to display next to the button (not shown in static mode).\n * @availableWhen label static==false\n * @slot icon - Custom icon for the user button (used only in `icon` variant; defaults to <obi-user> if not provided)\n * @stable\n */\n@customElement('obc-user-button')\nexport class ObcUserButton extends LitElement {\n  /**\n   * Controls whether the button displays a user icon (`icon`) or user initials (`initials`).\n   * - `icon`: Shows a user icon (default, or if initials are invalid).\n   * - `initials`: Shows up to two uppercase initials (falls back to icon if empty or longer than two characters).\n   */\n  @property({type: String}) variant: Variant = Variant.icon;\n  @property({type: String}) size: Size = Size.regular;\n\n  /**\n   * Sets the visual style of the button.\n   * - `flat`: Minimal, flat appearance (default).\n   * - `normal`: Outlined with background and border.\n   * - `selected`: Highlighted to indicate selection or active state.\n   */\n  @property({type: String}) styleType: StyleType = StyleType.flat;\n\n  @property({type: Boolean}) static: boolean = false;\n\n  @property({type: Boolean}) disabled: boolean = false;\n\n  /**\n   * The initials to display when `variant=\"initials\"`.\n   * - Only the first two non-whitespace characters are used and converted to uppercase.\n   * - If empty or longer than two characters, falls back to the user icon.\n   */\n  @property({type: String}) initials: string = '';\n\n  @property({type: String}) label?: string;\n\n  private get formattedInitials() {\n    if (!this.initials) return '';\n\n    // Remove whitespace and convert to uppercase\n    const clean = this.initials.replace(/\\s+/g, '').toUpperCase();\n\n    // If longer than 2 characters, truncate to first 2\n    const maxInitialsLength = this.size === Size.large ? 3 : 2;\n    if (clean.length > maxInitialsLength) {\n      console.warn(\n        `Initials \"${this.initials}\" are longer than ${maxInitialsLength} characters.`\n      );\n      return clean.slice(0, maxInitialsLength);\n    }\n\n    return clean;\n  }\n\n  private get shouldShowIcon() {\n    return this.variant === Variant.icon;\n  }\n\n  override render() {\n    const styleType =\n      this.size === Size.large && this.styleType === StyleType.flat\n        ? StyleType.normal\n        : this.styleType;\n    const wrapperClasses = {\n      wrapper: true,\n      'wrapper-static': this.static,\n      [`style-${styleType}`]: true,\n      'mode-icon': this.shouldShowIcon,\n      'mode-initials': !this.shouldShowIcon,\n      'state-static': this.static,\n      [`size-${this.size}`]: true,\n    };\n\n    // Use button element when clickable, div when static\n    const tag = this.static ? literal`div` : literal`button`;\n\n    const label =\n      this.label && !this.static\n        ? html`<span class=\"user-label\" part=\"label\">${this.label}</span>`\n        : nothing;\n\n    return html`\n        <${tag}\n          class=${classMap(wrapperClasses)}\n          ?disabled=${this.disabled}\n          aria-label=${this.initials || 'User button'}\n        >\n        <div class=\"content-container\" part=\"content-container\">\n          <div class=\"user-button-circle\">\n            ${\n              this.shouldShowIcon\n                ? html`\n                    <div class=\"icon-container\">\n                      <slot name=\"icon\">\n                        <!-- Fallback to default icon if no slot content -->\n                        <obi-user></obi-user>\n                      </slot>\n                    </div>\n                  `\n                : html`\n                    <span class=\"user-initials\">\n                      ${this.formattedInitials}\n                    </span>\n                  `\n            }\n          </div>\n          ${label}\n        </div>\n        </${tag}>\n      `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-user-button': ObcUserButton;\n  }\n}\n"],"names":["StyleType","Size","Variant"],"mappings":";;;;;;;;;;;;;;;;;AAQO,IAAK,8BAAAA,eAAL;AACLA,aAAA,MAAA,IAAO;AACPA,aAAA,QAAA,IAAS;AACTA,aAAA,UAAA,IAAW;AAHD,SAAAA;AAAA,GAAA,aAAA,CAAA,CAAA;AAML,IAAK,yBAAAC,UAAL;AACLA,QAAA,SAAA,IAAU;AACVA,QAAA,OAAA,IAAQ;AAFE,SAAAA;AAAA,GAAA,QAAA,CAAA,CAAA;AAUL,IAAK,4BAAAC,aAAL;AACLA,WAAA,MAAA,IAAO;AACPA,WAAA,UAAA,IAAW;AAFD,SAAAA;AAAA,GAAA,WAAA,CAAA,CAAA;AAsEL,IAAM,gBAAN,cAA4B,WAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA;AAMqB,SAAA,UAAmB;AACnB,SAAA,OAAa;AAQb,SAAA,YAAuB;AAEtB,SAAA,SAAkB;AAElB,SAAA,WAAoB;AAOrB,SAAA,WAAmB;AAAA,EAAA;AAAA,EAI7C,IAAY,oBAAoB;AAC9B,QAAI,CAAC,KAAK,SAAU,QAAO;AAG3B,UAAM,QAAQ,KAAK,SAAS,QAAQ,QAAQ,EAAE,EAAE,YAAA;AAGhD,UAAM,oBAAoB,KAAK,SAAS,UAAa,IAAI;AACzD,QAAI,MAAM,SAAS,mBAAmB;AACpC,cAAQ;AAAA,QACN,aAAa,KAAK,QAAQ,qBAAqB,iBAAiB;AAAA,MAAA;AAElE,aAAO,MAAM,MAAM,GAAG,iBAAiB;AAAA,IACzC;AAEA,WAAO;AAAA,EACT;AAAA,EAEA,IAAY,iBAAiB;AAC3B,WAAO,KAAK,YAAY;AAAA,EAC1B;AAAA,EAES,SAAS;AAChB,UAAM,YACJ,KAAK,SAAS,WAAc,KAAK,cAAc,SAC3C,WACA,KAAK;AACX,UAAM,iBAAiB;AAAA,MACrB,SAAS;AAAA,MACT,kBAAkB,KAAK;AAAA,MACvB,CAAC,SAAS,SAAS,EAAE,GAAG;AAAA,MACxB,aAAa,KAAK;AAAA,MAClB,iBAAiB,CAAC,KAAK;AAAA,MACvB,gBAAgB,KAAK;AAAA,MACrB,CAAC,QAAQ,KAAK,IAAI,EAAE,GAAG;AAAA,IAAA;AAIzB,UAAM,MAAM,KAAK,SAAS,eAAe;AAEzC,UAAM,QACJ,KAAK,SAAS,CAAC,KAAK,SAChB,6CAA6C,KAAK,KAAK,YACvD;AAEN,WAAO;AAAA,WACA,GAAG;AAAA,kBACI,SAAS,cAAc,CAAC;AAAA,sBACpB,KAAK,QAAQ;AAAA,uBACZ,KAAK,YAAY,aAAa;AAAA;AAAA;AAAA;AAAA,cAKvC,KAAK,iBACD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAQA;AAAA;AAAA,wBAEM,KAAK,iBAAiB;AAAA;AAAA,mBAGlC;AAAA;AAAA,YAEA,KAAK;AAAA;AAAA,YAEL,GAAG;AAAA;AAAA,EAEb;AAGF;AA3Ga,cA0GK,SAAS,UAAU,YAAY;AApGrB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GANb,cAMe,WAAA,WAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAPb,cAOe,WAAA,QAAA,CAAA;AAQA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAfb,cAee,WAAA,aAAA,CAAA;AAEC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAjBd,cAiBgB,WAAA,UAAA,CAAA;AAEA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAnBd,cAmBgB,WAAA,YAAA,CAAA;AAOD,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GA1Bb,cA0Be,WAAA,YAAA,CAAA;AAEA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GA5Bb,cA4Be,WAAA,SAAA,CAAA;AA5Bf,gBAAN,gBAAA;AAAA,EADN,cAAc,iBAAiB;AAAA,GACnB,aAAA;"}
+{"version":3,"file":"user-button.js","sources":["../../../src/components/user-button/user-button.ts"],"sourcesContent":["import {LitElement, nothing, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport compentStyle from './user-button.css?inline';\nimport '../../icons/icon-user.js';\nimport {html, literal} from 'lit/static-html.js';\nimport {customElement} from '../../decorator.js';\n\nexport enum StyleType {\n  flat = 'flat',\n  normal = 'normal',\n  selected = 'selected',\n}\n\nexport enum Size {\n  regular = 'regular',\n  large = 'large',\n}\n\n/**\n * Defines the visual content of the user button.\n * - `icon`: Shows a user icon (default).\n * - `initials`: Shows up to two uppercase initials.\n */\nexport enum Variant {\n  icon = 'icon',\n  initials = 'initials',\n}\n\n/**\n * `obc-user-button` – A compact, circular button for representing a user via icon or initials.\n *\n * Displays either a user icon or user initials inside a circular button, with optional label text. Commonly used for user profile access, account switching, or avatar actions in toolbars and navigation. The button supports multiple visual styles and can be rendered as a static (non-interactive) element.\n *\n * Appears as a button by default, but switches to a non-interactive div when the `static` property is set.\n *\n * ## Features\n * - **Variants:**\n *   - `icon`: Shows a user icon (default, fallback if initials are invalid or missing).\n *   - `initials`: Shows up to two uppercase initials (falls back to icon if input is empty or longer than two characters).\n * - **Style Types:**\n *   - `flat`: Minimal, flat appearance (default).\n *   - `normal`: Outlined with background and border.\n *   - `selected`: Highlighted to indicate selection or active state.\n * - **Static Mode:**\n *   - Set `static` to render as a non-interactive element for use in read-only or decorative contexts.\n * - **Disabled State:**\n *   - Set `disabled` to visually and functionally disable the button.\n * - **Custom Icon Slot:**\n *   - Provide a custom icon via the `icon` slot when using the `icon` variant.\n * - **Label Support:**\n *   - Optional `label` property displays text next to the button (not shown in static mode).\n *   - Optional `sublabel` adds a second, lighter line under the label, for a\n *     secondary detail such as the user's role.\n *\n * ## Usage Guidelines\n * 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.\n * - Use the `icon` variant for generic user representation, or when no initials are available.\n * - Use the `initials` variant to personalize the button with user initials (max two characters).\n * - Use `styleType=\"selected\"` to indicate the current user or active selection.\n * - Use `static` for non-interactive displays, such as in lists or summaries.\n * - Avoid using for critical actions or as a replacement for full user profile cards.\n *\n * **TODO(designer):** Confirm if there are recommended scenarios for when to use `flat`, `normal`, or `selected` style types, and if there are accessibility guidelines for initials fallback.\n *\n * ## Slots\n *\n * | Slot Name | Renders When... | Purpose |\n * |-----------|-----------------|---------|\n * | `icon`    | `variant=\"icon\"` | Custom icon to display instead of the default user icon. |\n *\n * ## Best Practices & Constraints\n * - Initials longer than two characters are truncated and a warning is logged.\n * - If `initials` is empty or invalid, the button falls back to the user icon.\n * - The `label` is only visible when the button is interactive (not static).\n * - For accessibility, the button is named after its visible text — `label` and\n *   `sublabel` — falling back to the initials when it shows no text.\n * - Only use the `static` property for non-interactive contexts; otherwise, the button is clickable.\n *\n * ## Example:\n * ```html\n * <obc-user-button variant=\"initials\" initials=\"JD\" styleType=\"normal\" label=\"John Doe\"></obc-user-button>\n * <obc-user-button variant=\"icon\" styleType=\"flat\">\n *   <obi-placeholder slot=\"icon\"></obi-placeholder>\n * </obc-user-button>\n * ```\n *\n * @property static - If true, renders the button as a static (non-interactive) element using a `<div>`.\n *   Use for decorative or read-only contexts where user interaction is not required.\n * @property disabled - Disables the button, preventing user interaction and applying a disabled style.\n * @availableWhen disabled static==false\n * @property label - Optional label text to display next to the button (not shown in static mode).\n * @availableWhen label static==false\n * @property sublabel - Optional second line under the label, for a secondary detail such as a role (not shown in static mode).\n * @availableWhen sublabel static==false\n * @slot icon - Custom icon for the user button (used only in `icon` variant; defaults to <obi-user> if not provided)\n * @stable\n */\n@customElement('obc-user-button')\nexport class ObcUserButton extends LitElement {\n  /**\n   * Controls whether the button displays a user icon (`icon`) or user initials (`initials`).\n   * - `icon`: Shows a user icon (default, or if initials are invalid).\n   * - `initials`: Shows up to two uppercase initials (falls back to icon if empty or longer than two characters).\n   */\n  @property({type: String}) variant: Variant = Variant.icon;\n  @property({type: String}) size: Size = Size.regular;\n\n  /**\n   * Sets the visual style of the button.\n   * - `flat`: Minimal, flat appearance (default).\n   * - `normal`: Outlined with background and border.\n   * - `selected`: Highlighted to indicate selection or active state.\n   */\n  @property({type: String}) styleType: StyleType = StyleType.flat;\n\n  @property({type: Boolean}) static: boolean = false;\n\n  @property({type: Boolean}) disabled: boolean = false;\n\n  /**\n   * The initials to display when `variant=\"initials\"`.\n   * - Only the first two non-whitespace characters are used and converted to uppercase.\n   * - If empty or longer than two characters, falls back to the user icon.\n   */\n  @property({type: String}) initials: string = '';\n\n  @property({type: String}) label?: string;\n\n  @property({type: String}) sublabel?: string;\n\n  private get formattedInitials() {\n    if (!this.initials) return '';\n\n    // Remove whitespace and convert to uppercase\n    const clean = this.initials.replace(/\\s+/g, '').toUpperCase();\n\n    // If longer than 2 characters, truncate to first 2\n    const maxInitialsLength = this.size === Size.large ? 3 : 2;\n    if (clean.length > maxInitialsLength) {\n      console.warn(\n        `Initials \"${this.initials}\" are longer than ${maxInitialsLength} characters.`\n      );\n      return clean.slice(0, maxInitialsLength);\n    }\n\n    return clean;\n  }\n\n  private get shouldShowIcon() {\n    return this.variant === Variant.icon;\n  }\n\n  override render() {\n    const styleType =\n      this.size === Size.large && this.styleType === StyleType.flat\n        ? StyleType.normal\n        : this.styleType;\n    const wrapperClasses = {\n      wrapper: true,\n      'wrapper-static': this.static,\n      [`style-${styleType}`]: true,\n      'mode-icon': this.shouldShowIcon,\n      'mode-initials': !this.shouldShowIcon,\n      'state-static': this.static,\n      [`size-${this.size}`]: true,\n      'has-sublabel': Boolean(this.sublabel) && !this.static,\n    };\n\n    // Use button element when clickable, div when static\n    const tag = this.static ? literal`div` : literal`button`;\n\n    const visibleText = [this.label, this.sublabel].filter(Boolean).join(', ');\n    const accessibleName =\n      (!this.static && visibleText) || this.initials || 'User button';\n\n    const label =\n      this.label && !this.static\n        ? html`<span class=\"user-label\" part=\"label\">${this.label}</span>`\n        : nothing;\n\n    const sublabel =\n      this.sublabel && !this.static\n        ? html`<span class=\"user-sublabel\" part=\"sublabel\">\n            ${this.sublabel}\n          </span>`\n        : nothing;\n\n    return html`\n        <${tag}\n          class=${classMap(wrapperClasses)}\n          ?disabled=${this.disabled}\n          aria-label=${accessibleName}\n        >\n        <div class=\"content-container\" part=\"content-container\">\n          <div class=\"user-button-circle\">\n            ${\n              this.shouldShowIcon\n                ? html`\n                    <div class=\"icon-container\">\n                      <slot name=\"icon\">\n                        <!-- Fallback to default icon if no slot content -->\n                        <obi-user></obi-user>\n                      </slot>\n                    </div>\n                  `\n                : html`\n                    <span class=\"user-initials\">\n                      ${this.formattedInitials}\n                    </span>\n                  `\n            }\n          </div>\n          ${label} ${sublabel}\n        </div>\n        </${tag}>\n      `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-user-button': ObcUserButton;\n  }\n}\n"],"names":["StyleType","Size","Variant"],"mappings":"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"}

package/dist/components/user-menu/user-menu.css.js

@@ -167,6 +167,21 @@ const componentStyle = css`* {
       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;
   }

package/dist/components/user-menu/user-menu.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"user-menu.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"user-menu.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/user-menu/user-menu.d.ts

@@ -21,7 +21,9 @@ export declare enum ObcUserMenuSize {
 export type ObcUserMenuUser = {
     initials: string;
     label: string;
+    role?: string;
 };
+export type ObcUserMenuRecentUserClickEvent = CustomEvent<ObcUserMenuUser>;
 export type ObcUserMenuSignedInAction = {
     id: string;
     label: string;
@@ -60,8 +62,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
@@ -70,6 +77,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.
  *
@@ -104,6 +114,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
@@ -113,11 +125,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
  */
 export declare class ObcUserMenu extends LitElement {
@@ -179,6 +194,12 @@ export declare class ObcUserMenu extends LitElement {
      * Available when `type!=signIn`.
      */
     userLabel?: string;
+    /**
+     * Role shown under the primary user's label; omit it to show no role.
+     *
+     * Available when `type!=signIn && size==regular`.
+     */
+    userRole?: string;
     /** Recent users for the "Recently signed in" section. */
     recentUsers: ObcUserMenuUser[];
     /**
@@ -193,6 +214,12 @@ export declare class ObcUserMenu extends LitElement {
      * Available when `type==signedIn && size==small`.
      */
     primaryActionId?: string;
+    /**
+     * Controls the visibility of the "Use another account" button.
+     *
+     * Available when `type==userSignIn`.
+     */
+    showUseAnotherAccount: boolean;
     private get showRecentUsers();
     private renderTextInput;
     private renderUserButtons;
@@ -206,6 +233,7 @@ export declare class ObcUserMenu extends LitElement {
     private validateSignIn;
     private handleSignInClick;
     private handleSignOutClick;
+    private handleUseAnotherAccountClick;
     private renderSignIn;
     private renderSignInSmall;
     private renderUserSignIn;

package/dist/components/user-menu/user-menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"user-menu.d.ts","sourceRoot":"","sources":["../../../src/components/user-menu/user-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,cAAc,EAA2B,MAAM,KAAK,CAAC;AAKzE,OAAO,yCAAyC,CAAC;AACjD,OAAO,qBAAqB,CAAC;AAC7B,OAAO,+BAA+B,CAAC;AACvC,OAAO,iCAAiC,CAAC;AACzC,OAAO,uCAAuC,CAAC;AAC/C,OAAO,qCAAqC,CAAC;AAC7C,OAAO,qCAAqC,CAAC;AAC7C,OAAO,kCAAkC,CAAC;AAC1C,OAAO,0BAA0B,CAAC;AAalC,oBAAY,eAAe;IACzB,MAAM,YAAY;IAClB,UAAU,iBAAiB;IAC3B,aAAa,oBAAoB;IACjC,QAAQ,cAAc;CACvB;AAED,oBAAY,eAAe;IACzB,OAAO,YAAY;IACnB,KAAK,UAAU;CAChB;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6FG;AACH,qBAEa,WAAY,SAAQ,UAAU;IACf,IAAI,EAAE,eAAe,CAA0B;IAE/C,IAAI,EAAE,eAAe,CAA2B;IAG1E,mBAAmB,UAAS;IAG5B,YAAY,UAAQ;IAEM,QAAQ,SAAM;IAGxC,YAAY,UAAQ;IAEM,QAAQ,SAAM;IAEd,aAAa,SAAM;IAEnB,aAAa,SAAM;IAEnB,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,SAAS,CAAC,EAAE,MAAM,CAAC;IAG7C,WAAW,EAAE,eAAe,EAAE,CAAM;IAGpC,eAAe,EAAE,yBAAyB,EAAE,CAAM;IAExB,eAAe,CAAC,EAAE,MAAM,CAAC;IAEnD,OAAO,KAAK,eAAe,GAE1B;IAED,OAAO,CAAC,eAAe;IAwBvB,OAAO,CAAC,iBAAiB;IA2BzB,OAAO,CAAC,iBAAiB;IA8BzB,OAAO,CAAC,qBAAqB;IAe7B,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,yBAAyB;IAQjC,OAAO,CAAC,qBAAqB;IAQ7B,OAAO,CAAC,mBAAmB;IAQ3B,OAAO,CAAC,mBAAmB;IAQ3B,OAAO,CAAC,cAAc;IAmBtB,OAAO,CAAC,iBAAiB;IAczB,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,YAAY;IAoDpB,OAAO,CAAC,iBAAiB;IAqDzB,OAAO,CAAC,gBAAgB;IAgDxB,OAAO,CAAC,qBAAqB;IA+C7B,OAAO,CAAC,mBAAmB;IAiB3B,OAAO,CAAC,wBAAwB;IAiBhC,OAAO,CAAC,cAAc;IA2CtB,OAAO,CAAC,mBAAmB;IAkClB,MAAM;IAwCf,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,WAAW,CAAC;KAC9B;CACF"}
+{"version":3,"file":"user-menu.d.ts","sourceRoot":"","sources":["../../../src/components/user-menu/user-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,cAAc,EAA2B,MAAM,KAAK,CAAC;AAKzE,OAAO,yCAAyC,CAAC;AACjD,OAAO,qBAAqB,CAAC;AAC7B,OAAO,+BAA+B,CAAC;AACvC,OAAO,iCAAiC,CAAC;AACzC,OAAO,uCAAuC,CAAC;AAC/C,OAAO,qCAAqC,CAAC;AAC7C,OAAO,qCAAqC,CAAC;AAC7C,OAAO,kCAAkC,CAAC;AAC1C,OAAO,0BAA0B,CAAC;AAalC,oBAAY,eAAe;IACzB,MAAM,YAAY;IAClB,UAAU,iBAAiB;IAC3B,aAAa,oBAAoB;IACjC,QAAQ,cAAc;CACvB;AAED,oBAAY,eAAe;IACzB,OAAO,YAAY;IACnB,KAAK,UAAU;CAChB;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,+BAA+B,GAAG,WAAW,CAAC,eAAe,CAAC,CAAC;AAE3E,MAAM,MAAM,yBAAyB,GAAG;IACtC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0GG;AACH,qBAEa,WAAY,SAAQ,UAAU;IACf,IAAI,EAAE,eAAe,CAA0B;IAE/C,IAAI,EAAE,eAAe,CAA2B;IAG1E,mBAAmB,UAAS;IAG5B,YAAY,UAAQ;IAEM,QAAQ,SAAM;IAGxC,YAAY,UAAQ;IAEM,QAAQ,SAAM;IAEd,aAAa,SAAM;IAEnB,aAAa,SAAM;IAEnB,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAG5C,WAAW,EAAE,eAAe,EAAE,CAAM;IAGpC,eAAe,EAAE,yBAAyB,EAAE,CAAM;IAExB,eAAe,CAAC,EAAE,MAAM,CAAC;IAGnD,qBAAqB,UAAQ;IAE7B,OAAO,KAAK,eAAe,GAE1B;IAED,OAAO,CAAC,eAAe;IAwBvB,OAAO,CAAC,iBAAiB;IA4BzB,OAAO,CAAC,iBAAiB;IAiCzB,OAAO,CAAC,qBAAqB;IAe7B,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,yBAAyB;IAQjC,OAAO,CAAC,qBAAqB;IAQ7B,OAAO,CAAC,mBAAmB;IAQ3B,OAAO,CAAC,mBAAmB;IAQ3B,OAAO,CAAC,cAAc;IAmBtB,OAAO,CAAC,iBAAiB;IAczB,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,4BAA4B;IAIpC,OAAO,CAAC,YAAY;IAoDpB,OAAO,CAAC,iBAAiB;IAqDzB,OAAO,CAAC,gBAAgB;IA2DxB,OAAO,CAAC,qBAAqB;IA0D7B,OAAO,CAAC,mBAAmB;IAiB3B,OAAO,CAAC,wBAAwB;IAiBhC,OAAO,CAAC,cAAc;IA2CtB,OAAO,CAAC,mBAAmB;IAkClB,MAAM;IAwCf,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,WAAW,CAAC;KAC9B;CACF"}

package/dist/components/user-menu/user-menu.js

@@ -49,6 +49,7 @@ let ObcUserMenu = class extends LitElement {
     this.passwordError = "";
     this.recentUsers = [];
     this.signedInActions = [];
+    this.showUseAnotherAccount = true;
   }
   get showRecentUsers() {
     return this.hasRecentlySignedIn && this.recentUsers.length > 0;
@@ -89,6 +90,7 @@ let ObcUserMenu = class extends LitElement {
               .size=${size}
               .initials=${user.initials}
               .label=${user.label}
+              .sublabel=${isLarge ? user.role : void 0}
               @click=${() => this.handleRecentUserClick(user)}
             ></obc-user-button>
           `
@@ -101,6 +103,7 @@ let ObcUserMenu = class extends LitElement {
       return nothing;
     }
     const userButtonSize = size === "large" ? Size.large : Size.regular;
+    const role = size === "large" ? this.userRole : void 0;
     return html`
       <div
         class=${classMap({
@@ -111,13 +114,15 @@ let ObcUserMenu = class extends LitElement {
         <obc-user-button
           class=${classMap({
       "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>
     `;
@@ -149,7 +154,7 @@ let ObcUserMenu = class extends LitElement {
   handleRecentUserClick(user) {
     this.dispatchEvent(
       new CustomEvent("recent-user-click", {
-        detail: { initials: user.initials, label: user.label }
+        detail: { ...user }
       })
     );
   }
@@ -197,6 +202,9 @@ let ObcUserMenu = class extends LitElement {
   handleSignOutClick() {
     this.dispatchEvent(new CustomEvent("sign-out-click"));
   }
+  handleUseAnotherAccountClick() {
+    this.dispatchEvent(new CustomEvent("use-another-account-click"));
+  }
   renderSignIn() {
     return html`
       <div class="title-container">
@@ -317,6 +325,15 @@ let ObcUserMenu = class 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 ? html`
@@ -359,6 +376,15 @@ let ObcUserMenu = class 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`
             <div class="divider" aria-hidden="true"></div>
@@ -537,6 +563,9 @@ __decorateClass([
 __decorateClass([
   property({ type: String })
 ], ObcUserMenu.prototype, "userLabel", 2);
+__decorateClass([
+  property({ type: String })
+], ObcUserMenu.prototype, "userRole", 2);
 __decorateClass([
   property({ type: Array, attribute: false })
 ], ObcUserMenu.prototype, "recentUsers", 2);
@@ -546,6 +575,9 @@ __decorateClass([
 __decorateClass([
   property({ type: String })
 ], ObcUserMenu.prototype, "primaryActionId", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: false })
+], ObcUserMenu.prototype, "showUseAnotherAccount", 2);
 ObcUserMenu = __decorateClass([
   customElement("obc-user-menu"),
   localized()