solid-ui 3.1.3-1 → 3.1.3-2

package/dist/chunks/header-hptVqz21.js

@@ -0,0 +1,1486 @@
+import { c as e, d as t, f as n, m as r, p as i, u as a } from "./solid-logic.esm-7q6hmfIF.js";
+import { n as o } from "./iconBase-DJ0zbNSL.js";
+import { i as s, n as c, s as l, t as u } from "./lit-CC2G_f_C.js";
+import "./account-BUAN8dcJ.js";
+import "./provider-C7cgeyP2.js";
+//#region src/v2/components/auth/loginButton/downArrow.ts
+var d = s`
+  <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>
+`, f = class extends u {
+	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 = l`
+    :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;
+      width: min(30rem, calc(100vw - 2rem));
+      max-width: calc(100vw - 2rem);
+      max-height: calc(100dvh - 2rem);
+    }
+
+    .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);
+      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;
+    }
+
+    .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;
+    }
+
+    @media (max-width: 40rem) {
+      .popup-dialog {
+        width: calc(100vw - 1rem);
+        max-width: calc(100vw - 1rem);
+        max-height: calc(100dvh - 1rem);
+      }
+
+      .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);
+      }
+
+      .popup-top-menu,
+      .issuer-text-section,
+      .popup-footer {
+        padding-left: 0.75rem;
+        padding-right: 0.75rem;
+      }
+
+      .popup-footer {
+        flex-wrap: wrap;
+        gap: 0.625rem;
+      }
+
+      .popup-footer > button {
+        flex: 1 1 100%;
+      }
+
+      .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 = !1, this._issuerInputValue = "", this._dropdownOpen = !1;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+	}
+	_openPopup() {
+		let e = t();
+		if (e) {
+			this._loginComplete(e.uri);
+			return;
+		}
+		this._issuerInputValue = typeof localStorage < "u" && localStorage.getItem("loginIssuer") || this.issuerUrl || "", this._errorMsg = "", this._popupOpen = !0;
+	}
+	_closePopup() {
+		this._popupOpen = !1;
+	}
+	updated() {
+		let e = this.shadowRoot?.querySelector("dialog");
+		e && (this._popupOpen && !e.open ? e.showModal() : !this._popupOpen && e.open && e.close());
+	}
+	async _loginToIssuer(e) {
+		if (e) try {
+			i.store.updater.flagAuthorizationMetadata();
+			let t = new URL(window.location.href).hash;
+			t && window.localStorage.setItem("preLoginRedirectHash", t), window.localStorage.setItem("loginIssuer", e);
+			let n = new URL(window.location.href);
+			n.hash = "", await r.login(e, n.href);
+		} catch (e) {
+			this._errorMsg = e.message || String(e), this.requestUpdate();
+		}
+	}
+	_loginComplete(t) {
+		e.saveUser(t), this.dispatchEvent(new CustomEvent("login-success", {
+			detail: { webId: t },
+			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) {
+		e.key === "Enter" && this._loginToIssuer(this._issuerInputValue), e.key === "Escape" && this._closePopup();
+	}
+	_renderPopup() {
+		let e = a();
+		return s`
+      <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 ? s`
+                    <button
+                      class="issuer-dropdown-toggle"
+                      type="button"
+                      aria-label="Show identity provider suggestions"
+                      aria-expanded="${this._dropdownOpen}"
+                      @click="${() => this._toggleDropdown()}"
+                    >${d}</button>
+                  ` : ""}
+                </div>
+                ${this._dropdownOpen && e.length ? s`
+                  <div class="issuer-dropdown-list" role="listbox">
+                    ${e.map((e) => s`
+                      <button
+                        class="issuer-dropdown-item"
+                        type="button"
+                        role="option"
+                        @click="${() => this._selectIssuerFromDropdown(e.uri)}"
+                      >${e.name}</button>
+                    `)}
+                  </div>
+                ` : ""}
+              </div>
+            </div>
+            ${this._errorMsg ? s`<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 s`
+      <button
+        class="login-button"
+        type="button"
+        part="login-button"
+        @click="${() => this._openPopup()}"
+      >
+        ${this.icon ? s`<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>
+    `;
+	}
+}, p = "solid-ui-login-button";
+customElements.get(p) || customElements.define(p, f);
+//#endregion
+//#region src/v2/components/auth/signupButton/SignupButton.ts
+var m = "https://solidproject.org/get_a_pod", h = class extends u {
+	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 = l`
+    :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 = m, this.theme = "light", this.icon = "", this.layout = "desktop";
+	}
+	_handleClick() {
+		window.open(this.signupUrl, "_blank", "noopener,noreferrer");
+	}
+	render() {
+		return s`
+      <button
+        class="signup-button"
+        type="button"
+        part="signup-button"
+        @click="${() => this._handleClick()}"
+      >
+        ${this.icon ? s`<img class="signup-button-icon" src="${this.icon}" alt="" aria-hidden="true" part="signup-button-icon" />` : ""}
+        <slot>${this.label}</slot>
+      </button>
+    `;
+	}
+}, g = "solid-ui-signup-button";
+customElements.get(g) || customElements.define(g, h);
+//#endregion
+//#region node_modules/lit-html/directives/if-defined.js
+var _ = (e) => e ?? c, v = { DESIGN_SYSTEM_HEADER_ACCOUNT: !0 }, y = "", b = "https://solidproject.org/assets/img/solid-emblem.svg", x = "https://solidproject.org/get_a_pod", S = o.iconBase + "emptyProfileAvatar.png";
+async function C() {
+	if (!(typeof window > "u")) {
+		for (let e of ["loginIssuer", "preLoginRedirectHash"]) window.localStorage.removeItem(e), window.sessionStorage.removeItem(e);
+		if (!(typeof indexedDB > "u")) for (let e of [
+			"soidc",
+			"solid-client-authn-store",
+			"solid-client-authn"
+		]) await new Promise((t) => {
+			try {
+				let n = indexedDB.deleteDatabase(e);
+				n.onsuccess = () => t(), n.onerror = () => t(), n.onblocked = () => t();
+			} catch {
+				t();
+			}
+		});
+	}
+}
+var w = class extends u {
+	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 },
+		authResolved: { state: !0 }
+	};
+	static styles = l`
+  :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;
+  }
+  `;
+	_refreshPromise = null;
+	handleAuthSessionChange = () => {
+		this.refreshAuthStateFromSession().catch(() => {});
+	};
+	constructor() {
+		super(), this.logo = b, this.helpIcon = y, 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: x
+		}, 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, this.authResolved = !1;
+	}
+	connectedCallback() {
+		super.connectedCallback(), document.addEventListener("click", this.handleDocumentClick), window.addEventListener("keydown", this.handleWindowKeydown), typeof r.events?.on == "function" && (r.events.on("login", this.handleAuthSessionChange), r.events.on("logout", this.handleAuthSessionChange), r.events.on("sessionRestore", this.handleAuthSessionChange)), this.refreshAuthStateFromSession().catch(() => {});
+	}
+	disconnectedCallback() {
+		document.removeEventListener("click", this.handleDocumentClick), window.removeEventListener("keydown", this.handleWindowKeydown), typeof r.events?.off == "function" && (r.events.off("login", this.handleAuthSessionChange), r.events.off("logout", this.handleAuthSessionChange), r.events.off("sessionRestore", this.handleAuthSessionChange)), super.disconnectedCallback();
+	}
+	async refreshAuthStateFromSession() {
+		this._refreshPromise ||= (async () => {
+			try {
+				await e.checkUser(), e.currentUser() || await e.checkUser();
+			} catch {}
+		})();
+		try {
+			await this._refreshPromise;
+		} finally {
+			this._refreshPromise = null;
+		}
+		this.authState = e.currentUser() ? "logged-in" : "logged-out", this.authResolved = !0;
+	}
+	handleHelpMenuClick(e, t) {
+		if (t.preventDefault(), this.helpMenuOpen = !1, this.dispatchEvent(new CustomEvent("help-menu-select", {
+			detail: e,
+			bubbles: !0,
+			composed: !0
+		})), e.url) {
+			let t = e.target || "_blank", n = t === "_blank" ? "noopener,noreferrer" : void 0;
+			window.open(e.url, t, n);
+		}
+	}
+	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) => {
+		e.key === "Escape" && (this.accountMenuOpen || this.helpMenuOpen) && (this.accountMenuOpen = !1, this.helpMenuOpen = !1);
+	};
+	handleAccountSlotChange(e) {
+		let t = e.target;
+		this.hasSlottedAccountMenu = t.assignedElements({ flatten: !0 }).length > 0;
+	}
+	handleHelpSlotChange(e) {
+		let 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 !!(this.accountMenu?.length || this.hasSlottedAccountMenu || this.logoutLabel);
+	}
+	hasHelpMenuItems() {
+		return !!(this.helpMenuList?.length || this.hasSlottedHelpMenu);
+	}
+	shouldRenderHelpMenu() {
+		return this.layout !== "mobile" && this.hasHelpMenuItems();
+	}
+	renderLoggedInAvatar(e, t = "account-avatar") {
+		let n = !!e, r = n ? e : this.accountAvatarFallback || S, i = n ? "Profile Avatar" : "Default Avatar";
+		return this.layout === "mobile" && t === "account-avatar" ? s`<img class="account-avatar-img" src="${r}" alt="${i}" />` : s`
+      <span class="${t}" aria-hidden="true">
+        <img src="${r}" alt="${i}" />
+      </span>
+    `;
+	}
+	renderLoggedOutActions() {
+		return s`
+      <div class="auth-actions" part="auth-actions">
+        <slot name="login-action">
+          <solid-ui-login-button
+            label="${this.loginAction.label}"
+            icon=${_(this.layout === "mobile" ? void 0 : this.loginIcon || this.loginAction.icon)}
+            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="${_(this.signUpAction.url)}"
+            layout="${this.layout}"
+            .icon=${_(this.layout === "mobile" ? void 0 : this.signUpIcon || this.signUpAction.icon)}
+            theme="${this.theme}"
+            part="sign-up-action"
+          ></solid-ui-signup-button>
+        </slot>
+      </div>
+    `;
+	}
+	async handleLoginSuccess() {
+		await this.refreshAuthStateFromSession(), this.dispatchEvent(new CustomEvent("auth-action-select", {
+			detail: { role: "login" },
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	async handleLogout() {
+		this.accountMenuOpen = !1;
+		let e = window.localStorage.getItem("loginIssuer") || "";
+		try {
+			await r.logout();
+		} catch {}
+		await C(), !await n({
+			issuer: e,
+			postLogoutRedirectPath: "/"
+		}) && (await this.refreshAuthStateFromSession(), this.dispatchEvent(new CustomEvent("logout-select", {
+			detail: { role: "logout" },
+			bubbles: !0,
+			composed: !0
+		})));
+	}
+	renderAccountMenuItem(e) {
+		let t = s`
+      ${this.renderLoggedInAvatar(e.avatar, "account-menu-avatar")}
+      <span class="account-menu-copy">
+        <span class="account-menu-label">${e.label}</span>
+        ${e.webid && this.layout !== "mobile" ? s`<span class="account-menu-webid">${e.webid}</span>` : ""}
+      </span>
+    `;
+		return e.url ? s`
+        <a
+          class="account-menu-item-link"
+          href="${e.url}"
+          @click="${() => this.handleAccountMenuClick(e)}"
+          part="account-menu-item"
+          role="menuitem"
+        >
+          ${t}
+        </a>
+      ` : s`
+      <button
+        class="account-menu-item-button"
+        type="button"
+        @click="${() => this.handleAccountMenuClick(e)}"
+        part="account-menu-item"
+        role="menuitem"
+      >
+        ${t}
+      </button>
+    `;
+	}
+	renderLoggedInActions() {
+		return s`
+      <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 ? s`
+              <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 ? s`
+            <ul class="account-menu-list">
+              ${this.accountMenu.map((e) => s`
+                <li>${this.renderAccountMenuItem(e)}</li>
+              `)}
+            </ul>
+          ` : ""}
+          ${this.logoutLabel ? s`
+            <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" ? s`<img class="logout-action-icon" src="${this.logoutIcon}" alt="" aria-hidden="true" part="logout-action-icon" />` : ""}
+              ${this.logoutLabel}
+            </button>
+          ` : ""}
+        </nav>
+      </div>
+    `;
+	}
+	renderUserArea() {
+		return v.DESIGN_SYSTEM_HEADER_ACCOUNT ? s`
+        <solid-ui-provider>
+          <solid-ui-account></solid-ui-account>
+        </solid-ui-provider>
+      ` : this.authResolved ? this.authState === "logged-out" ? this.renderLoggedOutActions() : this.renderLoggedInActions() : s`<div class="auth-actions" part="auth-actions"></div>`;
+	}
+	firstUpdated() {
+		let e = this.shadowRoot?.getElementById("brandLink");
+		e && e.classList.toggle("brand-not-displayed", this.layout === "mobile");
+	}
+	updated(e) {
+		if (e.has("layout")) {
+			let e = this.shadowRoot?.getElementById("brandLink");
+			e && e.classList.toggle("brand-not-displayed", this.layout === "mobile");
+		}
+	}
+	render() {
+		return s`
+      <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() ? s`
+            <div class="header-menu-separator" />` : ""}
+
+          ${this.shouldRenderHelpMenu() ? s`
+            <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 ? s`<img id="helpIcon" class="help-icon" src="${this.helpIcon}" alt="Help" part="help-icon" />` : s`<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 ? s`
+                  <ul class="help-menu-list">
+                    ${this.helpMenuList.map((e) => s`
+                      <li>
+                        ${e.url ? s`
+                          <a
+                            href="${e.url}"
+                            target="${e.target || "_blank"}"
+                            rel="${_((e.target || "_blank") === "_blank" ? "noopener noreferrer" : void 0)}"
+                            @click="${(t) => this.handleHelpMenuClick(e, t)}"
+                            part="help-menu-item"
+                            role="menuitem"
+                          >
+                            ${e.label}
+                          </a>
+                        ` : s`
+                          <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>
+    `;
+	}
+}, T = "solid-ui-header";
+customElements.get(T) || customElements.define(T, w);
+//#endregion
+export { w as t };
+
+//# sourceMappingURL=header-hptVqz21.js.map