solid-ui 3.0.6 → 3.1.0

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

@@ -0,0 +1,1084 @@
+(()=>{"use strict";var e={423(e,t,o){function r(...e){console.log(...e)}o.d(t,{Rm:()=>r})},378(e,t,o){o.d(t,{Pt:()=>i});var r=o(423);const n="https://solidos.github.io/solid-ui/src",i=(e=o.hmd(e)).scriptURI?{iconBase:e.scriptURI.slice(0,e.scriptURI.lastIndexOf("/"))+"/icons/",originalIconBase:e.scriptURI.slice(0,e.scriptURI.lastIndexOf("/"))+"/originalIcons/"}:"undefined"!=typeof $SolidTestEnvironment&&$SolidTestEnvironment.iconBase?{iconBase:$SolidTestEnvironment.iconBase,originalIconBase:$SolidTestEnvironment.originalIconBase}:{iconBase:n+"/icons/",originalIconBase:n+"/originalIcons/"};(0,r.Rm)("   icons.iconBase is set to : "+i.iconBase);i.iconBase,i.originalIconBase},568(e,t,o){var r=o(161),n=o(892);const i=o(752).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>
+`;class s extends r.WF{static properties={label:{type:String,reflect:!0},theme:{type:String,reflect:!0},issuerUrl:{type:String,attribute:"issuer-url",reflect:!0},icon:{type:String,reflect:!0},layout:{type:String,reflect:!0},_popupOpen:{state:!0},_issuerInputValue:{state:!0},_dropdownOpen:{state:!0}};static styles=r.AH`
+    :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([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);
+    }
+
+    .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;
+    }
+
+    .login-button-icon {
+      width: 16px;
+      height: 16px;
+      display: inline-block;
+      object-fit: contain;
+    }
+
+    .login-button:active {
+      transform: translateY(1px);
+    }
+
+    .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));
+    }
+
+    .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;
+    }
+
+    .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;
+    }
+
+    .issuer-input-wrapper {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+      position: relative;
+    }
+
+    .issuer-input-field-row {
+      display: flex;
+      flex-direction: row;
+      position: relative;
+    }
+
+    .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;
+    }
+
+    .issuer-text-input::placeholder {
+      color: var(--issuer-placeholder-color);
+    }
+
+    .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);
+    }
+
+    .issuer-dropdown-toggle:hover {
+      background: var(--color-header-menu-item-hover, #e6dcff);
+    }
+
+    .issuer-dropdown-toggle svg {
+      width: 14px;
+      height: 14px;
+      display: block;
+    }
+
+    .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);
+    }
+
+    .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;
+    }
+
+    .issuer-dropdown-item:last-child {
+      border-bottom: none;
+    }
+
+    .issuer-dropdown-item:hover {
+      background: var(--color-header-menu-item-hover, #e6dcff);
+      border-radius: var(--border-radius-base-md, 0.5rem);
+    }
+
+    .popup-footer {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      gap: 8px;
+      padding: 0.75rem 1rem 1rem;
+    }
+
+    .popup-footer-hr {
+      margin: 0;
+      border: none;
+      border-top: 1px solid var(--popup-border, #E5E7EB);
+    }
+
+    .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;
+    }
+
+    .popup-cancel-button:hover {
+      background: #D1D5DB;
+    }
+
+    .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;
+    }
+
+    .popup-login-button:hover {
+      background: #6a3de8;
+    }
+
+    .popup-login-button:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .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=!1,this._issuerInputValue="",this._dropdownOpen=!1}connectedCallback(){super.connectedCallback()}disconnectedCallback(){super.disconnectedCallback()}_openPopup(){const e=(0,n.offlineTestID)();e?this._loginComplete(e.uri):(this._issuerInputValue="undefined"!=typeof localStorage&&localStorage.getItem("loginIssuer")||this.issuerUrl||"",this._errorMsg="",this._popupOpen=!0)}_closePopup(){this._popupOpen=!1}updated(){const e=this.shadowRoot?.querySelector("dialog");e&&(this._popupOpen&&!e.open?e.showModal():!this._popupOpen&&e.open&&e.close())}async _loginToIssuer(e){if(e)try{n.solidLogicSingleton.store.updater.flagAuthorizationMetadata();const t=new URL(window.location.href).hash;t&&window.localStorage.setItem("preLoginRedirectHash",t),window.localStorage.setItem("loginIssuer",e);const o=new URL(window.location.href);o.hash="",await n.authSession.login({redirectUrl:o.href,oidcIssuer:e})}catch(e){this._errorMsg=e.message||String(e),this.requestUpdate()}}_loginComplete(e){n.authn.saveUser(e),this.dispatchEvent(new CustomEvent("login-success",{detail:{webId:e},bubbles:!0,composed:!0}))}_handleGoClick(){this._dropdownOpen=!1,this._loginToIssuer(this._issuerInputValue)}_toggleDropdown(){this._dropdownOpen=!this._dropdownOpen}_selectIssuerFromDropdown(e){this._issuerInputValue=e,this._dropdownOpen=!1}_handleInputChange(e){this._issuerInputValue=e.target.value}_handleInputKeydown(e){"Enter"===e.key&&this._loginToIssuer(this._issuerInputValue),"Escape"===e.key&&this._closePopup()}_renderPopup(){const e=(0,n.getSuggestedIssuers)();return r.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"
+                  />
+                  ${e.length?r.qy`
+                    <button
+                      class="issuer-dropdown-toggle"
+                      type="button"
+                      aria-label="Show identity provider suggestions"
+                      aria-expanded="${this._dropdownOpen}"
+                      @click="${()=>this._toggleDropdown()}"
+                    >${i}</button>
+                  `:""}
+                </div>
+                ${this._dropdownOpen&&e.length?r.qy`
+                  <div class="issuer-dropdown-list" role="listbox">
+                    ${e.map(e=>r.qy`
+                      <button
+                        class="issuer-dropdown-item"
+                        type="button"
+                        role="option"
+                        @click="${()=>this._selectIssuerFromDropdown(e.uri)}"
+                      >${e.name}</button>
+                    `)}
+                  </div>
+                `:""}
+              </div>
+            </div>
+            ${this._errorMsg?r.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>
+    `}render(){return r.qy`
+      <button
+        class="login-button"
+        type="button"
+        part="login-button"
+        @click="${()=>this._openPopup()}"
+      >
+        ${this.icon?r.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=>{e.target===e.currentTarget&&this._closePopup()}}"
+      >
+        ${this._popupOpen?this._renderPopup():""}
+      </dialog>
+    `}}const a="solid-ui-login-button";customElements.get(a)||customElements.define(a,s)},765(e,t,o){var r=o(161);class n extends r.WF{static properties={label:{type:String,reflect:!0},theme:{type:String,reflect:!0},signupUrl:{type:String,attribute:"signup-url",reflect:!0},icon:{type:String,reflect:!0},layout:{type:String,reflect:!0}};static styles=r.AH`
+    :host {
+      display: inline-block;
+      --signup-button-background: transparent;
+      --signup-button-border: var(--color-border, #E5E7EB);
+      --signup-button-text: var(--color-header-text, #ffffff);
+    }
+
+    :host([theme='dark']) {
+      --signup-button-background: transparent;
+      --signup-button-border: var(--color-border, #E5E7EB);
+      --signup-button-text: var(--color-header-text, #ffffff);
+    }
+
+    .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;
+    }
+
+    :host([layout='mobile']) .signup-button {
+      border: none;
+    }
+
+    .signup-button-icon {
+      width: 16px;
+      height: 16px;
+      display: inline-block;
+      object-fit: contain;
+    }
+
+    .signup-button:active {
+      transform: translateY(1px);
+    }
+  `;constructor(){super(),this.label="Sign Up",this.signupUrl="https://solidproject.org/get_a_pod",this.theme="light",this.icon="",this.layout="desktop"}_handleClick(){window.open(this.signupUrl,"_blank","noopener,noreferrer")}render(){return r.qy`
+      <button
+        class="signup-button"
+        type="button"
+        part="signup-button"
+        @click="${()=>this._handleClick()}"
+      >
+        ${this.icon?r.qy`<img class="signup-button-icon" src="${this.icon}" alt="" aria-hidden="true" part="signup-button-icon" />`:""}
+        <slot>${this.label}</slot>
+      </button>
+    `}}const i="solid-ui-signup-button";customElements.get(i)||customElements.define(i,n)},892(e){e.exports=SolidLogic},826(e,t,o){o.d(t,{AH:()=>l,Rf:()=>c,sk:()=>d});
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const r=globalThis,n=r.ShadowRoot&&(void 0===r.ShadyCSS||r.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,i=Symbol(),s=new WeakMap;class a{constructor(e,t,o){if(this._$cssResult$=!0,o!==i)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e,this.t=t}get styleSheet(){let e=this.o;const t=this.t;if(n&&void 0===e){const o=void 0!==t&&1===t.length;o&&(e=s.get(t)),void 0===e&&((this.o=e=new CSSStyleSheet).replaceSync(this.cssText),o&&s.set(t,e))}return e}toString(){return this.cssText}}const l=(e,...t)=>{const o=1===e.length?e[0]:t.reduce((t,o,r)=>t+(e=>{if(!0===e._$cssResult$)return e.cssText;if("number"==typeof e)return e;throw Error("Value passed to 'css' function must be a 'css' function result: "+e+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(o)+e[r+1],e[0]);return new a(o,e,i)},c=(e,t)=>{if(n)e.adoptedStyleSheets=t.map(e=>e instanceof CSSStyleSheet?e:e.styleSheet);else for(const o of t){const t=document.createElement("style"),n=r.litNonce;void 0!==n&&t.setAttribute("nonce",n),t.textContent=o.cssText,e.appendChild(t)}},d=n?e=>e:e=>e instanceof CSSStyleSheet?(e=>{let t="";for(const o of e.cssRules)t+=o.cssText;return(e=>new a("string"==typeof e?e:e+"",void 0,i))(t)})(e):e},760(e,t,o){o.d(t,{AH:()=>r.AH,mN:()=>v});var r=o(826);
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const{is:n,defineProperty:i,getOwnPropertyDescriptor:s,getOwnPropertyNames:a,getOwnPropertySymbols:l,getPrototypeOf:c}=Object,d=globalThis,u=d.trustedTypes,h=u?u.emptyScript:"",p=d.reactiveElementPolyfillSupport,g=(e,t)=>e,b={toAttribute(e,t){switch(t){case Boolean:e=e?h:null;break;case Object:case Array:e=null==e?e:JSON.stringify(e)}return e},fromAttribute(e,t){let o=e;switch(t){case Boolean:o=null!==e;break;case Number:o=null===e?null:Number(e);break;case Object:case Array:try{o=JSON.parse(e)}catch(e){o=null}}return o}},m=(e,t)=>!n(e,t),f={attribute:!0,type:String,converter:b,reflect:!1,useDefault:!1,hasChanged:m};Symbol.metadata??=Symbol("metadata"),d.litPropertyMetadata??=new WeakMap;class v extends HTMLElement{static addInitializer(e){this._$Ei(),(this.l??=[]).push(e)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(e,t=f){if(t.state&&(t.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(e)&&((t=Object.create(t)).wrapped=!0),this.elementProperties.set(e,t),!t.noAccessor){const o=Symbol(),r=this.getPropertyDescriptor(e,o,t);void 0!==r&&i(this.prototype,e,r)}}static getPropertyDescriptor(e,t,o){const{get:r,set:n}=s(this.prototype,e)??{get(){return this[t]},set(e){this[t]=e}};return{get:r,set(t){const i=r?.call(this);n?.call(this,t),this.requestUpdate(e,i,o)},configurable:!0,enumerable:!0}}static getPropertyOptions(e){return this.elementProperties.get(e)??f}static _$Ei(){if(this.hasOwnProperty(g("elementProperties")))return;const e=c(this);e.finalize(),void 0!==e.l&&(this.l=[...e.l]),this.elementProperties=new Map(e.elementProperties)}static finalize(){if(this.hasOwnProperty(g("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(g("properties"))){const e=this.properties,t=[...a(e),...l(e)];for(const o of t)this.createProperty(o,e[o])}const e=this[Symbol.metadata];if(null!==e){const t=litPropertyMetadata.get(e);if(void 0!==t)for(const[e,o]of t)this.elementProperties.set(e,o)}this._$Eh=new Map;for(const[e,t]of this.elementProperties){const o=this._$Eu(e,t);void 0!==o&&this._$Eh.set(o,e)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(e){const t=[];if(Array.isArray(e)){const o=new Set(e.flat(1/0).reverse());for(const e of o)t.unshift((0,r.sk)(e))}else void 0!==e&&t.push((0,r.sk)(e));return t}static _$Eu(e,t){const o=t.attribute;return!1===o?void 0:"string"==typeof o?o:"string"==typeof e?e.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$ES=new Promise(e=>this.enableUpdating=e),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach(e=>e(this))}addController(e){(this._$EO??=new Set).add(e),void 0!==this.renderRoot&&this.isConnected&&e.hostConnected?.()}removeController(e){this._$EO?.delete(e)}_$E_(){const e=new Map,t=this.constructor.elementProperties;for(const o of t.keys())this.hasOwnProperty(o)&&(e.set(o,this[o]),delete this[o]);e.size>0&&(this._$Ep=e)}createRenderRoot(){const e=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return(0,r.Rf)(e,this.constructor.elementStyles),e}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach(e=>e.hostConnected?.())}enableUpdating(e){}disconnectedCallback(){this._$EO?.forEach(e=>e.hostDisconnected?.())}attributeChangedCallback(e,t,o){this._$AK(e,o)}_$ET(e,t){const o=this.constructor.elementProperties.get(e),r=this.constructor._$Eu(e,o);if(void 0!==r&&!0===o.reflect){const n=(void 0!==o.converter?.toAttribute?o.converter:b).toAttribute(t,o.type);this._$Em=e,null==n?this.removeAttribute(r):this.setAttribute(r,n),this._$Em=null}}_$AK(e,t){const o=this.constructor,r=o._$Eh.get(e);if(void 0!==r&&this._$Em!==r){const e=o.getPropertyOptions(r),n="function"==typeof e.converter?{fromAttribute:e.converter}:void 0!==e.converter?.fromAttribute?e.converter:b;this._$Em=r;const i=n.fromAttribute(t,e.type);this[r]=i??this._$Ej?.get(r)??i,this._$Em=null}}requestUpdate(e,t,o,r=!1,n){if(void 0!==e){const i=this.constructor;if(!1===r&&(n=this[e]),o??=i.getPropertyOptions(e),!((o.hasChanged??m)(n,t)||o.useDefault&&o.reflect&&n===this._$Ej?.get(e)&&!this.hasAttribute(i._$Eu(e,o))))return;this.C(e,t,o)}!1===this.isUpdatePending&&(this._$ES=this._$EP())}C(e,t,{useDefault:o,reflect:r,wrapped:n},i){o&&!(this._$Ej??=new Map).has(e)&&(this._$Ej.set(e,i??t??this[e]),!0!==n||void 0!==i)||(this._$AL.has(e)||(this.hasUpdated||o||(t=void 0),this._$AL.set(e,t)),!0===r&&this._$Em!==e&&(this._$Eq??=new Set).add(e))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(e){Promise.reject(e)}const e=this.scheduleUpdate();return null!=e&&await e,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[e,t]of this._$Ep)this[e]=t;this._$Ep=void 0}const e=this.constructor.elementProperties;if(e.size>0)for(const[t,o]of e){const{wrapped:e}=o,r=this[t];!0!==e||this._$AL.has(t)||void 0===r||this.C(t,void 0,o,r)}}let e=!1;const t=this._$AL;try{e=this.shouldUpdate(t),e?(this.willUpdate(t),this._$EO?.forEach(e=>e.hostUpdate?.()),this.update(t)):this._$EM()}catch(t){throw e=!1,this._$EM(),t}e&&this._$AE(t)}willUpdate(e){}_$AE(e){this._$EO?.forEach(e=>e.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(e)),this.updated(e)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(e){return!0}update(e){this._$Eq&&=this._$Eq.forEach(e=>this._$ET(e,this[e])),this._$EM()}updated(e){}firstUpdated(e){}}v.elementStyles=[],v.shadowRootOptions={mode:"open"},v[g("elementProperties")]=new Map,v[g("finalized")]=new Map,p?.({ReactiveElement:v}),(d.reactiveElementVersions??=[]).push("2.1.2")},228(e,t,o){o.d(t,{AH:()=>r.AH,WF:()=>s,qy:()=>n.qy});var r=o(760),n=o(752);
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const i=globalThis;class s extends r.mN{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){const e=super.createRenderRoot();return this.renderOptions.renderBefore??=e.firstChild,e}update(e){const t=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(e),this._$Do=(0,n.XX)(t,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1)}render(){return n.c0}}s._$litElement$=!0,s.finalized=!0,i.litElementHydrateSupport?.({LitElement:s});const a=i.litElementPolyfillSupport;a?.({LitElement:s});(i.litElementVersions??=[]).push("4.2.2")},752(e,t,o){o.d(t,{XX:()=>D,c0:()=>E,qy:()=>k,s6:()=>S});
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const r=globalThis,n=e=>e,i=r.trustedTypes,s=i?i.createPolicy("lit-html",{createHTML:e=>e}):void 0,a="$lit$",l=`lit$${Math.random().toFixed(9).slice(2)}$`,c="?"+l,d=`<${c}>`,u=document,h=()=>u.createComment(""),p=e=>null===e||"object"!=typeof e&&"function"!=typeof e,g=Array.isArray,b=e=>g(e)||"function"==typeof e?.[Symbol.iterator],m="[ \t\n\f\r]",f=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,v=/-->/g,y=/>/g,x=RegExp(`>|${m}(?:([^\\s"'>=/]+)(${m}*=${m}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),$=/'/g,_=/"/g,A=/^(?:script|style|textarea|title)$/i,w=e=>(t,...o)=>({_$litType$:e,strings:t,values:o}),k=w(1),E=(w(2),w(3),Symbol.for("lit-noChange")),S=Symbol.for("lit-nothing"),M=new WeakMap,I=u.createTreeWalker(u,129);function C(e,t){if(!g(e)||!e.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==s?s.createHTML(t):t}const O=(e,t)=>{const o=e.length-1,r=[];let n,i=2===t?"<svg>":3===t?"<math>":"",s=f;for(let t=0;t<o;t++){const o=e[t];let c,u,h=-1,p=0;for(;p<o.length&&(s.lastIndex=p,u=s.exec(o),null!==u);)p=s.lastIndex,s===f?"!--"===u[1]?s=v:void 0!==u[1]?s=y:void 0!==u[2]?(A.test(u[2])&&(n=RegExp("</"+u[2],"g")),s=x):void 0!==u[3]&&(s=x):s===x?">"===u[0]?(s=n??f,h=-1):void 0===u[1]?h=-2:(h=s.lastIndex-u[2].length,c=u[1],s=void 0===u[3]?x:'"'===u[3]?_:$):s===_||s===$?s=x:s===v||s===y?s=f:(s=x,n=void 0);const g=s===x&&e[t+1].startsWith("/>")?" ":"";i+=s===f?o+d:h>=0?(r.push(c),o.slice(0,h)+a+o.slice(h)+l+g):o+l+(-2===h?t:g)}return[C(e,i+(e[o]||"<?>")+(2===t?"</svg>":3===t?"</math>":"")),r]};class U{constructor({strings:e,_$litType$:t},o){let r;this.parts=[];let n=0,s=0;const d=e.length-1,u=this.parts,[p,g]=O(e,t);if(this.el=U.createElement(p,o),I.currentNode=this.el.content,2===t||3===t){const e=this.el.content.firstChild;e.replaceWith(...e.childNodes)}for(;null!==(r=I.nextNode())&&u.length<d;){if(1===r.nodeType){if(r.hasAttributes())for(const e of r.getAttributeNames())if(e.endsWith(a)){const t=g[s++],o=r.getAttribute(e).split(l),i=/([.?@])?(.*)/.exec(t);u.push({type:1,index:n,name:i[2],strings:o,ctor:"."===i[1]?R:"?"===i[1]?q:"@"===i[1]?T:B}),r.removeAttribute(e)}else e.startsWith(l)&&(u.push({type:6,index:n}),r.removeAttribute(e));if(A.test(r.tagName)){const e=r.textContent.split(l),t=e.length-1;if(t>0){r.textContent=i?i.emptyScript:"";for(let o=0;o<t;o++)r.append(e[o],h()),I.nextNode(),u.push({type:2,index:++n});r.append(e[t],h())}}}else if(8===r.nodeType)if(r.data===c)u.push({type:2,index:n});else{let e=-1;for(;-1!==(e=r.data.indexOf(l,e+1));)u.push({type:7,index:n}),e+=l.length-1}n++}}static createElement(e,t){const o=u.createElement("template");return o.innerHTML=e,o}}function H(e,t,o=e,r){if(t===E)return t;let n=void 0!==r?o._$Co?.[r]:o._$Cl;const i=p(t)?void 0:t._$litDirective$;return n?.constructor!==i&&(n?._$AO?.(!1),void 0===i?n=void 0:(n=new i(e),n._$AT(e,o,r)),void 0!==r?(o._$Co??=[])[r]=n:o._$Cl=n),void 0!==n&&(t=H(e,n._$AS(e,t.values),n,r)),t}class P{constructor(e,t){this._$AV=[],this._$AN=void 0,this._$AD=e,this._$AM=t}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(e){const{el:{content:t},parts:o}=this._$AD,r=(e?.creationScope??u).importNode(t,!0);I.currentNode=r;let n=I.nextNode(),i=0,s=0,a=o[0];for(;void 0!==a;){if(i===a.index){let t;2===a.type?t=new L(n,n.nextSibling,this,e):1===a.type?t=new a.ctor(n,a.name,a.strings,this,e):6===a.type&&(t=new j(n,this,e)),this._$AV.push(t),a=o[++s]}i!==a?.index&&(n=I.nextNode(),i++)}return I.currentNode=u,r}p(e){let t=0;for(const o of this._$AV)void 0!==o&&(void 0!==o.strings?(o._$AI(e,o,t),t+=o.strings.length-2):o._$AI(e[t])),t++}}class L{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(e,t,o,r){this.type=2,this._$AH=S,this._$AN=void 0,this._$AA=e,this._$AB=t,this._$AM=o,this.options=r,this._$Cv=r?.isConnected??!0}get parentNode(){let e=this._$AA.parentNode;const t=this._$AM;return void 0!==t&&11===e?.nodeType&&(e=t.parentNode),e}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(e,t=this){e=H(this,e,t),p(e)?e===S||null==e||""===e?(this._$AH!==S&&this._$AR(),this._$AH=S):e!==this._$AH&&e!==E&&this._(e):void 0!==e._$litType$?this.$(e):void 0!==e.nodeType?this.T(e):b(e)?this.k(e):this._(e)}O(e){return this._$AA.parentNode.insertBefore(e,this._$AB)}T(e){this._$AH!==e&&(this._$AR(),this._$AH=this.O(e))}_(e){this._$AH!==S&&p(this._$AH)?this._$AA.nextSibling.data=e:this.T(u.createTextNode(e)),this._$AH=e}$(e){const{values:t,_$litType$:o}=e,r="number"==typeof o?this._$AC(e):(void 0===o.el&&(o.el=U.createElement(C(o.h,o.h[0]),this.options)),o);if(this._$AH?._$AD===r)this._$AH.p(t);else{const e=new P(r,this),o=e.u(this.options);e.p(t),this.T(o),this._$AH=e}}_$AC(e){let t=M.get(e.strings);return void 0===t&&M.set(e.strings,t=new U(e)),t}k(e){g(this._$AH)||(this._$AH=[],this._$AR());const t=this._$AH;let o,r=0;for(const n of e)r===t.length?t.push(o=new L(this.O(h()),this.O(h()),this,this.options)):o=t[r],o._$AI(n),r++;r<t.length&&(this._$AR(o&&o._$AB.nextSibling,r),t.length=r)}_$AR(e=this._$AA.nextSibling,t){for(this._$AP?.(!1,!0,t);e!==this._$AB;){const t=n(e).nextSibling;n(e).remove(),e=t}}setConnected(e){void 0===this._$AM&&(this._$Cv=e,this._$AP?.(e))}}class B{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(e,t,o,r,n){this.type=1,this._$AH=S,this._$AN=void 0,this.element=e,this.name=t,this._$AM=r,this.options=n,o.length>2||""!==o[0]||""!==o[1]?(this._$AH=Array(o.length-1).fill(new String),this.strings=o):this._$AH=S}_$AI(e,t=this,o,r){const n=this.strings;let i=!1;if(void 0===n)e=H(this,e,t,0),i=!p(e)||e!==this._$AH&&e!==E,i&&(this._$AH=e);else{const r=e;let s,a;for(e=n[0],s=0;s<n.length-1;s++)a=H(this,r[o+s],t,s),a===E&&(a=this._$AH[s]),i||=!p(a)||a!==this._$AH[s],a===S?e=S:e!==S&&(e+=(a??"")+n[s+1]),this._$AH[s]=a}i&&!r&&this.j(e)}j(e){e===S?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,e??"")}}class R extends B{constructor(){super(...arguments),this.type=3}j(e){this.element[this.name]=e===S?void 0:e}}class q extends B{constructor(){super(...arguments),this.type=4}j(e){this.element.toggleAttribute(this.name,!!e&&e!==S)}}class T extends B{constructor(e,t,o,r,n){super(e,t,o,r,n),this.type=5}_$AI(e,t=this){if((e=H(this,e,t,0)??S)===E)return;const o=this._$AH,r=e===S&&o!==S||e.capture!==o.capture||e.once!==o.once||e.passive!==o.passive,n=e!==S&&(o===S||r);r&&this.element.removeEventListener(this.name,this,o),n&&this.element.addEventListener(this.name,this,e),this._$AH=e}handleEvent(e){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,e):this._$AH.handleEvent(e)}}class j{constructor(e,t,o){this.element=e,this.type=6,this._$AN=void 0,this._$AM=t,this.options=o}get _$AU(){return this._$AM._$AU}_$AI(e){H(this,e)}}const N=r.litHtmlPolyfillSupport;N?.(U,L),(r.litHtmlVersions??=[]).push("3.3.2");const D=(e,t,o)=>{const r=o?.renderBefore??t;let n=r._$litPart$;if(void 0===n){const e=o?.renderBefore??null;r._$litPart$=n=new L(t.insertBefore(h(),e),e,void 0,o??{})}return n._$AI(e),n}},161(e,t,o){o.d(t,{AH:()=>r.AH,WF:()=>r.WF,qy:()=>r.qy});o(760),o(752);var r=o(228)}},t={};function o(r){var n=t[r];if(void 0!==n)return n.exports;var i=t[r]={id:r,loaded:!1,exports:{}};return e[r](i,i.exports,o),i.loaded=!0,i.exports}o.d=(e,t)=>{for(var r in t)o.o(t,r)&&!o.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},o.hmd=e=>((e=Object.create(e)).children||(e.children=[]),Object.defineProperty(e,"exports",{enumerable:!0,set:()=>{throw new Error("ES Modules may not assign module.exports or exports.*, Use ESM export syntax, instead: "+e.id)}}),e),o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);var r=o(161),n=o(378),i=o(892),s=(o(568),o(765),o(752));
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const a=e=>e??s.s6,l=n.Pt.iconBase+"emptyProfileAvatar.png";class c extends r.WF{static properties={logo:{type:String,reflect:!0},helpIcon:{type:String,attribute:"help-icon",reflect:!0},layout:{type:String,reflect:!0},theme:{type:String,reflect:!0},brandLink:{type:String,attribute:"brand-link",reflect:!0},authState:{type:String,attribute:"auth-state",reflect:!0},loginAction:{type:Object,attribute:!1},signUpAction:{type:Object,attribute:!1},accountMenu:{type:Array,attribute:!1},logoutLabel:{type:String,attribute:"logout-label",reflect:!0},logoutIcon:{type:String,attribute:"logout-icon",reflect:!0},accountIcon:{type:String,attribute:"account-icon",reflect:!0},accountAvatar:{type:String,attribute:"account-avatar",reflect:!0},accountAvatarFallback:{type:String,attribute:"account-avatar-fallback",reflect:!0},loginIcon:{type:String,attribute:"login-icon",reflect:!0},signUpIcon:{type:String,attribute:"sign-up-icon",reflect:!0},helpMenuList:{type:Array},accountMenuOpen:{state:!0},helpMenuOpen:{state:!0},hasSlottedAccountMenu:{state:!0},hasSlottedHelpMenu:{state:!0}};static styles=r.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([layout='mobile']) .headerInner {
+    flex-wrap: wrap;
+    text-align: center;
+    gap: 0.5rem;
+  }
+
+  .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;
+  }
+
+  ::slotted([slot='navigation-toggle']) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    margin-right: 0.75rem;
+  }
+
+  :host([layout='desktop']) ::slotted([slot='navigation-toggle']) {
+    display: none !important;
+  }
+
+  .brand {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    text-decoration: none;
+    color: inherit;
+  }
+
+  .brand-not-displayed {
+    display: none;
+  }
+
+  .brand img {
+    height: 50px;
+    width: 55px;
+    object-fit: contain;
+  }
+
+  .menu {
+    display: flex;
+    align-items: center;
+    gap: 0.625rem;
+    margin-left: auto;
+  }
+
+  .auth-actions {
+    display: flex;
+    align-items: center;
+    gap: 0.625rem;
+  }
+
+  .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;
+  }
+
+  .auth-button:hover {
+    border-color: var(--header-menu-item-hover);
+  }
+
+  .auth-button:active {
+    transform: translateY(1px);
+  }
+
+  .auth-button-sign-up {
+    background: color-mix(in srgb, var(--header-menu-bg) 78%, var(--header-menu-item-selected) 22%);
+  }
+
+  .header-menu-separator {
+    background: var(--header-line);
+    width: 1px;
+    height: 2.3rem;
+  }
+
+  .account-menu-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+
+  .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;
+  }
+
+  :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);
+  }
+
+  :host([layout='mobile']) .account-menu-trigger-label {
+    display: none;
+  }
+
+  .account-menu-trigger:disabled {
+    cursor: default;
+    opacity: 0.7;
+  }
+
+  .account-menu-trigger-icon {
+    width: 1rem;
+    height: 1rem;
+    object-fit: contain;
+    flex-shrink: 0;
+  }
+
+  .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;
+  }
+
+  .account-avatar {
+    width: 1.75rem;
+    height: 1.75rem;
+    border-radius: 999px;
+    border: 1.5px solid var(--header-border);
+  }
+
+  .account-menu-avatar {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 0.5rem;
+  }
+
+  .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);
+  }
+
+  .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;
+  }
+
+  .account-dropdown[hidden] {
+    display: none;
+  }
+
+  .account-menu-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .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;
+  }
+
+  .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);
+  }
+
+  .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);
+  }
+
+  .account-switch {
+    display: block;
+    width: 100%;
+    color: var(--header-menu-text);
+    text-align: left;
+    text-transform: uppercase;
+    font-size: 80%;
+  }
+
+  .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;
+  }
+
+  .account-menu-label {
+    color: var(--header-button-text);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .account-menu-webid {
+    color: var(--header-button-detail-text);
+    font-size: 0.5rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .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;
+  }
+
+  .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;
+  }
+
+  .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;
+  }
+
+  .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);
+  }
+
+  .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="https://solidproject.org/assets/img/solid-emblem.svg",this.helpIcon="",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:"https://solidproject.org/get_a_pod"},this.accountMenu=[],this.logoutLabel="Log Out",this.logoutIcon="",this.accountIcon="▼",this.accountAvatar="",this.accountAvatarFallback="",this.loginIcon="",this.signUpIcon="",this.helpMenuList=[],this.accountMenuOpen=!1,this.helpMenuOpen=!1,this.hasSlottedAccountMenu=!1,this.hasSlottedHelpMenu=!1}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(e,t){if(t.preventDefault(),this.helpMenuOpen=!1,this.dispatchEvent(new CustomEvent("help-menu-select",{detail:e,bubbles:!0,composed:!0})),e.url){const t=e.target||"_blank",o="_blank"===t?"noopener,noreferrer":void 0;window.open(e.url,t,o)}}handleAccountMenuClick(e){this.accountMenuOpen=!1,this.dispatchEvent(new CustomEvent("account-menu-select",{detail:e,bubbles:!0,composed:!0}))}handleDocumentClick=e=>{e.composedPath().includes(this)||(this.accountMenuOpen=!1,this.helpMenuOpen=!1)};handleWindowKeydown=e=>{"Escape"===e.key&&(this.accountMenuOpen||this.helpMenuOpen)&&(this.accountMenuOpen=!1,this.helpMenuOpen=!1)};handleAccountSlotChange(e){const t=e.target;this.hasSlottedAccountMenu=t.assignedElements({flatten:!0}).length>0}handleHelpSlotChange(e){const t=e.target;this.hasSlottedHelpMenu=t.assignedElements({flatten:!0}).length>0}toggleAccountMenu(e){e.preventDefault(),this.hasAccountMenuItems()&&(this.helpMenuOpen=!1,this.accountMenuOpen=!this.accountMenuOpen)}toggleHelpMenu(e){e.preventDefault(),this.hasHelpMenuItems()&&(this.accountMenuOpen=!1,this.helpMenuOpen=!this.helpMenuOpen)}hasAccountMenuItems(){return Boolean(this.accountMenu?.length||this.hasSlottedAccountMenu||this.logoutLabel)}hasHelpMenuItems(){return Boolean(this.helpMenuList?.length||this.hasSlottedHelpMenu)}shouldRenderHelpMenu(){return"mobile"!==this.layout&&this.hasHelpMenuItems()}renderLoggedInAvatar(e,t="account-avatar"){const o=Boolean(e),n=o?e:this.accountAvatarFallback||l,i=o?"Profile Avatar":"Default Avatar";return"mobile"===this.layout&&"account-avatar"===t?r.qy`<img class="account-avatar-img" src="${n}" alt="${i}" />`:r.qy`
+      <span class="${t}" aria-hidden="true">
+        <img src="${n}" alt="${i}" />
+      </span>
+    `}renderLoggedOutActions(){return r.qy`
+      <div class="auth-actions" part="auth-actions">
+        <slot name="login-action">
+          <solid-ui-login-button
+            label="${this.loginAction.label}"
+            icon=${a("mobile"!==this.layout?this.loginIcon||this.loginAction.icon:void 0)}
+            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="${a(this.signUpAction.url)}"
+            layout="${this.layout}"
+            .icon=${a("mobile"!==this.layout?this.signUpIcon||this.signUpAction.icon:void 0)}
+            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:!0,composed:!0}))}async handleLogout(){this.accountMenuOpen=!1;try{await i.authSession.logout()}catch(e){}this.authState="logged-out",this.dispatchEvent(new CustomEvent("logout-select",{detail:{role:"logout"},bubbles:!0,composed:!0}))}renderAccountMenuItem(e){const t=r.qy`
+      ${this.renderLoggedInAvatar(e.avatar,"account-menu-avatar")}
+      <span class="account-menu-copy">
+        <span class="account-menu-label">${e.label}</span>
+        ${e.webid&&"mobile"!==this.layout?r.qy`<span class="account-menu-webid">${e.webid}</span>`:""}
+      </span>
+    `;return e.url?r.qy`
+        <a
+          class="account-menu-item-link"
+          href="${e.url}"
+          @click="${()=>this.handleAccountMenuClick(e)}"
+          part="account-menu-item"
+          role="menuitem"
+        >
+          ${t}
+        </a>
+      `:r.qy`
+      <button
+        class="account-menu-item-button"
+        type="button"
+        @click="${()=>this.handleAccountMenuClick(e)}"
+        part="account-menu-item"
+        role="menuitem"
+      >
+        ${t}
+      </button>
+    `}renderLoggedInActions(){return r.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)}
+            ${"mobile"!==this.layout&&this.accountIcon?r.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?r.qy`
+            <ul class="account-menu-list">
+              ${this.accountMenu.map(e=>r.qy`
+                <li>${this.renderAccountMenuItem(e)}</li>
+              `)}
+            </ul>
+          `:""}
+          ${this.logoutLabel?r.qy`
+            <hr class="dropdown-menu-separator" />
+            <button
+              class="account-menu-item-button"
+              type="button"
+              @click="${()=>this.handleLogout()}"
+              part="logout-action"
+              role="menuitem"
+            >
+              ${this.logoutIcon&&"mobile"!==this.layout?r.qy`<img class="logout-action-icon" src="${this.logoutIcon}" alt="" aria-hidden="true" part="logout-action-icon" />`:""}
+              ${this.logoutLabel}
+            </button>
+          `:""}
+        </nav>
+      </div>
+    `}renderUserArea(){return"logged-out"===this.authState?this.renderLoggedOutActions():this.renderLoggedInActions()}firstUpdated(){const e=this.shadowRoot?.getElementById("brandLink");e&&e.classList.toggle("brand-not-displayed","mobile"===this.layout)}updated(e){if(e.has("layout")){const e=this.shadowRoot?.getElementById("brandLink");e&&e.classList.toggle("brand-not-displayed","mobile"===this.layout)}}render(){return r.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()?r.qy`
+            <div class="header-menu-separator" />`:""}
+
+          ${this.shouldRenderHelpMenu()?r.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?r.qy`<img id="helpIcon" class="help-icon" src="${this.helpIcon}" alt="Help" part="help-icon" />`:r.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=!1}}">
+                <slot name="help-menu" @slotchange="${e=>this.handleHelpSlotChange(e)}"></slot>
+                ${this.helpMenuList&&this.helpMenuList.length?r.qy`
+                  <ul class="help-menu-list">
+                    ${this.helpMenuList.map(e=>r.qy`
+                      <li>
+                        ${e.url?r.qy`
+                          <a
+                            href="${e.url}"
+                            target="${e.target||"_blank"}"
+                            rel="${a("_blank"===(e.target||"_blank")?"noopener noreferrer":void 0)}"
+                            @click="${t=>this.handleHelpMenuClick(e,t)}"
+                            part="help-menu-item"
+                            role="menuitem"
+                          >
+                            ${e.label}
+                          </a>
+                        `:r.qy`
+                          <button
+                            type="button"
+                            @click="${t=>this.handleHelpMenuClick(e,t)}"
+                            part="help-menu-item"
+                            role="menuitem"
+                          >
+                            ${e.label}
+                          </button>
+                        `}
+                      </li>
+                    `)}
+                  </ul>
+                `:""}
+              </div>
+            </nav>
+          </div>`:""}
+        </div>
+      </div>
+    `}}const d="solid-ui-header";customElements.get(d)||customElements.define(d,c)})();
+//# sourceMappingURL=index.min.js.map