npm - solid-ui - Versions diffs - 3.1.3-0 → 3.1.3-2 - Mend

solid-ui 3.1.3-0 → 3.1.3-2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (880) hide show

package/dist/v2/components/layout/header/Header.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Header.esm.js","names":[],"sources":["../../../../../src/v2/components/layout/header/Header.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { icons } from '../../../../lib/iconBase'\nimport { authSession, authn, performServerSideLogout } from 'solid-logic'\nimport '../../auth/loginButton/index'\nimport '../../auth/signupButton/index'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport '../../../../design-system/components/account'\nimport '../../../../design-system/components/provider'\nimport Features from '../../../../lib/features'\n\nconst DEFAULT_HELP_MENU_ICON = ''\nconst DEFAULT_SOLID_ICON_URL = 'https://solidproject.org/assets/img/solid-emblem.svg'\nconst DEFAULT_SIGNUP_URL = 'https://solidproject.org/get_a_pod'\nconst DEFAULT_LOGGEDIN_MENU_BUTTON_AVATAR = icons.iconBase + 'emptyProfileAvatar.png'\n\nasync function clearPersistedAuthState (): Promise<void> {\n if (typeof window === 'undefined') {\n return\n }\n\n const explicitKeys = ['loginIssuer', 'preLoginRedirectHash']\n for (const key of explicitKeys) {\n window.localStorage.removeItem(key)\n window.sessionStorage.removeItem(key)\n }\n\n if (typeof indexedDB === 'undefined') {\n return\n }\n\n const databases = ['soidc', 'solid-client-authn-store', 'solid-client-authn']\n for (const dbName of databases) {\n await new Promise<void>((resolve) => {\n try {\n const request = indexedDB.deleteDatabase(dbName)\n request.onsuccess = () => resolve()\n request.onerror = () => resolve()\n request.onblocked = () => resolve()\n } catch (_err) {\n resolve()\n }\n })\n }\n}\n\nexport type HeaderAuthState = 'logged-out' \| 'logged-in'\n\nexport type HeaderMenuItem = {\n label: string\n url?: string\n target?: string\n action?: string\n icon?: string\n}\n\nexport type HeaderAccountMenuItem = HeaderMenuItem & {\n avatar?: string\n webid?: string\n}\n\nexport class Header extends LitElement {\n static properties = {\n logo: { type: String, reflect: true },\n helpIcon: { type: String, attribute: 'help-icon', reflect: true },\n layout: { type: String, reflect: true },\n theme: { type: String, reflect: true },\n brandLink: { type: String, attribute: 'brand-link', reflect: true },\n authState: { type: String, attribute: 'auth-state', reflect: true },\n loginAction: { type: Object, attribute: false },\n signUpAction: { type: Object, attribute: false },\n accountMenu: { type: Array, attribute: false },\n logoutLabel: { type: String, attribute: 'logout-label', reflect: true },\n logoutIcon: { type: String, attribute: 'logout-icon', reflect: true },\n accountIcon: { type: String, attribute: 'account-icon', reflect: true },\n accountAvatar: { type: String, attribute: 'account-avatar', reflect: true },\n accountAvatarFallback: { type: String, attribute: 'account-avatar-fallback', reflect: true },\n loginIcon: { type: String, attribute: 'login-icon', reflect: true },\n signUpIcon: { type: String, attribute: 'sign-up-icon', reflect: true },\n helpMenuList: { type: Array },\n accountMenuOpen: { state: true },\n helpMenuOpen: { state: true },\n hasSlottedAccountMenu: { state: true },\n hasSlottedHelpMenu: { state: true },\n authResolved: { state: true }\n }\n\n static styles = css`\n :host { /* default theme /\n display: block;\n --header-bg: var(--color-header-row-bg, #332746);\n --header-text: var(--color-header-text, #ffffff);\n --header-border: var(--color-border, #efecf3);\n --header-line: var(--color-header-menu-separator-line, #5e546d);\n --header-link: var(--color-text-heading, #000000);\n --header-menu-item-hover: var(--color-header-menu-item-hover, #e6dcff);\n --header-menu-item-selected: var(--color-header-menu-item-selected, #cbb9ff);\n --header-menu-bg: var(--color-menu-bg, #f6f5f9);\n --header-menu-loggedin-bg: var(--color-header-menu-loggedin-bg, #5e546d);\n --header-menu-text: var(--color-menu-item-text, #654d6c);\n --header-border-radius: var(--border-radius-sm, 0.2rem);\n --header-button-bg: var(--color-menu-bg, #ffffff);\n --header-button-text: var(--color-header-button-text, #0F172B);\n --header-button-detail-text: var(--color-header-button-detail-text, #99A1AF);\n --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));\n font-family: var(--font-family-base, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif);\n }\n\n / for now light and dark are the same /\n :host([theme='dark']) {\n display: block;\n --header-bg: var(--color-header-row-bg, #332746);\n --header-text: var(--color-header-text, #ffffff);\n --header-border: var(--color-border, #efecf3);\n --header-line: var(--color-header-menu-separator-line, #5e546d);\n --header-link: var(--color-text-heading, #000000);\n --header-menu-item-hover: var(--color-header-menu-item-hover, #e6dcff);\n --header-menu-item-selected: var(--color-header-menu-item-selected, #cbb9ff);\n --header-menu-bg: var(--color-menu-bg, #f6f5f9);\n --header-menu-loggedin-bg: var(--color-header-menu-loggedin-bg, #5e546d);\n --header-menu-text: var(--color-menu-item-text, #654d6c);\n --header-border-radius: var(--border-radius-sm, 0.2rem);\n --header-button-bg: var(--color-menu-bg, #ffffff);\n --header-button-text: var(--color-header-button-text, #0f172a);\n --header-button-detail-text: var(--color-header-button-detail-text, #878192);\n --header-icon-filter: invert(1) brightness(1.3); / special way to invert SVG color of icons, from white to black */\n --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));\n font-family: var(--font-family-base, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif);\n }\n\n :host([layout='mobile']) .headerInner {\n flex-wrap: wrap;\n text-align: center;\n gap: 0.5rem;\n }\n\n .headerInner {\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: var(--header-bg);\n color: var(--header-text);\n padding: 0 1.5rem;\n height: 3.75rem;\n }\n\n ::slotted([slot='navigation-toggle']) {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n margin-right: 0.75rem;\n }\n\n :host([layout='desktop']) ::slotted([slot='navigation-toggle']) {\n display: none !important;\n }\n\n .brand {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n text-decoration: none;\n color: inherit;\n }\n\n .brand-not-displayed {\n display: none;\n }\n\n .brand img {\n height: 50px;\n width: 55px;\n object-fit: contain;\n }\n\n .menu {\n display: flex;\n align-items: center;\n gap: 0.625rem;\n margin-left: auto;\n }\n\n .auth-actions {\n display: flex;\n align-items: center;\n gap: 0.625rem;\n }\n\n .auth-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n min-height: 2.25rem;\n padding: 0.5rem 0.875rem;\n border: 1px solid var(--header-border);\n border-radius: 999px;\n background: var(--header-menu-bg);\n color: var(--header-button-text);\n cursor: pointer;\n font: inherit;\n line-height: 1;\n text-decoration: none;\n box-sizing: border-box;\n transition: border-color 0.2s ease, transform 0.2s ease;\n }\n\n .auth-button:hover {\n border-color: var(--header-menu-item-hover);\n }\n\n .auth-button:active {\n transform: translateY(1px);\n }\n\n .auth-button-sign-up {\n background: color-mix(in srgb, var(--header-menu-bg) 78%, var(--header-menu-item-selected) 22%);\n }\n\n .header-menu-separator {\n background: var(--header-line);\n width: 1px;\n height: 2.3rem;\n }\n\n .account-menu-container {\n position: relative;\n display: flex;\n align-items: center;\n }\n\n .account-menu-trigger {\n display: inline-flex;\n align-items: center;\n gap: 0.625rem;\n min-height: 2.5rem;\n border: 1px solid var(--header-menu-loggedin-bg);\n border-radius: 999px;\n background: var(--header-menu-loggedin-bg);\n color: var(--header-button-text);\n cursor: pointer;\n font: inherit;\n line-height: 1;\n }\n\n :host([layout='mobile']) .account-menu-trigger {\n gap: 0;\n min-height: auto;\n padding: 0;\n border: 1.5px solid var(--header-border);\n background: var(--header-menu-loggedin-bg);\n }\n\n :host([layout='mobile']) .account-menu-trigger-label {\n display: none;\n }\n\n .account-menu-trigger:disabled {\n cursor: default;\n opacity: 0.7;\n }\n\n .account-menu-trigger-icon {\n width: 1rem;\n height: 1rem;\n object-fit: contain;\n flex-shrink: 0;\n }\n\n .account-avatar,\n .account-menu-avatar {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n overflow: hidden;\n background: color-mix(in srgb, var(--header-bg) 18%, #ded8e7 82%);\n color: var(--header-button-text);\n font-size: 0.75rem;\n font-weight: 600;\n text-transform: uppercase;\n }\n\n .account-avatar {\n width: 1.75rem;\n height: 1.75rem;\n border-radius: 999px;\n border: 1.5px solid var(--header-border);\n }\n\n .account-menu-avatar {\n width: 2rem;\n height: 2rem;\n border-radius: 0.5rem;\n }\n\n .account-avatar img,\n .account-menu-avatar img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n .account-avatar-img {\n width: 1.75rem;\n height: 1.75rem;\n border-radius: 999px;\n object-fit: cover;\n background-color: var(--header-border);\n }\n\n .account-dropdown {\n position: absolute;\n top: calc(100% + 0.9rem);\n right: 0;\n min-width: 15rem;\n padding: 0.5rem;\n background: var(--header-button-bg);\n border: 1px solid var(--header-border);\n border-radius: var(--header-border-radius);\n box-shadow: var(--header-shadow);\n z-index: 10;\n }\n\n .account-dropdown[hidden] {\n display: none;\n }\n\n .account-menu-list {\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n }\n\n .account-menu-item-link,\n .account-menu-item-button,\n ::slotted([slot='account-menu']) {\n display: flex;\n align-items: center;\n gap: 0.625rem;\n width: 100%;\n box-sizing: border-box;\n color: var(--header-link);\n text-decoration: none;\n background: transparent;\n border: 1px solid transparent;\n border-radius: 10px;\n padding: 0.5rem;\n cursor: pointer;\n font: inherit;\n text-align: left;\n }\n\n .account-menu-item-link:hover,\n .account-menu-item-button:hover {\n color: var(--header-link);\n background: var(--header-menu-item-hover);\n border-color: var(--header-menu-item-hover);\n }\n\n .account-menu-item-link:active,\n .account-menu-item-button:active {\n color: var(--header-link);\n background: var(--header-menu-item-selected);\n border-color: var(--header-menu-item-selected);\n transform: translateY(1px);\n }\n\n .account-switch {\n display: block;\n width: 100%;\n color: var(--header-menu-text);\n text-align: left;\n text-transform: uppercase;\n font-size: 80%;\n }\n\n .dropdown-menu-separator {\n display: block;\n width: calc(100% + 1rem);\n margin: 0.5rem -0.5rem;\n border: 0;\n border-top: 1px solid var(--header-border);\n }\n\n .account-menu-copy {\n display: flex;\n flex-direction: column;\n min-width: 0;\n }\n\n .account-menu-label {\n color: var(--header-button-text);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .account-menu-webid {\n color: var(--header-button-detail-text);\n font-size: 0.5rem;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .help-menu-container {\n position: relative;\n display: flex;\n align-items: center;\n background: transparent;\n }\n\n .help-menu-trigger {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n border: 0;\n background: transparent;\n cursor: pointer;\n }\n\n .help-menu-trigger:disabled {\n cursor: default;\n }\n\n .help-dropdown {\n position: absolute;\n top: calc(100% + 0.9rem);\n right: 0;\n min-width: 12rem;\n padding: 0.5rem;\n background: var(--header-button-bg);\n border: 1px solid var(--header-border);\n border-radius: var(--header-border-radius);\n box-shadow: var(--header-shadow);\n z-index: 10;\n }\n\n .help-dropdown[hidden] {\n display: none;\n }\n\n .help-dropdown-content {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n }\n\n .help-menu-list {\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n }\n\n .help-menu-list a,\n .help-menu-list button,\n ::slotted([slot='help-menu']) {\n display: block;\n width: 100%;\n box-sizing: border-box;\n color: var(--header-link);\n text-decoration: none;\n background: transparent;\n border: 1px solid transparent;\n border-radius: 4px;\n padding: 0.375rem 0.5rem;\n cursor: pointer;\n font: inherit;\n text-align: left;\n }\n\n .help-menu-list a:hover,\n .help-menu-list button:hover {\n color: var(--header-link);\n background: var(--header-menu-item-hover);\n border-color: var(--header-menu-item-hover);\n }\n\n .help-menu-list a:active,\n .help-menu-list button:active {\n color: var(--header-link);\n background: var(--header-menu-item-selected);\n border-color: var(--header-menu-item-selected);\n transform: translateY(1px);\n }\n\n ::slotted(a), ::slotted(button) {\n color: var(--header-link);\n text-decoration: none;\n background: var(--header-button-bg);\n border: 1px solid var(--header-border);\n border-radius: 4px;\n padding: 0.25rem 0.5rem;\n cursor: pointer;\n font: inherit;\n }\n\n .help-icon {\n width: 35px;\n height: 35px;\n cursor: pointer;\n }\n\n .help-text {\n color: var(--header-text, #ffffff);\n font: inherit;\n }\n\n .logout-action-icon {\n width: 16px;\n height: 16px;\n display: inline-block;\n object-fit: contain;\n margin-right: 0.5rem;\n }\n `\n\n declare logo: string\n declare helpIcon: string\n declare layout: 'desktop' \| 'mobile'\n declare theme: 'light' \| 'dark'\n declare brandLink: string\n declare authState: HeaderAuthState\n declare loginAction: HeaderMenuItem\n declare signUpAction: HeaderMenuItem\n declare accountMenu: HeaderAccountMenuItem[]\n declare logoutLabel: string \| null\n declare logoutIcon: string\n declare accountIcon: string\n declare accountAvatar: string\n declare accountAvatarFallback: string\n declare loginIcon: string\n declare signUpIcon: string\n declare helpMenuList: HeaderMenuItem[]\n declare accountMenuOpen: boolean\n declare helpMenuOpen: boolean\n declare hasSlottedAccountMenu: boolean\n declare hasSlottedHelpMenu: boolean\n declare authResolved: boolean\n private _refreshPromise: Promise<void> \| null = null\n\n private readonly handleAuthSessionChange = () => {\n this.refreshAuthStateFromSession().catch(() => {\n // Keep auth event handling resilient on transient refresh failures.\n })\n }\n\n constructor () {\n super()\n this.logo = DEFAULT_SOLID_ICON_URL\n this.helpIcon = DEFAULT_HELP_MENU_ICON\n this.layout = 'desktop'\n this.theme = 'light'\n this.brandLink = '#'\n this.authState = 'logged-out'\n this.loginAction = { label: 'Log In', action: 'login' }\n this.signUpAction = { label: 'Sign Up', action: 'sign-up', url: DEFAULT_SIGNUP_URL }\n this.accountMenu = []\n this.logoutLabel = 'Log Out'\n this.logoutIcon = ''\n this.accountIcon = '▼'\n this.accountAvatar = ''\n this.accountAvatarFallback = ''\n this.loginIcon = ''\n this.signUpIcon = ''\n this.helpMenuList = []\n this.accountMenuOpen = false\n this.helpMenuOpen = false\n this.hasSlottedAccountMenu = false\n this.hasSlottedHelpMenu = false\n this.authResolved = false\n }\n\n connectedCallback () {\n super.connectedCallback()\n document.addEventListener('click', this.handleDocumentClick)\n window.addEventListener('keydown', this.handleWindowKeydown)\n if (typeof authSession.events?.on === 'function') {\n authSession.events.on('login', this.handleAuthSessionChange)\n authSession.events.on('logout', this.handleAuthSessionChange)\n authSession.events.on('sessionRestore', this.handleAuthSessionChange)\n }\n this.refreshAuthStateFromSession().catch(() => {\n // Keep initial header render resilient on transient refresh failures.\n })\n }\n\n disconnectedCallback () {\n document.removeEventListener('click', this.handleDocumentClick)\n window.removeEventListener('keydown', this.handleWindowKeydown)\n if (typeof authSession.events?.off === 'function') {\n authSession.events.off('login', this.handleAuthSessionChange)\n authSession.events.off('logout', this.handleAuthSessionChange)\n authSession.events.off('sessionRestore', this.handleAuthSessionChange)\n }\n super.disconnectedCallback()\n }\n\n private async refreshAuthStateFromSession () {\n if (!this._refreshPromise) {\n this._refreshPromise = (async () => {\n try {\n await authn.checkUser()\n // Some auth stacks resolve session state asynchronously after first check.\n if (!authn.currentUser()) {\n await authn.checkUser()\n }\n } catch (_err) {\n // Keep rendering even if session refresh cannot complete.\n }\n })()\n }\n\n try {\n await this._refreshPromise\n } finally {\n this._refreshPromise = null\n }\n\n this.authState = authn.currentUser() ? 'logged-in' : 'logged-out'\n this.authResolved = true\n }\n\n private handleHelpMenuClick (item: HeaderMenuItem, event: MouseEvent) {\n event.preventDefault()\n this.helpMenuOpen = false\n this.dispatchEvent(new CustomEvent('help-menu-select', {\n detail: item,\n bubbles: true,\n composed: true\n }))\n if (item.url) {\n const target = item.target \|\| '_blank'\n const features = target === '_blank' ? 'noopener,noreferrer' : undefined\n window.open(item.url, target, features)\n }\n }\n\n private handleAccountMenuClick (item: HeaderAccountMenuItem) {\n this.accountMenuOpen = false\n this.dispatchEvent(new CustomEvent('account-menu-select', {\n detail: item,\n bubbles: true,\n composed: true\n }))\n }\n\n private readonly handleDocumentClick = (event: MouseEvent) => {\n if (!event.composedPath().includes(this)) {\n this.accountMenuOpen = false\n this.helpMenuOpen = false\n }\n }\n\n private readonly handleWindowKeydown = (event: KeyboardEvent) => {\n if (event.key === 'Escape' && (this.accountMenuOpen \|\| this.helpMenuOpen)) {\n this.accountMenuOpen = false\n this.helpMenuOpen = false\n }\n }\n\n private handleAccountSlotChange (event: Event) {\n const slot = event.target as HTMLSlotElement\n this.hasSlottedAccountMenu = slot.assignedElements({ flatten: true }).length > 0\n }\n\n private handleHelpSlotChange (event: Event) {\n const slot = event.target as HTMLSlotElement\n this.hasSlottedHelpMenu = slot.assignedElements({ flatten: true }).length > 0\n }\n\n private toggleAccountMenu (event: MouseEvent) {\n event.preventDefault()\n if (!this.hasAccountMenuItems()) return\n this.helpMenuOpen = false\n this.accountMenuOpen = !this.accountMenuOpen\n }\n\n private toggleHelpMenu (event: MouseEvent) {\n event.preventDefault()\n if (!this.hasHelpMenuItems()) return\n this.accountMenuOpen = false\n this.helpMenuOpen = !this.helpMenuOpen\n }\n\n private hasAccountMenuItems () {\n return Boolean(this.accountMenu?.length \|\| this.hasSlottedAccountMenu \|\| this.logoutLabel)\n }\n\n private hasHelpMenuItems () {\n return Boolean(this.helpMenuList?.length \|\| this.hasSlottedHelpMenu)\n }\n\n private shouldRenderHelpMenu () {\n return this.layout !== 'mobile' && this.hasHelpMenuItems()\n }\n\n private renderLoggedInAvatar (avatar?: string, wrapperClass = 'account-avatar') {\n const hasAvatar = Boolean(avatar)\n const imageSrc = hasAvatar ? avatar : this.accountAvatarFallback \|\| DEFAULT_LOGGEDIN_MENU_BUTTON_AVATAR\n const imageAlt = hasAvatar ? 'Profile Avatar' : 'Default Avatar'\n\n if (this.layout === 'mobile' && wrapperClass === 'account-avatar') {\n return html`<img class=\"account-avatar-img\" src=\"${imageSrc}\" alt=\"${imageAlt}\" />`\n }\n\n return html`\n <span class=\"${wrapperClass}\" aria-hidden=\"true\">\n <img src=\"${imageSrc}\" alt=\"${imageAlt}\" />\n </span>\n `\n }\n\n private renderLoggedOutActions () {\n return html`\n <div class=\"auth-actions\" part=\"auth-actions\">\n <slot name=\"login-action\">\n <solid-ui-login-button\n label=\"${this.loginAction.label}\"\n icon=${ifDefined(this.layout !== 'mobile' ? (this.loginIcon \|\| this.loginAction.icon) : undefined)}\n layout=\"${this.layout}\"\n theme=\"${this.theme}\"\n part=\"login-action\"\n @login-success=\"${() => this.handleLoginSuccess()}\"\n ></solid-ui-login-button>\n </slot>\n <slot name=\"sign-up-action\">\n <solid-ui-signup-button\n label=\"${this.signUpAction.label}\"\n signup-url=\"${ifDefined(this.signUpAction.url)}\"\n layout=\"${this.layout}\"\n .icon=${ifDefined(this.layout !== 'mobile' ? (this.signUpIcon \|\| this.signUpAction.icon) : undefined)}\n theme=\"${this.theme}\"\n part=\"sign-up-action\"\n ></solid-ui-signup-button>\n </slot>\n </div>\n `\n }\n\n private async handleLoginSuccess () {\n await this.refreshAuthStateFromSession()\n this.dispatchEvent(new CustomEvent('auth-action-select', {\n detail: { role: 'login' },\n bubbles: true,\n composed: true\n }))\n }\n\n private async handleLogout () {\n this.accountMenuOpen = false\n const issuer = window.localStorage.getItem('loginIssuer') \|\| ''\n\n try {\n await authSession.logout()\n } catch (_err) {\n // logout errors are non-fatal — proceed to clear state\n }\n\n await clearPersistedAuthState()\n\n const redirectedToServerLogout = await performServerSideLogout({\n issuer,\n postLogoutRedirectPath: '/'\n })\n if (redirectedToServerLogout) {\n return\n }\n\n await this.refreshAuthStateFromSession()\n this.dispatchEvent(new CustomEvent('logout-select', {\n detail: { role: 'logout' },\n bubbles: true,\n composed: true\n }))\n }\n\n private renderAccountMenuItem (item: HeaderAccountMenuItem) {\n const content = html`\n ${this.renderLoggedInAvatar(item.avatar, 'account-menu-avatar')}\n <span class=\"account-menu-copy\">\n <span class=\"account-menu-label\">${item.label}</span>\n ${item.webid && this.layout !== 'mobile' ? html`<span class=\"account-menu-webid\">${item.webid}</span>` : ''}\n </span>\n `\n\n if (item.url) {\n return html`\n <a\n class=\"account-menu-item-link\"\n href=\"${item.url}\"\n @click=\"${() => this.handleAccountMenuClick(item)}\"\n part=\"account-menu-item\"\n role=\"menuitem\"\n >\n ${content}\n </a>\n `\n }\n\n return html`\n <button\n class=\"account-menu-item-button\"\n type=\"button\"\n @click=\"${() => this.handleAccountMenuClick(item)}\"\n part=\"account-menu-item\"\n role=\"menuitem\"\n >\n ${content}\n </button>\n `\n }\n\n private renderLoggedInActions () {\n return html`\n <div class=\"account-menu-container\" part=\"account-menu-container\">\n <slot name=\"account-trigger\">\n <button\n id=\"accountMenuTrigger\"\n class=\"account-menu-trigger\"\n type=\"button\"\n aria-haspopup=\"menu\"\n aria-expanded=\"${this.accountMenuOpen ? 'true' : 'false'}\"\n ?disabled=\"${!this.hasAccountMenuItems()}\"\n @click=\"${(e: MouseEvent) => this.toggleAccountMenu(e)}\"\n part=\"account-menu-trigger\"\n >\n ${this.renderLoggedInAvatar(this.accountAvatar)}\n ${this.layout !== 'mobile' && this.accountIcon\n? html`\n <img class=\"account-menu-trigger-icon\" src=\"${this.accountIcon}\" alt=\"\" aria-hidden=\"true\" />`\n: ''}\n </button>\n </slot>\n\n <nav\n id=\"accountMenu\"\n class=\"account-dropdown\"\n role=\"menu\"\n ?inert=\"${!this.accountMenuOpen \|\| !this.hasAccountMenuItems()}\"\n ?hidden=\"${!this.accountMenuOpen \|\| !this.hasAccountMenuItems()}\"\n part=\"account-dropdown\"\n >\n <slot name=\"account-switch\" class=\"account-switch\">Switch account</slot>\n <hr class=\"dropdown-menu-separator\" />\n <slot name=\"account-menu\" @slotchange=\"${(e: Event) => this.handleAccountSlotChange(e)}\"></slot>\n ${this.accountMenu && this.accountMenu.length\n ? html`\n <ul class=\"account-menu-list\">\n ${this.accountMenu.map((item: HeaderAccountMenuItem) => html`\n <li>${this.renderAccountMenuItem(item)}</li>\n `)}\n </ul>\n `\n : ''}\n ${this.logoutLabel\n ? html`\n <hr class=\"dropdown-menu-separator\" />\n <button\n class=\"account-menu-item-button\"\n type=\"button\"\n @click=\"${() => this.handleLogout()}\"\n part=\"logout-action\"\n role=\"menuitem\"\n >\n ${this.logoutIcon && this.layout !== 'mobile'\n ? html`<img class=\"logout-action-icon\" src=\"${this.logoutIcon}\" alt=\"\" aria-hidden=\"true\" part=\"logout-action-icon\" />`\n : ''}\n ${this.logoutLabel}\n </button>\n `\n : ''}\n </nav>\n </div>\n `\n }\n\n private renderUserArea () {\n if (Features.DESIGN_SYSTEM_HEADER_ACCOUNT) {\n return html`\n <solid-ui-provider>\n <solid-ui-account></solid-ui-account>\n </solid-ui-provider>\n `\n }\n\n if (!this.authResolved) {\n return html`<div class=\"auth-actions\" part=\"auth-actions\"></div>`\n }\n\n if (this.authState === 'logged-out') {\n return this.renderLoggedOutActions()\n }\n\n return this.renderLoggedInActions()\n }\n\n protected firstUpdated () {\n const brandLink = this.shadowRoot?.getElementById('brandLink')\n if (brandLink) {\n brandLink.classList.toggle('brand-not-displayed', this.layout === 'mobile')\n }\n }\n\n protected updated (changedProperties: Map<string, unknown>) {\n if (changedProperties.has('layout')) {\n const brandLink = this.shadowRoot?.getElementById('brandLink')\n if (brandLink) {\n brandLink.classList.toggle('brand-not-displayed', this.layout === 'mobile')\n }\n }\n }\n\n render () {\n return html`\n <div class=\"headerInner\">\n <slot name=\"navigation-toggle\"></slot>\n <a\n id=\"brandLink\"\n class=\"brand\"\n href=\"${this.brandLink}\"\n part=\"brand\"\n >\n <img id=\"brandImg\" src=\"${this.logo}\" alt=\"Logo\" part=\"logo\" />\n </a>\n\n <div class=\"menu\" part=\"menu\">\n ${this.renderUserArea()}\n\n ${this.shouldRenderHelpMenu()\n ? html`\n <div class=\"header-menu-separator\" />`\n : ''}\n\n ${this.shouldRenderHelpMenu()\n ? html`\n <div class=\"help-menu-container\" part=\"help-menu-container\">\n <button\n id=\"helpMenuTrigger\"\n class=\"help-menu-trigger\"\n type=\"button\"\n aria-haspopup=\"menu\"\n aria-expanded=\"${this.helpMenuOpen ? 'true' : 'false'}\"\n ?disabled=\"${!this.hasHelpMenuItems()}\"\n @click=\"${(e: MouseEvent) => this.toggleHelpMenu(e)}\"\n part=\"help-menu-trigger\"\n >\n ${this.helpIcon\n ? html`<img id=\"helpIcon\" class=\"help-icon\" src=\"${this.helpIcon}\" alt=\"Help\" part=\"help-icon\" />`\n : html`<span class=\"help-text\" part=\"help-text\">Help</span>`}\n </button>\n\n <nav\n id=\"helpMenu\"\n class=\"help-dropdown\"\n role=\"menu\"\n ?inert=\"${!this.helpMenuOpen \|\| !this.hasHelpMenuItems()}\"\n ?hidden=\"${!this.helpMenuOpen \|\| !this.hasHelpMenuItems()}\"\n part=\"help-dropdown\"\n >\n <div class=\"help-dropdown-content\" @click=\"${() => { this.helpMenuOpen = false }}\">\n <slot name=\"help-menu\" @slotchange=\"${(e: Event) => this.handleHelpSlotChange(e)}\"></slot>\n ${this.helpMenuList && this.helpMenuList.length\n ? html`\n <ul class=\"help-menu-list\">\n ${this.helpMenuList.map((item: HeaderMenuItem) => html`\n <li>\n ${item.url\n ? html`\n <a\n href=\"${item.url}\"\n target=\"${item.target \|\| '_blank'}\"\n rel=\"${ifDefined((item.target \|\| '_blank') === '_blank' ? 'noopener noreferrer' : undefined)}\"\n @click=\"${(e: MouseEvent) => this.handleHelpMenuClick(item, e)}\"\n part=\"help-menu-item\"\n role=\"menuitem\"\n >\n ${item.label}\n </a>\n `\n : html`\n <button\n type=\"button\"\n @click=\"${(e: MouseEvent) => this.handleHelpMenuClick(item, e)}\"\n part=\"help-menu-item\"\n role=\"menuitem\"\n >\n ${item.label}\n </button>\n `}\n </li>\n `)}\n </ul>\n `\n : ''}\n </div>\n </nav>\n </div>`\n : ''}\n </div>\n </div>\n `\n }\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"Header.esm.js","names":[],"sources":["../../../../../src/v2/components/layout/header/Header.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { icons } from '../../../../lib/iconBase'\nimport { authSession, authn, performServerSideLogout } from 'solid-logic'\nimport '../../auth/loginButton/index'\nimport '../../auth/signupButton/index'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport '@/components/account'\nimport '@/components/provider'\nimport Features from '../../../../lib/features'\n\nconst DEFAULT_HELP_MENU_ICON = ''\nconst DEFAULT_SOLID_ICON_URL = 'https://solidproject.org/assets/img/solid-emblem.svg'\nconst DEFAULT_SIGNUP_URL = 'https://solidproject.org/get_a_pod'\nconst DEFAULT_LOGGEDIN_MENU_BUTTON_AVATAR = icons.iconBase + 'emptyProfileAvatar.png'\n\nasync function clearPersistedAuthState (): Promise<void> {\n if (typeof window === 'undefined') {\n return\n }\n\n const explicitKeys = ['loginIssuer', 'preLoginRedirectHash']\n for (const key of explicitKeys) {\n window.localStorage.removeItem(key)\n window.sessionStorage.removeItem(key)\n }\n\n if (typeof indexedDB === 'undefined') {\n return\n }\n\n const databases = ['soidc', 'solid-client-authn-store', 'solid-client-authn']\n for (const dbName of databases) {\n await new Promise<void>((resolve) => {\n try {\n const request = indexedDB.deleteDatabase(dbName)\n request.onsuccess = () => resolve()\n request.onerror = () => resolve()\n request.onblocked = () => resolve()\n } catch (_err) {\n resolve()\n }\n })\n }\n}\n\nexport type HeaderAuthState = 'logged-out' \| 'logged-in'\n\nexport type HeaderMenuItem = {\n label: string\n url?: string\n target?: string\n action?: string\n icon?: string\n}\n\nexport type HeaderAccountMenuItem = HeaderMenuItem & {\n avatar?: string\n webid?: string\n}\n\nexport class Header extends LitElement {\n static properties = {\n logo: { type: String, reflect: true },\n helpIcon: { type: String, attribute: 'help-icon', reflect: true },\n layout: { type: String, reflect: true },\n theme: { type: String, reflect: true },\n brandLink: { type: String, attribute: 'brand-link', reflect: true },\n authState: { type: String, attribute: 'auth-state', reflect: true },\n loginAction: { type: Object, attribute: false },\n signUpAction: { type: Object, attribute: false },\n accountMenu: { type: Array, attribute: false },\n logoutLabel: { type: String, attribute: 'logout-label', reflect: true },\n logoutIcon: { type: String, attribute: 'logout-icon', reflect: true },\n accountIcon: { type: String, attribute: 'account-icon', reflect: true },\n accountAvatar: { type: String, attribute: 'account-avatar', reflect: true },\n accountAvatarFallback: { type: String, attribute: 'account-avatar-fallback', reflect: true },\n loginIcon: { type: String, attribute: 'login-icon', reflect: true },\n signUpIcon: { type: String, attribute: 'sign-up-icon', reflect: true },\n helpMenuList: { type: Array },\n accountMenuOpen: { state: true },\n helpMenuOpen: { state: true },\n hasSlottedAccountMenu: { state: true },\n hasSlottedHelpMenu: { state: true },\n authResolved: { state: true }\n }\n\n static styles = css`\n :host { /* default theme /\n display: block;\n --header-bg: var(--color-header-row-bg, #332746);\n --header-text: var(--color-header-text, #ffffff);\n --header-border: var(--color-border, #efecf3);\n --header-line: var(--color-header-menu-separator-line, #5e546d);\n --header-link: var(--color-text-heading, #000000);\n --header-menu-item-hover: var(--color-header-menu-item-hover, #e6dcff);\n --header-menu-item-selected: var(--color-header-menu-item-selected, #cbb9ff);\n --header-menu-bg: var(--color-menu-bg, #f6f5f9);\n --header-menu-loggedin-bg: var(--color-header-menu-loggedin-bg, #5e546d);\n --header-menu-text: var(--color-menu-item-text, #654d6c);\n --header-border-radius: var(--border-radius-sm, 0.2rem);\n --header-button-bg: var(--color-menu-bg, #ffffff);\n --header-button-text: var(--color-header-button-text, #0F172B);\n --header-button-detail-text: var(--color-header-button-detail-text, #99A1AF);\n --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));\n font-family: var(--font-family-base, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif);\n }\n\n / for now light and dark are the same /\n :host([theme='dark']) {\n display: block;\n --header-bg: var(--color-header-row-bg, #332746);\n --header-text: var(--color-header-text, #ffffff);\n --header-border: var(--color-border, #efecf3);\n --header-line: var(--color-header-menu-separator-line, #5e546d);\n --header-link: var(--color-text-heading, #000000);\n --header-menu-item-hover: var(--color-header-menu-item-hover, #e6dcff);\n --header-menu-item-selected: var(--color-header-menu-item-selected, #cbb9ff);\n --header-menu-bg: var(--color-menu-bg, #f6f5f9);\n --header-menu-loggedin-bg: var(--color-header-menu-loggedin-bg, #5e546d);\n --header-menu-text: var(--color-menu-item-text, #654d6c);\n --header-border-radius: var(--border-radius-sm, 0.2rem);\n --header-button-bg: var(--color-menu-bg, #ffffff);\n --header-button-text: var(--color-header-button-text, #0f172a);\n --header-button-detail-text: var(--color-header-button-detail-text, #878192);\n --header-icon-filter: invert(1) brightness(1.3); / special way to invert SVG color of icons, from white to black */\n --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));\n font-family: var(--font-family-base, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif);\n }\n\n :host([layout='mobile']) .headerInner {\n flex-wrap: wrap;\n text-align: center;\n gap: 0.5rem;\n }\n\n .headerInner {\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: var(--header-bg);\n color: var(--header-text);\n padding: 0 1.5rem;\n height: 3.75rem;\n }\n\n ::slotted([slot='navigation-toggle']) {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n margin-right: 0.75rem;\n }\n\n :host([layout='desktop']) ::slotted([slot='navigation-toggle']) {\n display: none !important;\n }\n\n .brand {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n text-decoration: none;\n color: inherit;\n }\n\n .brand-not-displayed {\n display: none;\n }\n\n .brand img {\n height: 50px;\n width: 55px;\n object-fit: contain;\n }\n\n .menu {\n display: flex;\n align-items: center;\n gap: 0.625rem;\n margin-left: auto;\n }\n\n .auth-actions {\n display: flex;\n align-items: center;\n gap: 0.625rem;\n }\n\n .auth-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n min-height: 2.25rem;\n padding: 0.5rem 0.875rem;\n border: 1px solid var(--header-border);\n border-radius: 999px;\n background: var(--header-menu-bg);\n color: var(--header-button-text);\n cursor: pointer;\n font: inherit;\n line-height: 1;\n text-decoration: none;\n box-sizing: border-box;\n transition: border-color 0.2s ease, transform 0.2s ease;\n }\n\n .auth-button:hover {\n border-color: var(--header-menu-item-hover);\n }\n\n .auth-button:active {\n transform: translateY(1px);\n }\n\n .auth-button-sign-up {\n background: color-mix(in srgb, var(--header-menu-bg) 78%, var(--header-menu-item-selected) 22%);\n }\n\n .header-menu-separator {\n background: var(--header-line);\n width: 1px;\n height: 2.3rem;\n }\n\n .account-menu-container {\n position: relative;\n display: flex;\n align-items: center;\n }\n\n .account-menu-trigger {\n display: inline-flex;\n align-items: center;\n gap: 0.625rem;\n min-height: 2.5rem;\n border: 1px solid var(--header-menu-loggedin-bg);\n border-radius: 999px;\n background: var(--header-menu-loggedin-bg);\n color: var(--header-button-text);\n cursor: pointer;\n font: inherit;\n line-height: 1;\n }\n\n :host([layout='mobile']) .account-menu-trigger {\n gap: 0;\n min-height: auto;\n padding: 0;\n border: 1.5px solid var(--header-border);\n background: var(--header-menu-loggedin-bg);\n }\n\n :host([layout='mobile']) .account-menu-trigger-label {\n display: none;\n }\n\n .account-menu-trigger:disabled {\n cursor: default;\n opacity: 0.7;\n }\n\n .account-menu-trigger-icon {\n width: 1rem;\n height: 1rem;\n object-fit: contain;\n flex-shrink: 0;\n }\n\n .account-avatar,\n .account-menu-avatar {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n overflow: hidden;\n background: color-mix(in srgb, var(--header-bg) 18%, #ded8e7 82%);\n color: var(--header-button-text);\n font-size: 0.75rem;\n font-weight: 600;\n text-transform: uppercase;\n }\n\n .account-avatar {\n width: 1.75rem;\n height: 1.75rem;\n border-radius: 999px;\n border: 1.5px solid var(--header-border);\n }\n\n .account-menu-avatar {\n width: 2rem;\n height: 2rem;\n border-radius: 0.5rem;\n }\n\n .account-avatar img,\n .account-menu-avatar img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n .account-avatar-img {\n width: 1.75rem;\n height: 1.75rem;\n border-radius: 999px;\n object-fit: cover;\n background-color: var(--header-border);\n }\n\n .account-dropdown {\n position: absolute;\n top: calc(100% + 0.9rem);\n right: 0;\n min-width: 15rem;\n padding: 0.5rem;\n background: var(--header-button-bg);\n border: 1px solid var(--header-border);\n border-radius: var(--header-border-radius);\n box-shadow: var(--header-shadow);\n z-index: 10;\n }\n\n .account-dropdown[hidden] {\n display: none;\n }\n\n .account-menu-list {\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n }\n\n .account-menu-item-link,\n .account-menu-item-button,\n ::slotted([slot='account-menu']) {\n display: flex;\n align-items: center;\n gap: 0.625rem;\n width: 100%;\n box-sizing: border-box;\n color: var(--header-link);\n text-decoration: none;\n background: transparent;\n border: 1px solid transparent;\n border-radius: 10px;\n padding: 0.5rem;\n cursor: pointer;\n font: inherit;\n text-align: left;\n }\n\n .account-menu-item-link:hover,\n .account-menu-item-button:hover {\n color: var(--header-link);\n background: var(--header-menu-item-hover);\n border-color: var(--header-menu-item-hover);\n }\n\n .account-menu-item-link:active,\n .account-menu-item-button:active {\n color: var(--header-link);\n background: var(--header-menu-item-selected);\n border-color: var(--header-menu-item-selected);\n transform: translateY(1px);\n }\n\n .account-switch {\n display: block;\n width: 100%;\n color: var(--header-menu-text);\n text-align: left;\n text-transform: uppercase;\n font-size: 80%;\n }\n\n .dropdown-menu-separator {\n display: block;\n width: calc(100% + 1rem);\n margin: 0.5rem -0.5rem;\n border: 0;\n border-top: 1px solid var(--header-border);\n }\n\n .account-menu-copy {\n display: flex;\n flex-direction: column;\n min-width: 0;\n }\n\n .account-menu-label {\n color: var(--header-button-text);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .account-menu-webid {\n color: var(--header-button-detail-text);\n font-size: 0.5rem;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .help-menu-container {\n position: relative;\n display: flex;\n align-items: center;\n background: transparent;\n }\n\n .help-menu-trigger {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n border: 0;\n background: transparent;\n cursor: pointer;\n }\n\n .help-menu-trigger:disabled {\n cursor: default;\n }\n\n .help-dropdown {\n position: absolute;\n top: calc(100% + 0.9rem);\n right: 0;\n min-width: 12rem;\n padding: 0.5rem;\n background: var(--header-button-bg);\n border: 1px solid var(--header-border);\n border-radius: var(--header-border-radius);\n box-shadow: var(--header-shadow);\n z-index: 10;\n }\n\n .help-dropdown[hidden] {\n display: none;\n }\n\n .help-dropdown-content {\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n }\n\n .help-menu-list {\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n gap: 0.25rem;\n }\n\n .help-menu-list a,\n .help-menu-list button,\n ::slotted([slot='help-menu']) {\n display: block;\n width: 100%;\n box-sizing: border-box;\n color: var(--header-link);\n text-decoration: none;\n background: transparent;\n border: 1px solid transparent;\n border-radius: 4px;\n padding: 0.375rem 0.5rem;\n cursor: pointer;\n font: inherit;\n text-align: left;\n }\n\n .help-menu-list a:hover,\n .help-menu-list button:hover {\n color: var(--header-link);\n background: var(--header-menu-item-hover);\n border-color: var(--header-menu-item-hover);\n }\n\n .help-menu-list a:active,\n .help-menu-list button:active {\n color: var(--header-link);\n background: var(--header-menu-item-selected);\n border-color: var(--header-menu-item-selected);\n transform: translateY(1px);\n }\n\n ::slotted(a), ::slotted(button) {\n color: var(--header-link);\n text-decoration: none;\n background: var(--header-button-bg);\n border: 1px solid var(--header-border);\n border-radius: 4px;\n padding: 0.25rem 0.5rem;\n cursor: pointer;\n font: inherit;\n }\n\n .help-icon {\n width: 35px;\n height: 35px;\n cursor: pointer;\n }\n\n .help-text {\n color: var(--header-text, #ffffff);\n font: inherit;\n }\n\n .logout-action-icon {\n width: 16px;\n height: 16px;\n display: inline-block;\n object-fit: contain;\n margin-right: 0.5rem;\n }\n `\n\n declare logo: string\n declare helpIcon: string\n declare layout: 'desktop' \| 'mobile'\n declare theme: 'light' \| 'dark'\n declare brandLink: string\n declare authState: HeaderAuthState\n declare loginAction: HeaderMenuItem\n declare signUpAction: HeaderMenuItem\n declare accountMenu: HeaderAccountMenuItem[]\n declare logoutLabel: string \| null\n declare logoutIcon: string\n declare accountIcon: string\n declare accountAvatar: string\n declare accountAvatarFallback: string\n declare loginIcon: string\n declare signUpIcon: string\n declare helpMenuList: HeaderMenuItem[]\n declare accountMenuOpen: boolean\n declare helpMenuOpen: boolean\n declare hasSlottedAccountMenu: boolean\n declare hasSlottedHelpMenu: boolean\n declare authResolved: boolean\n private _refreshPromise: Promise<void> \| null = null\n\n private readonly handleAuthSessionChange = () => {\n this.refreshAuthStateFromSession().catch(() => {\n // Keep auth event handling resilient on transient refresh failures.\n })\n }\n\n constructor () {\n super()\n this.logo = DEFAULT_SOLID_ICON_URL\n this.helpIcon = DEFAULT_HELP_MENU_ICON\n this.layout = 'desktop'\n this.theme = 'light'\n this.brandLink = '#'\n this.authState = 'logged-out'\n this.loginAction = { label: 'Log In', action: 'login' }\n this.signUpAction = { label: 'Sign Up', action: 'sign-up', url: DEFAULT_SIGNUP_URL }\n this.accountMenu = []\n this.logoutLabel = 'Log Out'\n this.logoutIcon = ''\n this.accountIcon = '▼'\n this.accountAvatar = ''\n this.accountAvatarFallback = ''\n this.loginIcon = ''\n this.signUpIcon = ''\n this.helpMenuList = []\n this.accountMenuOpen = false\n this.helpMenuOpen = false\n this.hasSlottedAccountMenu = false\n this.hasSlottedHelpMenu = false\n this.authResolved = false\n }\n\n connectedCallback () {\n super.connectedCallback()\n document.addEventListener('click', this.handleDocumentClick)\n window.addEventListener('keydown', this.handleWindowKeydown)\n if (typeof authSession.events?.on === 'function') {\n authSession.events.on('login', this.handleAuthSessionChange)\n authSession.events.on('logout', this.handleAuthSessionChange)\n authSession.events.on('sessionRestore', this.handleAuthSessionChange)\n }\n this.refreshAuthStateFromSession().catch(() => {\n // Keep initial header render resilient on transient refresh failures.\n })\n }\n\n disconnectedCallback () {\n document.removeEventListener('click', this.handleDocumentClick)\n window.removeEventListener('keydown', this.handleWindowKeydown)\n if (typeof authSession.events?.off === 'function') {\n authSession.events.off('login', this.handleAuthSessionChange)\n authSession.events.off('logout', this.handleAuthSessionChange)\n authSession.events.off('sessionRestore', this.handleAuthSessionChange)\n }\n super.disconnectedCallback()\n }\n\n private async refreshAuthStateFromSession () {\n if (!this._refreshPromise) {\n this._refreshPromise = (async () => {\n try {\n await authn.checkUser()\n // Some auth stacks resolve session state asynchronously after first check.\n if (!authn.currentUser()) {\n await authn.checkUser()\n }\n } catch (_err) {\n // Keep rendering even if session refresh cannot complete.\n }\n })()\n }\n\n try {\n await this._refreshPromise\n } finally {\n this._refreshPromise = null\n }\n\n this.authState = authn.currentUser() ? 'logged-in' : 'logged-out'\n this.authResolved = true\n }\n\n private handleHelpMenuClick (item: HeaderMenuItem, event: MouseEvent) {\n event.preventDefault()\n this.helpMenuOpen = false\n this.dispatchEvent(new CustomEvent('help-menu-select', {\n detail: item,\n bubbles: true,\n composed: true\n }))\n if (item.url) {\n const target = item.target \|\| '_blank'\n const features = target === '_blank' ? 'noopener,noreferrer' : undefined\n window.open(item.url, target, features)\n }\n }\n\n private handleAccountMenuClick (item: HeaderAccountMenuItem) {\n this.accountMenuOpen = false\n this.dispatchEvent(new CustomEvent('account-menu-select', {\n detail: item,\n bubbles: true,\n composed: true\n }))\n }\n\n private readonly handleDocumentClick = (event: MouseEvent) => {\n if (!event.composedPath().includes(this)) {\n this.accountMenuOpen = false\n this.helpMenuOpen = false\n }\n }\n\n private readonly handleWindowKeydown = (event: KeyboardEvent) => {\n if (event.key === 'Escape' && (this.accountMenuOpen \|\| this.helpMenuOpen)) {\n this.accountMenuOpen = false\n this.helpMenuOpen = false\n }\n }\n\n private handleAccountSlotChange (event: Event) {\n const slot = event.target as HTMLSlotElement\n this.hasSlottedAccountMenu = slot.assignedElements({ flatten: true }).length > 0\n }\n\n private handleHelpSlotChange (event: Event) {\n const slot = event.target as HTMLSlotElement\n this.hasSlottedHelpMenu = slot.assignedElements({ flatten: true }).length > 0\n }\n\n private toggleAccountMenu (event: MouseEvent) {\n event.preventDefault()\n if (!this.hasAccountMenuItems()) return\n this.helpMenuOpen = false\n this.accountMenuOpen = !this.accountMenuOpen\n }\n\n private toggleHelpMenu (event: MouseEvent) {\n event.preventDefault()\n if (!this.hasHelpMenuItems()) return\n this.accountMenuOpen = false\n this.helpMenuOpen = !this.helpMenuOpen\n }\n\n private hasAccountMenuItems () {\n return Boolean(this.accountMenu?.length \|\| this.hasSlottedAccountMenu \|\| this.logoutLabel)\n }\n\n private hasHelpMenuItems () {\n return Boolean(this.helpMenuList?.length \|\| this.hasSlottedHelpMenu)\n }\n\n private shouldRenderHelpMenu () {\n return this.layout !== 'mobile' && this.hasHelpMenuItems()\n }\n\n private renderLoggedInAvatar (avatar?: string, wrapperClass = 'account-avatar') {\n const hasAvatar = Boolean(avatar)\n const imageSrc = hasAvatar ? avatar : this.accountAvatarFallback \|\| DEFAULT_LOGGEDIN_MENU_BUTTON_AVATAR\n const imageAlt = hasAvatar ? 'Profile Avatar' : 'Default Avatar'\n\n if (this.layout === 'mobile' && wrapperClass === 'account-avatar') {\n return html`<img class=\"account-avatar-img\" src=\"${imageSrc}\" alt=\"${imageAlt}\" />`\n }\n\n return html`\n <span class=\"${wrapperClass}\" aria-hidden=\"true\">\n <img src=\"${imageSrc}\" alt=\"${imageAlt}\" />\n </span>\n `\n }\n\n private renderLoggedOutActions () {\n return html`\n <div class=\"auth-actions\" part=\"auth-actions\">\n <slot name=\"login-action\">\n <solid-ui-login-button\n label=\"${this.loginAction.label}\"\n icon=${ifDefined(this.layout !== 'mobile' ? (this.loginIcon \|\| this.loginAction.icon) : undefined)}\n layout=\"${this.layout}\"\n theme=\"${this.theme}\"\n part=\"login-action\"\n @login-success=\"${() => this.handleLoginSuccess()}\"\n ></solid-ui-login-button>\n </slot>\n <slot name=\"sign-up-action\">\n <solid-ui-signup-button\n label=\"${this.signUpAction.label}\"\n signup-url=\"${ifDefined(this.signUpAction.url)}\"\n layout=\"${this.layout}\"\n .icon=${ifDefined(this.layout !== 'mobile' ? (this.signUpIcon \|\| this.signUpAction.icon) : undefined)}\n theme=\"${this.theme}\"\n part=\"sign-up-action\"\n ></solid-ui-signup-button>\n </slot>\n </div>\n `\n }\n\n private async handleLoginSuccess () {\n await this.refreshAuthStateFromSession()\n this.dispatchEvent(new CustomEvent('auth-action-select', {\n detail: { role: 'login' },\n bubbles: true,\n composed: true\n }))\n }\n\n private async handleLogout () {\n this.accountMenuOpen = false\n const issuer = window.localStorage.getItem('loginIssuer') \|\| ''\n\n try {\n await authSession.logout()\n } catch (_err) {\n // logout errors are non-fatal — proceed to clear state\n }\n\n await clearPersistedAuthState()\n\n const redirectedToServerLogout = await performServerSideLogout({\n issuer,\n postLogoutRedirectPath: '/'\n })\n if (redirectedToServerLogout) {\n return\n }\n\n await this.refreshAuthStateFromSession()\n this.dispatchEvent(new CustomEvent('logout-select', {\n detail: { role: 'logout' },\n bubbles: true,\n composed: true\n }))\n }\n\n private renderAccountMenuItem (item: HeaderAccountMenuItem) {\n const content = html`\n ${this.renderLoggedInAvatar(item.avatar, 'account-menu-avatar')}\n <span class=\"account-menu-copy\">\n <span class=\"account-menu-label\">${item.label}</span>\n ${item.webid && this.layout !== 'mobile' ? html`<span class=\"account-menu-webid\">${item.webid}</span>` : ''}\n </span>\n `\n\n if (item.url) {\n return html`\n <a\n class=\"account-menu-item-link\"\n href=\"${item.url}\"\n @click=\"${() => this.handleAccountMenuClick(item)}\"\n part=\"account-menu-item\"\n role=\"menuitem\"\n >\n ${content}\n </a>\n `\n }\n\n return html`\n <button\n class=\"account-menu-item-button\"\n type=\"button\"\n @click=\"${() => this.handleAccountMenuClick(item)}\"\n part=\"account-menu-item\"\n role=\"menuitem\"\n >\n ${content}\n </button>\n `\n }\n\n private renderLoggedInActions () {\n return html`\n <div class=\"account-menu-container\" part=\"account-menu-container\">\n <slot name=\"account-trigger\">\n <button\n id=\"accountMenuTrigger\"\n class=\"account-menu-trigger\"\n type=\"button\"\n aria-haspopup=\"menu\"\n aria-expanded=\"${this.accountMenuOpen ? 'true' : 'false'}\"\n ?disabled=\"${!this.hasAccountMenuItems()}\"\n @click=\"${(e: MouseEvent) => this.toggleAccountMenu(e)}\"\n part=\"account-menu-trigger\"\n >\n ${this.renderLoggedInAvatar(this.accountAvatar)}\n ${this.layout !== 'mobile' && this.accountIcon\n? html`\n <img class=\"account-menu-trigger-icon\" src=\"${this.accountIcon}\" alt=\"\" aria-hidden=\"true\" />`\n: ''}\n </button>\n </slot>\n\n <nav\n id=\"accountMenu\"\n class=\"account-dropdown\"\n role=\"menu\"\n ?inert=\"${!this.accountMenuOpen \|\| !this.hasAccountMenuItems()}\"\n ?hidden=\"${!this.accountMenuOpen \|\| !this.hasAccountMenuItems()}\"\n part=\"account-dropdown\"\n >\n <slot name=\"account-switch\" class=\"account-switch\">Switch account</slot>\n <hr class=\"dropdown-menu-separator\" />\n <slot name=\"account-menu\" @slotchange=\"${(e: Event) => this.handleAccountSlotChange(e)}\"></slot>\n ${this.accountMenu && this.accountMenu.length\n ? html`\n <ul class=\"account-menu-list\">\n ${this.accountMenu.map((item: HeaderAccountMenuItem) => html`\n <li>${this.renderAccountMenuItem(item)}</li>\n `)}\n </ul>\n `\n : ''}\n ${this.logoutLabel\n ? html`\n <hr class=\"dropdown-menu-separator\" />\n <button\n class=\"account-menu-item-button\"\n type=\"button\"\n @click=\"${() => this.handleLogout()}\"\n part=\"logout-action\"\n role=\"menuitem\"\n >\n ${this.logoutIcon && this.layout !== 'mobile'\n ? html`<img class=\"logout-action-icon\" src=\"${this.logoutIcon}\" alt=\"\" aria-hidden=\"true\" part=\"logout-action-icon\" />`\n : ''}\n ${this.logoutLabel}\n </button>\n `\n : ''}\n </nav>\n </div>\n `\n }\n\n private renderUserArea () {\n if (Features.DESIGN_SYSTEM_HEADER_ACCOUNT) {\n return html`\n <solid-ui-provider>\n <solid-ui-account></solid-ui-account>\n </solid-ui-provider>\n `\n }\n\n if (!this.authResolved) {\n return html`<div class=\"auth-actions\" part=\"auth-actions\"></div>`\n }\n\n if (this.authState === 'logged-out') {\n return this.renderLoggedOutActions()\n }\n\n return this.renderLoggedInActions()\n }\n\n protected firstUpdated () {\n const brandLink = this.shadowRoot?.getElementById('brandLink')\n if (brandLink) {\n brandLink.classList.toggle('brand-not-displayed', this.layout === 'mobile')\n }\n }\n\n protected updated (changedProperties: Map<string, unknown>) {\n if (changedProperties.has('layout')) {\n const brandLink = this.shadowRoot?.getElementById('brandLink')\n if (brandLink) {\n brandLink.classList.toggle('brand-not-displayed', this.layout === 'mobile')\n }\n }\n }\n\n render () {\n return html`\n <div class=\"headerInner\">\n <slot name=\"navigation-toggle\"></slot>\n <a\n id=\"brandLink\"\n class=\"brand\"\n href=\"${this.brandLink}\"\n part=\"brand\"\n >\n <img id=\"brandImg\" src=\"${this.logo}\" alt=\"Logo\" part=\"logo\" />\n </a>\n\n <div class=\"menu\" part=\"menu\">\n ${this.renderUserArea()}\n\n ${this.shouldRenderHelpMenu()\n ? html`\n <div class=\"header-menu-separator\" />`\n : ''}\n\n ${this.shouldRenderHelpMenu()\n ? html`\n <div class=\"help-menu-container\" part=\"help-menu-container\">\n <button\n id=\"helpMenuTrigger\"\n class=\"help-menu-trigger\"\n type=\"button\"\n aria-haspopup=\"menu\"\n aria-expanded=\"${this.helpMenuOpen ? 'true' : 'false'}\"\n ?disabled=\"${!this.hasHelpMenuItems()}\"\n @click=\"${(e: MouseEvent) => this.toggleHelpMenu(e)}\"\n part=\"help-menu-trigger\"\n >\n ${this.helpIcon\n ? html`<img id=\"helpIcon\" class=\"help-icon\" src=\"${this.helpIcon}\" alt=\"Help\" part=\"help-icon\" />`\n : html`<span class=\"help-text\" part=\"help-text\">Help</span>`}\n </button>\n\n <nav\n id=\"helpMenu\"\n class=\"help-dropdown\"\n role=\"menu\"\n ?inert=\"${!this.helpMenuOpen \|\| !this.hasHelpMenuItems()}\"\n ?hidden=\"${!this.helpMenuOpen \|\| !this.hasHelpMenuItems()}\"\n part=\"help-dropdown\"\n >\n <div class=\"help-dropdown-content\" @click=\"${() => { this.helpMenuOpen = false }}\">\n <slot name=\"help-menu\" @slotchange=\"${(e: Event) => this.handleHelpSlotChange(e)}\"></slot>\n ${this.helpMenuList && this.helpMenuList.length\n ? html`\n <ul class=\"help-menu-list\">\n ${this.helpMenuList.map((item: HeaderMenuItem) => html`\n <li>\n ${item.url\n ? html`\n <a\n href=\"${item.url}\"\n target=\"${item.target \|\| '_blank'}\"\n rel=\"${ifDefined((item.target \|\| '_blank') === '_blank' ? 'noopener noreferrer' : undefined)}\"\n @click=\"${(e: MouseEvent) => this.handleHelpMenuClick(item, e)}\"\n part=\"help-menu-item\"\n role=\"menuitem\"\n >\n ${item.label}\n </a>\n `\n : html`\n <button\n type=\"button\"\n @click=\"${(e: MouseEvent) => this.handleHelpMenuClick(item, e)}\"\n part=\"help-menu-item\"\n role=\"menuitem\"\n >\n ${item.label}\n </button>\n `}\n </li>\n `)}\n </ul>\n `\n : ''}\n </div>\n </nav>\n </div>`\n : ''}\n </div>\n </div>\n `\n }\n}\n"],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,12 +1,12 @@
 {
 	"name": "solid-ui",
-	"version": "3.1.3-0",
+	"version": "3.1.3-2",
 	"description": "UI library for Solid applications",
 	"main": "dist/index.cjs.js",
 	"types": "dist/index.d.ts",
 	"exports": {
 		".": {
-			"style": "./dist/styles.css",
+			"style": "./dist/theme.css",
 			"types": "./dist/index.d.ts",
 			"import": "./dist/index.esm.js",
 			"require": "./dist/index.cjs.js"
@@ -20,6 +20,26 @@
 			"types": "./dist/components/*/index.d.ts",
 			"import": "./dist/components/*/index.esm.js",
 			"require": "./dist/components/*/index.cjs.js"
+		},
+		"./components/actions/button": {
+			"types": "./dist/components/button/index.d.ts",
+			"import": "./dist/components/button/index.esm.js",
+			"require": "./dist/components/button/index.cjs.js"
+		},
+		"./components/forms/select": {
+			"types": "./dist/components/select/index.d.ts",
+			"import": "./dist/components/select/index.esm.js",
+			"require": "./dist/components/select/index.cjs.js"
+		},
+		"./components/forms/combobox": {
+			"types": "./dist/components/combobox/index.d.ts",
+			"import": "./dist/components/combobox/index.esm.js",
+			"require": "./dist/components/combobox/index.cjs.js"
+		},
+		"./components/media/photo-capture": {
+			"types": "./dist/components/photo-capture/index.d.ts",
+			"import": "./dist/components/photo-capture/index.esm.js",
+			"require": "./dist/components/photo-capture/index.cjs.js"
 		}
 	},
 	"files": [
@@ -85,15 +105,13 @@
 		"escape-html": "^1.0.3",
 		"lit": "^3.3.3",
 		"mime-types": "^3.0.2",
-		"pane-registry": "^3.1.2-test.0",
+		"pane-registry": "3.1.2-0",
+		"rdflib": "2.3.9",
+		"solid-logic": "4.0.8-0",
 		"solid-namespace": "^0.5.4",
-		"tailwindcss": "^4.3.0",
+		"tailwindcss": "4.3.0",
 		"uuid": "^14.0.0"
 	},
-	"peerDependencies": {
-		"rdflib": "^2.3.8",
-		"solid-logic": "^4.0.8-test.0"
-	},
 	"devDependencies": {
 		"@babel/cli": "^7.28.6",
 		"@babel/core": "^7.29.0",
@@ -149,5 +167,10 @@
 	},
 	"optionalDependencies": {
 		"fsevents": "*"
-	}
+	},
+	"solidosDependencies": [
+		"rdflib",
+		"solid-logic",
+		"pane-registry"
+	]
 }

package/dist/chunks/button-znE29yDV.js DELETED Viewed

@@ -1,348 +0,0 @@
-import { i as e, n as t, s as n, t as r } from "./lit-CC2G_f_C.js";
-//#region src/v2/components/actions/button/Button.ts
-var i = class extends r {
-	static properties = {
-		label: {
-			type: String,
-			reflect: !0
-		},
-		type: {
-			type: String,
-			reflect: !0
-		},
-		disabled: {
-			type: Boolean,
-			reflect: !0
-		},
-		selected: {
-			type: Boolean,
-			reflect: !0
-		},
-		ariaLabel: {
-			type: String,
-			attribute: "aria-label"
-		},
-		name: {
-			type: String,
-			reflect: !0
-		},
-		value: {
-			type: String,
-			reflect: !0
-		},
-		variant: {
-			type: String,
-			reflect: !0
-		},
-		size: {
-			type: String,
-			reflect: !0
-		},
-		theme: {
-			type: String,
-			reflect: !0
-		},
-		fullWidth: {
-			type: Boolean,
-			attribute: "full-width",
-			reflect: !0
-		},
-		icon: {
-			type: String,
-			reflect: !0
-		},
-		iconPosition: {
-			type: String,
-			attribute: "icon-position",
-			reflect: !0
-		},
-		contentAlign: {
-			type: String,
-			attribute: "content-align",
-			reflect: !0
-		},
-		handleClick: { attribute: !1 },
-		_hasSlottedIcon: { state: !0 }
-	};
-	static styles = n`
-    :host {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      --button-background: var(--color-background, #f8f9fb);
-      --button-text: var(--color-text-subheading, #101828);
-      --button-border: var(--color-border-button, var(--gray-300, #D1D5DC));
-      --button-hover-background: var(--color-surface-subtle, rgba(15, 23, 43, 0.04));
-      --button-hover-border: var(--color-border-button-hover, var(--gray-400, #99A1AF));
-      --button-hover-text: var(--color-text-subheading, #101828);
-      --button-selected-background: var(--color-surface-selected, var(--color-surface-action, var(--color-primary, #7C4DFF)));
-      --button-selected-text: var(--color-text-selected, var(--color-text-on-action, var(--white, #FFF)));
-      --button-selected-border: var(--color-border-selected, var(--color-border-action, var(--color-primary, #7C4DFF)));
-      --button-icon-color: currentColor;
-      --button-focus-ring: var(--color-focus-ring, var(--color-primary, #7C4DFF));
-      --button-height-sm: 1.875rem;
-      --button-height-md: var(--min-touch-target, 44px);
-      --button-height-lg: calc(var(--min-touch-target, 44px) + 0.5rem);
-      --button-padding-x-sm: var(--spacing-xs, 0.75rem);
-      --button-padding-x-md: var(--spacing-sm, 0.9375rem);
-      --button-padding-x-lg: var(--spacing-md, 1.25rem);
-      --button-font-size-sm: var(--font-size-sm, 0.875rem);
-      --button-font-size-md: var(--font-size-md, 1rem);
-      --button-font-size-lg: var(--font-size-lg, 1.125rem);
-      --button-icon-size-sm: var(--icon-xxxs, 0.75rem);
-      --button-icon-size-md: var(--icon-xxs, 1rem);
-      --button-icon-size-lg: var(--icon-xxs, 1rem);
-      --button-padding-sm: 0 var(--button-padding-x-sm);
-      --button-padding-md: 0 var(--button-padding-x-md);
-      --button-padding-lg: 0 var(--button-padding-x-lg);
-      --button-border-width: 1px;
-      --button-border-radius: var(--border-radius-base, 0.3125rem);
-      --button-font-weight: var(--font-weight-bold, 600);
-      --button-line-height: 1;
-      --button-justify-content: center;
-      --button-content-justify-content: var(--button-justify-content);
-      --button-label-text-align: center;
-      --button-box-shadow: none;
-      --button-hover-box-shadow: var(--button-box-shadow);
-      --button-active-box-shadow: var(--button-hover-box-shadow);
-      --button-active-transform: translateY(1px);
-      --button-focus-outline: 2px solid var(--button-focus-ring);
-      --button-focus-outline-offset: 2px;
-      --button-focus-box-shadow: none;
-      --button-transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
-    }
-    :host([hidden]) {
-      display: none;
-    }
-    :host([theme='dark']) {
-      --button-background: var(--color-background, #242a31);
-      --button-text: var(--color-text-subheading, #f8f9fb);
-      --button-border: var(--color-border, #46515b);
-      --button-hover-background: var(--color-surface-subtle, rgba(15, 23, 43, 0.04));
-      --button-hover-border: var(--color-border, #46515b);
-      --button-hover-text: var(--color-text-subheading, #f8f9fb);
-    }
-    :host([variant='primary']) {
-      --button-background: var(--color-surface-action, var(--color-primary, #7C4DFF));
-      --button-text: var(--color-text-on-action, var(--white, #FFF));
-      --button-border: var(--color-border-action, var(--color-primary, #7C4DFF));
-      --button-hover-background: var(--color-surface-action-hover, #6d3cf2);
-      --button-hover-border: var(--color-border-action, var(--color-primary, #7C4DFF));
-      --button-hover-text: var(--color-text-on-action, var(--white, #FFF));
-    }
-    :host([variant='icon']) {
-      --button-padding-x-sm: var(--spacing-xxs, 0.3125rem);
-      --button-padding-x-md: var(--spacing-base, 0.5rem);
-      --button-padding-x-lg: var(--spacing-2xs, 0.625rem);
-    }
-    :host([full-width]) {
-      width: 100%;
-    }
-    :host([content-align='start']) {
-      --button-justify-content: flex-start;
-      --button-content-justify-content: flex-start;
-      --button-label-text-align: left;
-    }
-    :host([content-align='end']) {
-      --button-justify-content: flex-end;
-      --button-content-justify-content: flex-end;
-      --button-label-text-align: right;
-    }
-    :host([selected]) {
-      --button-background: var(--button-selected-background);
-      --button-text: var(--button-selected-text);
-      --button-border: var(--button-selected-border);
-    }
-    .button {
-      display: inline-flex;
-      width: 100%;
-      min-height: var(--button-height-md);
-      padding: var(--button-padding-md);
-      align-items: center;
-      justify-content: var(--button-justify-content);
-      gap: var(--spacing-xxs, 0.375rem);
-      border-radius: var(--button-border-radius);
-      background: var(--button-background);
-      border: var(--button-border-width) solid var(--button-border);
-      box-shadow: var(--button-box-shadow);
-      color: var(--button-text);
-      cursor: pointer;
-      font: inherit;
-      font-size: var(--button-font-size-md);
-      font-weight: var(--button-font-weight);
-      line-height: var(--button-line-height);
-      white-space: nowrap;
-      text-decoration: none;
-      box-sizing: border-box;
-      transition: var(--button-transition);
-    }
-    :host([size='sm']) .button {
-      min-height: var(--button-height-sm);
-      padding: var(--button-padding-sm);
-      font-size: var(--button-font-size-sm);
-    }
-    :host([size='lg']) .button {
-      min-height: var(--button-height-lg);
-      padding: var(--button-padding-lg);
-      font-size: var(--button-font-size-lg);
-    }
-    .button:hover:not(:disabled) {
-      background: var(--button-hover-background);
-      border-color: var(--button-hover-border, var(--button-border));
-      box-shadow: var(--button-hover-box-shadow, var(--button-box-shadow));
-      color: var(--button-hover-text);
-    }
-    :host([selected]) .button:hover:not(:disabled) {
-      background: var(--button-hover-background);
-      border-color: var(--button-selected-border);
-      color: var(--button-selected-text);
-    }
-    .button:focus-visible {
-      outline: var(--button-focus-outline);
-      outline-offset: var(--button-focus-outline-offset);
-      box-shadow: var(--button-focus-box-shadow);
-    }
-    .button:disabled {
-      opacity: 0.6;
-      cursor: not-allowed;
-      transform: none;
-    }
-    .button__content {
-      display: inline-flex;
-      align-items: center;
-      justify-content: var(--button-content-justify-content);
-      gap: inherit;
-      width: 100%;
-    }
-    :host([icon-position='end']) .button__content {
-      flex-direction: row-reverse;
-    }
-    .button__icon {
-      width: var(--button-icon-size-md);
-      height: var(--button-icon-size-md);
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      color: var(--button-icon-color);
-      flex-shrink: 0;
-    }
-    :host([size='sm']) .button__icon {
-      width: var(--button-icon-size-sm);
-      height: var(--button-icon-size-sm);
-    }
-    :host([size='lg']) .button__icon {
-      width: var(--button-icon-size-lg);
-      height: var(--button-icon-size-lg);
-    }
-    .button__icon ::slotted(*) {
-      width: 100%;
-      height: 100%;
-      display: block;
-    }
-    .button__icon-image {
-      width: 100%;
-      height: 100%;
-      object-fit: contain;
-    }
-    .button__label {
-      display: inline-flex;
-      align-items: center;
-      justify-content: var(--button-content-justify-content);
-      min-width: 0;
-      width: 100%;
-      text-align: var(--button-label-text-align);
-    }
-    :host([variant='icon']) .button__label {
-      display: none;
-    }
-    .button:active {
-      transform: var(--button-active-transform);
-      box-shadow: var(--button-active-box-shadow, var(--button-hover-box-shadow, var(--button-box-shadow)));
-    }
-  `;
-	_iconSlotObserver;
-	constructor() {
-		super(), this.label = "", this.type = "button", this.disabled = !1, this.selected = !1, this.ariaLabel = "", this.name = "", this.value = "", this.variant = "secondary", this.size = "md", this.theme = "light", this.fullWidth = !1, this.icon = "", this.iconPosition = "start", this.contentAlign = "center", this.handleClick = void 0, this._hasSlottedIcon = !1;
-	}
-	connectedCallback() {
-		super.connectedCallback(), this._syncSlottedIconPresence(), this._iconSlotObserver = new MutationObserver(() => {
-			this._syncSlottedIconPresence();
-		}), this._iconSlotObserver.observe(this, {
-			childList: !0,
-			attributes: !0,
-			attributeFilter: ["slot"]
-		});
-	}
-	disconnectedCallback() {
-		this._iconSlotObserver?.disconnect(), this._iconSlotObserver = void 0, super.disconnectedCallback();
-	}
-	_handleButtonClick(e) {
-		this.handleClick?.(e);
-	}
-	_handleIconSlotChange(e) {
-		let t = e.target;
-		this._hasSlottedIcon = t.assignedNodes({ flatten: !0 }).length > 0;
-	}
-	_syncSlottedIconPresence() {
-		this._hasSlottedIcon = this.querySelector("[slot=\"icon\"]") !== null;
-	}
-	_renderIcon() {
-		return !this._hasSlottedIcon && !this.icon ? t : e`
-      <span class="button__icon" part="icon">
-        <slot name="icon" @slotchange=${this._handleIconSlotChange}></slot>
-        ${!this._hasSlottedIcon && this.icon ? e`<img class="button__icon-image" src=${this.icon} alt="" aria-hidden="true" />` : t}
-      </span>
-    `;
-	}
-	render() {
-		return e`
-      <button
-        class="button"
-        type=${this.type}
-        ?disabled=${this.disabled}
-        aria-label=${this.ariaLabel || t}
-        name=${this.name || t}
-        value=${this.value || t}
-        part="button"
-        @click=${this._handleButtonClick}
-      >
-        <span class="button__content">
-          ${this._renderIcon()}
-          <span class="button__label" part="label">
-            <slot>${this.label}</slot>
-          </span>
-        </span>
-      </button>
-    `;
-	}
-}, a = "solid-ui-button";
-customElements.get(a) || customElements.define(a, i);
-//#endregion
-export { i as t };
-//# sourceMappingURL=button-znE29yDV.js.map

package/dist/chunks/button-znE29yDV.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"button-znE29yDV.js","names":["LitElement","html","css","nothing","Button","properties","label","type","String","reflect","disabled","Boolean","selected","ariaLabel","attribute","name","value","variant","size","theme","fullWidth","icon","iconPosition","contentAlign","handleClick","_hasSlottedIcon","state","styles","_iconSlotObserver","constructor","undefined","connectedCallback","_syncSlottedIconPresence","MutationObserver","observe","childList","attributes","attributeFilter","disconnectedCallback","disconnect","_handleButtonClick","event","_handleIconSlotChange","slot","target","assignedNodes","flatten","length","querySelector","_renderIcon","render","Button","BUTTON_TAG_NAME","customElements","get","define"],"sources":["../../src/v2/components/actions/button/Button.ts","../../src/v2/components/actions/button/index.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit'\n\nexport class Button extends LitElement {\n static properties = {\n label: { type: String, reflect: true },\n type: { type: String, reflect: true },\n disabled: { type: Boolean, reflect: true },\n selected: { type: Boolean, reflect: true },\n ariaLabel: { type: String, attribute: 'aria-label' },\n name: { type: String, reflect: true },\n value: { type: String, reflect: true },\n variant: { type: String, reflect: true },\n size: { type: String, reflect: true },\n theme: { type: String, reflect: true },\n fullWidth: { type: Boolean, attribute: 'full-width', reflect: true },\n icon: { type: String, reflect: true },\n iconPosition: { type: String, attribute: 'icon-position', reflect: true },\n contentAlign: { type: String, attribute: 'content-align', reflect: true },\n handleClick: { attribute: false },\n _hasSlottedIcon: { state: true }\n }\n\n static styles = css`\n :host {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n --button-background: var(--color-background, #f8f9fb);\n --button-text: var(--color-text-subheading, #101828);\n --button-border: var(--color-border-button, var(--gray-300, #D1D5DC));\n --button-hover-background: var(--color-surface-subtle, rgba(15, 23, 43, 0.04));\n --button-hover-border: var(--color-border-button-hover, var(--gray-400, #99A1AF));\n --button-hover-text: var(--color-text-subheading, #101828);\n --button-selected-background: var(--color-surface-selected, var(--color-surface-action, var(--color-primary, #7C4DFF)));\n --button-selected-text: var(--color-text-selected, var(--color-text-on-action, var(--white, #FFF)));\n --button-selected-border: var(--color-border-selected, var(--color-border-action, var(--color-primary, #7C4DFF)));\n --button-icon-color: currentColor;\n --button-focus-ring: var(--color-focus-ring, var(--color-primary, #7C4DFF));\n --button-height-sm: 1.875rem;\n --button-height-md: var(--min-touch-target, 44px);\n --button-height-lg: calc(var(--min-touch-target, 44px) + 0.5rem);\n --button-padding-x-sm: var(--spacing-xs, 0.75rem);\n --button-padding-x-md: var(--spacing-sm, 0.9375rem);\n --button-padding-x-lg: var(--spacing-md, 1.25rem);\n --button-font-size-sm: var(--font-size-sm, 0.875rem);\n --button-font-size-md: var(--font-size-md, 1rem);\n --button-font-size-lg: var(--font-size-lg, 1.125rem);\n --button-icon-size-sm: var(--icon-xxxs, 0.75rem);\n --button-icon-size-md: var(--icon-xxs, 1rem);\n --button-icon-size-lg: var(--icon-xxs, 1rem);\n --button-padding-sm: 0 var(--button-padding-x-sm);\n --button-padding-md: 0 var(--button-padding-x-md);\n --button-padding-lg: 0 var(--button-padding-x-lg);\n --button-border-width: 1px;\n --button-border-radius: var(--border-radius-base, 0.3125rem);\n --button-font-weight: var(--font-weight-bold, 600);\n --button-line-height: 1;\n --button-justify-content: center;\n --button-content-justify-content: var(--button-justify-content);\n --button-label-text-align: center;\n --button-box-shadow: none;\n --button-hover-box-shadow: var(--button-box-shadow);\n --button-active-box-shadow: var(--button-hover-box-shadow);\n --button-active-transform: translateY(1px);\n --button-focus-outline: 2px solid var(--button-focus-ring);\n --button-focus-outline-offset: 2px;\n --button-focus-box-shadow: none;\n --button-transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;\n }\n\n :host([hidden]) {\n display: none;\n }\n\n :host([theme='dark']) {\n --button-background: var(--color-background, #242a31);\n --button-text: var(--color-text-subheading, #f8f9fb);\n --button-border: var(--color-border, #46515b);\n --button-hover-background: var(--color-surface-subtle, rgba(15, 23, 43, 0.04));\n --button-hover-border: var(--color-border, #46515b);\n --button-hover-text: var(--color-text-subheading, #f8f9fb);\n }\n\n :host([variant='primary']) {\n --button-background: var(--color-surface-action, var(--color-primary, #7C4DFF));\n --button-text: var(--color-text-on-action, var(--white, #FFF));\n --button-border: var(--color-border-action, var(--color-primary, #7C4DFF));\n --button-hover-background: var(--color-surface-action-hover, #6d3cf2);\n --button-hover-border: var(--color-border-action, var(--color-primary, #7C4DFF));\n --button-hover-text: var(--color-text-on-action, var(--white, #FFF));\n }\n\n :host([variant='icon']) {\n --button-padding-x-sm: var(--spacing-xxs, 0.3125rem);\n --button-padding-x-md: var(--spacing-base, 0.5rem);\n --button-padding-x-lg: var(--spacing-2xs, 0.625rem);\n }\n\n :host([full-width]) {\n width: 100%;\n }\n\n :host([content-align='start']) {\n --button-justify-content: flex-start;\n --button-content-justify-content: flex-start;\n --button-label-text-align: left;\n }\n\n :host([content-align='end']) {\n --button-justify-content: flex-end;\n --button-content-justify-content: flex-end;\n --button-label-text-align: right;\n }\n\n :host([selected]) {\n --button-background: var(--button-selected-background);\n --button-text: var(--button-selected-text);\n --button-border: var(--button-selected-border);\n }\n\n .button {\n display: inline-flex;\n width: 100%;\n min-height: var(--button-height-md);\n padding: var(--button-padding-md);\n align-items: center;\n justify-content: var(--button-justify-content);\n gap: var(--spacing-xxs, 0.375rem);\n border-radius: var(--button-border-radius);\n background: var(--button-background);\n border: var(--button-border-width) solid var(--button-border);\n box-shadow: var(--button-box-shadow);\n color: var(--button-text);\n cursor: pointer;\n font: inherit;\n font-size: var(--button-font-size-md);\n font-weight: var(--button-font-weight);\n line-height: var(--button-line-height);\n white-space: nowrap;\n text-decoration: none;\n box-sizing: border-box;\n transition: var(--button-transition);\n }\n\n :host([size='sm']) .button {\n min-height: var(--button-height-sm);\n padding: var(--button-padding-sm);\n font-size: var(--button-font-size-sm);\n }\n\n :host([size='lg']) .button {\n min-height: var(--button-height-lg);\n padding: var(--button-padding-lg);\n font-size: var(--button-font-size-lg);\n }\n\n .button:hover:not(:disabled) {\n background: var(--button-hover-background);\n border-color: var(--button-hover-border, var(--button-border));\n box-shadow: var(--button-hover-box-shadow, var(--button-box-shadow));\n color: var(--button-hover-text);\n }\n\n :host([selected]) .button:hover:not(:disabled) {\n background: var(--button-hover-background);\n border-color: var(--button-selected-border);\n color: var(--button-selected-text);\n }\n \n .button:focus-visible {\n outline: var(--button-focus-outline);\n outline-offset: var(--button-focus-outline-offset);\n box-shadow: var(--button-focus-box-shadow);\n }\n\n .button:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n transform: none;\n }\n\n .button__content {\n display: inline-flex;\n align-items: center;\n justify-content: var(--button-content-justify-content);\n gap: inherit;\n width: 100%;\n }\n\n :host([icon-position='end']) .button__content {\n flex-direction: row-reverse;\n }\n\n .button__icon {\n width: var(--button-icon-size-md);\n height: var(--button-icon-size-md);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: var(--button-icon-color);\n flex-shrink: 0;\n }\n\n :host([size='sm']) .button__icon {\n width: var(--button-icon-size-sm);\n height: var(--button-icon-size-sm);\n }\n\n :host([size='lg']) .button__icon {\n width: var(--button-icon-size-lg);\n height: var(--button-icon-size-lg);\n }\n\n .button__icon ::slotted(*) {\n width: 100%;\n height: 100%;\n display: block;\n }\n\n .button__icon-image {\n width: 100%;\n height: 100%;\n object-fit: contain;\n }\n\n .button__label {\n display: inline-flex;\n align-items: center;\n justify-content: var(--button-content-justify-content);\n min-width: 0;\n width: 100%;\n text-align: var(--button-label-text-align);\n }\n\n :host([variant='icon']) .button__label {\n display: none;\n }\n\n .button:active {\n transform: var(--button-active-transform);\n box-shadow: var(--button-active-box-shadow, var(--button-hover-box-shadow, var(--button-box-shadow)));\n }\n `\n\n declare label: string\n declare type: 'button' | 'submit' | 'reset'\n declare disabled: boolean\n declare selected: boolean\n declare ariaLabel: string\n declare name: string\n declare value: string\n declare variant: 'primary' | 'secondary' | 'icon'\n declare size: 'sm' | 'md' | 'lg'\n declare theme: 'light' | 'dark'\n declare fullWidth: boolean\n declare icon: string\n declare iconPosition: 'start' | 'end'\n declare contentAlign: 'start' | 'center' | 'end'\n declare handleClick?: (event: MouseEvent) => void\n declare _hasSlottedIcon: boolean\n private _iconSlotObserver?: MutationObserver\n\n constructor () {\n super()\n this.label = ''\n this.type = 'button'\n this.disabled = false\n this.selected = false\n this.ariaLabel = ''\n this.name = ''\n this.value = ''\n this.variant = 'secondary'\n this.size = 'md'\n this.theme = 'light'\n this.fullWidth = false\n this.icon = ''\n this.iconPosition = 'start'\n this.contentAlign = 'center'\n this.handleClick = undefined\n this._hasSlottedIcon = false\n }\n\n connectedCallback () {\n super.connectedCallback()\n this._syncSlottedIconPresence()\n\n this._iconSlotObserver = new MutationObserver(() => {\n this._syncSlottedIconPresence()\n })\n\n this._iconSlotObserver.observe(this, {\n childList: true,\n attributes: true,\n attributeFilter: ['slot']\n })\n }\n\n disconnectedCallback () {\n this._iconSlotObserver?.disconnect()\n this._iconSlotObserver = undefined\n super.disconnectedCallback()\n }\n\n private _handleButtonClick (event: MouseEvent) {\n this.handleClick?.(event)\n }\n\n private _handleIconSlotChange (event: Event) {\n const slot = event.target as HTMLSlotElement\n this._hasSlottedIcon = slot.assignedNodes({ flatten: true }).length > 0\n }\n\n private _syncSlottedIconPresence () {\n this._hasSlottedIcon = this.querySelector('[slot=\"icon\"]') !== null\n }\n\n private _renderIcon () {\n if (!this._hasSlottedIcon && !this.icon) {\n return nothing\n }\n\n return html`\n <span class=\"button__icon\" part=\"icon\">\n <slot name=\"icon\" @slotchange=${this._handleIconSlotChange}></slot>\n ${!this._hasSlottedIcon && this.icon\n ? html`<img class=\"button__icon-image\" src=${this.icon} alt=\"\" aria-hidden=\"true\" />`\n : nothing}\n </span>\n `\n }\n\n render () {\n return html`\n <button\n class=\"button\"\n type=${this.type}\n ?disabled=${this.disabled}\n aria-label=${this.ariaLabel || nothing}\n name=${this.name || nothing}\n value=${this.value || nothing}\n part=\"button\"\n @click=${this._handleButtonClick}\n >\n <span class=\"button__content\">\n ${this._renderIcon()}\n <span class=\"button__label\" part=\"label\">\n <slot>${this.label}</slot>\n </span>\n </span>\n </button>\n `\n }\n}\n","import { Button } from './Button'\n\nexport { Button }\n\nconst BUTTON_TAG_NAME = 'solid-ui-button'\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'solid-ui-button': Button\n }\n}\n\nif (!customElements.get(BUTTON_TAG_NAME)) {\n customElements.define(BUTTON_TAG_NAME, Button)\n}\n"],"mappings":"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"}