@oicl/openbridge-webcomponents 2.0.0-next.168 → 2.0.0-next.169

package/dist/components/top-bar/top-bar.js

@@ -86,11 +86,13 @@ let ObcTopBar = class extends LitElement {
       this.isEmergencyBrightness = true;
     }, 500);
   }
+  /**
+   * Ends a hold. The event a short press stands for is dispatched from the
+   * `click` that follows, not here: a menu opened while the pointer is still
+   * going up gets closed again by that same click in current browsers, which
+   * see it as a click outside a popover that has just opened.
+   */
   leftButtonUp() {
-    if (this.leftButtonEvent) {
-      this.dispatchEvent(this.leftButtonEvent);
-      this.leftButtonEvent = null;
-    }
     if (this.leftButtonTimeout) {
       clearTimeout(this.leftButtonTimeout);
       this.leftButtonTimeout = null;
@@ -102,16 +104,22 @@ let ObcTopBar = class extends LitElement {
     this.isLeftButtonDown = false;
   }
   /**
-   * Keyboard and assistive-technology activation of the hold button.
+   * Sends the event a press of the hold button stands for.
    *
    * Enter, Space and a screen reader's activate command arrive as a `click`
-   * with `detail` 0 and never as a pointer sequence, so they cannot pass
-   * through the hold timer; a pointer click arrives with `detail` 1 after
-   * `leftButtonUp()` has already dispatched.
+   * with `detail` 0 and no pointer press before it, so they get the event
+   * directly. A pointer click arrives with `detail` 1 after the press: the
+   * event stored on the way down is sent now, unless the press ran long
+   * enough to start emergency brightness, which used it up.
    */
   leftButtonActivate(event, type) {
-    if (event.detail !== 0) return;
-    this.dispatchEvent(new CustomEvent(type));
+    if (event.detail === 0) {
+      this.dispatchEvent(new CustomEvent(type));
+      return;
+    }
+    if (!this.leftButtonEvent) return;
+    this.dispatchEvent(this.leftButtonEvent);
+    this.leftButtonEvent = null;
   }
   leftButtonLeave() {
     if (!this.isLeftButtonDown) return;

package/dist/components/top-bar/top-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"top-bar.js","sources":["../../../src/components/top-bar/top-bar.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {msg} from '@lit/localize';\nimport compentStyle from './top-bar.css?inline';\nimport '../icon-button/icon-button.js';\nimport '../clock/clock.js';\nimport '../divider/divider.js';\nimport '../breadcrumb/breadcrumb.js';\nimport '../../icons/icon-menu-iec.js';\nimport '../../icons/icon-home.js';\nimport '../../icons/icon-close-google.js';\nimport '../../icons/icon-arrow-left-google.js';\nimport '../../icons/icon-arrow-right-google.js';\nimport '../../icons/icon-palette-day-night-iec.js';\nimport '../../icons/icon-applications.js';\nimport '../../icons/icon-more-vertical-google.js';\nimport '../../icons/icon-user.js';\nimport {\n  BreadcrumbClickEvent,\n  BreadcrumbItem,\n} from '../breadcrumb/breadcrumb.js';\nimport {customElement} from '../../decorator.js';\n\nexport enum ObcTopBarMenuButtonIcon {\n  Menu = 'menu',\n  Home = 'home',\n}\n\n/**\n * `<obc-top-bar>` – A responsive top navigation bar component for application layouts.\n *\n * Provides a flexible, highly configurable top bar for application interfaces, supporting navigation, context display, quick actions, and status indicators. The top bar adapts to screen size and can show or hide elements such as menu, app icon, breadcrumbs, user/profile, clock, and alert notifications.\n *\n * Appears at the top of the UI, organizing primary navigation and contextual actions in a single, persistent region. Designed for use as the main app bar or header in multi-pane or dashboard-style layouts.\n *\n * ## Features\n * - **Configurable Sections:** Supports left and right-aligned groups for navigation, context, and actions.\n * - **Menu Button:** Optional menu button for opening navigation drawers or sidebars; can be styled as wide or regular.\n * - **App Icon Slot:** Customizable slot for displaying an application or brand icon.\n * - **App Title & Page Name:** Displays the current application and page context.\n * - **Breadcrumbs:** Optional breadcrumb navigation for hierarchical context (in settings mode).\n * - **Command Button Slot:** Slot for inserting a primary command/action button.\n * - **Alert/Notification Area:** Slot for alert indicators, notification badges, or custom alert components.\n * - **Dimming Button:** Optional button for toggling display modes (e.g., day/night).\n * - **User/Profile Button:** Optional user icon for profile/account actions.\n * - **Apps Button:** Optional button for accessing additional applications or modules.\n * - **Clock & Date:** Optional digital clock and date display, responsive to screen size.\n * - **Responsive Layout:** Multiple breakpoint properties to control visibility and layout of elements based on viewport width.\n * - **Settings Mode:** Special mode with close, back, and forward navigation, breadcrumbs, and app title.\n * - **Tall Variant:** Optional increased height for touch or accessibility needs.\n * - **Inactive State:** Disables interactive elements and visually de-emphasizes the bar.\n *\n * ## Variants\n * - **Regular:** Standard top bar with menu, app icon, title, page name, and action slots.\n * - **Settings:** Shows close, back, forward buttons, breadcrumbs, and app title for configuration or settings screens.\n * - **Inactive:** Visually muted and disables interaction (e.g., when the app is locked or in a modal state).\n * - **Tall:** Increases the height of the bar for improved touch targets.\n *\n * ## Usage Guidelines\n * Use `<obc-top-bar>` as the persistent header for your application, providing navigation, context, and quick access to key actions or status. Configure which elements appear via boolean properties and slots. Adjust breakpoint properties to control responsive behavior for each section.\n *\n * - Place navigation, branding, and context (title, breadcrumbs) on the left; actions, alerts, and status (clock, user, apps) on the right.\n * - Use the `settings` property for configuration or setup screens to enable close/back/forward navigation and breadcrumbs.\n * - Use the `inactive` property to visually disable the bar and its actions when the app is not interactive.\n * - Insert custom icons or buttons using the `app-icon` and `command-button` slots.\n * - Use the `alerts` slot to display alert indicators, notification badges, or custom alert components.\n *\n * **TODO(designer):** Clarify recommended combinations of visible elements for different app contexts (e.g., when to show both user and apps buttons, or best practices for alert placement).\n *\n * ## Slots\n *\n * | Slot Name        | Renders When...                 | Purpose                                                        |\n * |------------------|---------------------------------|----------------------------------------------------------------|\n * | `app-icon`       | `showAppIcon` is true           | Custom icon representing the application or brand.             |\n * | `command-button` | Always (if provided)            | Primary command or action button for the current context.      |\n * | `alerts`         | Always (if provided)            | Area for alert indicators, notification badges, or alert items.|\n * | `clock`          | Always (if provided)            | Clock component for displaying the current time.              |\n *\n * ## Events\n * - `menu-button-clicked` – Fired when the menu button is clicked.\n * - `dimming-button-clicked` – Fired when the dimming (day/night) button is clicked.\n * - `apps-button-clicked` – Fired when the apps button is clicked.\n * - `left-more-button-clicked` – Fired when the left more button is clicked.\n * - `user-button-clicked` – Fired when the user/profile button is clicked.\n * - `close` – Fired in settings mode when the close button is clicked.\n * - `back` – Fired in settings mode when the back button is clicked.\n * - `forward` – Fired in settings mode when the forward button is clicked.\n * - `emergency-brightness-start` – Fired when the menu button is held for 500ms. This should increase the brightness of the screen slowly. Used when the screen is too dark.\n * - `emergency-brightness-stop` – Fired when the menu button is released.\n *\n * ## Keyboard\n * Every control in the bar is its own tab stop and activates on `Enter` and\n * `Space`. The bar is a navigation landmark, not an APG toolbar: its controls\n * are separate components and slotted consumer content, so a roving tabindex\n * across them is deliberately not implemented. The emergency-brightness hold\n * is a pointer gesture only; from the keyboard the menu button opens the menu.\n *\n * ## Best Practices and Constraints\n * - Only show interactive elements relevant to the current context to avoid clutter.\n * - Use the `alerts` slot for transient or critical notifications; persistent alerts may require a different component.\n * - For accessibility, give all interactive elements labels and focus handling.\n * - Adjust breakpoint properties to optimize the layout for different device sizes.\n * - In settings mode, use breadcrumbs to provide clear navigation context.\n *\n * ## Example\n *\n * ```html\n * <obc-top-bar\n *   appTitle=\"My App\"\n *   pageName=\"Dashboard\"\n *   showAppsButton\n *   showDimmingButton\n *   showClock\n *   showUserButton\n *   showAppIcon\n * >\n *   <obi-placeholder slot=\"app-icon\"></obi-placeholder>\n *   <obc-command-button slot=\"command-button\"></obc-command-button>\n *   <obc-topbar-message-item slot=\"alerts\"></obc-topbar-message-item>\n *   <obc-clock slot=\"clock\"></obc-clock>\n * </obc-top-bar>\n * ```\n *\n * @availableWhen menuButtonIcon settings==false && inactive==false\n * @property appTitle - Sets the main application title displayed in the top bar.\n * @property pageName - Sets the current page or section name displayed in the top bar.\n * @availableWhen pageName settings==false\n * @property menuButtonActivated - Highlights the menu button as active.\n * @availableWhen menuButtonActivated settings==false && inactive==false\n * @property dimmingButtonActivated - Highlights the dimming (day/night) button as active.\n * @availableWhen dimmingButtonActivated showDimmingButton==true && inactive==false\n * @property appsButtonActivated - Highlights the apps button as active.\n * @availableWhen appsButtonActivated showAppsButton==true && inactive==false\n * @property leftMoreButtonActivated - Highlights the left more button as active.\n * @availableWhen leftMoreButtonActivated inactive==false\n * @property userButtonActivated - Highlights the user/profile button as active.\n * @availableWhen userButtonActivated showUserButton==true && inactive==false\n * @property userButtonDisabled - Disables the user/profile button.\n * @availableWhen userButtonDisabled showUserButton==true && inactive==false\n * @property tall - Increases the height of the top bar for larger touch targets.\n * @property wideMenuButton - Expands the menu button for wide-rail layouts.\n * @availableWhen wideMenuButton settings==false && inactive==false\n * @property showAppsButton - Shows or hides the apps button.\n * @property showDimmingButton - Shows or hides the dimming (day/night) button.\n * @property showUserButton - Shows or hides the user/profile button.\n * @property showClock - Shows or hides the clock.\n * @property showDate - Shows or hides the date in the clock display.\n * @property showAppIcon - Shows or hides the app icon slot.\n * @property inactive - Disables interaction and visually de-emphasizes the bar.\n * @property appButtonBreakpointPx - Controls the breakpoint (in px) for showing/hiding the apps button.\n * @property dimmingButtonBreakpointPx - Controls the breakpoint (in px) for showing/hiding the dimming button.\n * @property appTitleBreakpointPx - Controls the breakpoint (in px) for showing/hiding the app title.\n * @property userButtonBreakpointPx - Controls the breakpoint (in px) for showing/hiding the user button.\n * @property appIconBreakpointPx - Controls the breakpoint (in px) for showing/hiding the app icon.\n * @property settings - Enables settings mode, displaying close, back buttons, breadcrumbs, and app title.\n * @property breadcrumbItems - Array of breadcrumb items for navigation (used in settings mode).\n * @availableWhen breadcrumbItems settings==true\n * @slot app-icon - Custom icon representing the application or brand (shown when `showAppIcon` is true)\n * @slot command-button - Primary command/action button for the current context\n * @slot alerts - Area for alert indicators, notification badges, or alert items\n * @slot clock - Clock component for displaying the current time (shown when `showClock` is true)\n * @fires menu-button-clicked - Fired when the menu button is clicked\n * @fires dimming-button-clicked - Fired when the dimming (day/night) button is clicked\n * @fires apps-button-clicked - Fired when the apps button is clicked\n * @fires left-more-button-clicked - Fired when the left more button is clicked\n * @fires user-button-clicked - Fired when the user/profile button is clicked\n * @fires close - Fired in settings mode when the close button is clicked\n * @fires back - Fired in settings mode when the back button is clicked\n * @fires emergency-brightness-start - Fired when the menu button is held for 500ms. This should increase the brightness of the screen slowly. Used when the screen is too dark.\n * @fires emergency-brightness-stop - Fired when the menu button is released.\n * @fires {BreadcrumbClickEvent} breadcrumb-click - Fired when a breadcrumb item is clicked.\n * @stable\n */\n@customElement('obc-top-bar')\nexport class ObcTopBar extends LitElement {\n  @property({type: String}) appTitle = 'App';\n\n  @property({type: String}) pageName = 'Page';\n\n  @property({type: String}) menuButtonIcon = ObcTopBarMenuButtonIcon.Menu;\n\n  @property({type: Boolean})\n  menuButtonActivated = false;\n\n  @property({type: Boolean})\n  dimmingButtonActivated = false;\n\n  @property({type: Boolean})\n  appsButtonActivated = false;\n\n  @property({type: Boolean})\n  leftMoreButtonActivated = false;\n\n  @property({type: Boolean})\n  userButtonActivated = false;\n\n  @property({type: Boolean})\n  userButtonDisabled = false;\n\n  @property({type: Boolean}) tall = false;\n\n  @property({type: Boolean}) wideMenuButton = false;\n\n  @property({type: Boolean}) showAppsButton = false;\n\n  @property({type: Boolean})\n  showDimmingButton = false;\n\n  @property({type: Boolean}) showUserButton = false;\n\n  @property({type: Boolean}) showClock = false;\n\n  @property({type: Boolean}) showDate = false;\n\n  @property({type: Boolean}) showAppIcon = false;\n\n  @property({type: Boolean}) inactive = false;\n\n  @property({type: Number})\n  appButtonBreakpointPx = 500;\n\n  @property({type: Number})\n  dimmingButtonBreakpointPx = 500;\n\n  @property({type: Number})\n  appTitleBreakpointPx = 500;\n\n  @property({type: Number})\n  userButtonBreakpointPx = 500;\n\n  @property({type: Number})\n  appIconBreakpointPx = 500;\n\n  @property({type: Boolean}) settings = false;\n\n  @property({type: Array})\n  breadcrumbItems: BreadcrumbItem[] = [];\n\n  private dimmingButtonClicked() {\n    /**\n     * Fired when the dimming (day/night) button is clicked.\n     * @event dimming-button-clicked\n     */\n    this.dispatchEvent(new CustomEvent('dimming-button-clicked'));\n  }\n\n  private appsButtonClicked() {\n    /**\n     * Fired when the apps button is clicked.\n     * @event apps-button-clicked\n     */\n    this.dispatchEvent(new CustomEvent('apps-button-clicked'));\n  }\n\n  private leftMoreButtonClicked() {\n    /**\n     * Fired when the left more button is clicked.\n     * @event left-more-button-clicked\n     */\n    this.dispatchEvent(new CustomEvent('left-more-button-clicked'));\n  }\n\n  private userButtonClicked() {\n    /**\n     * Fired when the user/profile button is clicked.\n     * @event user-button-clicked\n     */\n    this.dispatchEvent(new CustomEvent('user-button-clicked'));\n  }\n\n  private leftButtonEvent: null | CustomEvent = null;\n  private leftButtonTimeout: null | NodeJS.Timeout = null;\n  private isLeftButtonDown = false;\n  private isEmergencyBrightness = false;\n\n  private leftButtonDown(event: CustomEvent) {\n    this.leftButtonEvent = event;\n    this.isLeftButtonDown = true;\n    this.leftButtonTimeout = setTimeout(() => {\n      this.leftButtonEvent = null;\n      this.dispatchEvent(new CustomEvent('emergency-brightness-start'));\n      this.isEmergencyBrightness = true;\n    }, 500);\n  }\n\n  private leftButtonUp() {\n    if (this.leftButtonEvent) {\n      this.dispatchEvent(this.leftButtonEvent);\n      this.leftButtonEvent = null;\n    }\n    if (this.leftButtonTimeout) {\n      clearTimeout(this.leftButtonTimeout);\n      this.leftButtonTimeout = null;\n    }\n    if (this.isEmergencyBrightness) {\n      this.dispatchEvent(new CustomEvent('emergency-brightness-stop'));\n      this.isEmergencyBrightness = false;\n    }\n    this.isLeftButtonDown = false;\n  }\n\n  /**\n   * Keyboard and assistive-technology activation of the hold button.\n   *\n   * Enter, Space and a screen reader's activate command arrive as a `click`\n   * with `detail` 0 and never as a pointer sequence, so they cannot pass\n   * through the hold timer; a pointer click arrives with `detail` 1 after\n   * `leftButtonUp()` has already dispatched.\n   */\n  private leftButtonActivate(event: MouseEvent, type: string) {\n    if (event.detail !== 0) return;\n    this.dispatchEvent(new CustomEvent(type));\n  }\n\n  private leftButtonLeave() {\n    if (!this.isLeftButtonDown) return;\n    if (this.leftButtonTimeout) {\n      clearInterval(this.leftButtonTimeout);\n      this.leftButtonTimeout = null;\n    }\n    if (this.isEmergencyBrightness) {\n      this.dispatchEvent(new CustomEvent('emergency-brightness-stop'));\n      this.isEmergencyBrightness = false;\n    }\n    this.isLeftButtonDown = false;\n  }\n\n  override render() {\n    const leftGroup = [];\n    if (this.settings) {\n      leftGroup.push(\n        html`<div class=\"menu-button\">\n          <obc-icon-button\n            variant=\"flat\"\n            aria-label=${msg('Close')}\n            @pointerdown=${() => this.leftButtonDown(new CustomEvent('close'))}\n            @pointerup=${() => this.leftButtonUp()}\n            @pointerleave=${() => this.leftButtonLeave()}\n            @click=${(event: MouseEvent) =>\n              this.leftButtonActivate(event, 'close')}\n          >\n            <obi-close-google></obi-close-google>\n          </obc-icon-button>\n        </div>`\n      );\n      leftGroup.push(\n        html`<obc-icon-button\n          variant=\"flat\"\n          aria-label=${msg('Back')}\n          @click=${() => this.dispatchEvent(new CustomEvent('back'))}\n        >\n          <obi-arrow-left-google></obi-arrow-left-google>\n        </obc-icon-button>`\n      );\n      leftGroup.push(html`<div class=\"title\">${this.appTitle}</div>`);\n      leftGroup.push(\n        html`<obc-breadcrumb\n          .items=${this.breadcrumbItems}\n          @breadcrumb-click=${(e: BreadcrumbClickEvent) =>\n            this.dispatchEvent(\n              new CustomEvent('breadcrumb-click', {\n                detail: e.detail,\n              }) as BreadcrumbClickEvent\n            )}\n        ></obc-breadcrumb>`\n      );\n    } else {\n      if (!this.inactive) {\n        leftGroup.push(\n          html`<div class=\"menu-button ${this.wideMenuButton ? 'wide' : null}\">\n            <obc-icon-button\n              variant=\"flat\"\n              aria-label=${\n                this.menuButtonIcon === ObcTopBarMenuButtonIcon.Menu\n                  ? msg('Menu')\n                  : msg('Home')\n              }\n              @pointerdown=${() =>\n                this.leftButtonDown(new CustomEvent('menu-button-clicked'))}\n              @pointerup=${() => this.leftButtonUp()}\n              @pointerleave=${() => this.leftButtonLeave()}\n              @click=${(event: MouseEvent) =>\n                this.leftButtonActivate(event, 'menu-button-clicked')}\n              ?activated=${this.menuButtonActivated}\n            >\n              ${\n                this.menuButtonIcon === ObcTopBarMenuButtonIcon.Menu\n                  ? html`<obi-menu-iec></obi-menu-iec>`\n                  : html`<obi-home></obi-home>`\n              }\n            </obc-icon-button>\n          </div>`\n        );\n      }\n      if (this.showAppIcon) {\n        leftGroup.push(\n          html`<div class=\"app-icon\"><slot name=\"app-icon\"></slot></div>`\n        );\n      }\n      leftGroup.push(html`<div class=\"title\">${this.appTitle}</div>`);\n      leftGroup.push(html`<div class=\"page-name\">${this.pageName}</div>`);\n      leftGroup.push(html`<slot name=\"command-button\"></slot>`);\n    }\n\n    const breakpointMoreButton = Math.max(\n      this.appButtonBreakpointPx,\n      this.dimmingButtonBreakpointPx\n    );\n\n    return html`\n      <style>\n        @media (max-width: ${breakpointMoreButton}px) {\n          .left-more-button {\n            display: revert !important;\n          }\n\n          .group.left > * {\n            margin-right: 4px;\n            margin-left: 4px;\n          }\n        }\n\n        @media (max-width: ${this.appButtonBreakpointPx}px) {\n          .apps-button {\n            display: none;\n          }\n        }\n\n        @media (max-width: ${this.dimmingButtonBreakpointPx}px) {\n          .dimming-button {\n            display: none;\n          }\n        }\n\n        @media (max-width: ${this.appTitleBreakpointPx}px) {\n          .title {\n            display: none !important; /* the stylesheet's display wins over this inline rule otherwise */\n          }\n        }\n\n        @media (max-width: ${this.userButtonBreakpointPx}px) {\n          .user-button {\n            display: none;\n          }\n        }\n\n        @media (max-width: ${this.appIconBreakpointPx}px) {\n          .app-icon {\n            display: none;\n          }\n        }\n      </style>\n      <nav\n        class=${classMap({\n          wrapper: true,\n          inactive: this.inactive,\n          settings: this.settings,\n          tall: this.tall,\n        })}\n      >\n        <div class=\"left group\">${leftGroup}</div>\n        <div class=\"right group\">\n          <div class=\"alert-container\">\n            <slot name=\"alerts\"></slot>\n          </div>\n          ${\n            this.showDimmingButton && !this.inactive\n              ? html`<obc-icon-button\n                  class=\"dimming-button\"\n                  part=\"dimming-button\"\n                  variant=\"flat\"\n                  aria-label=${msg('Dimming')}\n                  @click=${this.dimmingButtonClicked}\n                  ?activated=${this.dimmingButtonActivated}\n                >\n                  <obi-palette-day-night-iec></obi-palette-day-night-iec>\n                </obc-icon-button>`\n              : null\n          }\n          ${\n            this.showUserButton && !this.inactive\n              ? html`<obc-icon-button\n                  class=\"user-button\"\n                  variant=\"flat\"\n                  part=\"user-button\"\n                  aria-label=${msg('User')}\n                  @click=${this.userButtonClicked}\n                  ?activated=${this.userButtonActivated}\n                  ?disabled=${this.userButtonDisabled}\n                >\n                  <obi-user></obi-user>\n                </obc-icon-button>`\n              : null\n          }\n          ${\n            this.showAppsButton && !this.inactive\n              ? html`<obc-icon-button\n                  class=\"apps-button\"\n                  variant=\"flat\"\n                  part=\"apps-button\"\n                  aria-label=${msg('Apps')}\n                  @click=${this.appsButtonClicked}\n                  ?activated=${this.appsButtonActivated}\n                >\n                  <obi-applications></obi-applications>\n                </obc-icon-button>`\n              : null\n          }\n          ${this.showClock ? html`<slot name=\"clock\"></slot>` : null}\n          ${\n            !this.inactive\n              ? html`<obc-icon-button\n                  class=\"left-more-button\"\n                  part=\"left-more-button\"\n                  variant=\"flat\"\n                  aria-label=${msg('More')}\n                  @click=${this.leftMoreButtonClicked}\n                  ?activated=${this.leftMoreButtonActivated}\n                >\n                  <obi-more-vertical-google></obi-more-vertical-google>\n                </obc-icon-button>`\n              : null\n          }\n        </div>\n      </nav>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-top-bar': ObcTopBar;\n  }\n}\n"],"names":["ObcTopBarMenuButtonIcon"],"mappings":"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"}
+{"version":3,"file":"top-bar.js","sources":["../../../src/components/top-bar/top-bar.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {msg} from '@lit/localize';\nimport compentStyle from './top-bar.css?inline';\nimport '../icon-button/icon-button.js';\nimport '../clock/clock.js';\nimport '../divider/divider.js';\nimport '../breadcrumb/breadcrumb.js';\nimport '../../icons/icon-menu-iec.js';\nimport '../../icons/icon-home.js';\nimport '../../icons/icon-close-google.js';\nimport '../../icons/icon-arrow-left-google.js';\nimport '../../icons/icon-arrow-right-google.js';\nimport '../../icons/icon-palette-day-night-iec.js';\nimport '../../icons/icon-applications.js';\nimport '../../icons/icon-more-vertical-google.js';\nimport '../../icons/icon-user.js';\nimport {\n  BreadcrumbClickEvent,\n  BreadcrumbItem,\n} from '../breadcrumb/breadcrumb.js';\nimport {customElement} from '../../decorator.js';\n\nexport enum ObcTopBarMenuButtonIcon {\n  Menu = 'menu',\n  Home = 'home',\n}\n\n/**\n * `<obc-top-bar>` – A responsive top navigation bar component for application layouts.\n *\n * Provides a flexible, highly configurable top bar for application interfaces, supporting navigation, context display, quick actions, and status indicators. The top bar adapts to screen size and can show or hide elements such as menu, app icon, breadcrumbs, user/profile, clock, and alert notifications.\n *\n * Appears at the top of the UI, organizing primary navigation and contextual actions in a single, persistent region. Designed for use as the main app bar or header in multi-pane or dashboard-style layouts.\n *\n * ## Features\n * - **Configurable Sections:** Supports left and right-aligned groups for navigation, context, and actions.\n * - **Menu Button:** Optional menu button for opening navigation drawers or sidebars; can be styled as wide or regular.\n * - **App Icon Slot:** Customizable slot for displaying an application or brand icon.\n * - **App Title & Page Name:** Displays the current application and page context.\n * - **Breadcrumbs:** Optional breadcrumb navigation for hierarchical context (in settings mode).\n * - **Command Button Slot:** Slot for inserting a primary command/action button.\n * - **Alert/Notification Area:** Slot for alert indicators, notification badges, or custom alert components.\n * - **Dimming Button:** Optional button for toggling display modes (e.g., day/night).\n * - **User/Profile Button:** Optional user icon for profile/account actions.\n * - **Apps Button:** Optional button for accessing additional applications or modules.\n * - **Clock & Date:** Optional digital clock and date display, responsive to screen size.\n * - **Responsive Layout:** Multiple breakpoint properties to control visibility and layout of elements based on viewport width.\n * - **Settings Mode:** Special mode with close, back, and forward navigation, breadcrumbs, and app title.\n * - **Tall Variant:** Optional increased height for touch or accessibility needs.\n * - **Inactive State:** Disables interactive elements and visually de-emphasizes the bar.\n *\n * ## Variants\n * - **Regular:** Standard top bar with menu, app icon, title, page name, and action slots.\n * - **Settings:** Shows close, back, forward buttons, breadcrumbs, and app title for configuration or settings screens.\n * - **Inactive:** Visually muted and disables interaction (e.g., when the app is locked or in a modal state).\n * - **Tall:** Increases the height of the bar for improved touch targets.\n *\n * ## Usage Guidelines\n * Use `<obc-top-bar>` as the persistent header for your application, providing navigation, context, and quick access to key actions or status. Configure which elements appear via boolean properties and slots. Adjust breakpoint properties to control responsive behavior for each section.\n *\n * - Place navigation, branding, and context (title, breadcrumbs) on the left; actions, alerts, and status (clock, user, apps) on the right.\n * - Use the `settings` property for configuration or setup screens to enable close/back/forward navigation and breadcrumbs.\n * - Use the `inactive` property to visually disable the bar and its actions when the app is not interactive.\n * - Insert custom icons or buttons using the `app-icon` and `command-button` slots.\n * - Use the `alerts` slot to display alert indicators, notification badges, or custom alert components.\n *\n * **TODO(designer):** Clarify recommended combinations of visible elements for different app contexts (e.g., when to show both user and apps buttons, or best practices for alert placement).\n *\n * ## Slots\n *\n * | Slot Name        | Renders When...                 | Purpose                                                        |\n * |------------------|---------------------------------|----------------------------------------------------------------|\n * | `app-icon`       | `showAppIcon` is true           | Custom icon representing the application or brand.             |\n * | `command-button` | Always (if provided)            | Primary command or action button for the current context.      |\n * | `alerts`         | Always (if provided)            | Area for alert indicators, notification badges, or alert items.|\n * | `clock`          | Always (if provided)            | Clock component for displaying the current time.              |\n *\n * ## Events\n * - `menu-button-clicked` – Fired when the menu button is clicked.\n * - `dimming-button-clicked` – Fired when the dimming (day/night) button is clicked.\n * - `apps-button-clicked` – Fired when the apps button is clicked.\n * - `left-more-button-clicked` – Fired when the left more button is clicked.\n * - `user-button-clicked` – Fired when the user/profile button is clicked.\n * - `close` – Fired in settings mode when the close button is clicked.\n * - `back` – Fired in settings mode when the back button is clicked.\n * - `forward` – Fired in settings mode when the forward button is clicked.\n * - `emergency-brightness-start` – Fired when the menu button is held for 500ms. This should increase the brightness of the screen slowly. Used when the screen is too dark.\n * - `emergency-brightness-stop` – Fired when the menu button is released.\n *\n * ## Keyboard\n * Every control in the bar is its own tab stop and activates on `Enter` and\n * `Space`. The bar is a navigation landmark, not an APG toolbar: its controls\n * are separate components and slotted consumer content, so a roving tabindex\n * across them is deliberately not implemented. The emergency-brightness hold\n * is a pointer gesture only; from the keyboard the menu button opens the menu.\n *\n * ## Best Practices and Constraints\n * - Only show interactive elements relevant to the current context to avoid clutter.\n * - Use the `alerts` slot for transient or critical notifications; persistent alerts may require a different component.\n * - For accessibility, give all interactive elements labels and focus handling.\n * - Adjust breakpoint properties to optimize the layout for different device sizes.\n * - In settings mode, use breadcrumbs to provide clear navigation context.\n *\n * ## Example\n *\n * ```html\n * <obc-top-bar\n *   appTitle=\"My App\"\n *   pageName=\"Dashboard\"\n *   showAppsButton\n *   showDimmingButton\n *   showClock\n *   showUserButton\n *   showAppIcon\n * >\n *   <obi-placeholder slot=\"app-icon\"></obi-placeholder>\n *   <obc-command-button slot=\"command-button\"></obc-command-button>\n *   <obc-topbar-message-item slot=\"alerts\"></obc-topbar-message-item>\n *   <obc-clock slot=\"clock\"></obc-clock>\n * </obc-top-bar>\n * ```\n *\n * @availableWhen menuButtonIcon settings==false && inactive==false\n * @property appTitle - Sets the main application title displayed in the top bar.\n * @property pageName - Sets the current page or section name displayed in the top bar.\n * @availableWhen pageName settings==false\n * @property menuButtonActivated - Highlights the menu button as active.\n * @availableWhen menuButtonActivated settings==false && inactive==false\n * @property dimmingButtonActivated - Highlights the dimming (day/night) button as active.\n * @availableWhen dimmingButtonActivated showDimmingButton==true && inactive==false\n * @property appsButtonActivated - Highlights the apps button as active.\n * @availableWhen appsButtonActivated showAppsButton==true && inactive==false\n * @property leftMoreButtonActivated - Highlights the left more button as active.\n * @availableWhen leftMoreButtonActivated inactive==false\n * @property userButtonActivated - Highlights the user/profile button as active.\n * @availableWhen userButtonActivated showUserButton==true && inactive==false\n * @property userButtonDisabled - Disables the user/profile button.\n * @availableWhen userButtonDisabled showUserButton==true && inactive==false\n * @property tall - Increases the height of the top bar for larger touch targets.\n * @property wideMenuButton - Expands the menu button for wide-rail layouts.\n * @availableWhen wideMenuButton settings==false && inactive==false\n * @property showAppsButton - Shows or hides the apps button.\n * @property showDimmingButton - Shows or hides the dimming (day/night) button.\n * @property showUserButton - Shows or hides the user/profile button.\n * @property showClock - Shows or hides the clock.\n * @property showDate - Shows or hides the date in the clock display.\n * @property showAppIcon - Shows or hides the app icon slot.\n * @property inactive - Disables interaction and visually de-emphasizes the bar.\n * @property appButtonBreakpointPx - Controls the breakpoint (in px) for showing/hiding the apps button.\n * @property dimmingButtonBreakpointPx - Controls the breakpoint (in px) for showing/hiding the dimming button.\n * @property appTitleBreakpointPx - Controls the breakpoint (in px) for showing/hiding the app title.\n * @property userButtonBreakpointPx - Controls the breakpoint (in px) for showing/hiding the user button.\n * @property appIconBreakpointPx - Controls the breakpoint (in px) for showing/hiding the app icon.\n * @property settings - Enables settings mode, displaying close, back buttons, breadcrumbs, and app title.\n * @property breadcrumbItems - Array of breadcrumb items for navigation (used in settings mode).\n * @availableWhen breadcrumbItems settings==true\n * @slot app-icon - Custom icon representing the application or brand (shown when `showAppIcon` is true)\n * @slot command-button - Primary command/action button for the current context\n * @slot alerts - Area for alert indicators, notification badges, or alert items\n * @slot clock - Clock component for displaying the current time (shown when `showClock` is true)\n * @fires menu-button-clicked - Fired when the menu button is clicked\n * @fires dimming-button-clicked - Fired when the dimming (day/night) button is clicked\n * @fires apps-button-clicked - Fired when the apps button is clicked\n * @fires left-more-button-clicked - Fired when the left more button is clicked\n * @fires user-button-clicked - Fired when the user/profile button is clicked\n * @fires close - Fired in settings mode when the close button is clicked\n * @fires back - Fired in settings mode when the back button is clicked\n * @fires emergency-brightness-start - Fired when the menu button is held for 500ms. This should increase the brightness of the screen slowly. Used when the screen is too dark.\n * @fires emergency-brightness-stop - Fired when the menu button is released.\n * @fires {BreadcrumbClickEvent} breadcrumb-click - Fired when a breadcrumb item is clicked.\n * @stable\n */\n@customElement('obc-top-bar')\nexport class ObcTopBar extends LitElement {\n  @property({type: String}) appTitle = 'App';\n\n  @property({type: String}) pageName = 'Page';\n\n  @property({type: String}) menuButtonIcon = ObcTopBarMenuButtonIcon.Menu;\n\n  @property({type: Boolean})\n  menuButtonActivated = false;\n\n  @property({type: Boolean})\n  dimmingButtonActivated = false;\n\n  @property({type: Boolean})\n  appsButtonActivated = false;\n\n  @property({type: Boolean})\n  leftMoreButtonActivated = false;\n\n  @property({type: Boolean})\n  userButtonActivated = false;\n\n  @property({type: Boolean})\n  userButtonDisabled = false;\n\n  @property({type: Boolean}) tall = false;\n\n  @property({type: Boolean}) wideMenuButton = false;\n\n  @property({type: Boolean}) showAppsButton = false;\n\n  @property({type: Boolean})\n  showDimmingButton = false;\n\n  @property({type: Boolean}) showUserButton = false;\n\n  @property({type: Boolean}) showClock = false;\n\n  @property({type: Boolean}) showDate = false;\n\n  @property({type: Boolean}) showAppIcon = false;\n\n  @property({type: Boolean}) inactive = false;\n\n  @property({type: Number})\n  appButtonBreakpointPx = 500;\n\n  @property({type: Number})\n  dimmingButtonBreakpointPx = 500;\n\n  @property({type: Number})\n  appTitleBreakpointPx = 500;\n\n  @property({type: Number})\n  userButtonBreakpointPx = 500;\n\n  @property({type: Number})\n  appIconBreakpointPx = 500;\n\n  @property({type: Boolean}) settings = false;\n\n  @property({type: Array})\n  breadcrumbItems: BreadcrumbItem[] = [];\n\n  private dimmingButtonClicked() {\n    /**\n     * Fired when the dimming (day/night) button is clicked.\n     * @event dimming-button-clicked\n     */\n    this.dispatchEvent(new CustomEvent('dimming-button-clicked'));\n  }\n\n  private appsButtonClicked() {\n    /**\n     * Fired when the apps button is clicked.\n     * @event apps-button-clicked\n     */\n    this.dispatchEvent(new CustomEvent('apps-button-clicked'));\n  }\n\n  private leftMoreButtonClicked() {\n    /**\n     * Fired when the left more button is clicked.\n     * @event left-more-button-clicked\n     */\n    this.dispatchEvent(new CustomEvent('left-more-button-clicked'));\n  }\n\n  private userButtonClicked() {\n    /**\n     * Fired when the user/profile button is clicked.\n     * @event user-button-clicked\n     */\n    this.dispatchEvent(new CustomEvent('user-button-clicked'));\n  }\n\n  private leftButtonEvent: null | CustomEvent = null;\n  private leftButtonTimeout: null | NodeJS.Timeout = null;\n  private isLeftButtonDown = false;\n  private isEmergencyBrightness = false;\n\n  private leftButtonDown(event: CustomEvent) {\n    this.leftButtonEvent = event;\n    this.isLeftButtonDown = true;\n    this.leftButtonTimeout = setTimeout(() => {\n      this.leftButtonEvent = null;\n      this.dispatchEvent(new CustomEvent('emergency-brightness-start'));\n      this.isEmergencyBrightness = true;\n    }, 500);\n  }\n\n  /**\n   * Ends a hold. The event a short press stands for is dispatched from the\n   * `click` that follows, not here: a menu opened while the pointer is still\n   * going up gets closed again by that same click in current browsers, which\n   * see it as a click outside a popover that has just opened.\n   */\n  private leftButtonUp() {\n    if (this.leftButtonTimeout) {\n      clearTimeout(this.leftButtonTimeout);\n      this.leftButtonTimeout = null;\n    }\n    if (this.isEmergencyBrightness) {\n      this.dispatchEvent(new CustomEvent('emergency-brightness-stop'));\n      this.isEmergencyBrightness = false;\n    }\n    this.isLeftButtonDown = false;\n  }\n\n  /**\n   * Sends the event a press of the hold button stands for.\n   *\n   * Enter, Space and a screen reader's activate command arrive as a `click`\n   * with `detail` 0 and no pointer press before it, so they get the event\n   * directly. A pointer click arrives with `detail` 1 after the press: the\n   * event stored on the way down is sent now, unless the press ran long\n   * enough to start emergency brightness, which used it up.\n   */\n  private leftButtonActivate(event: MouseEvent, type: string) {\n    if (event.detail === 0) {\n      this.dispatchEvent(new CustomEvent(type));\n      return;\n    }\n    if (!this.leftButtonEvent) return;\n    this.dispatchEvent(this.leftButtonEvent);\n    this.leftButtonEvent = null;\n  }\n\n  private leftButtonLeave() {\n    if (!this.isLeftButtonDown) return;\n    if (this.leftButtonTimeout) {\n      clearInterval(this.leftButtonTimeout);\n      this.leftButtonTimeout = null;\n    }\n    if (this.isEmergencyBrightness) {\n      this.dispatchEvent(new CustomEvent('emergency-brightness-stop'));\n      this.isEmergencyBrightness = false;\n    }\n    this.isLeftButtonDown = false;\n  }\n\n  override render() {\n    const leftGroup = [];\n    if (this.settings) {\n      leftGroup.push(\n        html`<div class=\"menu-button\">\n          <obc-icon-button\n            variant=\"flat\"\n            aria-label=${msg('Close')}\n            @pointerdown=${() => this.leftButtonDown(new CustomEvent('close'))}\n            @pointerup=${() => this.leftButtonUp()}\n            @pointerleave=${() => this.leftButtonLeave()}\n            @click=${(event: MouseEvent) =>\n              this.leftButtonActivate(event, 'close')}\n          >\n            <obi-close-google></obi-close-google>\n          </obc-icon-button>\n        </div>`\n      );\n      leftGroup.push(\n        html`<obc-icon-button\n          variant=\"flat\"\n          aria-label=${msg('Back')}\n          @click=${() => this.dispatchEvent(new CustomEvent('back'))}\n        >\n          <obi-arrow-left-google></obi-arrow-left-google>\n        </obc-icon-button>`\n      );\n      leftGroup.push(html`<div class=\"title\">${this.appTitle}</div>`);\n      leftGroup.push(\n        html`<obc-breadcrumb\n          .items=${this.breadcrumbItems}\n          @breadcrumb-click=${(e: BreadcrumbClickEvent) =>\n            this.dispatchEvent(\n              new CustomEvent('breadcrumb-click', {\n                detail: e.detail,\n              }) as BreadcrumbClickEvent\n            )}\n        ></obc-breadcrumb>`\n      );\n    } else {\n      if (!this.inactive) {\n        leftGroup.push(\n          html`<div class=\"menu-button ${this.wideMenuButton ? 'wide' : null}\">\n            <obc-icon-button\n              variant=\"flat\"\n              aria-label=${\n                this.menuButtonIcon === ObcTopBarMenuButtonIcon.Menu\n                  ? msg('Menu')\n                  : msg('Home')\n              }\n              @pointerdown=${() =>\n                this.leftButtonDown(new CustomEvent('menu-button-clicked'))}\n              @pointerup=${() => this.leftButtonUp()}\n              @pointerleave=${() => this.leftButtonLeave()}\n              @click=${(event: MouseEvent) =>\n                this.leftButtonActivate(event, 'menu-button-clicked')}\n              ?activated=${this.menuButtonActivated}\n            >\n              ${\n                this.menuButtonIcon === ObcTopBarMenuButtonIcon.Menu\n                  ? html`<obi-menu-iec></obi-menu-iec>`\n                  : html`<obi-home></obi-home>`\n              }\n            </obc-icon-button>\n          </div>`\n        );\n      }\n      if (this.showAppIcon) {\n        leftGroup.push(\n          html`<div class=\"app-icon\"><slot name=\"app-icon\"></slot></div>`\n        );\n      }\n      leftGroup.push(html`<div class=\"title\">${this.appTitle}</div>`);\n      leftGroup.push(html`<div class=\"page-name\">${this.pageName}</div>`);\n      leftGroup.push(html`<slot name=\"command-button\"></slot>`);\n    }\n\n    const breakpointMoreButton = Math.max(\n      this.appButtonBreakpointPx,\n      this.dimmingButtonBreakpointPx\n    );\n\n    return html`\n      <style>\n        @media (max-width: ${breakpointMoreButton}px) {\n          .left-more-button {\n            display: revert !important;\n          }\n\n          .group.left > * {\n            margin-right: 4px;\n            margin-left: 4px;\n          }\n        }\n\n        @media (max-width: ${this.appButtonBreakpointPx}px) {\n          .apps-button {\n            display: none;\n          }\n        }\n\n        @media (max-width: ${this.dimmingButtonBreakpointPx}px) {\n          .dimming-button {\n            display: none;\n          }\n        }\n\n        @media (max-width: ${this.appTitleBreakpointPx}px) {\n          .title {\n            display: none !important; /* the stylesheet's display wins over this inline rule otherwise */\n          }\n        }\n\n        @media (max-width: ${this.userButtonBreakpointPx}px) {\n          .user-button {\n            display: none;\n          }\n        }\n\n        @media (max-width: ${this.appIconBreakpointPx}px) {\n          .app-icon {\n            display: none;\n          }\n        }\n      </style>\n      <nav\n        class=${classMap({\n          wrapper: true,\n          inactive: this.inactive,\n          settings: this.settings,\n          tall: this.tall,\n        })}\n      >\n        <div class=\"left group\">${leftGroup}</div>\n        <div class=\"right group\">\n          <div class=\"alert-container\">\n            <slot name=\"alerts\"></slot>\n          </div>\n          ${\n            this.showDimmingButton && !this.inactive\n              ? html`<obc-icon-button\n                  class=\"dimming-button\"\n                  part=\"dimming-button\"\n                  variant=\"flat\"\n                  aria-label=${msg('Dimming')}\n                  @click=${this.dimmingButtonClicked}\n                  ?activated=${this.dimmingButtonActivated}\n                >\n                  <obi-palette-day-night-iec></obi-palette-day-night-iec>\n                </obc-icon-button>`\n              : null\n          }\n          ${\n            this.showUserButton && !this.inactive\n              ? html`<obc-icon-button\n                  class=\"user-button\"\n                  variant=\"flat\"\n                  part=\"user-button\"\n                  aria-label=${msg('User')}\n                  @click=${this.userButtonClicked}\n                  ?activated=${this.userButtonActivated}\n                  ?disabled=${this.userButtonDisabled}\n                >\n                  <obi-user></obi-user>\n                </obc-icon-button>`\n              : null\n          }\n          ${\n            this.showAppsButton && !this.inactive\n              ? html`<obc-icon-button\n                  class=\"apps-button\"\n                  variant=\"flat\"\n                  part=\"apps-button\"\n                  aria-label=${msg('Apps')}\n                  @click=${this.appsButtonClicked}\n                  ?activated=${this.appsButtonActivated}\n                >\n                  <obi-applications></obi-applications>\n                </obc-icon-button>`\n              : null\n          }\n          ${this.showClock ? html`<slot name=\"clock\"></slot>` : null}\n          ${\n            !this.inactive\n              ? html`<obc-icon-button\n                  class=\"left-more-button\"\n                  part=\"left-more-button\"\n                  variant=\"flat\"\n                  aria-label=${msg('More')}\n                  @click=${this.leftMoreButtonClicked}\n                  ?activated=${this.leftMoreButtonActivated}\n                >\n                  <obi-more-vertical-google></obi-more-vertical-google>\n                </obc-icon-button>`\n              : null\n          }\n        </div>\n      </nav>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-top-bar': ObcTopBar;\n  }\n}\n"],"names":["ObcTopBarMenuButtonIcon"],"mappings":"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"}

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

@@ -18,6 +18,7 @@ export declare enum Variant {
     icon = "icon",
     initials = "initials"
 }
+export declare function initialsFromName(name: string): string;
 /**
  * `obc-user-button` – A compact, circular button for representing a user via icon or initials.
  *

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4EG;AACH,qBACa,aAAc,SAAQ,UAAU;IACjB,OAAO,EAAE,OAAO,CAAgB;IAChC,IAAI,EAAE,IAAI,CAAgB;IAE1B,SAAS,EAAE,SAAS,CAAkB;IAErC,MAAM,EAAE,OAAO,CAAS;IAExB,QAAQ,EAAE,OAAO,CAAS;IAE3B,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"}
+{"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,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAUrD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4EG;AACH,qBACa,aAAc,SAAQ,UAAU;IACjB,OAAO,EAAE,OAAO,CAAgB;IAChC,IAAI,EAAE,IAAI,CAAgB;IAE1B,SAAS,EAAE,SAAS,CAAkB;IAErC,MAAM,EAAE,OAAO,CAAS;IAExB,QAAQ,EAAE,OAAO,CAAS;IAE3B,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

@@ -31,6 +31,15 @@ var Variant = /* @__PURE__ */ ((Variant2) => {
   Variant2["initials"] = "initials";
   return Variant2;
 })(Variant || {});
+function initialsFromName(name) {
+  const trimmedName = name.trim();
+  if (trimmedName === "") return "";
+  const words = trimmedName.split(/\s+/);
+  const firstWord = words[0];
+  if (words.length === 1) return firstWord[0];
+  const lastWord = words[words.length - 1];
+  return firstWord[0] + lastWord[0];
+}
 let ObcUserButton = class extends LitElement {
   constructor() {
     super(...arguments);
@@ -134,6 +143,7 @@ export {
   ObcUserButton,
   Size,
   StyleType,
-  Variant
+  Variant,
+  initialsFromName
 };
 //# sourceMappingURL=user-button.js.map

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 *   - 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 * @property variant - What the button displays: `icon` (default) a user icon, `initials` up to\n *   two uppercase initials — falling back to the icon when `initials` is empty\n *   or longer than two characters.\n * @property styleType - Visual style: `flat` (default) is the minimal appearance, `normal` adds a\n *   background and border, `selected` highlights the active state.\n * @property initials - Initials shown when `variant` is `initials`. Whitespace is stripped and the\n *   rest uppercased, then truncated to two characters — three at the `large`\n *   size. An empty value falls back to the user icon.\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  @property({type: String}) variant: Variant = Variant.icon;\n  @property({type: String}) size: Size = Size.regular;\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  @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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"}
+{"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\nexport function initialsFromName(name: string): string {\n  const trimmedName = name.trim();\n  if (trimmedName === '') return '';\n\n  const words = trimmedName.split(/\\s+/);\n  const firstWord = words[0];\n  if (words.length === 1) return firstWord[0];\n\n  const lastWord = words[words.length - 1];\n  return firstWord[0] + lastWord[0];\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 * @property variant - What the button displays: `icon` (default) a user icon, `initials` up to\n *   two uppercase initials — falling back to the icon when `initials` is empty\n *   or longer than two characters.\n * @property styleType - Visual style: `flat` (default) is the minimal appearance, `normal` adds a\n *   background and border, `selected` highlights the active state.\n * @property initials - Initials shown when `variant` is `initials`. Whitespace is stripped and the\n *   rest uppercased, then truncated to two characters — three at the `large`\n *   size. An empty value falls back to the user icon.\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  @property({type: String}) variant: Variant = Variant.icon;\n  @property({type: String}) size: Size = Size.regular;\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  @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

@@ -1,8 +1,28 @@
 import { css } from "lit";
 const componentStyle = css`* {
-  -webkit-tap-highlight-color: transparent;
+    -webkit-tap-highlight-color: transparent;
 }
 
+:host([popover]) {
+    /* The browser pins a popover to all four edges and lets the automatic
+       margins centre it. Unpinning drops it back where it would normally sit,
+       for the consumer to position from. */
+    inset: auto;
+    margin: 0;
+
+    padding: 0;
+    border: none;
+    background: none;
+    color: inherit;
+
+    /* The menus scroll their own content. */
+    overflow: visible;
+
+    /* The browser shrink-wraps a popover to its contents. */
+    width: auto;
+    height: auto;
+  }
+
 * {
   box-sizing: border-box;
 }

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

@@ -1,4 +1,5 @@
 import { LitElement, TemplateResult } from 'lit';
+import { PopoverController } from '../../internal/popover-controller.js';
 import '../text-input-field/text-input-field.js';
 import '../button/button.js';
 import '../user-button/user-button.js';
@@ -127,15 +128,28 @@ export type ObcUserMenuSignedInAction = {
  * @availableWhen primaryActionId type==signedIn && size==small
  * @property showUseAnotherAccount - Controls the visibility of the "Use another account" button.
  * @availableWhen showUseAnotherAccount type==userSignIn
+ * @property softDismiss - Let the browser close this menu on its own: on a click outside it, on `Escape`, or when another menu opens. Leave it off to keep showing and hiding the menu yourself.
+ * @property open - Whether the menu is showing.
+ * @availableWhen open softDismiss==true
  * @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 {ObcUserMenuRecentUserClickEvent} recent-user-click - Fired when a recent user button is clicked, carrying that user's entry.
+ * @fires {CustomEvent<void>} close - Fired when the menu closed on its own, from a click outside, `Escape`, or another menu opening. `open` is already `false` by the time it arrives.
  * @stable
  */
 export declare class ObcUserMenu extends LitElement {
+    /** Let the browser close this menu on its own: on a click outside it, on `Escape`, or when another menu opens. Leave it off to keep showing and hiding the menu yourself. */
+    softDismiss: boolean;
+    /**
+     * Whether the menu is showing.
+     *
+     * Available when `softDismiss==true`.
+     */
+    open: boolean;
+    protected readonly softDismissController: PopoverController;
     /** Controls the visual layout of the user menu. */
     type: ObcUserMenuType;
     /** Controls the overall size of the user menu. */

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;AAclC,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;IA0BvB,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;IA0DpB,OAAO,CAAC,iBAAiB;IA2DzB,OAAO,CAAC,gBAAgB;IAiExB,OAAO,CAAC,qBAAqB;IAgE7B,OAAO,CAAC,mBAAmB;IAiB3B,OAAO,CAAC,wBAAwB;IAiBhC,OAAO,CAAC,cAAc;IA6CtB,OAAO,CAAC,mBAAmB;IAoClB,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,OAAO,EAAC,iBAAiB,EAAC,MAAM,sCAAsC,CAAC;AAEvE,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8GG;AACH,qBAEa,WAAY,SAAQ,UAAU;IACd,WAAW,UAAS;IAEpB,IAAI,UAAS;IAExC,SAAS,CAAC,QAAQ,CAAC,qBAAqB,oBAA+B;IAE7C,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;IA0BvB,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;IA0DpB,OAAO,CAAC,iBAAiB;IA2DzB,OAAO,CAAC,gBAAgB;IAiExB,OAAO,CAAC,qBAAqB;IAgE7B,OAAO,CAAC,mBAAmB;IAiB3B,OAAO,CAAC,wBAAwB;IAiBhC,OAAO,CAAC,cAAc;IA6CtB,OAAO,CAAC,mBAAmB;IAoClB,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

@@ -14,6 +14,7 @@ import "../../icons/icon-settings-iec.js";
 import "../../icons/icon-user.js";
 import { localized, msg } from "@lit/localize";
 import { stopPropagation } from "../../internal/events.js";
+import { PopoverController } from "../../internal/popover-controller.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -39,6 +40,9 @@ var ObcUserMenuSize = /* @__PURE__ */ ((ObcUserMenuSize2) => {
 let ObcUserMenu = class extends LitElement {
   constructor() {
     super(...arguments);
+    this.softDismiss = false;
+    this.open = false;
+    this.softDismissController = new PopoverController(this);
     this.type = "sign-in";
     this.size = "regular";
     this.hasRecentlySignedIn = false;
@@ -533,6 +537,12 @@ let ObcUserMenu = class extends LitElement {
   }
 };
 ObcUserMenu.styles = unsafeCSS(componentStyle);
+__decorateClass([
+  property({ type: Boolean })
+], ObcUserMenu.prototype, "softDismiss", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcUserMenu.prototype, "open", 2);
 __decorateClass([
   property({ type: String })
 ], ObcUserMenu.prototype, "type", 2);

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

@@ -1 +1 @@
-{"version":3,"file":"user-menu.js","sources":["../../../src/components/user-menu/user-menu.ts"],"sourcesContent":["import {LitElement, TemplateResult, html, nothing, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {customElement} from '../../decorator.js';\nimport componentStyle from './user-menu.css?inline';\nimport '../text-input-field/text-input-field.js';\nimport '../button/button.js';\nimport '../user-button/user-button.js';\nimport '../progress-bar/progress-bar.js';\nimport '../navigation-item/navigation-item.js';\nimport '../../icons/icon-calendar-google.js';\nimport '../../icons/icon-log-open-google.js';\nimport '../../icons/icon-settings-iec.js';\nimport '../../icons/icon-user.js';\nimport {\n  HTMLInputTypeAttribute,\n  ObcTextInputFieldTextAlign,\n} from '../text-input-field/text-input-field.js';\nimport {ButtonVariant} from '../button/button.js';\nimport {\n  ProgressBarMode,\n  ProgressBarType,\n} from '../progress-bar/progress-bar.js';\nimport {Size, StyleType, Variant} from '../user-button/user-button.js';\nimport {localized, msg} from '@lit/localize';\nimport {stopPropagation} from '../../internal/events.js';\n\nexport enum ObcUserMenuType {\n  signIn = 'sign-in',\n  userSignIn = 'user-sign-in',\n  loadingSignIn = 'loading-sign-in',\n  signedIn = 'signed-in',\n}\n\nexport enum ObcUserMenuSize {\n  regular = 'regular',\n  small = 'small',\n}\n\nexport type ObcUserMenuUser = {\n  initials: string;\n  label: string;\n  role?: string;\n};\n\nexport type ObcUserMenuRecentUserClickEvent = CustomEvent<ObcUserMenuUser>;\n\nexport type ObcUserMenuSignedInAction = {\n  id: string;\n  label: string;\n};\n\n/**\n * `<obc-user-menu>` – A user menu component with sign-in and signed-in layouts.\n *\n * Provides multiple layouts for authentication and account access states, including\n * sign-in forms, user-specific sign-in, loading states, and signed-in navigation.\n *\n * ### Features\n * - **Multiple States:** Supports sign-in, user sign-in, loading, and signed-in layouts.\n * - **Size Options:** Regular and small sizes for compact layouts.\n * - **Recent Users:** Optional \"Recently signed in\" section for quick access.\n * - **Navigation Actions:** Signed-in state lists the actions it is given.\n *\n * ### Variants\n * - `type`: `sign-in`, `user-sign-in`, `loading-sign-in`, `signed-in`\n * - `size`: `regular`, `small`\n *\n * ### Usage Guidelines\n * Use `obc-user-menu` in authentication or account panels where quick access to\n * sign-in, profile, or account actions is needed. The `user-sign-in` type is\n * best for fast re-auth flows; `loading-sign-in` is for pending auth states.\n *\n * ### Properties and Configuration\n * - `type` (`ObcUserMenuType`): Controls the layout state. Defaults to `sign-in`.\n * - `size` (`ObcUserMenuSize`): Controls the overall size. Defaults to `regular`.\n * - `hasRecentlySignedIn` (`boolean`): Toggles the recent users section.\n *   Defaults to `false`.\n * - `showUsername` (`boolean`): Toggles the username field. Defaults to `true`.\n * - `showPassword` (`boolean`): Toggles the password field. Defaults to `true`.\n * - `username` (`string`): Current username value for sign-in layouts.\n * - `password` (`string`): Current password value for sign-in layouts.\n * - `usernameError` (`string`): Error message for the username field.\n * - `passwordError` (`string`): Error message for the password field.\n * - `userInitials` (`string`): Initials for the primary user profile.\n * - `userLabel` (`string`): Label for the primary user profile.\n * - `userRole` (`string`): Role shown under the primary user's label. Omit it\n *   to show no role; only the regular size draws one.\n * - `recentUsers` (`ObcUserMenuUser[]`): List of recent users shown in the\n *   \"Recently signed in\" section. Empty renders no section. Each user may\n *   carry its own `role`.\n * - `showUseAnotherAccount` (`boolean`): Toggles the \"Use another account\"\n *   button in the `user-sign-in` layouts, both sizes. Defaults to `true`.\n * - `signedInActions` (`ObcUserMenuSignedInAction[]`): Actions shown in the\n *   signed-in navigation list. Empty renders no actions.\n * - `primaryActionId` (`string`): Id of the action promoted to a button in the\n *   small signed-in layout.\n *\n * ### Events\n * - `sign-in-click` – Fired when a sign-in button is clicked.\n * - `sign-out-click` – Fired when the sign-out button is clicked.\n * - `use-another-account-click` – Fired when the \"Use another account\" button\n *   is clicked. The menu does not change its own type; set it to `sign-in` in\n *   the handler to show the full form.\n * - `signed-in-action-click` – Fired when a signed-in action is clicked.\n * - `recent-user-click` – Fired when a recent user button is clicked.\n *\n * ### Slots\n * - `signed-in-action-icon-{id}`: Optional icon for a signed-in action. The\n *   `{id}` is the normalized action id.\n *\n * ### Example\n * ```html\n * <obc-user-menu\n *   type=\"user-sign-in\"\n *   size=\"small\"\n *   hasRecentlySignedIn=\"false\"\n *   userInitials=\"JD\"\n *   userLabel=\"John Doe\"\n * ></obc-user-menu>\n * ```\n *\n * @property type - Controls the visual layout of the user menu.\n * @property size - Controls the overall size of the user menu.\n * @property hasRecentlySignedIn - Toggles the \"Recently signed in\" section visibility.\n * @availableWhen hasRecentlySignedIn type in [signIn, userSignIn]\n * @property username - Current username value for sign-in layouts.\n * @availableWhen username showUsername==true && type==signIn\n * @property password - Current password value for sign-in layouts.\n * @availableWhen password showPassword==true && type in [signIn, userSignIn]\n * @property usernameError - Error message for the username field.\n * @availableWhen usernameError type==signIn\n * @property passwordError - Error message for the password field.\n * @availableWhen passwordError type in [signIn, userSignIn]\n * @property userInitials - Initials for the primary user profile.\n * @availableWhen userInitials type!=signIn\n * @property userLabel - Label for the primary user profile.\n * @availableWhen userLabel type!=signIn\n * @property userRole - Role shown under the primary user's label; omit it to show no role.\n * @availableWhen userRole type!=signIn && size==regular\n * @property recentUsers - Recent users for the \"Recently signed in\" section.\n * @property signedInActions - Actions shown in the signed-in navigation list.\n * @availableWhen signedInActions type==signedIn\n * @property showUsername - Controls the visibility of the username field.\n * @availableWhen showUsername type==signIn\n * @property showPassword - Controls the visibility of the password field.\n * @availableWhen showPassword type in [signIn, userSignIn]\n * @property primaryActionId - Id of the action promoted to a button in the small signed-in layout.\n * @availableWhen primaryActionId type==signedIn && size==small\n * @property showUseAnotherAccount - Controls the visibility of the \"Use another account\" button.\n * @availableWhen showUseAnotherAccount type==userSignIn\n * @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).\n * @fires {CustomEvent<{username?: string, password?: string}>} sign-in-click - Fired when a sign-in button is clicked.\n * @fires {CustomEvent<void>} sign-out-click - Fired when the sign-out button is clicked.\n * @fires {CustomEvent<void>} use-another-account-click - Fired when the \"Use another account\" button is clicked.\n * @fires {CustomEvent<{id: string, label: string}>} signed-in-action-click - Fired when a signed-in action is clicked.\n * @fires {ObcUserMenuRecentUserClickEvent} recent-user-click - Fired when a recent user button is clicked, carrying that user's entry.\n * @stable\n */\n@customElement('obc-user-menu')\n@localized()\nexport class ObcUserMenu extends LitElement {\n  @property({type: String}) type: ObcUserMenuType = ObcUserMenuType.signIn;\n\n  @property({type: String}) size: ObcUserMenuSize = ObcUserMenuSize.regular;\n\n  @property({type: Boolean})\n  hasRecentlySignedIn = false;\n\n  @property({type: Boolean, attribute: false})\n  showUsername = true;\n\n  @property({type: String}) username = '';\n\n  @property({type: Boolean, attribute: false})\n  showPassword = true;\n\n  @property({type: String}) password = '';\n\n  @property({type: String}) usernameError = '';\n\n  @property({type: String}) passwordError = '';\n\n  @property({type: String}) userInitials?: string;\n\n  @property({type: String}) userLabel?: string;\n\n  @property({type: String}) userRole?: string;\n\n  @property({type: Array, attribute: false})\n  recentUsers: ObcUserMenuUser[] = [];\n\n  @property({type: Array, attribute: false})\n  signedInActions: ObcUserMenuSignedInAction[] = [];\n\n  @property({type: String}) primaryActionId?: string;\n\n  @property({type: Boolean, attribute: false})\n  showUseAnotherAccount = true;\n\n  private get showRecentUsers() {\n    return this.hasRecentlySignedIn && this.recentUsers.length > 0;\n  }\n\n  private renderTextInput(\n    placeholder: string,\n    type: HTMLInputTypeAttribute = HTMLInputTypeAttribute.Text,\n    value = '',\n    onInput?: (event: Event) => void,\n    errorText = ''\n  ) {\n    const isPassword = type === HTMLInputTypeAttribute.Password;\n    return html`\n      <obc-text-input-field\n        .placeholder=${placeholder}\n        .type=${type}\n        .textAlign=${ObcTextInputFieldTextAlign.Left}\n        .value=${value}\n        .error=${Boolean(errorText)}\n        .errorText=${errorText}\n        .required=${true}\n        .hasClearButton=${!isPassword}\n        @input=${onInput}\n        @change=${stopPropagation}\n        @clear=${stopPropagation}\n      >\n      </obc-text-input-field>\n    `;\n  }\n\n  private renderUserButtons(count: number, isLarge: boolean) {\n    const size = isLarge ? Size.large : Size.regular;\n    const users = this.recentUsers.slice(0, count);\n    return html`\n      <div\n        class=${classMap({\n          users: true,\n          large: isLarge,\n          single: users.length === 1,\n        })}\n      >\n        ${users.map(\n          (user) => html`\n            <obc-user-button\n              .variant=${Variant.initials}\n              .styleType=${StyleType.normal}\n              .size=${size}\n              .initials=${user.initials}\n              .label=${user.label}\n              .sublabel=${isLarge ? user.role : undefined}\n              @click=${() => this.handleRecentUserClick(user)}\n            ></obc-user-button>\n          `\n        )}\n      </div>\n    `;\n  }\n\n  private renderUserProfile(\n    layout: 'vertical' | 'horizontal',\n    size: 'large' | 'regular'\n  ) {\n    if (!this.userInitials && !this.userLabel) {\n      return nothing;\n    }\n    const userButtonSize = size === 'large' ? Size.large : Size.regular;\n    const role = size === 'large' ? this.userRole : undefined;\n    return html`\n      <div\n        class=${classMap({\n          'user-profile': true,\n          [layout]: true,\n        })}\n      >\n        <obc-user-button\n          class=${classMap({\n            'user-avatar': true,\n            [`size-${size}`]: true,\n            'has-role': Boolean(role),\n          })}\n          .variant=${Variant.initials}\n          .styleType=${StyleType.normal}\n          .size=${userButtonSize}\n          .initials=${this.userInitials ?? ''}\n          .label=${this.userLabel ?? ''}\n          .sublabel=${role}\n        ></obc-user-button>\n      </div>\n    `;\n  }\n\n  private getSignedInActionIcon(actionId: string) {\n    switch (actionId) {\n      case 'calendar':\n        return html`<obi-calendar-google></obi-calendar-google>`;\n      case 'log':\n        return html`<obi-log-open-google></obi-log-open-google>`;\n      case 'preferences':\n        return html`<obi-settings-iec></obi-settings-iec>`;\n      case 'user-account':\n        return html`<obi-user></obi-user>`;\n      default:\n        return nothing;\n    }\n  }\n\n  private normalizeActionId(actionId: string) {\n    return actionId\n      .trim()\n      .toLowerCase()\n      .replace(/[^a-z0-9]+/g, '-');\n  }\n\n  private handleSignedInActionClick(action: ObcUserMenuSignedInAction) {\n    this.dispatchEvent(\n      new CustomEvent('signed-in-action-click', {\n        detail: {id: action.id, label: action.label},\n      })\n    );\n  }\n\n  private handleRecentUserClick(user: ObcUserMenuUser) {\n    this.dispatchEvent(\n      new CustomEvent<ObcUserMenuUser>('recent-user-click', {\n        detail: {...user},\n      })\n    );\n  }\n\n  private handleUsernameInput(event: Event) {\n    const target = event.target as {value?: string};\n    this.username = target.value ?? '';\n    if (this.username) {\n      this.usernameError = '';\n    }\n  }\n\n  private handlePasswordInput(event: Event) {\n    const target = event.target as {value?: string};\n    this.password = target.value ?? '';\n    if (this.password) {\n      this.passwordError = '';\n    }\n  }\n\n  private validateSignIn() {\n    let valid = true;\n    const needsUsername =\n      this.type === ObcUserMenuType.signIn && this.showUsername;\n    const needsPassword = this.showPassword;\n\n    if (needsUsername && !this.username) {\n      this.usernameError = msg('Username is required');\n      valid = false;\n    }\n\n    if (needsPassword && !this.password) {\n      this.passwordError = msg('Password is required');\n      valid = false;\n    }\n\n    return valid;\n  }\n\n  private handleSignInClick() {\n    if (!this.validateSignIn()) {\n      return;\n    }\n    this.dispatchEvent(\n      new CustomEvent('sign-in-click', {\n        detail: {\n          username: this.showUsername ? this.username : undefined,\n          password: this.showPassword ? this.password : undefined,\n        },\n      })\n    );\n  }\n\n  private handleSignOutClick() {\n    this.dispatchEvent(new CustomEvent('sign-out-click'));\n  }\n\n  private handleUseAnotherAccountClick() {\n    this.dispatchEvent(new CustomEvent('use-another-account-click'));\n  }\n\n  private renderSignIn() {\n    return html`\n      <div class=\"title-container\">\n        <h3 class=\"title\">${msg('Sign in')}</h3>\n      </div>\n      <div\n        class=${classMap({\n          'login-container': true,\n          'signin-only': !this.showRecentUsers,\n        })}\n      >\n        ${\n          this.showUsername\n            ? this.renderTextInput(\n                msg('Username'),\n                HTMLInputTypeAttribute.Text,\n                this.username,\n                this.handleUsernameInput.bind(this),\n                this.usernameError\n              )\n            : nothing\n        }\n        ${\n          this.showPassword\n            ? this.renderTextInput(\n                msg('Password'),\n                HTMLInputTypeAttribute.Password,\n                this.password,\n                this.handlePasswordInput.bind(this),\n                this.passwordError\n              )\n            : nothing\n        }\n        <obc-button\n          variant=${ButtonVariant.raised}\n          fullWidth\n          @click=${this.handleSignInClick}\n        >\n          ${msg('Sign in')}\n        </obc-button>\n      </div>\n      ${\n        this.showRecentUsers\n          ? html`\n              <div class=\"recent-container\">\n                <div class=\"title-container\">\n                  <div class=\"subtitle\">${msg('Recently signed in')}</div>\n                </div>\n                <div class=\"actions-container\">\n                  ${this.renderUserButtons(3, true)}\n                </div>\n              </div>\n            `\n          : nothing\n      }\n    `;\n  }\n\n  private renderSignInSmall() {\n    return html`\n      <div class=\"title-container\">\n        <h3 class=\"title\">${msg('Sign in')}</h3>\n      </div>\n      <div\n        class=${classMap({\n          'login-container': true,\n          'signin-only': !this.showRecentUsers,\n        })}\n      >\n        ${\n          this.showUsername\n            ? this.renderTextInput(\n                msg('Username'),\n                HTMLInputTypeAttribute.Text,\n                this.username,\n                this.handleUsernameInput.bind(this),\n                this.usernameError\n              )\n            : nothing\n        }\n        ${\n          this.showPassword\n            ? this.renderTextInput(\n                msg('Password'),\n                HTMLInputTypeAttribute.Password,\n                this.password,\n                this.handlePasswordInput.bind(this),\n                this.passwordError\n              )\n            : nothing\n        }\n        <obc-button\n          variant=${ButtonVariant.raised}\n          fullWidth\n          @click=${this.handleSignInClick}\n        >\n          ${msg('Sign in')}\n        </obc-button>\n      </div>\n      ${\n        this.showRecentUsers\n          ? html`\n              <div class=\"divider\" aria-hidden=\"true\"></div>\n              <div class=\"recent-container recent\">\n                <div class=\"title-container\">\n                  <div class=\"subtitle\">${msg('Recent')}</div>\n                </div>\n                <div class=\"actions-container\">\n                  ${this.renderUserButtons(3, false)}\n                </div>\n              </div>\n            `\n          : nothing\n      }\n    `;\n  }\n\n  private renderUserSignIn() {\n    return html`\n      <div class=\"title-container\">\n        <h3 class=\"title\">${msg('Sign in')}</h3>\n      </div>\n      <div\n        class=${classMap({\n          'login-container': true,\n          'signin-only': !this.showRecentUsers,\n        })}\n      >\n        <div class=\"user-primary\">\n          ${this.renderUserProfile('vertical', 'large')}\n        </div>\n        <div class=\"fields\">\n          ${\n            this.showPassword\n              ? this.renderTextInput(\n                  msg('Password'),\n                  HTMLInputTypeAttribute.Password,\n                  this.password,\n                  this.handlePasswordInput.bind(this),\n                  this.passwordError\n                )\n              : nothing\n          }\n          <obc-button\n            variant=${ButtonVariant.raised}\n            fullWidth\n            @click=${this.handleSignInClick}\n          >\n            ${msg('Sign in')}\n          </obc-button>\n          ${\n            this.showUseAnotherAccount\n              ? html`\n                  <obc-button\n                    variant=${ButtonVariant.normal}\n                    fullWidth\n                    @click=${this.handleUseAnotherAccountClick}\n                  >\n                    ${msg('Use another account')}\n                  </obc-button>\n                `\n              : nothing\n          }\n        </div>\n      </div>\n      ${\n        this.showRecentUsers\n          ? html`\n              <div class=\"recent-container\">\n                <div class=\"title-container\">\n                  <div class=\"subtitle\">${msg('Recently signed in')}</div>\n                </div>\n                <div class=\"actions-container\">\n                  ${this.renderUserButtons(3, true)}\n                </div>\n              </div>\n            `\n          : nothing\n      }\n    `;\n  }\n\n  private renderUserSignInSmall() {\n    return html`\n      <div class=\"title-container\">\n        <h3 class=\"title\">${msg('Sign in')}</h3>\n      </div>\n      <div class=\"user-container\">\n        ${this.renderUserProfile('horizontal', 'regular')}\n      </div>\n      <div\n        class=${classMap({\n          'login-container': true,\n          'signin-only': !this.showRecentUsers,\n        })}\n      >\n        ${\n          this.showPassword\n            ? this.renderTextInput(\n                msg('Password'),\n                HTMLInputTypeAttribute.Password,\n                this.password,\n                this.handlePasswordInput.bind(this),\n                this.passwordError\n              )\n            : nothing\n        }\n        <obc-button\n          variant=${ButtonVariant.raised}\n          fullWidth\n          @click=${this.handleSignInClick}\n        >\n          ${msg('Sign in')}\n        </obc-button>\n        ${\n          this.showUseAnotherAccount\n            ? html`\n                <obc-button\n                  variant=${ButtonVariant.normal}\n                  fullWidth\n                  @click=${this.handleUseAnotherAccountClick}\n                >\n                  ${msg('Use another account')}\n                </obc-button>\n              `\n            : nothing\n        }\n      </div>\n      ${\n        this.showRecentUsers\n          ? html`\n              <div class=\"divider\" aria-hidden=\"true\"></div>\n              <div class=\"recent-container recent\">\n                <div class=\"title-container\">\n                  <div class=\"subtitle\">${msg('Recent')}</div>\n                </div>\n                <div class=\"actions-container\">\n                  ${this.renderUserButtons(3, false)}\n                </div>\n              </div>\n            `\n          : nothing\n      }\n    `;\n  }\n\n  private renderLoadingSignIn() {\n    return html`\n      <div class=\"title-container\">\n        <h3 class=\"title\">${msg('Sign in')}</h3>\n      </div>\n      <div class=\"user-primary loading\">\n        ${this.renderUserProfile('vertical', 'large')}\n        <obc-progress-bar\n          class=\"progress\"\n          type=${ProgressBarType.linear}\n          mode=${ProgressBarMode.indeterminate}\n          .showValue=${false}\n        ></obc-progress-bar>\n      </div>\n    `;\n  }\n\n  private renderLoadingSignInSmall() {\n    return html`\n      <div class=\"title-container\">\n        <h3 class=\"title\">${msg('Sign in')}</h3>\n      </div>\n      <div class=\"user-primary loading\">\n        ${this.renderUserProfile('horizontal', 'regular')}\n        <obc-progress-bar\n          class=\"progress\"\n          type=${ProgressBarType.linear}\n          mode=${ProgressBarMode.indeterminate}\n          .showValue=${false}\n        ></obc-progress-bar>\n      </div>\n    `;\n  }\n\n  private renderSignedIn() {\n    return html`\n      <div class=\"title-container\">\n        <h3 class=\"title\">${msg('User')}</h3>\n      </div>\n      <div class=\"user-primary signed-in\">\n        ${this.renderUserProfile('vertical', 'large')}\n      </div>\n      <div class=\"divider\" aria-hidden=\"true\"></div>\n      ${\n        this.signedInActions.length\n          ? html`\n              <div class=\"nav-container\">\n                ${this.signedInActions.map((action) => {\n                  const normalizedId = this.normalizeActionId(action.id);\n                  return html`\n                    <obc-navigation-item\n                      .label=${action.label}\n                      hasIcon\n                      @click=${() => this.handleSignedInActionClick(action)}\n                    >\n                      <span slot=\"icon\">\n                        <slot name=\"signed-in-action-icon-${normalizedId}\">\n                          ${this.getSignedInActionIcon(normalizedId)}\n                        </slot>\n                      </span>\n                    </obc-navigation-item>\n                  `;\n                })}\n              </div>\n            `\n          : nothing\n      }\n      <div class=\"button-container\">\n        <obc-button\n          variant=${ButtonVariant.normal}\n          fullWidth\n          @click=${this.handleSignOutClick}\n        >\n          ${msg('Sign out')}\n        </obc-button>\n      </div>\n    `;\n  }\n\n  private renderSignedInSmall() {\n    const primaryAction = this.signedInActions.find(\n      (action) => action.id === this.primaryActionId\n    );\n    return html`\n      <div class=\"title-container\">\n        <h3 class=\"title\">${msg('User')}</h3>\n      </div>\n      <div class=\"user-container\">\n        ${this.renderUserProfile('horizontal', 'regular')}\n      </div>\n      <div class=\"button-container\">\n        ${\n          primaryAction\n            ? html`\n                <obc-button\n                  variant=${ButtonVariant.normal}\n                  fullWidth\n                  @click=${() => this.handleSignedInActionClick(primaryAction)}\n                >\n                  ${primaryAction.label}\n                </obc-button>\n              `\n            : nothing\n        }\n        <obc-button\n          variant=${ButtonVariant.normal}\n          fullWidth\n          @click=${this.handleSignOutClick}\n        >\n          ${msg('Sign out')}\n        </obc-button>\n      </div>\n    `;\n  }\n\n  override render() {\n    let content: TemplateResult | symbol = nothing;\n    if (this.type === ObcUserMenuType.signIn) {\n      content =\n        this.size === ObcUserMenuSize.small\n          ? this.renderSignInSmall()\n          : this.renderSignIn();\n    }\n    if (this.type === ObcUserMenuType.userSignIn) {\n      content =\n        this.size === ObcUserMenuSize.small\n          ? this.renderUserSignInSmall()\n          : this.renderUserSignIn();\n    }\n    if (this.type === ObcUserMenuType.loadingSignIn) {\n      content =\n        this.size === ObcUserMenuSize.small\n          ? this.renderLoadingSignInSmall()\n          : this.renderLoadingSignIn();\n    }\n    if (this.type === ObcUserMenuType.signedIn) {\n      content =\n        this.size === ObcUserMenuSize.small\n          ? this.renderSignedInSmall()\n          : this.renderSignedIn();\n    }\n\n    return html`\n      <div\n        class=${classMap({\n          card: true,\n          [`size-${this.size}`]: true,\n          [`type-${this.type}`]: true,\n        })}\n      >\n        ${content}\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-user-menu': ObcUserMenu;\n  }\n}\n"],"names":["ObcUserMenuType","ObcUserMenuSize"],"mappings":"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"}
+{"version":3,"file":"user-menu.js","sources":["../../../src/components/user-menu/user-menu.ts"],"sourcesContent":["import {LitElement, TemplateResult, html, nothing, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {customElement} from '../../decorator.js';\nimport componentStyle from './user-menu.css?inline';\nimport '../text-input-field/text-input-field.js';\nimport '../button/button.js';\nimport '../user-button/user-button.js';\nimport '../progress-bar/progress-bar.js';\nimport '../navigation-item/navigation-item.js';\nimport '../../icons/icon-calendar-google.js';\nimport '../../icons/icon-log-open-google.js';\nimport '../../icons/icon-settings-iec.js';\nimport '../../icons/icon-user.js';\nimport {\n  HTMLInputTypeAttribute,\n  ObcTextInputFieldTextAlign,\n} from '../text-input-field/text-input-field.js';\nimport {ButtonVariant} from '../button/button.js';\nimport {\n  ProgressBarMode,\n  ProgressBarType,\n} from '../progress-bar/progress-bar.js';\nimport {Size, StyleType, Variant} from '../user-button/user-button.js';\nimport {localized, msg} from '@lit/localize';\nimport {stopPropagation} from '../../internal/events.js';\nimport {PopoverController} from '../../internal/popover-controller.js';\n\nexport enum ObcUserMenuType {\n  signIn = 'sign-in',\n  userSignIn = 'user-sign-in',\n  loadingSignIn = 'loading-sign-in',\n  signedIn = 'signed-in',\n}\n\nexport enum ObcUserMenuSize {\n  regular = 'regular',\n  small = 'small',\n}\n\nexport type ObcUserMenuUser = {\n  initials: string;\n  label: string;\n  role?: string;\n};\n\nexport type ObcUserMenuRecentUserClickEvent = CustomEvent<ObcUserMenuUser>;\n\nexport type ObcUserMenuSignedInAction = {\n  id: string;\n  label: string;\n};\n\n/**\n * `<obc-user-menu>` – A user menu component with sign-in and signed-in layouts.\n *\n * Provides multiple layouts for authentication and account access states, including\n * sign-in forms, user-specific sign-in, loading states, and signed-in navigation.\n *\n * ### Features\n * - **Multiple States:** Supports sign-in, user sign-in, loading, and signed-in layouts.\n * - **Size Options:** Regular and small sizes for compact layouts.\n * - **Recent Users:** Optional \"Recently signed in\" section for quick access.\n * - **Navigation Actions:** Signed-in state lists the actions it is given.\n *\n * ### Variants\n * - `type`: `sign-in`, `user-sign-in`, `loading-sign-in`, `signed-in`\n * - `size`: `regular`, `small`\n *\n * ### Usage Guidelines\n * Use `obc-user-menu` in authentication or account panels where quick access to\n * sign-in, profile, or account actions is needed. The `user-sign-in` type is\n * best for fast re-auth flows; `loading-sign-in` is for pending auth states.\n *\n * ### Properties and Configuration\n * - `type` (`ObcUserMenuType`): Controls the layout state. Defaults to `sign-in`.\n * - `size` (`ObcUserMenuSize`): Controls the overall size. Defaults to `regular`.\n * - `hasRecentlySignedIn` (`boolean`): Toggles the recent users section.\n *   Defaults to `false`.\n * - `showUsername` (`boolean`): Toggles the username field. Defaults to `true`.\n * - `showPassword` (`boolean`): Toggles the password field. Defaults to `true`.\n * - `username` (`string`): Current username value for sign-in layouts.\n * - `password` (`string`): Current password value for sign-in layouts.\n * - `usernameError` (`string`): Error message for the username field.\n * - `passwordError` (`string`): Error message for the password field.\n * - `userInitials` (`string`): Initials for the primary user profile.\n * - `userLabel` (`string`): Label for the primary user profile.\n * - `userRole` (`string`): Role shown under the primary user's label. Omit it\n *   to show no role; only the regular size draws one.\n * - `recentUsers` (`ObcUserMenuUser[]`): List of recent users shown in the\n *   \"Recently signed in\" section. Empty renders no section. Each user may\n *   carry its own `role`.\n * - `showUseAnotherAccount` (`boolean`): Toggles the \"Use another account\"\n *   button in the `user-sign-in` layouts, both sizes. Defaults to `true`.\n * - `signedInActions` (`ObcUserMenuSignedInAction[]`): Actions shown in the\n *   signed-in navigation list. Empty renders no actions.\n * - `primaryActionId` (`string`): Id of the action promoted to a button in the\n *   small signed-in layout.\n *\n * ### Events\n * - `sign-in-click` – Fired when a sign-in button is clicked.\n * - `sign-out-click` – Fired when the sign-out button is clicked.\n * - `use-another-account-click` – Fired when the \"Use another account\" button\n *   is clicked. The menu does not change its own type; set it to `sign-in` in\n *   the handler to show the full form.\n * - `signed-in-action-click` – Fired when a signed-in action is clicked.\n * - `recent-user-click` – Fired when a recent user button is clicked.\n *\n * ### Slots\n * - `signed-in-action-icon-{id}`: Optional icon for a signed-in action. The\n *   `{id}` is the normalized action id.\n *\n * ### Example\n * ```html\n * <obc-user-menu\n *   type=\"user-sign-in\"\n *   size=\"small\"\n *   hasRecentlySignedIn=\"false\"\n *   userInitials=\"JD\"\n *   userLabel=\"John Doe\"\n * ></obc-user-menu>\n * ```\n *\n * @property type - Controls the visual layout of the user menu.\n * @property size - Controls the overall size of the user menu.\n * @property hasRecentlySignedIn - Toggles the \"Recently signed in\" section visibility.\n * @availableWhen hasRecentlySignedIn type in [signIn, userSignIn]\n * @property username - Current username value for sign-in layouts.\n * @availableWhen username showUsername==true && type==signIn\n * @property password - Current password value for sign-in layouts.\n * @availableWhen password showPassword==true && type in [signIn, userSignIn]\n * @property usernameError - Error message for the username field.\n * @availableWhen usernameError type==signIn\n * @property passwordError - Error message for the password field.\n * @availableWhen passwordError type in [signIn, userSignIn]\n * @property userInitials - Initials for the primary user profile.\n * @availableWhen userInitials type!=signIn\n * @property userLabel - Label for the primary user profile.\n * @availableWhen userLabel type!=signIn\n * @property userRole - Role shown under the primary user's label; omit it to show no role.\n * @availableWhen userRole type!=signIn && size==regular\n * @property recentUsers - Recent users for the \"Recently signed in\" section.\n * @property signedInActions - Actions shown in the signed-in navigation list.\n * @availableWhen signedInActions type==signedIn\n * @property showUsername - Controls the visibility of the username field.\n * @availableWhen showUsername type==signIn\n * @property showPassword - Controls the visibility of the password field.\n * @availableWhen showPassword type in [signIn, userSignIn]\n * @property primaryActionId - Id of the action promoted to a button in the small signed-in layout.\n * @availableWhen primaryActionId type==signedIn && size==small\n * @property showUseAnotherAccount - Controls the visibility of the \"Use another account\" button.\n * @availableWhen showUseAnotherAccount type==userSignIn\n * @property softDismiss - Let the browser close this menu on its own: on a click outside it, on `Escape`, or when another menu opens. Leave it off to keep showing and hiding the menu yourself.\n * @property open - Whether the menu is showing.\n * @availableWhen open softDismiss==true\n * @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).\n * @fires {CustomEvent<{username?: string, password?: string}>} sign-in-click - Fired when a sign-in button is clicked.\n * @fires {CustomEvent<void>} sign-out-click - Fired when the sign-out button is clicked.\n * @fires {CustomEvent<void>} use-another-account-click - Fired when the \"Use another account\" button is clicked.\n * @fires {CustomEvent<{id: string, label: string}>} signed-in-action-click - Fired when a signed-in action is clicked.\n * @fires {ObcUserMenuRecentUserClickEvent} recent-user-click - Fired when a recent user button is clicked, carrying that user's entry.\n * @fires {CustomEvent<void>} close - Fired when the menu closed on its own, from a click outside, `Escape`, or another menu opening. `open` is already `false` by the time it arrives.\n * @stable\n */\n@customElement('obc-user-menu')\n@localized()\nexport class ObcUserMenu extends LitElement {\n  @property({type: Boolean}) softDismiss = false;\n\n  @property({type: Boolean}) open = false;\n\n  protected readonly softDismissController = new PopoverController(this);\n\n  @property({type: String}) type: ObcUserMenuType = ObcUserMenuType.signIn;\n\n  @property({type: String}) size: ObcUserMenuSize = ObcUserMenuSize.regular;\n\n  @property({type: Boolean})\n  hasRecentlySignedIn = false;\n\n  @property({type: Boolean, attribute: false})\n  showUsername = true;\n\n  @property({type: String}) username = '';\n\n  @property({type: Boolean, attribute: false})\n  showPassword = true;\n\n  @property({type: String}) password = '';\n\n  @property({type: String}) usernameError = '';\n\n  @property({type: String}) passwordError = '';\n\n  @property({type: String}) userInitials?: string;\n\n  @property({type: String}) userLabel?: string;\n\n  @property({type: String}) userRole?: string;\n\n  @property({type: Array, attribute: false})\n  recentUsers: ObcUserMenuUser[] = [];\n\n  @property({type: Array, attribute: false})\n  signedInActions: ObcUserMenuSignedInAction[] = [];\n\n  @property({type: String}) primaryActionId?: string;\n\n  @property({type: Boolean, attribute: false})\n  showUseAnotherAccount = true;\n\n  private get showRecentUsers() {\n    return this.hasRecentlySignedIn && this.recentUsers.length > 0;\n  }\n\n  private renderTextInput(\n    placeholder: string,\n    type: HTMLInputTypeAttribute = HTMLInputTypeAttribute.Text,\n    value = '',\n    onInput?: (event: Event) => void,\n    errorText = ''\n  ) {\n    const isPassword = type === HTMLInputTypeAttribute.Password;\n    return html`\n      <obc-text-input-field\n        .placeholder=${placeholder}\n        .type=${type}\n        .textAlign=${ObcTextInputFieldTextAlign.Left}\n        .value=${value}\n        .error=${Boolean(errorText)}\n        .errorText=${errorText}\n        .required=${true}\n        .hasClearButton=${!isPassword}\n        @input=${onInput}\n        @change=${stopPropagation}\n        @clear=${stopPropagation}\n      >\n      </obc-text-input-field>\n    `;\n  }\n\n  private renderUserButtons(count: number, isLarge: boolean) {\n    const size = isLarge ? Size.large : Size.regular;\n    const users = this.recentUsers.slice(0, count);\n    return html`\n      <div\n        class=${classMap({\n          users: true,\n          large: isLarge,\n          single: users.length === 1,\n        })}\n      >\n        ${users.map(\n          (user) => html`\n            <obc-user-button\n              .variant=${Variant.initials}\n              .styleType=${StyleType.normal}\n              .size=${size}\n              .initials=${user.initials}\n              .label=${user.label}\n              .sublabel=${isLarge ? user.role : undefined}\n              @click=${() => this.handleRecentUserClick(user)}\n            ></obc-user-button>\n          `\n        )}\n      </div>\n    `;\n  }\n\n  private renderUserProfile(\n    layout: 'vertical' | 'horizontal',\n    size: 'large' | 'regular'\n  ) {\n    if (!this.userInitials && !this.userLabel) {\n      return nothing;\n    }\n    const userButtonSize = size === 'large' ? Size.large : Size.regular;\n    const role = size === 'large' ? this.userRole : undefined;\n    return html`\n      <div\n        class=${classMap({\n          'user-profile': true,\n          [layout]: true,\n        })}\n      >\n        <obc-user-button\n          class=${classMap({\n            'user-avatar': true,\n            [`size-${size}`]: true,\n            'has-role': Boolean(role),\n          })}\n          .variant=${Variant.initials}\n          .styleType=${StyleType.normal}\n          .size=${userButtonSize}\n          .initials=${this.userInitials ?? ''}\n          .label=${this.userLabel ?? ''}\n          .sublabel=${role}\n        ></obc-user-button>\n      </div>\n    `;\n  }\n\n  private getSignedInActionIcon(actionId: string) {\n    switch (actionId) {\n      case 'calendar':\n        return html`<obi-calendar-google></obi-calendar-google>`;\n      case 'log':\n        return html`<obi-log-open-google></obi-log-open-google>`;\n      case 'preferences':\n        return html`<obi-settings-iec></obi-settings-iec>`;\n      case 'user-account':\n        return html`<obi-user></obi-user>`;\n      default:\n        return nothing;\n    }\n  }\n\n  private normalizeActionId(actionId: string) {\n    return actionId\n      .trim()\n      .toLowerCase()\n      .replace(/[^a-z0-9]+/g, '-');\n  }\n\n  private handleSignedInActionClick(action: ObcUserMenuSignedInAction) {\n    this.dispatchEvent(\n      new CustomEvent('signed-in-action-click', {\n        detail: {id: action.id, label: action.label},\n      })\n    );\n  }\n\n  private handleRecentUserClick(user: ObcUserMenuUser) {\n    this.dispatchEvent(\n      new CustomEvent<ObcUserMenuUser>('recent-user-click', {\n        detail: {...user},\n      })\n    );\n  }\n\n  private handleUsernameInput(event: Event) {\n    const target = event.target as {value?: string};\n    this.username = target.value ?? '';\n    if (this.username) {\n      this.usernameError = '';\n    }\n  }\n\n  private handlePasswordInput(event: Event) {\n    const target = event.target as {value?: string};\n    this.password = target.value ?? '';\n    if (this.password) {\n      this.passwordError = '';\n    }\n  }\n\n  private validateSignIn() {\n    let valid = true;\n    const needsUsername =\n      this.type === ObcUserMenuType.signIn && this.showUsername;\n    const needsPassword = this.showPassword;\n\n    if (needsUsername && !this.username) {\n      this.usernameError = msg('Username is required');\n      valid = false;\n    }\n\n    if (needsPassword && !this.password) {\n      this.passwordError = msg('Password is required');\n      valid = false;\n    }\n\n    return valid;\n  }\n\n  private handleSignInClick() {\n    if (!this.validateSignIn()) {\n      return;\n    }\n    this.dispatchEvent(\n      new CustomEvent('sign-in-click', {\n        detail: {\n          username: this.showUsername ? this.username : undefined,\n          password: this.showPassword ? this.password : undefined,\n        },\n      })\n    );\n  }\n\n  private handleSignOutClick() {\n    this.dispatchEvent(new CustomEvent('sign-out-click'));\n  }\n\n  private handleUseAnotherAccountClick() {\n    this.dispatchEvent(new CustomEvent('use-another-account-click'));\n  }\n\n  private renderSignIn() {\n    return html`\n      <div class=\"title-container\">\n        <h3 class=\"title\">${msg('Sign in')}</h3>\n      </div>\n      <div\n        class=${classMap({\n          'login-container': true,\n          'signin-only': !this.showRecentUsers,\n        })}\n      >\n        ${\n          this.showUsername\n            ? this.renderTextInput(\n                msg('Username'),\n                HTMLInputTypeAttribute.Text,\n                this.username,\n                this.handleUsernameInput.bind(this),\n                this.usernameError\n              )\n            : nothing\n        }\n        ${\n          this.showPassword\n            ? this.renderTextInput(\n                msg('Password'),\n                HTMLInputTypeAttribute.Password,\n                this.password,\n                this.handlePasswordInput.bind(this),\n                this.passwordError\n              )\n            : nothing\n        }\n        <obc-button\n          variant=${ButtonVariant.raised}\n          fullWidth\n          @click=${this.handleSignInClick}\n        >\n          ${msg('Sign in')}\n        </obc-button>\n      </div>\n      ${\n        this.showRecentUsers\n          ? html`\n              <div class=\"recent-container\">\n                <div class=\"title-container\">\n                  <div class=\"subtitle\">${msg('Recently signed in')}</div>\n                </div>\n                <div class=\"actions-container\">\n                  ${this.renderUserButtons(3, true)}\n                </div>\n              </div>\n            `\n          : nothing\n      }\n    `;\n  }\n\n  private renderSignInSmall() {\n    return html`\n      <div class=\"title-container\">\n        <h3 class=\"title\">${msg('Sign in')}</h3>\n      </div>\n      <div\n        class=${classMap({\n          'login-container': true,\n          'signin-only': !this.showRecentUsers,\n        })}\n      >\n        ${\n          this.showUsername\n            ? this.renderTextInput(\n                msg('Username'),\n                HTMLInputTypeAttribute.Text,\n                this.username,\n                this.handleUsernameInput.bind(this),\n                this.usernameError\n              )\n            : nothing\n        }\n        ${\n          this.showPassword\n            ? this.renderTextInput(\n                msg('Password'),\n                HTMLInputTypeAttribute.Password,\n                this.password,\n                this.handlePasswordInput.bind(this),\n                this.passwordError\n              )\n            : nothing\n        }\n        <obc-button\n          variant=${ButtonVariant.raised}\n          fullWidth\n          @click=${this.handleSignInClick}\n        >\n          ${msg('Sign in')}\n        </obc-button>\n      </div>\n      ${\n        this.showRecentUsers\n          ? html`\n              <div class=\"divider\" aria-hidden=\"true\"></div>\n              <div class=\"recent-container recent\">\n                <div class=\"title-container\">\n                  <div class=\"subtitle\">${msg('Recent')}</div>\n                </div>\n                <div class=\"actions-container\">\n                  ${this.renderUserButtons(3, false)}\n                </div>\n              </div>\n            `\n          : nothing\n      }\n    `;\n  }\n\n  private renderUserSignIn() {\n    return html`\n      <div class=\"title-container\">\n        <h3 class=\"title\">${msg('Sign in')}</h3>\n      </div>\n      <div\n        class=${classMap({\n          'login-container': true,\n          'signin-only': !this.showRecentUsers,\n        })}\n      >\n        <div class=\"user-primary\">\n          ${this.renderUserProfile('vertical', 'large')}\n        </div>\n        <div class=\"fields\">\n          ${\n            this.showPassword\n              ? this.renderTextInput(\n                  msg('Password'),\n                  HTMLInputTypeAttribute.Password,\n                  this.password,\n                  this.handlePasswordInput.bind(this),\n                  this.passwordError\n                )\n              : nothing\n          }\n          <obc-button\n            variant=${ButtonVariant.raised}\n            fullWidth\n            @click=${this.handleSignInClick}\n          >\n            ${msg('Sign in')}\n          </obc-button>\n          ${\n            this.showUseAnotherAccount\n              ? html`\n                  <obc-button\n                    variant=${ButtonVariant.normal}\n                    fullWidth\n                    @click=${this.handleUseAnotherAccountClick}\n                  >\n                    ${msg('Use another account')}\n                  </obc-button>\n                `\n              : nothing\n          }\n        </div>\n      </div>\n      ${\n        this.showRecentUsers\n          ? html`\n              <div class=\"recent-container\">\n                <div class=\"title-container\">\n                  <div class=\"subtitle\">${msg('Recently signed in')}</div>\n                </div>\n                <div class=\"actions-container\">\n                  ${this.renderUserButtons(3, true)}\n                </div>\n              </div>\n            `\n          : nothing\n      }\n    `;\n  }\n\n  private renderUserSignInSmall() {\n    return html`\n      <div class=\"title-container\">\n        <h3 class=\"title\">${msg('Sign in')}</h3>\n      </div>\n      <div class=\"user-container\">\n        ${this.renderUserProfile('horizontal', 'regular')}\n      </div>\n      <div\n        class=${classMap({\n          'login-container': true,\n          'signin-only': !this.showRecentUsers,\n        })}\n      >\n        ${\n          this.showPassword\n            ? this.renderTextInput(\n                msg('Password'),\n                HTMLInputTypeAttribute.Password,\n                this.password,\n                this.handlePasswordInput.bind(this),\n                this.passwordError\n              )\n            : nothing\n        }\n        <obc-button\n          variant=${ButtonVariant.raised}\n          fullWidth\n          @click=${this.handleSignInClick}\n        >\n          ${msg('Sign in')}\n        </obc-button>\n        ${\n          this.showUseAnotherAccount\n            ? html`\n                <obc-button\n                  variant=${ButtonVariant.normal}\n                  fullWidth\n                  @click=${this.handleUseAnotherAccountClick}\n                >\n                  ${msg('Use another account')}\n                </obc-button>\n              `\n            : nothing\n        }\n      </div>\n      ${\n        this.showRecentUsers\n          ? html`\n              <div class=\"divider\" aria-hidden=\"true\"></div>\n              <div class=\"recent-container recent\">\n                <div class=\"title-container\">\n                  <div class=\"subtitle\">${msg('Recent')}</div>\n                </div>\n                <div class=\"actions-container\">\n                  ${this.renderUserButtons(3, false)}\n                </div>\n              </div>\n            `\n          : nothing\n      }\n    `;\n  }\n\n  private renderLoadingSignIn() {\n    return html`\n      <div class=\"title-container\">\n        <h3 class=\"title\">${msg('Sign in')}</h3>\n      </div>\n      <div class=\"user-primary loading\">\n        ${this.renderUserProfile('vertical', 'large')}\n        <obc-progress-bar\n          class=\"progress\"\n          type=${ProgressBarType.linear}\n          mode=${ProgressBarMode.indeterminate}\n          .showValue=${false}\n        ></obc-progress-bar>\n      </div>\n    `;\n  }\n\n  private renderLoadingSignInSmall() {\n    return html`\n      <div class=\"title-container\">\n        <h3 class=\"title\">${msg('Sign in')}</h3>\n      </div>\n      <div class=\"user-primary loading\">\n        ${this.renderUserProfile('horizontal', 'regular')}\n        <obc-progress-bar\n          class=\"progress\"\n          type=${ProgressBarType.linear}\n          mode=${ProgressBarMode.indeterminate}\n          .showValue=${false}\n        ></obc-progress-bar>\n      </div>\n    `;\n  }\n\n  private renderSignedIn() {\n    return html`\n      <div class=\"title-container\">\n        <h3 class=\"title\">${msg('User')}</h3>\n      </div>\n      <div class=\"user-primary signed-in\">\n        ${this.renderUserProfile('vertical', 'large')}\n      </div>\n      <div class=\"divider\" aria-hidden=\"true\"></div>\n      ${\n        this.signedInActions.length\n          ? html`\n              <div class=\"nav-container\">\n                ${this.signedInActions.map((action) => {\n                  const normalizedId = this.normalizeActionId(action.id);\n                  return html`\n                    <obc-navigation-item\n                      .label=${action.label}\n                      hasIcon\n                      @click=${() => this.handleSignedInActionClick(action)}\n                    >\n                      <span slot=\"icon\">\n                        <slot name=\"signed-in-action-icon-${normalizedId}\">\n                          ${this.getSignedInActionIcon(normalizedId)}\n                        </slot>\n                      </span>\n                    </obc-navigation-item>\n                  `;\n                })}\n              </div>\n            `\n          : nothing\n      }\n      <div class=\"button-container\">\n        <obc-button\n          variant=${ButtonVariant.normal}\n          fullWidth\n          @click=${this.handleSignOutClick}\n        >\n          ${msg('Sign out')}\n        </obc-button>\n      </div>\n    `;\n  }\n\n  private renderSignedInSmall() {\n    const primaryAction = this.signedInActions.find(\n      (action) => action.id === this.primaryActionId\n    );\n    return html`\n      <div class=\"title-container\">\n        <h3 class=\"title\">${msg('User')}</h3>\n      </div>\n      <div class=\"user-container\">\n        ${this.renderUserProfile('horizontal', 'regular')}\n      </div>\n      <div class=\"button-container\">\n        ${\n          primaryAction\n            ? html`\n                <obc-button\n                  variant=${ButtonVariant.normal}\n                  fullWidth\n                  @click=${() => this.handleSignedInActionClick(primaryAction)}\n                >\n                  ${primaryAction.label}\n                </obc-button>\n              `\n            : nothing\n        }\n        <obc-button\n          variant=${ButtonVariant.normal}\n          fullWidth\n          @click=${this.handleSignOutClick}\n        >\n          ${msg('Sign out')}\n        </obc-button>\n      </div>\n    `;\n  }\n\n  override render() {\n    let content: TemplateResult | symbol = nothing;\n    if (this.type === ObcUserMenuType.signIn) {\n      content =\n        this.size === ObcUserMenuSize.small\n          ? this.renderSignInSmall()\n          : this.renderSignIn();\n    }\n    if (this.type === ObcUserMenuType.userSignIn) {\n      content =\n        this.size === ObcUserMenuSize.small\n          ? this.renderUserSignInSmall()\n          : this.renderUserSignIn();\n    }\n    if (this.type === ObcUserMenuType.loadingSignIn) {\n      content =\n        this.size === ObcUserMenuSize.small\n          ? this.renderLoadingSignInSmall()\n          : this.renderLoadingSignIn();\n    }\n    if (this.type === ObcUserMenuType.signedIn) {\n      content =\n        this.size === ObcUserMenuSize.small\n          ? this.renderSignedInSmall()\n          : this.renderSignedIn();\n    }\n\n    return html`\n      <div\n        class=${classMap({\n          card: true,\n          [`size-${this.size}`]: true,\n          [`type-${this.type}`]: true,\n        })}\n      >\n        ${content}\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(componentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-user-menu': ObcUserMenu;\n  }\n}\n"],"names":["ObcUserMenuType","ObcUserMenuSize"],"mappings":"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"}