solid-ui 3.1.0 → 3.1.1

package/dist/components/header/index.esm.js

@@ -72,40 +72,21 @@ const originalIconBase = icons.originalIconBase;
 
 /***/ },
 
-/***/ 225
+/***/ 4614
 (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   Y: () => (/* binding */ Header)
+/* harmony export */   M: () => (/* binding */ LoginButton)
 /* harmony export */ });
 /* harmony import */ var lit__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(6161);
-/* harmony import */ var _iconBase__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3378);
-/* harmony import */ var solid_logic__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3138);
-/* harmony import */ var _loginButton_index__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(9140);
-/* harmony import */ var _signupButton_index__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(1291);
-/* harmony import */ var lit_directives_if_defined_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(1413);
-
-
-
+/* harmony import */ var solid_logic__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3138);
+/* harmony import */ var _downArrow__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(6454);
 
 
 
-const DEFAULT_HELP_MENU_ICON = '';
-const DEFAULT_SOLID_ICON_URL = 'https://solidproject.org/assets/img/solid-emblem.svg';
-const DEFAULT_SIGNUP_URL = 'https://solidproject.org/get_a_pod';
-const DEFAULT_LOGGEDIN_MENU_BUTTON_AVATAR = _iconBase__WEBPACK_IMPORTED_MODULE_1__/* .icons */ .Pt.iconBase + 'emptyProfileAvatar.png';
-class Header extends lit__WEBPACK_IMPORTED_MODULE_0__/* .LitElement */ .WF {
+class LoginButton extends lit__WEBPACK_IMPORTED_MODULE_0__/* .LitElement */ .WF {
   static properties = {
-    logo: {
-      type: String,
-      reflect: true
-    },
-    helpIcon: {
-      type: String,
-      attribute: 'help-icon',
-      reflect: true
-    },
-    layout: {
+    label: {
       type: String,
       reflect: true
     },
@@ -113,897 +94,595 @@ class Header extends lit__WEBPACK_IMPORTED_MODULE_0__/* .LitElement */ .WF {
       type: String,
       reflect: true
     },
-    brandLink: {
-      type: String,
-      attribute: 'brand-link',
-      reflect: true
-    },
-    authState: {
-      type: String,
-      attribute: 'auth-state',
-      reflect: true
-    },
-    loginAction: {
-      type: Object,
-      attribute: false
-    },
-    signUpAction: {
-      type: Object,
-      attribute: false
-    },
-    accountMenu: {
-      type: Array,
-      attribute: false
-    },
-    logoutLabel: {
-      type: String,
-      attribute: 'logout-label',
-      reflect: true
-    },
-    logoutIcon: {
-      type: String,
-      attribute: 'logout-icon',
-      reflect: true
-    },
-    accountIcon: {
-      type: String,
-      attribute: 'account-icon',
-      reflect: true
-    },
-    accountAvatar: {
-      type: String,
-      attribute: 'account-avatar',
-      reflect: true
-    },
-    accountAvatarFallback: {
+    issuerUrl: {
       type: String,
-      attribute: 'account-avatar-fallback',
+      attribute: 'issuer-url',
       reflect: true
     },
-    loginIcon: {
+    icon: {
       type: String,
-      attribute: 'login-icon',
       reflect: true
     },
-    signUpIcon: {
+    layout: {
       type: String,
-      attribute: 'sign-up-icon',
       reflect: true
     },
-    helpMenuList: {
-      type: Array
-    },
-    accountMenuOpen: {
-      state: true
-    },
-    helpMenuOpen: {
+    _popupOpen: {
       state: true
     },
-    hasSlottedAccountMenu: {
+    _issuerInputValue: {
       state: true
     },
-    hasSlottedHelpMenu: {
+    _dropdownOpen: {
       state: true
     }
   };
   static styles = (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .css */ .AH)`
-  :host { // default theme
-    display: block;
-    --header-bg: var(--color-header-row-bg, #332746);
-    --header-text: var(--color-header-text, #ffffff);
-    --header-border: var(--color-border, #efecf3);
-    --header-line: var(--color-header-menu-separator-line, #5e546d);
-    --header-link: var(--color-text-heading, #000000);
-    --header-menu-item-hover: var(--color-header-menu-item-hover, #e6dcff);
-    --header-menu-item-selected: var(--color-header-menu-item-selected, #cbb9ff);
-    --header-menu-bg: var(--color-menu-bg, #f6f5f9);
-    --header-menu-loggedin-bg: var(--color-header-menu-loggedin-bg, #5e546d);
-    --header-menu-text: var(--color-menu-item-text, #654d6c);
-    --header-border-radius: var(--border-radius-sm, 0.2rem);
-    --header-button-bg: var(--color-menu-bg, #ffffff);
-    --header-button-text: var(--color-header-button-text, #0F172B);
-    --header-button-detail-text: var(--color-header-button-detail-text, #99A1AF);
-    --header-shadow: var(--color-header-shadow, 2px 6px 10px 0 rgba(0, 0, 0, 0.4), 2px 8px 24px 0 rgba(0, 0, 0, 0.19));
-    font-family: var(--font-family-base, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif);
-  }
-
-  // for now light and dark are the same
-  :host([theme='dark']) {
-    display: block;
-    --header-bg: var(--color-header-row-bg, #332746);
-    --header-text: var(--color-header-text, #ffffff);
-    --header-border: var(--color-border, #efecf3);
-    --header-line: var(--color-header-menu-separator-line, #5e546d);
-    --header-link: var(--color-text-heading, #000000);
-    --header-menu-item-hover: var(--color-header-menu-item-hover, #e6dcff);
-    --header-menu-item-selected: var(--color-header-menu-item-selected, #cbb9ff);
-    --header-menu-bg: var(--color-menu-bg, #f6f5f9);
-    --header-menu-loggedin-bg: var(--color-header-menu-loggedin-bg, #5e546d);
-    --header-menu-text: var(--color-menu-item-text, #654d6c);
-    --header-border-radius: var(--border-radius-sm, 0.2rem);
-    --header-button-bg: var(--color-menu-bg, #ffffff);
-    --header-button-text: var(--color-header-button-text, #0f172a);
-    --header-button-detail-text: var(--color-header-button-detail-text, #878192);
-    --header-icon-filter: invert(1) brightness(1.3); /* special way to invert SVG color of icons, from white to black */
-    --header-shadow: var(--color-header-shadow, 2px 6px 10px 0 rgba(0, 0, 0, 0.4), 2px 8px 24px 0 rgba(0, 0, 0, 0.19));
-    font-family: var(--font-family-base, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif);
-  }
+    :host { /* default theme */
+      display: inline-block;
+      position: relative;
+      z-index: 400;
+      --login-button-background: var(--lavender-900, #7c4cff);
+      --login-button-text: var(--color-header-text, #ffffff);
+      --popup-background: var(--color-background, #F8F9FB);
+      --popup-text: var(--color-text, #1A1A1A);
+      --popup-border: var(--color-border, #E5E7EB);
+      --popup-shadow: var(--box-shadow-sm, 0 1px 4px rgba(124,77,255,0.12));
+      --popup-overlay-background: rgba(0, 0, 0, 0.6);
+      --issuer-input-background: var(--color-background, #F8F9FB);
+      --issuer-input-text: var(--color-text, #1A1A1A);
+      --issuer-input-border: var(--color-text, #1A1A1A);
+      --issuer-button-background: var(--color-background, #F8F9FB);
+      --issuer-button-text: var(--color-text, #1A1A1A);
+      --issuer-button-border: var(--color-border, #E5E7EB);
+      --issuer-button-hover-background: var(--lavender-900, #7c4cff);
+      --issuer-label-color: var(--grey-purple-700, #1A1A1A);
+      --issuer-placeholder-color: var(--grey-purple-700, #5e546d);;
+      --error-text-color: var(--color-error, #B00020);
+    }
 
-  :host([layout='mobile']) .headerInner {
-    flex-wrap: wrap;
-    text-align: center;
-    gap: 0.5rem;
-  }
+    :host([theme='dark']) {
+      display: inline-block;
+      position: relative;
+      z-index: 900;
+      --login-button-background: var(--lavender-900, #7c4cff);
+      --login-button-text: var(--color-header-text, #ffffff);
+      --popup-background: var(--color-background, #F8F9FB);
+      --popup-text: var(--color-text, #1A1A1A);
+      --popup-border: var(--color-border, #E5E7EB);
+      --popup-shadow: var(--box-shadow-sm, 0 1px 4px rgba(124,77,255,0.12));
+      --popup-overlay-background: rgba(0, 0, 0, 0.6);
+      --issuer-input-background: var(--color-background, #F8F9FB);
+      --issuer-input-text: var(--color-text, #1A1A1A);
+      --issuer-input-border: var(--color-text, #1A1A1A);
+      --issuer-button-background: var(--color-background, #F8F9FB);
+      --issuer-button-text: var(--color-text, #1A1A1A);
+      --issuer-button-border: var(--color-text, #1A1A1A);
+      --issuer-button-hover-background: var(--lavender-900, #7c4cff);
+      --issuer-label-color: var(--grey-purple-700, #1A1A1A);
+      --issuer-placeholder-color: var(--grey-purple-700, #5e546d);;
+      --error-text-color: var(--color-error, #B00020);
+    }
 
-  .headerInner {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    background: var(--header-bg);
-    color: var(--header-text);
-    padding: 0 1.5rem;
-    height: 3.75rem;
-  }
+    .login-button {
+      display: flex;
+      height: 35px;
+      padding: var(--spacing-xxs, 0.3125rem) var(--spacing-xs, 0.75rem);
+      align-items: center;
+      gap: var(--spacing-xxs, 0.3125rem);
+      border-radius: var(--border-radius-base, 0.3125rem);
+      background: var(--login-button-background);
+      border: none;
+      color: var(--login-button-text);
+      cursor: pointer;
+      font: inherit;
+      line-height: 1;
+      white-space: nowrap;
+      text-decoration: none;
+      box-sizing: border-box;
+      transition: transform 0.2s ease;
+    }
 
-  ::slotted([slot='navigation-toggle']) {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    margin-right: 0.75rem;
-  }
+    .login-button-icon {
+      width: 16px;
+      height: 16px;
+      display: inline-block;
+      object-fit: contain;
+    }
 
-  :host([layout='desktop']) ::slotted([slot='navigation-toggle']) {
-    display: none !important;
-  }
+    .login-button:active {
+      transform: translateY(1px);
+    }
 
-  .brand {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    text-decoration: none;
-    color: inherit;
-  }
+    .popup-dialog {
+      border: none;
+      padding: 0;
+      background: transparent;
+      outline: none;
+      overflow: visible;
+      width: min(30rem, calc(100vw - 2rem));
+      max-width: calc(100vw - 2rem);
+      max-height: calc(100dvh - 2rem);
+    }
 
-  .brand-not-displayed {
-    display: none;
-  }
+    .popup-dialog::backdrop {
+      background: var(--popup-overlay-background, rgba(0, 0, 0, 0.6));
+    }
 
-  .brand img {
-    height: 50px;
-    width: 55px;
-    object-fit: contain;
-  }
+    .popup-box {
+      background: var(--popup-background);
+      color: var(--popup-text);
+      box-shadow: var(--popup-shadow);
+      border: 1px solid var(--popup-border);
+      border-radius: var(--border-radius-md, 0.5rem);
+      width: min(30rem, calc(100vw - 2rem));
+      min-width: min(30rem, calc(100vw - 2rem));
+      max-width: calc(100vw - 2rem);
+      max-height: calc(100dvh - 2rem);
+      overflow: auto;
+      z-index: 1001;
+    }
 
-  .menu {
-    display: flex;
-    align-items: center;
-    gap: 0.625rem;
-    margin-left: auto;
-  }
+    .popup-top-menu {
+      border-bottom: 1px solid #DDD;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      padding-bottom: 8px;
+      margin-bottom: 8px;
+      padding: 1rem;
+      background: var(--gray-200, #E5E7EB);
+    }
 
-  .auth-actions {
-    display: flex;
-    align-items: center;
-    gap: 0.625rem;
-  }
+    .popup-title {
+      font-weight: 800;
+    }
 
-  .auth-button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.5rem;
-    min-height: 2.25rem;
-    padding: 0.5rem 0.875rem;
-    border: 1px solid var(--header-border);
-    border-radius: 999px;
-    background: var(--header-menu-bg);
-    color: var(--header-button-text);
-    cursor: pointer;
-    font: inherit;
-    line-height: 1;
-    text-decoration: none;
-    box-sizing: border-box;
-    transition: border-color 0.2s ease, transform 0.2s ease;
-  }
+    .popup-close {
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      font-size: 1.25rem;
+      line-height: 1;
+      padding: 0 0.25rem;
+    }
 
-  .auth-button:hover {
-    border-color: var(--header-menu-item-hover);
-  }
+    .issuer-text-section {
+      display: flex;
+      flex-direction: column;
+      padding: 1rem 1rem 1.75rem;
+    }
 
-  .auth-button:active {
-    transform: translateY(1px);
-  }
+    .issuer-text-label {
+      color: var(--issuer-label-color);
+      margin-bottom: 6px;
+    }
 
-  .auth-button-sign-up {
-    background: color-mix(in srgb, var(--header-menu-bg) 78%, var(--header-menu-item-selected) 22%);
-  }
+    .issuer-text-row {
+      display: flex;
+      flex-direction: row;
+      gap: 6px;
+      align-items: flex-start;
+    }
 
-  .header-menu-separator {
-    background: var(--header-line);
-    width: 1px;
-    height: 2.3rem;
-  }
+    .issuer-input-wrapper {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+      position: relative;
+    }
 
-  .account-menu-container {
-    position: relative;
-    display: flex;
-    align-items: center;
-  }
+    .issuer-input-field-row {
+      display: flex;
+      flex-direction: row;
+      position: relative;
+    }
 
-  .account-menu-trigger {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.625rem;
-    min-height: 2.5rem;
-    border: 1px solid var(--header-menu-loggedin-bg);
-    border-radius: 999px;
-    background: var(--header-menu-loggedin-bg);
-    color: var(--header-button-text);
-    cursor: pointer;
-    font: inherit;
-    line-height: 1;
-  }
+    .issuer-text-input {
+      flex: 1;
+      padding: 0.375rem 2.75rem 0.375rem 0.5rem;
+      border: 1px solid var(--issuer-input-border);
+      border-radius: var(--border-radius-base, 0.3125rem);
+      background: var(--issuer-input-background);
+      color: var(--issuer-input-text);
+      font: inherit;
+      min-width: 0;
+    }
 
-  :host([layout='mobile']) .account-menu-trigger {
-    gap: 0;
-    min-height: auto;
-    padding: 0;
-    border: 1.5px solid var(--header-border);
-    background: var(--header-menu-loggedin-bg);
-  }
+    .issuer-text-input::placeholder {
+      color: var(--issuer-placeholder-color);
+    }
 
-  :host([layout='mobile']) .account-menu-trigger-label {
-    display: none;
-  }
+    .issuer-dropdown-toggle {
+      position: absolute;
+      right: 6px;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 26px;
+      height: 26px;
+      padding: 0;
+      border: none;
+      background: transparent;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      border-radius: var(--border-radius-base, 0.3125rem);
+    }
 
-  .account-menu-trigger:disabled {
-    cursor: default;
-    opacity: 0.7;
-  }
+    .issuer-dropdown-toggle:hover {
+      background: var(--color-header-menu-item-hover, #e6dcff);
+    }
 
-  .account-menu-trigger-icon {
-    width: 1rem;
-    height: 1rem;
-    object-fit: contain;
-    flex-shrink: 0;
-  }
+    .issuer-dropdown-toggle svg {
+      width: 14px;
+      height: 14px;
+      display: block;
+    }
 
-  .account-avatar,
-  .account-menu-avatar {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    overflow: hidden;
-    background: color-mix(in srgb, var(--header-bg) 18%, #ded8e7 82%);
-    color: var(--header-button-text);
-    font-size: 0.75rem;
-    font-weight: 600;
-    text-transform: uppercase;
-  }
+    .issuer-dropdown-list {
+      position: absolute;
+      top: calc(100% + 6px);
+      left: 0;
+      right: 0;
+      border: 1px solid var(--color-border, #E5E7EB);
+      border-top: none;
+      border-radius: 0 0 var(--border-radius-base, 0.3125rem) var(--border-radius-base, 0.3125rem);
+      background: var(--issuer-input-background);
+      overflow: visible;
+      z-index: 10;
+      box-shadow: 0 4px 12px rgba(124, 77, 255, 0.12);
+    }
 
-  .account-avatar {
-    width: 1.75rem;
-    height: 1.75rem;
-    border-radius: 999px;
-    border: 1.5px solid var(--header-border);
-  }
+    .issuer-dropdown-item {
+      display: block;
+      width: 100%;
+      padding: 0.625rem 0.75rem;
+      border: none;
+      border-bottom: 1px solid var(--color-border, #E5E7EB);
+      background: transparent;
+      color: var(--issuer-button-text);
+      cursor: pointer;
+      font: inherit;
+      text-align: left;
+      box-sizing: border-box;
+    }
 
-  .account-menu-avatar {
-    width: 2rem;
-    height: 2rem;
-    border-radius: 0.5rem;
-  }
+    .issuer-dropdown-item:last-child {
+      border-bottom: none;
+    }
 
-  .account-avatar img,
-  .account-menu-avatar img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
+    .issuer-dropdown-item:hover {
+      background: var(--color-header-menu-item-hover, #e6dcff);
+      border-radius: var(--border-radius-base-md, 0.5rem);
+    }
 
-  .account-avatar-img {
-    width: 1.75rem;
-    height: 1.75rem;
-    border-radius: 999px;
-    object-fit: cover;
-    background-color: var(--header-border);
-  }
+    .popup-footer {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      gap: 8px;
+      padding: 0.75rem 1rem 1rem;
+    }
 
-  .account-dropdown {
-    position: absolute;
-    top: calc(100% + 0.9rem);
-    right: 0;
-    min-width: 15rem;
-    padding: 0.5rem;
-    background: var(--header-button-bg);
-    border: 1px solid var(--header-border);
-    border-radius: var(--header-border-radius);
-    box-shadow: var(--header-shadow);
-    z-index: 10;
-  }
+    .popup-footer-hr {
+      margin: 0;
+      border: none;
+      border-top: 1px solid var(--popup-border, #E5E7EB);
+    }
 
-  .account-dropdown[hidden] {
-    display: none;
-  }
+    .popup-cancel-button {
+      padding: 0.5rem 1.25rem;
+      border: 1px solid #C0BFC7;
+      border-radius: var(--border-radius-base, 0.3125rem);
+      background: var(--popup-background);
+      color: #314158;
+      cursor: pointer;
+      font: inherit;
+    }
 
-  .account-menu-list {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
-  }
+    .popup-cancel-button:hover {
+      background: #D1D5DB;
+    }
 
-  .account-menu-item-link,
-  .account-menu-item-button,
-  ::slotted([slot='account-menu']) {
-    display: flex;
-    align-items: center;
-    gap: 0.625rem;
-    width: 100%;
-    box-sizing: border-box;
-    color: var(--header-link);
-    text-decoration: none;
-    background: transparent;
-    border: 1px solid transparent;
-    border-radius: 10px;
-    padding: 0.5rem;
-    cursor: pointer;
-    font: inherit;
-    text-align: left;
-  }
+    .popup-login-button {
+      padding: 0.5rem 1.25rem;
+      border: none;
+      border-radius: var(--border-radius-base, 0.3125rem);
+      background: var(--lavender-900, #7c4cff);
+      color: #ffffff;
+      cursor: pointer;
+      font: inherit;
+    }
 
-  .account-menu-item-link:hover,
-  .account-menu-item-button:hover {
-    color: var(--header-link);
-    background: var(--header-menu-item-hover);
-    border-color: var(--header-menu-item-hover);
-  }
+    .popup-login-button:hover {
+      background: #6a3de8;
+    }
 
-  .account-menu-item-link:active,
-  .account-menu-item-button:active {
-    color: var(--header-link);
-    background: var(--header-menu-item-selected);
-    border-color: var(--header-menu-item-selected);
-    transform: translateY(1px);
-  }
+    .popup-login-button:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
 
-  .account-switch {
-    display: block;
-    width: 100%;
-    color: var(--header-menu-text);
-    text-align: left;
-    text-transform: uppercase;
-    font-size: 80%;
-  }
+    .error-msg {
+      color: var(--error-text-color);
+      font-size: 0.875rem;
+      margin-top: 8px;
+    }
 
-  .dropdown-menu-separator {
-    display: block;
-    width: calc(100% + 1rem);
-    margin: 0.5rem -0.5rem;
-    border: 0;
-    border-top: 1px solid var(--header-border);
-  }
+    @media (max-width: 40rem) {
+      .popup-dialog {
+        width: calc(100vw - 1rem);
+        max-width: calc(100vw - 1rem);
+        max-height: calc(100dvh - 1rem);
+      }
 
-  .account-menu-copy {
-    display: flex;
-    flex-direction: column;
-    min-width: 0;
-  }
+      .popup-box {
+        width: calc(100vw - 1rem);
+        min-width: 0;
+        max-width: calc(100vw - 1rem);
+        max-height: calc(100dvh - 1rem);
+        border-radius: var(--border-radius-base, 0.3125rem);
+      }
 
-  .account-menu-label {
-    color: var(--header-button-text);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
+      .popup-top-menu,
+      .issuer-text-section,
+      .popup-footer {
+        padding-left: 0.75rem;
+        padding-right: 0.75rem;
+      }
 
-  .account-menu-webid {
-    color: var(--header-button-detail-text);
-    font-size: 0.5rem;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
+      .popup-footer {
+        flex-wrap: wrap;
+        gap: 0.625rem;
+      }
 
-  .help-menu-container {
-    position: relative;
-    display: flex;
-    align-items: center;
-    background: transparent;
-  }
+      .popup-footer > button {
+        flex: 1 1 100%;
+      }
 
-  .help-menu-trigger {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0;
-    border: 0;
-    background: transparent;
-    cursor: pointer;
+      .issuer-text-row,
+      .issuer-input-field-row {
+        width: 100%;
+      }
+    }
+  `;
+  _issuerInputId = `issuer-url-input-${Math.random().toString(36).slice(2, 10)}`;
+  _errorMsg = '';
+  constructor() {
+    super();
+    this.label = 'Log In';
+    this.theme = 'light';
+    this.issuerUrl = '';
+    this.icon = '';
+    this.layout = 'desktop';
+    this._popupOpen = false;
+    this._issuerInputValue = '';
+    this._dropdownOpen = false;
   }
-
-  .help-menu-trigger:disabled {
-    cursor: default;
+  connectedCallback() {
+    super.connectedCallback();
   }
-
-  .help-dropdown {
-    position: absolute;
-    top: calc(100% + 0.9rem);
-    right: 0;
-    min-width: 12rem;
-    padding: 0.5rem;
-    background: var(--header-button-bg);
-    border: 1px solid var(--header-border);
-    border-radius: var(--header-border-radius);
-    box-shadow: var(--header-shadow);
-    z-index: 10;
+  disconnectedCallback() {
+    super.disconnectedCallback();
   }
-
-  .help-dropdown[hidden] {
-    display: none;
+  _openPopup() {
+    const offline = (0,solid_logic__WEBPACK_IMPORTED_MODULE_1__.offlineTestID)();
+    if (offline) {
+      this._loginComplete(offline.uri);
+      return;
+    }
+    this._issuerInputValue = typeof localStorage !== 'undefined' && localStorage.getItem('loginIssuer') || this.issuerUrl || '';
+    this._errorMsg = '';
+    this._popupOpen = true;
   }
-
-  .help-dropdown-content {
-    display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
+  _closePopup() {
+    this._popupOpen = false;
   }
-
-  .help-menu-list {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
+  updated() {
+    const dialog = this.shadowRoot?.querySelector('dialog');
+    if (!dialog) return;
+    if (this._popupOpen && !dialog.open) {
+      dialog.showModal();
+    } else if (!this._popupOpen && dialog.open) {
+      dialog.close();
+    }
   }
-
-  .help-menu-list a,
-  .help-menu-list button,
-  ::slotted([slot='help-menu']) {
-    display: block;
-    width: 100%;
-    box-sizing: border-box;
-    color: var(--header-link);
-    text-decoration: none;
-    background: transparent;
-    border: 1px solid transparent;
-    border-radius: 4px;
-    padding: 0.375rem 0.5rem;
-    cursor: pointer;
-    font: inherit;
-    text-align: left;
+  async _loginToIssuer(issuerUri) {
+    if (!issuerUri) return;
+    try {
+      // clear authorization metadata from store
+      ;
+      solid_logic__WEBPACK_IMPORTED_MODULE_1__.solidLogicSingleton.store.updater.flagAuthorizationMetadata();
+      const preLoginRedirectHash = new URL(window.location.href).hash;
+      if (preLoginRedirectHash) {
+        window.localStorage.setItem('preLoginRedirectHash', preLoginRedirectHash);
+      }
+      window.localStorage.setItem('loginIssuer', issuerUri);
+      const locationUrl = new URL(window.location.href);
+      locationUrl.hash = '';
+      await solid_logic__WEBPACK_IMPORTED_MODULE_1__.authSession.login({
+        redirectUrl: locationUrl.href,
+        oidcIssuer: issuerUri
+      });
+    } catch (err) {
+      this._errorMsg = err.message || String(err);
+      this.requestUpdate();
+    }
   }
-
-  .help-menu-list a:hover,
-  .help-menu-list button:hover {
-    color: var(--header-link);
-    background: var(--header-menu-item-hover);
-    border-color: var(--header-menu-item-hover);
+  _loginComplete(webIdUri) {
+    solid_logic__WEBPACK_IMPORTED_MODULE_1__.authn.saveUser(webIdUri);
+    this.dispatchEvent(new CustomEvent('login-success', {
+      detail: {
+        webId: webIdUri
+      },
+      bubbles: true,
+      composed: true
+    }));
   }
-
-  .help-menu-list a:active,
-  .help-menu-list button:active {
-    color: var(--header-link);
-    background: var(--header-menu-item-selected);
-    border-color: var(--header-menu-item-selected);
-    transform: translateY(1px);
-  }
-
-  ::slotted(a), ::slotted(button) {
-    color: var(--header-link);
-    text-decoration: none;
-    background: var(--header-button-bg);
-    border: 1px solid var(--header-border);
-    border-radius: 4px;
-    padding: 0.25rem 0.5rem;
-    cursor: pointer;
-    font: inherit;
-  }
-
-  .help-icon {
-    width: 35px;
-    height: 35px;
-    cursor: pointer;
-  }
-
-  .help-text {
-    color: var(--header-text, #ffffff);
-    font: inherit;
-  }
-
-  .logout-action-icon {
-    width: 16px;
-    height: 16px;
-    display: inline-block;
-    object-fit: contain;
-    margin-right: 0.5rem;
-  }
-  `;
-  constructor() {
-    super();
-    this.logo = DEFAULT_SOLID_ICON_URL;
-    this.helpIcon = DEFAULT_HELP_MENU_ICON;
-    this.layout = 'desktop';
-    this.theme = 'light';
-    this.brandLink = '#';
-    this.authState = 'logged-out';
-    this.loginAction = {
-      label: 'Log In',
-      action: 'login'
-    };
-    this.signUpAction = {
-      label: 'Sign Up',
-      action: 'sign-up',
-      url: DEFAULT_SIGNUP_URL
-    };
-    this.accountMenu = [];
-    this.logoutLabel = 'Log Out';
-    this.logoutIcon = '';
-    this.accountIcon = '▼';
-    this.accountAvatar = '';
-    this.accountAvatarFallback = '';
-    this.loginIcon = '';
-    this.signUpIcon = '';
-    this.helpMenuList = [];
-    this.accountMenuOpen = false;
-    this.helpMenuOpen = false;
-    this.hasSlottedAccountMenu = false;
-    this.hasSlottedHelpMenu = false;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    document.addEventListener('click', this.handleDocumentClick);
-    window.addEventListener('keydown', this.handleWindowKeydown);
-  }
-  disconnectedCallback() {
-    document.removeEventListener('click', this.handleDocumentClick);
-    window.removeEventListener('keydown', this.handleWindowKeydown);
-    super.disconnectedCallback();
-  }
-  handleHelpMenuClick(item, event) {
-    event.preventDefault();
-    this.helpMenuOpen = false;
-    this.dispatchEvent(new CustomEvent('help-menu-select', {
-      detail: item,
-      bubbles: true,
-      composed: true
-    }));
-    if (item.url) {
-      const target = item.target || '_blank';
-      const features = target === '_blank' ? 'noopener,noreferrer' : undefined;
-      window.open(item.url, target, features);
-    }
-  }
-  handleAccountMenuClick(item) {
-    this.accountMenuOpen = false;
-    this.dispatchEvent(new CustomEvent('account-menu-select', {
-      detail: item,
-      bubbles: true,
-      composed: true
-    }));
-  }
-  handleDocumentClick = event => {
-    if (!event.composedPath().includes(this)) {
-      this.accountMenuOpen = false;
-      this.helpMenuOpen = false;
-    }
-  };
-  handleWindowKeydown = event => {
-    if (event.key === 'Escape' && (this.accountMenuOpen || this.helpMenuOpen)) {
-      this.accountMenuOpen = false;
-      this.helpMenuOpen = false;
-    }
-  };
-  handleAccountSlotChange(event) {
-    const slot = event.target;
-    this.hasSlottedAccountMenu = slot.assignedElements({
-      flatten: true
-    }).length > 0;
-  }
-  handleHelpSlotChange(event) {
-    const slot = event.target;
-    this.hasSlottedHelpMenu = slot.assignedElements({
-      flatten: true
-    }).length > 0;
-  }
-  toggleAccountMenu(event) {
-    event.preventDefault();
-    if (!this.hasAccountMenuItems()) return;
-    this.helpMenuOpen = false;
-    this.accountMenuOpen = !this.accountMenuOpen;
-  }
-  toggleHelpMenu(event) {
-    event.preventDefault();
-    if (!this.hasHelpMenuItems()) return;
-    this.accountMenuOpen = false;
-    this.helpMenuOpen = !this.helpMenuOpen;
-  }
-  hasAccountMenuItems() {
-    return Boolean(this.accountMenu?.length || this.hasSlottedAccountMenu || this.logoutLabel);
-  }
-  hasHelpMenuItems() {
-    return Boolean(this.helpMenuList?.length || this.hasSlottedHelpMenu);
-  }
-  shouldRenderHelpMenu() {
-    return this.layout !== 'mobile' && this.hasHelpMenuItems();
-  }
-  renderLoggedInAvatar(avatar, wrapperClass = 'account-avatar') {
-    const hasAvatar = Boolean(avatar);
-    const imageSrc = hasAvatar ? avatar : this.accountAvatarFallback || DEFAULT_LOGGEDIN_MENU_BUTTON_AVATAR;
-    const imageAlt = hasAvatar ? 'Profile Avatar' : 'Default Avatar';
-    if (this.layout === 'mobile' && wrapperClass === 'account-avatar') {
-      return (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .html */ .qy)`<img class="account-avatar-img" src="${imageSrc}" alt="${imageAlt}" />`;
-    }
-    return (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .html */ .qy)`
-      <span class="${wrapperClass}" aria-hidden="true">
-        <img src="${imageSrc}" alt="${imageAlt}" />
-      </span>
-    `;
-  }
-  renderLoggedOutActions() {
-    return (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .html */ .qy)`
-      <div class="auth-actions" part="auth-actions">
-        <slot name="login-action">
-          <solid-ui-login-button
-            label="${this.loginAction.label}"
-            icon=${(0,lit_directives_if_defined_js__WEBPACK_IMPORTED_MODULE_5__/* .ifDefined */ .J)(this.layout !== 'mobile' ? this.loginIcon || this.loginAction.icon : undefined)}
-            layout="${this.layout}"
-            theme="${this.theme}"
-            part="login-action"
-            @login-success="${() => this.handleLoginSuccess()}"
-          ></solid-ui-login-button>
-        </slot>
-        <slot name="sign-up-action">
-          <solid-ui-signup-button
-            label="${this.signUpAction.label}"
-            signup-url="${(0,lit_directives_if_defined_js__WEBPACK_IMPORTED_MODULE_5__/* .ifDefined */ .J)(this.signUpAction.url)}"
-            layout="${this.layout}"
-            .icon=${(0,lit_directives_if_defined_js__WEBPACK_IMPORTED_MODULE_5__/* .ifDefined */ .J)(this.layout !== 'mobile' ? this.signUpIcon || this.signUpAction.icon : undefined)}
-            theme="${this.theme}"
-            part="sign-up-action"
-          ></solid-ui-signup-button>
-        </slot>
-      </div>
-    `;
-  }
-  handleLoginSuccess() {
-    this.authState = 'logged-in';
-    this.dispatchEvent(new CustomEvent('auth-action-select', {
-      detail: {
-        role: 'login'
-      },
-      bubbles: true,
-      composed: true
-    }));
-  }
-  async handleLogout() {
-    this.accountMenuOpen = false;
-    try {
-      await solid_logic__WEBPACK_IMPORTED_MODULE_2__.authSession.logout();
-    } catch (_err) {
-      // logout errors are non-fatal — proceed to clear state
-    }
-    this.authState = 'logged-out';
-    this.dispatchEvent(new CustomEvent('logout-select', {
-      detail: {
-        role: 'logout'
-      },
-      bubbles: true,
-      composed: true
-    }));
+  _handleGoClick() {
+    this._dropdownOpen = false;
+    this._loginToIssuer(this._issuerInputValue);
   }
-  renderAccountMenuItem(item) {
-    const content = (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .html */ .qy)`
-      ${this.renderLoggedInAvatar(item.avatar, 'account-menu-avatar')}
-      <span class="account-menu-copy">
-        <span class="account-menu-label">${item.label}</span>
-        ${item.webid && this.layout !== 'mobile' ? (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .html */ .qy)`<span class="account-menu-webid">${item.webid}</span>` : ''}
-      </span>
-    `;
-    if (item.url) {
-      return (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .html */ .qy)`
-        <a
-          class="account-menu-item-link"
-          href="${item.url}"
-          @click="${() => this.handleAccountMenuClick(item)}"
-          part="account-menu-item"
-          role="menuitem"
-        >
-          ${content}
-        </a>
-      `;
-    }
-    return (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .html */ .qy)`
-      <button
-        class="account-menu-item-button"
-        type="button"
-        @click="${() => this.handleAccountMenuClick(item)}"
-        part="account-menu-item"
-        role="menuitem"
-      >
-        ${content}
-      </button>
-    `;
+  _toggleDropdown() {
+    this._dropdownOpen = !this._dropdownOpen;
   }
-  renderLoggedInActions() {
-    return (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .html */ .qy)`
-      <div class="account-menu-container" part="account-menu-container">
-        <slot name="account-trigger">
-          <button
-            id="accountMenuTrigger"
-            class="account-menu-trigger"
-            type="button"
-            aria-haspopup="menu"
-            aria-expanded="${this.accountMenuOpen ? 'true' : 'false'}"
-            ?disabled="${!this.hasAccountMenuItems()}"
-            @click="${e => this.toggleAccountMenu(e)}"
-            part="account-menu-trigger"
-          >
-            ${this.renderLoggedInAvatar(this.accountAvatar)}
-            ${this.layout !== 'mobile' && this.accountIcon ? (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .html */ .qy)`
-              <img class="account-menu-trigger-icon" src="${this.accountIcon}" alt="" aria-hidden="true" />` : ''}
-          </button>
-        </slot>
-
-        <nav
-          id="accountMenu"
-          class="account-dropdown"
-          role="menu"
-          ?inert="${!this.accountMenuOpen || !this.hasAccountMenuItems()}"
-          ?hidden="${!this.accountMenuOpen || !this.hasAccountMenuItems()}"
-          part="account-dropdown"
-        >
-          <slot name="account-switch" class="account-switch">Switch account</slot>
-          <hr class="dropdown-menu-separator" />
-          <slot name="account-menu" @slotchange="${e => this.handleAccountSlotChange(e)}"></slot>
-          ${this.accountMenu && this.accountMenu.length ? (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .html */ .qy)`
-            <ul class="account-menu-list">
-              ${this.accountMenu.map(item => (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .html */ .qy)`
-                <li>${this.renderAccountMenuItem(item)}</li>
-              `)}
-            </ul>
-          ` : ''}
-          ${this.logoutLabel ? (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .html */ .qy)`
-            <hr class="dropdown-menu-separator" />
-            <button
-              class="account-menu-item-button"
-              type="button"
-              @click="${() => this.handleLogout()}"
-              part="logout-action"
-              role="menuitem"
-            >
-              ${this.logoutIcon && this.layout !== 'mobile' ? (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .html */ .qy)`<img class="logout-action-icon" src="${this.logoutIcon}" alt="" aria-hidden="true" part="logout-action-icon" />` : ''}
-              ${this.logoutLabel}
-            </button>
-          ` : ''}
-        </nav>
-      </div>
-    `;
+  _selectIssuerFromDropdown(uri) {
+    this._issuerInputValue = uri;
+    this._dropdownOpen = false;
   }
-  renderUserArea() {
-    if (this.authState === 'logged-out') {
-      return this.renderLoggedOutActions();
-    }
-    return this.renderLoggedInActions();
+  _handleInputChange(e) {
+    this._issuerInputValue = e.target.value;
   }
-  firstUpdated() {
-    const brandLink = this.shadowRoot?.getElementById('brandLink');
-    if (brandLink) {
-      brandLink.classList.toggle('brand-not-displayed', this.layout === 'mobile');
+  _handleInputKeydown(e) {
+    if (e.key === 'Enter') {
+      this._loginToIssuer(this._issuerInputValue);
     }
-  }
-  updated(changedProperties) {
-    if (changedProperties.has('layout')) {
-      const brandLink = this.shadowRoot?.getElementById('brandLink');
-      if (brandLink) {
-        brandLink.classList.toggle('brand-not-displayed', this.layout === 'mobile');
-      }
+    if (e.key === 'Escape') {
+      this._closePopup();
     }
   }
-  render() {
+  _renderPopup() {
+    const suggestedIssuers = (0,solid_logic__WEBPACK_IMPORTED_MODULE_1__.getSuggestedIssuers)();
     return (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .html */ .qy)`
-      <div class="headerInner">
-        <slot name="navigation-toggle"></slot>
-        <a
-          id="brandLink"
-          class="brand"
-          href="${this.brandLink}"
-          part="brand"
-        >
-          <img id="brandImg" src="${this.logo}" alt="Logo" part="logo" />
-        </a>
-
-        <div class="menu" part="menu">
-          ${this.renderUserArea()}
-
-          ${this.shouldRenderHelpMenu() ? (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .html */ .qy)`
-            <div class="header-menu-separator" />` : ''}
-
-          ${this.shouldRenderHelpMenu() ? (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .html */ .qy)`
-            <div class="help-menu-container" part="help-menu-container">
-              <button
-                id="helpMenuTrigger"
-                class="help-menu-trigger"
-                type="button"
-                aria-haspopup="menu"
-                aria-expanded="${this.helpMenuOpen ? 'true' : 'false'}"
-                ?disabled="${!this.hasHelpMenuItems()}"
-                @click="${e => this.toggleHelpMenu(e)}"
-                part="help-menu-trigger"
-              >
-                ${this.helpIcon ? (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .html */ .qy)`<img id="helpIcon" class="help-icon" src="${this.helpIcon}" alt="Help" part="help-icon" />` : (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .html */ .qy)`<span class="help-text" part="help-text">Help</span>`}
-              </button>
-
-            <nav
-              id="helpMenu"
-              class="help-dropdown"
-              role="menu"
-              ?inert="${!this.helpMenuOpen || !this.hasHelpMenuItems()}"
-              ?hidden="${!this.helpMenuOpen || !this.hasHelpMenuItems()}"
-              part="help-dropdown"
-            >
-              <div class="help-dropdown-content" @click="${() => {
-      this.helpMenuOpen = false;
-    }}">
-                <slot name="help-menu" @slotchange="${e => this.handleHelpSlotChange(e)}"></slot>
-                ${this.helpMenuList && this.helpMenuList.length ? (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .html */ .qy)`
-                  <ul class="help-menu-list">
-                    ${this.helpMenuList.map(item => (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .html */ .qy)`
-                      <li>
-                        ${item.url ? (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .html */ .qy)`
-                          <a
-                            href="${item.url}"
-                            target="${item.target || '_blank'}"
-                            rel="${(0,lit_directives_if_defined_js__WEBPACK_IMPORTED_MODULE_5__/* .ifDefined */ .J)((item.target || '_blank') === '_blank' ? 'noopener noreferrer' : undefined)}"
-                            @click="${e => this.handleHelpMenuClick(item, e)}"
-                            part="help-menu-item"
-                            role="menuitem"
-                          >
-                            ${item.label}
-                          </a>
-                        ` : (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .html */ .qy)`
-                          <button
-                            type="button"
-                            @click="${e => this.handleHelpMenuClick(item, e)}"
-                            part="help-menu-item"
-                            role="menuitem"
-                          >
-                            ${item.label}
-                          </button>
-                        `}
-                      </li>
+      <div class="popup-box">
+          <div class="popup-top-menu">
+            <span class="popup-title">Select an identity provider</span>
+            <button class="popup-close" type="button" aria-label="Close" @click="${() => this._closePopup()}">&#x2715;</button>
+          </div>
+
+          <div class="issuer-text-section">
+            <label class="issuer-text-label" for="${this._issuerInputId}">Solid Identity Provider</label>
+            <div class="issuer-text-row">
+              <div class="issuer-input-wrapper">
+                <div class="issuer-input-field-row">
+                  <input
+                    id="${this._issuerInputId}"
+                    class="issuer-text-input"
+                    type="text"
+                    placeholder="https://example.com"
+                    .value="${this._issuerInputValue}"
+                    @input="${this._handleInputChange}"
+                    @keydown="${this._handleInputKeydown}"
+                    autocomplete="url"
+                  />
+                  ${suggestedIssuers.length ? (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .html */ .qy)`
+                    <button
+                      class="issuer-dropdown-toggle"
+                      type="button"
+                      aria-label="Show identity provider suggestions"
+                      aria-expanded="${this._dropdownOpen}"
+                      @click="${() => this._toggleDropdown()}"
+                    >${_downArrow__WEBPACK_IMPORTED_MODULE_2__/* .phoneIcon */ .S}</button>
+                  ` : ''}
+                </div>
+                ${this._dropdownOpen && suggestedIssuers.length ? (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .html */ .qy)`
+                  <div class="issuer-dropdown-list" role="listbox">
+                    ${suggestedIssuers.map(issuerInfo => (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .html */ .qy)`
+                      <button
+                        class="issuer-dropdown-item"
+                        type="button"
+                        role="option"
+                        @click="${() => this._selectIssuerFromDropdown(issuerInfo.uri)}"
+                      >${issuerInfo.name}</button>
                     `)}
-                  </ul>
+                  </div>
                 ` : ''}
               </div>
-            </nav>
-          </div>` : ''}
+            </div>
+            ${this._errorMsg ? (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .html */ .qy)`<div class="error-msg">${this._errorMsg}</div>` : ''}
+          </div>
+          <hr class="popup-footer-hr" />
+          <div class="popup-footer">
+            <button class="popup-cancel-button" type="button" @click="${() => this._closePopup()}">Cancel</button>
+            <button
+              class="popup-login-button"
+              type="button"
+              ?disabled="${!this._issuerInputValue}"
+              @click="${() => this._handleGoClick()}"
+            >Log In</button>
+          </div>
         </div>
-      </div>
+    `;
+  }
+  render() {
+    return (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .html */ .qy)`
+      <button
+        class="login-button"
+        type="button"
+        part="login-button"
+        @click="${() => this._openPopup()}"
+      >
+        ${this.icon ? (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .html */ .qy)`<img class="login-button-icon" src="${this.icon}" alt="" aria-hidden="true" part="login-button-icon" />` : ''}
+        <slot>${this.label}</slot>
+      </button>
+
+      <dialog
+        class="popup-dialog"
+        role="dialog"
+        aria-modal="true"
+        aria-label="Select an identity provider"
+        @cancel="${e => {
+      e.preventDefault();
+      this._closePopup();
+    }}"
+        @click="${e => {
+      if (e.target === e.currentTarget) this._closePopup();
+    }}"
+      >
+        ${this._popupOpen ? this._renderPopup() : ''}
+      </dialog>
     `;
   }
 }
 
 /***/ },
 
-/***/ 1209
+/***/ 6454
 (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   M: () => (/* binding */ LoginButton)
+/* harmony export */   S: () => (/* binding */ phoneIcon)
 /* harmony export */ });
-/* harmony import */ var lit__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(6161);
-/* harmony import */ var solid_logic__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3138);
-/* harmony import */ var _downArrow__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(1353);
+/* harmony import */ var lit_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(6752);
+
+const phoneIcon = (0,lit_html__WEBPACK_IMPORTED_MODULE_0__/* .html */ .qy)`
+  <svg xmlns="http://www.w3.org/2000/svg" 
+    viewBox="0 0 12 7" 
+    fill="none"
+  >
+    <path d="M0.679688 0.678955L5.50729 5.50656L10.3349 0.678955" stroke="#6A7282" stroke-width="1.35776" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>
+`;
 
+/***/ },
 
+/***/ 2167
+(__unused_webpack_module, __unused_webpack___webpack_exports__, __webpack_require__) {
 
-class LoginButton extends lit__WEBPACK_IMPORTED_MODULE_0__/* .LitElement */ .WF {
+/* harmony import */ var _LoginButton__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(4614);
+
+
+const LOGIN_BUTTON_TAG_NAME = 'solid-ui-login-button';
+if (!customElements.get(LOGIN_BUTTON_TAG_NAME)) {
+  customElements.define(LOGIN_BUTTON_TAG_NAME, _LoginButton__WEBPACK_IMPORTED_MODULE_0__/* .LoginButton */ .M);
+}
+
+/***/ },
+
+/***/ 8228
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   X: () => (/* binding */ SignupButton)
+/* harmony export */ });
+/* harmony import */ var lit__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(6161);
+
+const DEFAULT_SIGNUP_URL = 'https://solidproject.org/get_a_pod';
+class SignupButton extends lit__WEBPACK_IMPORTED_MODULE_0__/* .LitElement */ .WF {
   static properties = {
     label: {
       type: String,
@@ -1013,9 +692,9 @@ class LoginButton extends lit__WEBPACK_IMPORTED_MODULE_0__/* .LitElement */ .WF
       type: String,
       reflect: true
     },
-    issuerUrl: {
+    signupUrl: {
       type: String,
-      attribute: 'issuer-url',
+      attribute: 'signup-url',
       reflect: true
     },
     icon: {
@@ -1025,74 +704,32 @@ class LoginButton extends lit__WEBPACK_IMPORTED_MODULE_0__/* .LitElement */ .WF
     layout: {
       type: String,
       reflect: true
-    },
-    _popupOpen: {
-      state: true
-    },
-    _issuerInputValue: {
-      state: true
-    },
-    _dropdownOpen: {
-      state: true
     }
   };
   static styles = (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .css */ .AH)`
-    :host { // default theme
+    :host {
       display: inline-block;
-      position: relative;
-      z-index: 400;
-      --login-button-background: var(--lavender-900, #7c4cff);
-      --login-button-text: var(--color-header-text, #ffffff);
-      --popup-background: var(--color-background, #F8F9FB);
-      --popup-text: var(--color-text, #1A1A1A);
-      --popup-border: var(--color-border, #E5E7EB);
-      --popup-shadow: var(--box-shadow-sm, 0 1px 4px rgba(124,77,255,0.12));
-      --popup-overlay-background: rgba(0, 0, 0, 0.6);
-      --issuer-input-background: var(--color-background, #F8F9FB);
-      --issuer-input-text: var(--color-text, #1A1A1A);
-      --issuer-input-border: var(--color-text, #1A1A1A);
-      --issuer-button-background: var(--color-background, #F8F9FB);
-      --issuer-button-text: var(--color-text, #1A1A1A);
-      --issuer-button-border: var(--color-border, #E5E7EB);
-      --issuer-button-hover-background: var(--lavender-900, #7c4cff);
-      --issuer-label-color: var(--grey-purple-700, #1A1A1A);
-      --issuer-placeholder-color: var(--grey-purple-700, #5e546d);;
-      --error-text-color: var(--color-error, #B00020);
+      --signup-button-background: transparent;
+      --signup-button-border: var(--color-border, #E5E7EB);
+      --signup-button-text: var(--color-header-text, #ffffff);
     }
 
     :host([theme='dark']) {
-      display: inline-block;
-      position: relative;
-      z-index: 900;
-      --login-button-background: var(--lavender-900, #7c4cff);
-      --login-button-text: var(--color-header-text, #ffffff);
-      --popup-background: var(--color-background, #F8F9FB);
-      --popup-text: var(--color-text, #1A1A1A);
-      --popup-border: var(--color-border, #E5E7EB);
-      --popup-shadow: var(--box-shadow-sm, 0 1px 4px rgba(124,77,255,0.12));
-      --popup-overlay-background: rgba(0, 0, 0, 0.6);
-      --issuer-input-background: var(--color-background, #F8F9FB);
-      --issuer-input-text: var(--color-text, #1A1A1A);
-      --issuer-input-border: var(--color-text, #1A1A1A);
-      --issuer-button-background: var(--color-background, #F8F9FB);
-      --issuer-button-text: var(--color-text, #1A1A1A);
-      --issuer-button-border: var(--color-text, #1A1A1A);
-      --issuer-button-hover-background: var(--lavender-900, #7c4cff);
-      --issuer-label-color: var(--grey-purple-700, #1A1A1A);
-      --issuer-placeholder-color: var(--grey-purple-700, #5e546d);;
-      --error-text-color: var(--color-error, #B00020);
+      --signup-button-background: transparent;
+      --signup-button-border: var(--color-border, #E5E7EB);
+      --signup-button-text: var(--color-header-text, #ffffff);
     }
 
-    .login-button {
+    .signup-button {
       display: flex;
       height: 35px;
       padding: var(--spacing-xxs, 0.3125rem) var(--spacing-xs, 0.75rem);
       align-items: center;
       gap: var(--spacing-xxs, 0.3125rem);
       border-radius: var(--border-radius-base, 0.3125rem);
-      background: var(--login-button-background);
-      border: none;
-      color: var(--login-button-text);
+      background: var(--signup-button-background);
+      border: 1px solid var(--signup-button-border);
+      color: var(--signup-button-text);
       cursor: pointer;
       font: inherit;
       line-height: 1;
@@ -1102,572 +739,977 @@ class LoginButton extends lit__WEBPACK_IMPORTED_MODULE_0__/* .LitElement */ .WF
       transition: transform 0.2s ease;
     }
 
-    .login-button-icon {
+    :host([layout='mobile']) .signup-button {
+      border: none;
+    }
+
+    .signup-button-icon {
       width: 16px;
       height: 16px;
       display: inline-block;
       object-fit: contain;
     }
 
-    .login-button:active {
+    .signup-button:active {
       transform: translateY(1px);
     }
+  `;
+  constructor() {
+    super();
+    this.label = 'Sign Up';
+    this.signupUrl = DEFAULT_SIGNUP_URL;
+    this.theme = 'light';
+    this.icon = '';
+    this.layout = 'desktop';
+  }
+  _handleClick() {
+    window.open(this.signupUrl, '_blank', 'noopener,noreferrer');
+  }
+  render() {
+    return (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .html */ .qy)`
+      <button
+        class="signup-button"
+        type="button"
+        part="signup-button"
+        @click="${() => this._handleClick()}"
+      >
+        ${this.icon ? (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .html */ .qy)`<img class="signup-button-icon" src="${this.icon}" alt="" aria-hidden="true" part="signup-button-icon" />` : ''}
+        <slot>${this.label}</slot>
+      </button>
+    `;
+  }
+}
 
-    .popup-dialog {
-      border: none;
-      padding: 0;
-      background: transparent;
-      outline: none;
-      overflow: visible;
-      max-height: none;
-      max-width: none;
-    }
+/***/ },
 
-    .popup-dialog::backdrop {
-      background: var(--popup-overlay-background, rgba(0, 0, 0, 0.6));
-    }
+/***/ 8005
+(__unused_webpack_module, __unused_webpack___webpack_exports__, __webpack_require__) {
 
-    .popup-box {
-      background: var(--popup-background);
-      color: var(--popup-text);
-      box-shadow: var(--popup-shadow);
-      border: 1px solid var(--popup-border);
-      border-radius: var(--border-radius-md, 0.5rem);
-      min-width: 480px;
-      z-index: 1001;
-    }
+/* harmony import */ var _SignupButton__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(8228);
+
+
+const SIGNUP_BUTTON_TAG_NAME = 'solid-ui-signup-button';
+if (!customElements.get(SIGNUP_BUTTON_TAG_NAME)) {
+  customElements.define(SIGNUP_BUTTON_TAG_NAME, _SignupButton__WEBPACK_IMPORTED_MODULE_0__/* .SignupButton */ .X);
+}
+
+/***/ },
+
+/***/ 1166
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   Y: () => (/* binding */ Header)
+/* harmony export */ });
+/* harmony import */ var lit__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(6161);
+/* harmony import */ var _iconBase__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3378);
+/* harmony import */ var solid_logic__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3138);
+/* harmony import */ var _auth_loginButton_index__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(2167);
+/* harmony import */ var _auth_signupButton_index__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(8005);
+/* harmony import */ var lit_directives_if_defined_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(1413);
 
-    .popup-top-menu {
-      border-bottom: 1px solid #DDD;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: space-between;
-      padding-bottom: 8px;
-      margin-bottom: 8px;
-      padding: 1rem;
-      background: var(--gray-200, #E5E7EB);
-    }
 
-    .popup-title {
-      font-weight: 800;
-    }
 
-    .popup-close {
-      background: transparent;
-      border: none;
-      cursor: pointer;
-      font-size: 1.25rem;
-      line-height: 1;
-      padding: 0 0.25rem;
-    }
 
-    .issuer-text-section {
-      display: flex;
-      flex-direction: column;
-      padding: 1rem 1rem 1.75rem;
-    }
 
-    .issuer-text-label {
-      color: var(--issuer-label-color);
-      margin-bottom: 6px;
-    }
 
-    .issuer-text-row {
-      display: flex;
-      flex-direction: row;
-      gap: 6px;
-      align-items: flex-start;
+const DEFAULT_HELP_MENU_ICON = '';
+const DEFAULT_SOLID_ICON_URL = 'https://solidproject.org/assets/img/solid-emblem.svg';
+const DEFAULT_SIGNUP_URL = 'https://solidproject.org/get_a_pod';
+const DEFAULT_LOGGEDIN_MENU_BUTTON_AVATAR = _iconBase__WEBPACK_IMPORTED_MODULE_1__/* .icons */ .Pt.iconBase + 'emptyProfileAvatar.png';
+class Header extends lit__WEBPACK_IMPORTED_MODULE_0__/* .LitElement */ .WF {
+  static properties = {
+    logo: {
+      type: String,
+      reflect: true
+    },
+    helpIcon: {
+      type: String,
+      attribute: 'help-icon',
+      reflect: true
+    },
+    layout: {
+      type: String,
+      reflect: true
+    },
+    theme: {
+      type: String,
+      reflect: true
+    },
+    brandLink: {
+      type: String,
+      attribute: 'brand-link',
+      reflect: true
+    },
+    authState: {
+      type: String,
+      attribute: 'auth-state',
+      reflect: true
+    },
+    loginAction: {
+      type: Object,
+      attribute: false
+    },
+    signUpAction: {
+      type: Object,
+      attribute: false
+    },
+    accountMenu: {
+      type: Array,
+      attribute: false
+    },
+    logoutLabel: {
+      type: String,
+      attribute: 'logout-label',
+      reflect: true
+    },
+    logoutIcon: {
+      type: String,
+      attribute: 'logout-icon',
+      reflect: true
+    },
+    accountIcon: {
+      type: String,
+      attribute: 'account-icon',
+      reflect: true
+    },
+    accountAvatar: {
+      type: String,
+      attribute: 'account-avatar',
+      reflect: true
+    },
+    accountAvatarFallback: {
+      type: String,
+      attribute: 'account-avatar-fallback',
+      reflect: true
+    },
+    loginIcon: {
+      type: String,
+      attribute: 'login-icon',
+      reflect: true
+    },
+    signUpIcon: {
+      type: String,
+      attribute: 'sign-up-icon',
+      reflect: true
+    },
+    helpMenuList: {
+      type: Array
+    },
+    accountMenuOpen: {
+      state: true
+    },
+    helpMenuOpen: {
+      state: true
+    },
+    hasSlottedAccountMenu: {
+      state: true
+    },
+    hasSlottedHelpMenu: {
+      state: true
     }
+  };
+  static styles = (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .css */ .AH)`
+  :host { /* default theme */
+    display: block;
+    --header-bg: var(--color-header-row-bg, #332746);
+    --header-text: var(--color-header-text, #ffffff);
+    --header-border: var(--color-border, #efecf3);
+    --header-line: var(--color-header-menu-separator-line, #5e546d);
+    --header-link: var(--color-text-heading, #000000);
+    --header-menu-item-hover: var(--color-header-menu-item-hover, #e6dcff);
+    --header-menu-item-selected: var(--color-header-menu-item-selected, #cbb9ff);
+    --header-menu-bg: var(--color-menu-bg, #f6f5f9);
+    --header-menu-loggedin-bg: var(--color-header-menu-loggedin-bg, #5e546d);
+    --header-menu-text: var(--color-menu-item-text, #654d6c);
+    --header-border-radius: var(--border-radius-sm, 0.2rem);
+    --header-button-bg: var(--color-menu-bg, #ffffff);
+    --header-button-text: var(--color-header-button-text, #0F172B);
+    --header-button-detail-text: var(--color-header-button-detail-text, #99A1AF);
+    --header-shadow: var(--color-header-shadow, 2px 6px 10px 0 rgba(0, 0, 0, 0.4), 2px 8px 24px 0 rgba(0, 0, 0, 0.19));
+    font-family: var(--font-family-base, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif);
+  }
 
-    .issuer-input-wrapper {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      min-width: 0;
-      position: relative;
-    }
+  /* for now light and dark are the same */
+  :host([theme='dark']) {
+    display: block;
+    --header-bg: var(--color-header-row-bg, #332746);
+    --header-text: var(--color-header-text, #ffffff);
+    --header-border: var(--color-border, #efecf3);
+    --header-line: var(--color-header-menu-separator-line, #5e546d);
+    --header-link: var(--color-text-heading, #000000);
+    --header-menu-item-hover: var(--color-header-menu-item-hover, #e6dcff);
+    --header-menu-item-selected: var(--color-header-menu-item-selected, #cbb9ff);
+    --header-menu-bg: var(--color-menu-bg, #f6f5f9);
+    --header-menu-loggedin-bg: var(--color-header-menu-loggedin-bg, #5e546d);
+    --header-menu-text: var(--color-menu-item-text, #654d6c);
+    --header-border-radius: var(--border-radius-sm, 0.2rem);
+    --header-button-bg: var(--color-menu-bg, #ffffff);
+    --header-button-text: var(--color-header-button-text, #0f172a);
+    --header-button-detail-text: var(--color-header-button-detail-text, #878192);
+    --header-icon-filter: invert(1) brightness(1.3); /* special way to invert SVG color of icons, from white to black */
+    --header-shadow: var(--color-header-shadow, 2px 6px 10px 0 rgba(0, 0, 0, 0.4), 2px 8px 24px 0 rgba(0, 0, 0, 0.19));
+    font-family: var(--font-family-base, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif);
+  }
 
-    .issuer-input-field-row {
-      display: flex;
-      flex-direction: row;
-      position: relative;
-    }
+  :host([layout='mobile']) .headerInner {
+    flex-wrap: wrap;
+    text-align: center;
+    gap: 0.5rem;
+  }
 
-    .issuer-text-input {
-      flex: 1;
-      padding: 0.375rem 2.75rem 0.375rem 0.5rem;
-      border: 1px solid var(--issuer-input-border);
-      border-radius: var(--border-radius-base, 0.3125rem);
-      background: var(--issuer-input-background);
-      color: var(--issuer-input-text);
-      font: inherit;
-      min-width: 0;
-    }
+  .headerInner {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: var(--header-bg);
+    color: var(--header-text);
+    padding: 0 1.5rem;
+    height: 3.75rem;
+  }
 
-    .issuer-text-input::placeholder {
-      color: var(--issuer-placeholder-color);
-    }
+  ::slotted([slot='navigation-toggle']) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    margin-right: 0.75rem;
+  }
 
-    .issuer-dropdown-toggle {
-      position: absolute;
-      right: 6px;
-      top: 50%;
-      transform: translateY(-50%);
-      width: 26px;
-      height: 26px;
-      padding: 0;
-      border: none;
-      background: transparent;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex-shrink: 0;
-      border-radius: var(--border-radius-base, 0.3125rem);
-    }
+  :host([layout='desktop']) ::slotted([slot='navigation-toggle']) {
+    display: none !important;
+  }
 
-    .issuer-dropdown-toggle:hover {
-      background: var(--color-header-menu-item-hover, #e6dcff);
-    }
+  .brand {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    text-decoration: none;
+    color: inherit;
+  }
 
-    .issuer-dropdown-toggle svg {
-      width: 14px;
-      height: 14px;
-      display: block;
-    }
+  .brand-not-displayed {
+    display: none;
+  }
 
-    .issuer-dropdown-list {
-      position: absolute;
-      top: calc(100% + 6px);
-      left: 0;
-      right: 0;
-      border: 1px solid var(--color-border, #E5E7EB);
-      border-top: none;
-      border-radius: 0 0 var(--border-radius-base, 0.3125rem) var(--border-radius-base, 0.3125rem);
-      background: var(--issuer-input-background);
-      overflow: visible;
-      z-index: 10;
-      box-shadow: 0 4px 12px rgba(124, 77, 255, 0.12);
-    }
+  .brand img {
+    height: 50px;
+    width: 55px;
+    object-fit: contain;
+  }
 
-    .issuer-dropdown-item {
-      display: block;
-      width: 100%;
-      padding: 0.625rem 0.75rem;
-      border: none;
-      border-bottom: 1px solid var(--color-border, #E5E7EB);
-      background: transparent;
-      color: var(--issuer-button-text);
-      cursor: pointer;
-      font: inherit;
-      text-align: left;
-      box-sizing: border-box;
-    }
+  .menu {
+    display: flex;
+    align-items: center;
+    gap: 0.625rem;
+    margin-left: auto;
+  }
 
-    .issuer-dropdown-item:last-child {
-      border-bottom: none;
-    }
+  .auth-actions {
+    display: flex;
+    align-items: center;
+    gap: 0.625rem;
+  }
 
-    .issuer-dropdown-item:hover {
-      background: var(--color-header-menu-item-hover, #e6dcff);
-      border-radius: var(--border-radius-base-md, 0.5rem);
-    }
+  .auth-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    min-height: 2.25rem;
+    padding: 0.5rem 0.875rem;
+    border: 1px solid var(--header-border);
+    border-radius: 999px;
+    background: var(--header-menu-bg);
+    color: var(--header-button-text);
+    cursor: pointer;
+    font: inherit;
+    line-height: 1;
+    text-decoration: none;
+    box-sizing: border-box;
+    transition: border-color 0.2s ease, transform 0.2s ease;
+  }
 
-    .popup-footer {
-      display: flex;
-      flex-direction: row;
-      justify-content: center;
-      gap: 8px;
-      padding: 0.75rem 1rem 1rem;
-    }
+  .auth-button:hover {
+    border-color: var(--header-menu-item-hover);
+  }
 
-    .popup-footer-hr {
-      margin: 0;
-      border: none;
-      border-top: 1px solid var(--popup-border, #E5E7EB);
-    }
+  .auth-button:active {
+    transform: translateY(1px);
+  }
 
-    .popup-cancel-button {
-      padding: 0.5rem 1.25rem;
-      border: 1px solid #C0BFC7;
-      border-radius: var(--border-radius-base, 0.3125rem);
-      background: var(--popup-background);
-      color: #314158;
-      cursor: pointer;
-      font: inherit;
-    }
+  .auth-button-sign-up {
+    background: color-mix(in srgb, var(--header-menu-bg) 78%, var(--header-menu-item-selected) 22%);
+  }
 
-    .popup-cancel-button:hover {
-      background: #D1D5DB;
-    }
+  .header-menu-separator {
+    background: var(--header-line);
+    width: 1px;
+    height: 2.3rem;
+  }
 
-    .popup-login-button {
-      padding: 0.5rem 1.25rem;
-      border: none;
-      border-radius: var(--border-radius-base, 0.3125rem);
-      background: var(--lavender-900, #7c4cff);
-      color: #ffffff;
-      cursor: pointer;
-      font: inherit;
-    }
+  .account-menu-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
 
-    .popup-login-button:hover {
-      background: #6a3de8;
-    }
+  .account-menu-trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.625rem;
+    min-height: 2.5rem;
+    border: 1px solid var(--header-menu-loggedin-bg);
+    border-radius: 999px;
+    background: var(--header-menu-loggedin-bg);
+    color: var(--header-button-text);
+    cursor: pointer;
+    font: inherit;
+    line-height: 1;
+  }
 
-    .popup-login-button:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
+  :host([layout='mobile']) .account-menu-trigger {
+    gap: 0;
+    min-height: auto;
+    padding: 0;
+    border: 1.5px solid var(--header-border);
+    background: var(--header-menu-loggedin-bg);
+  }
 
-    .error-msg {
-      color: var(--error-text-color);
-      font-size: 0.875rem;
-      margin-top: 8px;
-    }
-  `;
-  _issuerInputId = `issuer-url-input-${Math.random().toString(36).slice(2, 10)}`;
-  _errorMsg = '';
-  constructor() {
-    super();
-    this.label = 'Log In';
-    this.theme = 'light';
-    this.issuerUrl = '';
-    this.icon = '';
-    this.layout = 'desktop';
-    this._popupOpen = false;
-    this._issuerInputValue = '';
-    this._dropdownOpen = false;
+  :host([layout='mobile']) .account-menu-trigger-label {
+    display: none;
   }
-  connectedCallback() {
-    super.connectedCallback();
+
+  .account-menu-trigger:disabled {
+    cursor: default;
+    opacity: 0.7;
   }
-  disconnectedCallback() {
-    super.disconnectedCallback();
+
+  .account-menu-trigger-icon {
+    width: 1rem;
+    height: 1rem;
+    object-fit: contain;
+    flex-shrink: 0;
   }
-  _openPopup() {
-    const offline = (0,solid_logic__WEBPACK_IMPORTED_MODULE_1__.offlineTestID)();
-    if (offline) {
-      this._loginComplete(offline.uri);
-      return;
-    }
-    this._issuerInputValue = typeof localStorage !== 'undefined' && localStorage.getItem('loginIssuer') || this.issuerUrl || '';
-    this._errorMsg = '';
-    this._popupOpen = true;
+
+  .account-avatar,
+  .account-menu-avatar {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    background: color-mix(in srgb, var(--header-bg) 18%, #ded8e7 82%);
+    color: var(--header-button-text);
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
   }
-  _closePopup() {
-    this._popupOpen = false;
+
+  .account-avatar {
+    width: 1.75rem;
+    height: 1.75rem;
+    border-radius: 999px;
+    border: 1.5px solid var(--header-border);
   }
-  updated() {
-    const dialog = this.shadowRoot?.querySelector('dialog');
-    if (!dialog) return;
-    if (this._popupOpen && !dialog.open) {
-      dialog.showModal();
-    } else if (!this._popupOpen && dialog.open) {
-      dialog.close();
-    }
+
+  .account-menu-avatar {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 0.5rem;
   }
-  async _loginToIssuer(issuerUri) {
-    if (!issuerUri) return;
-    try {
-      // clear authorization metadata from store
-      ;
-      solid_logic__WEBPACK_IMPORTED_MODULE_1__.solidLogicSingleton.store.updater.flagAuthorizationMetadata();
-      const preLoginRedirectHash = new URL(window.location.href).hash;
-      if (preLoginRedirectHash) {
-        window.localStorage.setItem('preLoginRedirectHash', preLoginRedirectHash);
-      }
-      window.localStorage.setItem('loginIssuer', issuerUri);
-      const locationUrl = new URL(window.location.href);
-      locationUrl.hash = '';
-      await solid_logic__WEBPACK_IMPORTED_MODULE_1__.authSession.login({
-        redirectUrl: locationUrl.href,
-        oidcIssuer: issuerUri
-      });
-    } catch (err) {
-      this._errorMsg = err.message || String(err);
-      this.requestUpdate();
-    }
+
+  .account-avatar img,
+  .account-menu-avatar img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .account-avatar-img {
+    width: 1.75rem;
+    height: 1.75rem;
+    border-radius: 999px;
+    object-fit: cover;
+    background-color: var(--header-border);
   }
-  _loginComplete(webIdUri) {
-    solid_logic__WEBPACK_IMPORTED_MODULE_1__.authn.saveUser(webIdUri);
-    this.dispatchEvent(new CustomEvent('login-success', {
-      detail: {
-        webId: webIdUri
-      },
-      bubbles: true,
-      composed: true
-    }));
+
+  .account-dropdown {
+    position: absolute;
+    top: calc(100% + 0.9rem);
+    right: 0;
+    min-width: 15rem;
+    padding: 0.5rem;
+    background: var(--header-button-bg);
+    border: 1px solid var(--header-border);
+    border-radius: var(--header-border-radius);
+    box-shadow: var(--header-shadow);
+    z-index: 10;
   }
-  _handleGoClick() {
-    this._dropdownOpen = false;
-    this._loginToIssuer(this._issuerInputValue);
+
+  .account-dropdown[hidden] {
+    display: none;
   }
-  _toggleDropdown() {
-    this._dropdownOpen = !this._dropdownOpen;
+
+  .account-menu-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
   }
-  _selectIssuerFromDropdown(uri) {
-    this._issuerInputValue = uri;
-    this._dropdownOpen = false;
+
+  .account-menu-item-link,
+  .account-menu-item-button,
+  ::slotted([slot='account-menu']) {
+    display: flex;
+    align-items: center;
+    gap: 0.625rem;
+    width: 100%;
+    box-sizing: border-box;
+    color: var(--header-link);
+    text-decoration: none;
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: 10px;
+    padding: 0.5rem;
+    cursor: pointer;
+    font: inherit;
+    text-align: left;
   }
-  _handleInputChange(e) {
-    this._issuerInputValue = e.target.value;
+
+  .account-menu-item-link:hover,
+  .account-menu-item-button:hover {
+    color: var(--header-link);
+    background: var(--header-menu-item-hover);
+    border-color: var(--header-menu-item-hover);
   }
-  _handleInputKeydown(e) {
-    if (e.key === 'Enter') {
-      this._loginToIssuer(this._issuerInputValue);
-    }
-    if (e.key === 'Escape') {
-      this._closePopup();
-    }
+
+  .account-menu-item-link:active,
+  .account-menu-item-button:active {
+    color: var(--header-link);
+    background: var(--header-menu-item-selected);
+    border-color: var(--header-menu-item-selected);
+    transform: translateY(1px);
   }
-  _renderPopup() {
-    const suggestedIssuers = (0,solid_logic__WEBPACK_IMPORTED_MODULE_1__.getSuggestedIssuers)();
-    return (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .html */ .qy)`
-      <div class="popup-box">
-          <div class="popup-top-menu">
-            <span class="popup-title">Select an identity provider</span>
-            <button class="popup-close" type="button" aria-label="Close" @click="${() => this._closePopup()}">&#x2715;</button>
-          </div>
 
-          <div class="issuer-text-section">
-            <label class="issuer-text-label" for="${this._issuerInputId}">Solid Identity Provider</label>
-            <div class="issuer-text-row">
-              <div class="issuer-input-wrapper">
-                <div class="issuer-input-field-row">
-                  <input
-                    id="${this._issuerInputId}"
-                    class="issuer-text-input"
-                    type="text"
-                    placeholder="https://example.com"
-                    .value="${this._issuerInputValue}"
-                    @input="${this._handleInputChange}"
-                    @keydown="${this._handleInputKeydown}"
-                    autocomplete="url"
-                  />
-                  ${suggestedIssuers.length ? (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .html */ .qy)`
-                    <button
-                      class="issuer-dropdown-toggle"
-                      type="button"
-                      aria-label="Show identity provider suggestions"
-                      aria-expanded="${this._dropdownOpen}"
-                      @click="${() => this._toggleDropdown()}"
-                    >${_downArrow__WEBPACK_IMPORTED_MODULE_2__/* .phoneIcon */ .S}</button>
-                  ` : ''}
-                </div>
-                ${this._dropdownOpen && suggestedIssuers.length ? (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .html */ .qy)`
-                  <div class="issuer-dropdown-list" role="listbox">
-                    ${suggestedIssuers.map(issuerInfo => (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .html */ .qy)`
-                      <button
-                        class="issuer-dropdown-item"
-                        type="button"
-                        role="option"
-                        @click="${() => this._selectIssuerFromDropdown(issuerInfo.uri)}"
-                      >${issuerInfo.name}</button>
-                    `)}
-                  </div>
-                ` : ''}
-              </div>
-            </div>
-            ${this._errorMsg ? (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .html */ .qy)`<div class="error-msg">${this._errorMsg}</div>` : ''}
-          </div>
-          <hr class="popup-footer-hr" />
-          <div class="popup-footer">
-            <button class="popup-cancel-button" type="button" @click="${() => this._closePopup()}">Cancel</button>
-            <button
-              class="popup-login-button"
-              type="button"
-              ?disabled="${!this._issuerInputValue}"
-              @click="${() => this._handleGoClick()}"
-            >Log In</button>
-          </div>
-        </div>
-    `;
+  .account-switch {
+    display: block;
+    width: 100%;
+    color: var(--header-menu-text);
+    text-align: left;
+    text-transform: uppercase;
+    font-size: 80%;
   }
-  render() {
-    return (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .html */ .qy)`
-      <button
-        class="login-button"
-        type="button"
-        part="login-button"
-        @click="${() => this._openPopup()}"
-      >
-        ${this.icon ? (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .html */ .qy)`<img class="login-button-icon" src="${this.icon}" alt="" aria-hidden="true" part="login-button-icon" />` : ''}
-        <slot>${this.label}</slot>
-      </button>
 
-      <dialog
-        class="popup-dialog"
-        role="dialog"
-        aria-modal="true"
-        aria-label="Select an identity provider"
-        @cancel="${e => {
-      e.preventDefault();
-      this._closePopup();
-    }}"
-        @click="${e => {
-      if (e.target === e.currentTarget) this._closePopup();
-    }}"
-      >
-        ${this._popupOpen ? this._renderPopup() : ''}
-      </dialog>
-    `;
+  .dropdown-menu-separator {
+    display: block;
+    width: calc(100% + 1rem);
+    margin: 0.5rem -0.5rem;
+    border: 0;
+    border-top: 1px solid var(--header-border);
   }
-}
 
-/***/ },
+  .account-menu-copy {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+  }
 
-/***/ 1353
-(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+  .account-menu-label {
+    color: var(--header-button-text);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   S: () => (/* binding */ phoneIcon)
-/* harmony export */ });
-/* harmony import */ var lit_html__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(6752);
+  .account-menu-webid {
+    color: var(--header-button-detail-text);
+    font-size: 0.5rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 
-const phoneIcon = (0,lit_html__WEBPACK_IMPORTED_MODULE_0__/* .html */ .qy)`
-  <svg xmlns="http://www.w3.org/2000/svg" 
-    viewBox="0 0 12 7" 
-    fill="none"
-  >
-    <path d="M0.679688 0.678955L5.50729 5.50656L10.3349 0.678955" stroke="#6A7282" stroke-width="1.35776" stroke-linecap="round" stroke-linejoin="round"/>
-  </svg>
-`;
+  .help-menu-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    background: transparent;
+  }
 
-/***/ },
+  .help-menu-trigger {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+  }
 
-/***/ 9140
-(__unused_webpack_module, __unused_webpack___webpack_exports__, __webpack_require__) {
+  .help-menu-trigger:disabled {
+    cursor: default;
+  }
+
+  .help-dropdown {
+    position: absolute;
+    top: calc(100% + 0.9rem);
+    right: 0;
+    min-width: 12rem;
+    padding: 0.5rem;
+    background: var(--header-button-bg);
+    border: 1px solid var(--header-border);
+    border-radius: var(--header-border-radius);
+    box-shadow: var(--header-shadow);
+    z-index: 10;
+  }
+
+  .help-dropdown[hidden] {
+    display: none;
+  }
 
-/* harmony import */ var _LoginButton__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1209);
+  .help-dropdown-content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
 
+  .help-menu-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
 
-const LOGIN_BUTTON_TAG_NAME = 'solid-ui-login-button';
-if (!customElements.get(LOGIN_BUTTON_TAG_NAME)) {
-  customElements.define(LOGIN_BUTTON_TAG_NAME, _LoginButton__WEBPACK_IMPORTED_MODULE_0__/* .LoginButton */ .M);
-}
+  .help-menu-list a,
+  .help-menu-list button,
+  ::slotted([slot='help-menu']) {
+    display: block;
+    width: 100%;
+    box-sizing: border-box;
+    color: var(--header-link);
+    text-decoration: none;
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    padding: 0.375rem 0.5rem;
+    cursor: pointer;
+    font: inherit;
+    text-align: left;
+  }
 
-/***/ },
+  .help-menu-list a:hover,
+  .help-menu-list button:hover {
+    color: var(--header-link);
+    background: var(--header-menu-item-hover);
+    border-color: var(--header-menu-item-hover);
+  }
 
-/***/ 3591
-(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+  .help-menu-list a:active,
+  .help-menu-list button:active {
+    color: var(--header-link);
+    background: var(--header-menu-item-selected);
+    border-color: var(--header-menu-item-selected);
+    transform: translateY(1px);
+  }
 
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   X: () => (/* binding */ SignupButton)
-/* harmony export */ });
-/* harmony import */ var lit__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(6161);
+  ::slotted(a), ::slotted(button) {
+    color: var(--header-link);
+    text-decoration: none;
+    background: var(--header-button-bg);
+    border: 1px solid var(--header-border);
+    border-radius: 4px;
+    padding: 0.25rem 0.5rem;
+    cursor: pointer;
+    font: inherit;
+  }
 
-const DEFAULT_SIGNUP_URL = 'https://solidproject.org/get_a_pod';
-class SignupButton extends lit__WEBPACK_IMPORTED_MODULE_0__/* .LitElement */ .WF {
-  static properties = {
-    label: {
-      type: String,
-      reflect: true
-    },
-    theme: {
-      type: String,
-      reflect: true
-    },
-    signupUrl: {
-      type: String,
-      attribute: 'signup-url',
-      reflect: true
-    },
-    icon: {
-      type: String,
-      reflect: true
-    },
-    layout: {
-      type: String,
-      reflect: true
-    }
-  };
-  static styles = (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .css */ .AH)`
-    :host {
-      display: inline-block;
-      --signup-button-background: transparent;
-      --signup-button-border: var(--color-border, #E5E7EB);
-      --signup-button-text: var(--color-header-text, #ffffff);
-    }
+  .help-icon {
+    width: 35px;
+    height: 35px;
+    cursor: pointer;
+  }
 
-    :host([theme='dark']) {
-      --signup-button-background: transparent;
-      --signup-button-border: var(--color-border, #E5E7EB);
-      --signup-button-text: var(--color-header-text, #ffffff);
-    }
+  .help-text {
+    color: var(--header-text, #ffffff);
+    font: inherit;
+  }
 
-    .signup-button {
-      display: flex;
-      height: 35px;
-      padding: var(--spacing-xxs, 0.3125rem) var(--spacing-xs, 0.75rem);
-      align-items: center;
-      gap: var(--spacing-xxs, 0.3125rem);
-      border-radius: var(--border-radius-base, 0.3125rem);
-      background: var(--signup-button-background);
-      border: 1px solid var(--signup-button-border);
-      color: var(--signup-button-text);
-      cursor: pointer;
-      font: inherit;
-      line-height: 1;
-      white-space: nowrap;
-      text-decoration: none;
-      box-sizing: border-box;
-      transition: transform 0.2s ease;
+  .logout-action-icon {
+    width: 16px;
+    height: 16px;
+    display: inline-block;
+    object-fit: contain;
+    margin-right: 0.5rem;
+  }
+  `;
+  constructor() {
+    super();
+    this.logo = DEFAULT_SOLID_ICON_URL;
+    this.helpIcon = DEFAULT_HELP_MENU_ICON;
+    this.layout = 'desktop';
+    this.theme = 'light';
+    this.brandLink = '#';
+    this.authState = 'logged-out';
+    this.loginAction = {
+      label: 'Log In',
+      action: 'login'
+    };
+    this.signUpAction = {
+      label: 'Sign Up',
+      action: 'sign-up',
+      url: DEFAULT_SIGNUP_URL
+    };
+    this.accountMenu = [];
+    this.logoutLabel = 'Log Out';
+    this.logoutIcon = '';
+    this.accountIcon = '▼';
+    this.accountAvatar = '';
+    this.accountAvatarFallback = '';
+    this.loginIcon = '';
+    this.signUpIcon = '';
+    this.helpMenuList = [];
+    this.accountMenuOpen = false;
+    this.helpMenuOpen = false;
+    this.hasSlottedAccountMenu = false;
+    this.hasSlottedHelpMenu = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    document.addEventListener('click', this.handleDocumentClick);
+    window.addEventListener('keydown', this.handleWindowKeydown);
+  }
+  disconnectedCallback() {
+    document.removeEventListener('click', this.handleDocumentClick);
+    window.removeEventListener('keydown', this.handleWindowKeydown);
+    super.disconnectedCallback();
+  }
+  handleHelpMenuClick(item, event) {
+    event.preventDefault();
+    this.helpMenuOpen = false;
+    this.dispatchEvent(new CustomEvent('help-menu-select', {
+      detail: item,
+      bubbles: true,
+      composed: true
+    }));
+    if (item.url) {
+      const target = item.target || '_blank';
+      const features = target === '_blank' ? 'noopener,noreferrer' : undefined;
+      window.open(item.url, target, features);
     }
-
-    :host([layout='mobile']) .signup-button {
-      border: none;
+  }
+  handleAccountMenuClick(item) {
+    this.accountMenuOpen = false;
+    this.dispatchEvent(new CustomEvent('account-menu-select', {
+      detail: item,
+      bubbles: true,
+      composed: true
+    }));
+  }
+  handleDocumentClick = event => {
+    if (!event.composedPath().includes(this)) {
+      this.accountMenuOpen = false;
+      this.helpMenuOpen = false;
     }
-
-    .signup-button-icon {
-      width: 16px;
-      height: 16px;
-      display: inline-block;
-      object-fit: contain;
+  };
+  handleWindowKeydown = event => {
+    if (event.key === 'Escape' && (this.accountMenuOpen || this.helpMenuOpen)) {
+      this.accountMenuOpen = false;
+      this.helpMenuOpen = false;
     }
-
-    .signup-button:active {
-      transform: translateY(1px);
+  };
+  handleAccountSlotChange(event) {
+    const slot = event.target;
+    this.hasSlottedAccountMenu = slot.assignedElements({
+      flatten: true
+    }).length > 0;
+  }
+  handleHelpSlotChange(event) {
+    const slot = event.target;
+    this.hasSlottedHelpMenu = slot.assignedElements({
+      flatten: true
+    }).length > 0;
+  }
+  toggleAccountMenu(event) {
+    event.preventDefault();
+    if (!this.hasAccountMenuItems()) return;
+    this.helpMenuOpen = false;
+    this.accountMenuOpen = !this.accountMenuOpen;
+  }
+  toggleHelpMenu(event) {
+    event.preventDefault();
+    if (!this.hasHelpMenuItems()) return;
+    this.accountMenuOpen = false;
+    this.helpMenuOpen = !this.helpMenuOpen;
+  }
+  hasAccountMenuItems() {
+    return Boolean(this.accountMenu?.length || this.hasSlottedAccountMenu || this.logoutLabel);
+  }
+  hasHelpMenuItems() {
+    return Boolean(this.helpMenuList?.length || this.hasSlottedHelpMenu);
+  }
+  shouldRenderHelpMenu() {
+    return this.layout !== 'mobile' && this.hasHelpMenuItems();
+  }
+  renderLoggedInAvatar(avatar, wrapperClass = 'account-avatar') {
+    const hasAvatar = Boolean(avatar);
+    const imageSrc = hasAvatar ? avatar : this.accountAvatarFallback || DEFAULT_LOGGEDIN_MENU_BUTTON_AVATAR;
+    const imageAlt = hasAvatar ? 'Profile Avatar' : 'Default Avatar';
+    if (this.layout === 'mobile' && wrapperClass === 'account-avatar') {
+      return (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .html */ .qy)`<img class="account-avatar-img" src="${imageSrc}" alt="${imageAlt}" />`;
     }
-  `;
-  constructor() {
-    super();
-    this.label = 'Sign Up';
-    this.signupUrl = DEFAULT_SIGNUP_URL;
-    this.theme = 'light';
-    this.icon = '';
-    this.layout = 'desktop';
+    return (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .html */ .qy)`
+      <span class="${wrapperClass}" aria-hidden="true">
+        <img src="${imageSrc}" alt="${imageAlt}" />
+      </span>
+    `;
   }
-  _handleClick() {
-    window.open(this.signupUrl, '_blank', 'noopener,noreferrer');
+  renderLoggedOutActions() {
+    return (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .html */ .qy)`
+      <div class="auth-actions" part="auth-actions">
+        <slot name="login-action">
+          <solid-ui-login-button
+            label="${this.loginAction.label}"
+            icon=${(0,lit_directives_if_defined_js__WEBPACK_IMPORTED_MODULE_5__/* .ifDefined */ .J)(this.layout !== 'mobile' ? this.loginIcon || this.loginAction.icon : undefined)}
+            layout="${this.layout}"
+            theme="${this.theme}"
+            part="login-action"
+            @login-success="${() => this.handleLoginSuccess()}"
+          ></solid-ui-login-button>
+        </slot>
+        <slot name="sign-up-action">
+          <solid-ui-signup-button
+            label="${this.signUpAction.label}"
+            signup-url="${(0,lit_directives_if_defined_js__WEBPACK_IMPORTED_MODULE_5__/* .ifDefined */ .J)(this.signUpAction.url)}"
+            layout="${this.layout}"
+            .icon=${(0,lit_directives_if_defined_js__WEBPACK_IMPORTED_MODULE_5__/* .ifDefined */ .J)(this.layout !== 'mobile' ? this.signUpIcon || this.signUpAction.icon : undefined)}
+            theme="${this.theme}"
+            part="sign-up-action"
+          ></solid-ui-signup-button>
+        </slot>
+      </div>
+    `;
   }
-  render() {
+  handleLoginSuccess() {
+    this.authState = 'logged-in';
+    this.dispatchEvent(new CustomEvent('auth-action-select', {
+      detail: {
+        role: 'login'
+      },
+      bubbles: true,
+      composed: true
+    }));
+  }
+  async handleLogout() {
+    this.accountMenuOpen = false;
+    try {
+      await solid_logic__WEBPACK_IMPORTED_MODULE_2__.authSession.logout();
+    } catch (_err) {
+      // logout errors are non-fatal — proceed to clear state
+    }
+    this.authState = 'logged-out';
+    this.dispatchEvent(new CustomEvent('logout-select', {
+      detail: {
+        role: 'logout'
+      },
+      bubbles: true,
+      composed: true
+    }));
+  }
+  renderAccountMenuItem(item) {
+    const content = (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .html */ .qy)`
+      ${this.renderLoggedInAvatar(item.avatar, 'account-menu-avatar')}
+      <span class="account-menu-copy">
+        <span class="account-menu-label">${item.label}</span>
+        ${item.webid && this.layout !== 'mobile' ? (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .html */ .qy)`<span class="account-menu-webid">${item.webid}</span>` : ''}
+      </span>
+    `;
+    if (item.url) {
+      return (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .html */ .qy)`
+        <a
+          class="account-menu-item-link"
+          href="${item.url}"
+          @click="${() => this.handleAccountMenuClick(item)}"
+          part="account-menu-item"
+          role="menuitem"
+        >
+          ${content}
+        </a>
+      `;
+    }
     return (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .html */ .qy)`
       <button
-        class="signup-button"
+        class="account-menu-item-button"
         type="button"
-        part="signup-button"
-        @click="${() => this._handleClick()}"
+        @click="${() => this.handleAccountMenuClick(item)}"
+        part="account-menu-item"
+        role="menuitem"
       >
-        ${this.icon ? (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .html */ .qy)`<img class="signup-button-icon" src="${this.icon}" alt="" aria-hidden="true" part="signup-button-icon" />` : ''}
-        <slot>${this.label}</slot>
+        ${content}
       </button>
     `;
   }
-}
+  renderLoggedInActions() {
+    return (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .html */ .qy)`
+      <div class="account-menu-container" part="account-menu-container">
+        <slot name="account-trigger">
+          <button
+            id="accountMenuTrigger"
+            class="account-menu-trigger"
+            type="button"
+            aria-haspopup="menu"
+            aria-expanded="${this.accountMenuOpen ? 'true' : 'false'}"
+            ?disabled="${!this.hasAccountMenuItems()}"
+            @click="${e => this.toggleAccountMenu(e)}"
+            part="account-menu-trigger"
+          >
+            ${this.renderLoggedInAvatar(this.accountAvatar)}
+            ${this.layout !== 'mobile' && this.accountIcon ? (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .html */ .qy)`
+              <img class="account-menu-trigger-icon" src="${this.accountIcon}" alt="" aria-hidden="true" />` : ''}
+          </button>
+        </slot>
 
-/***/ },
+        <nav
+          id="accountMenu"
+          class="account-dropdown"
+          role="menu"
+          ?inert="${!this.accountMenuOpen || !this.hasAccountMenuItems()}"
+          ?hidden="${!this.accountMenuOpen || !this.hasAccountMenuItems()}"
+          part="account-dropdown"
+        >
+          <slot name="account-switch" class="account-switch">Switch account</slot>
+          <hr class="dropdown-menu-separator" />
+          <slot name="account-menu" @slotchange="${e => this.handleAccountSlotChange(e)}"></slot>
+          ${this.accountMenu && this.accountMenu.length ? (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .html */ .qy)`
+            <ul class="account-menu-list">
+              ${this.accountMenu.map(item => (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .html */ .qy)`
+                <li>${this.renderAccountMenuItem(item)}</li>
+              `)}
+            </ul>
+          ` : ''}
+          ${this.logoutLabel ? (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .html */ .qy)`
+            <hr class="dropdown-menu-separator" />
+            <button
+              class="account-menu-item-button"
+              type="button"
+              @click="${() => this.handleLogout()}"
+              part="logout-action"
+              role="menuitem"
+            >
+              ${this.logoutIcon && this.layout !== 'mobile' ? (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .html */ .qy)`<img class="logout-action-icon" src="${this.logoutIcon}" alt="" aria-hidden="true" part="logout-action-icon" />` : ''}
+              ${this.logoutLabel}
+            </button>
+          ` : ''}
+        </nav>
+      </div>
+    `;
+  }
+  renderUserArea() {
+    if (this.authState === 'logged-out') {
+      return this.renderLoggedOutActions();
+    }
+    return this.renderLoggedInActions();
+  }
+  firstUpdated() {
+    const brandLink = this.shadowRoot?.getElementById('brandLink');
+    if (brandLink) {
+      brandLink.classList.toggle('brand-not-displayed', this.layout === 'mobile');
+    }
+  }
+  updated(changedProperties) {
+    if (changedProperties.has('layout')) {
+      const brandLink = this.shadowRoot?.getElementById('brandLink');
+      if (brandLink) {
+        brandLink.classList.toggle('brand-not-displayed', this.layout === 'mobile');
+      }
+    }
+  }
+  render() {
+    return (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .html */ .qy)`
+      <div class="headerInner">
+        <slot name="navigation-toggle"></slot>
+        <a
+          id="brandLink"
+          class="brand"
+          href="${this.brandLink}"
+          part="brand"
+        >
+          <img id="brandImg" src="${this.logo}" alt="Logo" part="logo" />
+        </a>
 
-/***/ 1291
-(__unused_webpack_module, __unused_webpack___webpack_exports__, __webpack_require__) {
+        <div class="menu" part="menu">
+          ${this.renderUserArea()}
 
-/* harmony import */ var _SignupButton__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(3591);
+          ${this.shouldRenderHelpMenu() ? (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .html */ .qy)`
+            <div class="header-menu-separator" />` : ''}
 
+          ${this.shouldRenderHelpMenu() ? (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .html */ .qy)`
+            <div class="help-menu-container" part="help-menu-container">
+              <button
+                id="helpMenuTrigger"
+                class="help-menu-trigger"
+                type="button"
+                aria-haspopup="menu"
+                aria-expanded="${this.helpMenuOpen ? 'true' : 'false'}"
+                ?disabled="${!this.hasHelpMenuItems()}"
+                @click="${e => this.toggleHelpMenu(e)}"
+                part="help-menu-trigger"
+              >
+                ${this.helpIcon ? (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .html */ .qy)`<img id="helpIcon" class="help-icon" src="${this.helpIcon}" alt="Help" part="help-icon" />` : (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .html */ .qy)`<span class="help-text" part="help-text">Help</span>`}
+              </button>
 
-const SIGNUP_BUTTON_TAG_NAME = 'solid-ui-signup-button';
-if (!customElements.get(SIGNUP_BUTTON_TAG_NAME)) {
-  customElements.define(SIGNUP_BUTTON_TAG_NAME, _SignupButton__WEBPACK_IMPORTED_MODULE_0__/* .SignupButton */ .X);
+            <nav
+              id="helpMenu"
+              class="help-dropdown"
+              role="menu"
+              ?inert="${!this.helpMenuOpen || !this.hasHelpMenuItems()}"
+              ?hidden="${!this.helpMenuOpen || !this.hasHelpMenuItems()}"
+              part="help-dropdown"
+            >
+              <div class="help-dropdown-content" @click="${() => {
+      this.helpMenuOpen = false;
+    }}">
+                <slot name="help-menu" @slotchange="${e => this.handleHelpSlotChange(e)}"></slot>
+                ${this.helpMenuList && this.helpMenuList.length ? (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .html */ .qy)`
+                  <ul class="help-menu-list">
+                    ${this.helpMenuList.map(item => (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .html */ .qy)`
+                      <li>
+                        ${item.url ? (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .html */ .qy)`
+                          <a
+                            href="${item.url}"
+                            target="${item.target || '_blank'}"
+                            rel="${(0,lit_directives_if_defined_js__WEBPACK_IMPORTED_MODULE_5__/* .ifDefined */ .J)((item.target || '_blank') === '_blank' ? 'noopener noreferrer' : undefined)}"
+                            @click="${e => this.handleHelpMenuClick(item, e)}"
+                            part="help-menu-item"
+                            role="menuitem"
+                          >
+                            ${item.label}
+                          </a>
+                        ` : (0,lit__WEBPACK_IMPORTED_MODULE_0__/* .html */ .qy)`
+                          <button
+                            type="button"
+                            @click="${e => this.handleHelpMenuClick(item, e)}"
+                            part="help-menu-item"
+                            role="menuitem"
+                          >
+                            ${item.label}
+                          </button>
+                        `}
+                      </li>
+                    `)}
+                  </ul>
+                ` : ''}
+              </div>
+            </nav>
+          </div>` : ''}
+        </div>
+      </div>
+    `;
+  }
 }
 
 /***/ },
@@ -1881,7 +1923,7 @@ var __webpack_exports__ = {};
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   Y: () => (/* reexport safe */ _Header__WEBPACK_IMPORTED_MODULE_0__.Y)
 /* harmony export */ });
-/* harmony import */ var _Header__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(225);
+/* harmony import */ var _Header__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1166);
 
 
 const HEADER_TAG_NAME = 'solid-ui-header';