solid-ui 3.1.3-6 → 3.1.3-8

package/dist/chunks/header-Bqd2CEK3.js

@@ -1,1486 +0,0 @@
-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 { c as s, i as c, n as l, t as u } from "./lit-C4H1jI4q.js";
-import "./account-CFhrB0LO.js";
-import "./provider-DZmdgerD.js";
-//#region src/v2/components/auth/loginButton/downArrow.ts
-var d = c`
-  <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 = s`
-    :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 c`
-      <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 ? c`
-                    <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 ? c`
-                  <div class="issuer-dropdown-list" role="listbox">
-                    ${e.map((e) => c`
-                      <button
-                        class="issuer-dropdown-item"
-                        type="button"
-                        role="option"
-                        @click="${() => this._selectIssuerFromDropdown(e.uri)}"
-                      >${e.name}</button>
-                    `)}
-                  </div>
-                ` : ""}
-              </div>
-            </div>
-            ${this._errorMsg ? c`<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 c`
-      <button
-        class="login-button"
-        type="button"
-        part="login-button"
-        @click="${() => this._openPopup()}"
-      >
-        ${this.icon ? c`<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 = s`
-    :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 c`
-      <button
-        class="signup-button"
-        type="button"
-        part="signup-button"
-        @click="${() => this._handleClick()}"
-      >
-        ${this.icon ? c`<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 ?? l, 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 = s`
-  :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" ? c`<img class="account-avatar-img" src="${r}" alt="${i}" />` : c`
-      <span class="${t}" aria-hidden="true">
-        <img src="${r}" alt="${i}" />
-      </span>
-    `;
-	}
-	renderLoggedOutActions() {
-		return c`
-      <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 = c`
-      ${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" ? c`<span class="account-menu-webid">${e.webid}</span>` : ""}
-      </span>
-    `;
-		return e.url ? c`
-        <a
-          class="account-menu-item-link"
-          href="${e.url}"
-          @click="${() => this.handleAccountMenuClick(e)}"
-          part="account-menu-item"
-          role="menuitem"
-        >
-          ${t}
-        </a>
-      ` : c`
-      <button
-        class="account-menu-item-button"
-        type="button"
-        @click="${() => this.handleAccountMenuClick(e)}"
-        part="account-menu-item"
-        role="menuitem"
-      >
-        ${t}
-      </button>
-    `;
-	}
-	renderLoggedInActions() {
-		return c`
-      <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 ? c`
-              <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 ? c`
-            <ul class="account-menu-list">
-              ${this.accountMenu.map((e) => c`
-                <li>${this.renderAccountMenuItem(e)}</li>
-              `)}
-            </ul>
-          ` : ""}
-          ${this.logoutLabel ? c`
-            <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" ? c`<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 ? c`
-        <solid-ui-provider>
-          <solid-ui-account></solid-ui-account>
-        </solid-ui-provider>
-      ` : this.authResolved ? this.authState === "logged-out" ? this.renderLoggedOutActions() : this.renderLoggedInActions() : c`<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 c`
-      <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() ? c`
-            <div class="header-menu-separator" />` : ""}
-
-          ${this.shouldRenderHelpMenu() ? c`
-            <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 ? c`<img id="helpIcon" class="help-icon" src="${this.helpIcon}" alt="Help" part="help-icon" />` : c`<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 ? c`
-                  <ul class="help-menu-list">
-                    ${this.helpMenuList.map((e) => c`
-                      <li>
-                        ${e.url ? c`
-                          <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>
-                        ` : c`
-                          <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-Bqd2CEK3.js.map