npm - @francofantomius/material-components - Versions diffs - 1.1.1 → 1.2.0 - Mend

@francofantomius/material-components 1.1.1 → 1.2.0

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 (380) hide show

package/dist/chunks/{account-menu-Dau0UHTl.js.map → account-menu-Bo7NghIm.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"account-menu-Dau0UHTl.js","names":[],"sources":["../../src/components/account-menu/account-menu.css.ts","../../src/components/account-menu/account-menu.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const accountMenuStyles = css`\n :host {\n display: inline-block;\n position: relative;\n font-family: var(--md-sys-typescale-font-family, inherit);\n }\n\n :host([hidden]) {\n display: none;\n }\n\n .trigger-container {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n\n .avatar-btn {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--md-account-trigger-size, 40px);\n height: var(--md-account-trigger-size, 40px);\n border-radius: var(--md-sys-shape-corner-full, 9999px);\n background-color: var(--md-sys-color-primary-container, #EADDFF);\n color: var(--md-sys-color-on-primary-container, #21005D);\n border: 2px solid transparent;\n padding: 0;\n cursor: pointer;\n outline: none;\n font-family: inherit;\n font-size: 16px;\n font-weight: 600;\n user-select: none;\n transition: box-shadow 150ms ease, transform 150ms ease, border-color 150ms ease;\n -webkit-tap-highlight-color: transparent;\n overflow: visible;\n }\n\n .avatar-btn:hover {\n box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.3);\n border-color: var(--md-sys-color-outline-variant, #CAC4D0);\n }\n\n .avatar-btn:focus-visible {\n border-color: var(--md-sys-color-primary, #6750A4);\n }\n\n .avatar-img {\n width: 100%;\n height: 100%;\n border-radius: var(--md-sys-shape-corner-full, 9999px);\n object-fit: cover;\n }\n\n .avatar-initials {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n }\n\n .backdrop {\n display: none;\n position: fixed;\n inset: 0;\n z-index: 990;\n background-color: transparent;\n }\n\n :host([modal]) .backdrop {\n background-color: rgba(0, 0, 0, 0.32);\n backdrop-filter: blur(1px);\n }\n\n :host([open][modal]) .backdrop {\n display: block;\n }\n\n .popover {\n display: none;\n position: absolute;\n top: calc(100% + 8px);\n right: 0;\n z-index: 1000;\n width: var(--md-account-menu-width, 380px);\n max-width: calc(100vw - 24px);\n height: fit-content;\n max-height: var(--md-account-menu-max-height, none);\n box-sizing: border-box;\n padding: 0;\n border-radius: var(--md-sys-shape-corner-extra-large, 28px);\n background-color: var(--md-sys-color-surface-container-high, #ECE6F0);\n color: var(--md-sys-color-on-surface, #1D1B20);\n box-shadow: var(--md-sys-elevation-level3, 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.3));\n overflow-y: auto;\n overflow-x: hidden;\n overscroll-behavior: contain;\n scrollbar-width: thin;\n scrollbar-color: var(--md-sys-color-outline-variant, #CAC4D0) transparent;\n }\n\n :host([alignment='start']) .popover,\n :host([pivot='left']) .popover {\n right: auto;\n left: 0;\n }\n\n :host([open]) .popover {\n display: flex;\n flex-direction: column;\n animation: md-account-menu-in 150ms cubic-bezier(0.2, 0, 0, 1) forwards;\n }\n\n @keyframes md-account-menu-in {\n from {\n opacity: 0;\n transform: scale(0.92) translateY(-8px);\n }\n to {\n opacity: 1;\n transform: scale(1) translateY(0);\n }\n }\n\n /* Header Section /\n .popover-header {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n padding: 12px 16px 4px;\n box-sizing: border-box;\n }\n\n .header-leading {\n display: flex;\n align-items: center;\n gap: 8px;\n min-width: 0;\n }\n\n .back-btn,\n slot[name=\"back-button\"] {\n display: none;\n --md-icon-size: 24px;\n font-size: 24px;\n flex-shrink: 0;\n }\n\n .popover-header .headline {\n display: none;\n margin: 0;\n font-size: var(--md-sys-typescale-title-large-size, 20px);\n font-weight: 500;\n line-height: 28px;\n color: var(--md-sys-color-on-surface, #1D1B20);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .close-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n border-radius: 50%;\n background: transparent;\n border: none;\n color: var(--md-sys-color-on-surface-variant, #49454F);\n cursor: pointer;\n padding: 0;\n transition: background-color 150ms ease;\n }\n\n .close-btn:hover {\n background-color: var(--md-sys-color-surface-container-highest, rgba(0, 0, 0, 0.08));\n color: var(--md-sys-color-on-surface, #1D1B20);\n }\n\n / Profile Card (Account Centerpiece) /\n .profile-card {\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n padding: 8px 24px 20px;\n background-color: var(--md-sys-color-surface-container-lowest, #FFFFFF);\n margin: 8px 16px 12px;\n border-radius: var(--md-sys-shape-corner-large, 24px);\n border: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);\n box-sizing: border-box;\n }\n\n .profile-avatar-wrapper {\n position: relative;\n margin: 12px 0 14px;\n }\n\n .profile-avatar {\n width: 76px;\n height: 76px;\n border-radius: 50%;\n background-color: var(--md-sys-color-primary, #6750A4);\n color: var(--md-sys-color-on-primary, #FFFFFF);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 30px;\n font-weight: 600;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);\n overflow: hidden;\n }\n\n .profile-avatar img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n .avatar-edit-badge {\n position: absolute;\n bottom: -2px;\n right: -2px;\n width: 26px;\n height: 26px;\n border-radius: 50%;\n background-color: var(--md-sys-color-surface-container-highest, #E6E0E9);\n border: 2px solid var(--md-sys-color-surface-container-lowest, #FFFFFF);\n color: var(--md-sys-color-on-surface, #1D1B20);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n padding: 0;\n transition: background-color 150ms ease;\n }\n\n .avatar-edit-badge:hover {\n background-color: var(--md-sys-color-primary-container, #EADDFF);\n color: var(--md-sys-color-on-primary-container, #21005D);\n }\n\n .avatar-edit-badge md-icon {\n --md-icon-size: 16px;\n font-size: 16px;\n }\n\n .profile-name {\n font-size: 18px;\n font-weight: 600;\n line-height: 24px;\n color: var(--md-sys-color-on-surface, #1D1B20);\n margin: 0 0 4px;\n }\n\n .profile-email {\n font-size: 13px;\n color: var(--md-sys-color-on-surface-variant, #49454F);\n margin: 0 0 16px;\n }\n\n .manage-btn {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n padding: 8px 18px;\n border-radius: var(--md-sys-shape-corner-full, 9999px);\n border: 1px solid var(--md-sys-color-outline, #79747E);\n background: transparent;\n color: var(--md-sys-color-primary, #6750A4);\n font-family: inherit;\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n text-decoration: none;\n transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;\n overflow: hidden;\n -webkit-tap-highlight-color: transparent;\n }\n\n .manage-btn:hover {\n background-color: var(--md-sys-color-primary-container, rgba(103, 80, 164, 0.08));\n border-color: var(--md-sys-color-primary, #6750A4);\n }\n\n / Internal Tabs for Account Info /\n .account-tabs {\n display: flex;\n border-bottom: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);\n padding: 0 16px;\n margin-bottom: 8px;\n gap: 4px;\n }\n\n .tab-btn {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n padding: 10px 8px;\n background: transparent;\n border: none;\n border-bottom: 2px solid transparent;\n color: var(--md-sys-color-on-surface-variant, #49454F);\n font-family: inherit;\n font-size: 12px;\n font-weight: 500;\n cursor: pointer;\n transition: color 150ms ease, border-color 150ms ease;\n outline: none;\n }\n\n .tab-btn:hover {\n color: var(--md-sys-color-on-surface, #1D1B20);\n }\n\n .tab-btn.active {\n color: var(--md-sys-color-primary, #6750A4);\n border-bottom-color: var(--md-sys-color-primary, #6750A4);\n font-weight: 600;\n }\n\n .tab-btn md-icon {\n --md-icon-size: 16px;\n font-size: 16px;\n }\n\n .tab-panel {\n display: none;\n padding: 8px 16px 14px;\n box-sizing: border-box;\n }\n\n .tab-panel.active {\n display: block;\n animation: tabFadeIn 150ms ease forwards;\n }\n\n @keyframes tabFadeIn {\n from { opacity: 0; transform: translateY(4px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n / Info & Detail Rows /\n .info-card {\n background-color: var(--md-sys-color-surface-container-lowest, #FFFFFF);\n border: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);\n border-radius: var(--md-sys-shape-corner-medium, 16px);\n padding: 12px 16px;\n margin-bottom: 8px;\n box-sizing: border-box;\n }\n\n .info-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 8px 0;\n border-bottom: 1px solid var(--md-sys-color-surface-container-high, #ECE6F0);\n font-size: 13px;\n }\n\n .info-row:last-child {\n border-bottom: none;\n padding-bottom: 0;\n }\n\n .info-row:first-child {\n padding-top: 0;\n }\n\n .info-label {\n display: flex;\n align-items: center;\n gap: 8px;\n color: var(--md-sys-color-on-surface-variant, #49454F);\n }\n\n .info-label md-icon {\n --md-icon-size: 18px;\n font-size: 18px;\n color: var(--md-sys-color-primary, #6750A4);\n }\n\n .info-value {\n font-weight: 500;\n color: var(--md-sys-color-on-surface, #1D1B20);\n text-align: right;\n }\n\n .badge-chip {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 2px 8px;\n border-radius: 100px;\n font-size: 11px;\n font-weight: 600;\n background-color: var(--md-sys-color-secondary-container, #E8DEF8);\n color: var(--md-sys-color-on-secondary-container, #1D192B);\n }\n\n .badge-chip.success {\n background-color: #E8F5E9;\n color: #2E7D32;\n }\n\n / Storage Section /\n .storage-box {\n background-color: var(--md-sys-color-surface-container-lowest, #FFFFFF);\n border: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);\n border-radius: var(--md-sys-shape-corner-medium, 16px);\n padding: 16px;\n box-sizing: border-box;\n }\n\n .storage-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 10px;\n }\n\n .storage-title {\n font-size: 14px;\n font-weight: 600;\n color: var(--md-sys-color-on-surface, #1D1B20);\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .storage-title md-icon {\n --md-icon-size: 20px;\n font-size: 20px;\n color: var(--md-sys-color-primary, #6750A4);\n }\n\n .storage-meta {\n font-size: 13px;\n font-weight: 500;\n color: var(--md-sys-color-on-surface-variant, #49454F);\n }\n\n .storage-bar-track {\n width: 100%;\n height: 8px;\n border-radius: 4px;\n background-color: var(--md-sys-color-surface-container-highest, #E6E0E9);\n overflow: hidden;\n margin-bottom: 12px;\n }\n\n .storage-bar-fill {\n height: 100%;\n border-radius: 4px;\n background: linear-gradient(90deg, var(--md-sys-color-primary, #6750A4), var(--md-sys-color-tertiary, #7D5260));\n transition: width 300ms ease;\n }\n\n .storage-breakdown {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 8px;\n font-size: 12px;\n color: var(--md-sys-color-on-surface-variant, #49454F);\n }\n\n .storage-item {\n display: flex;\n align-items: center;\n gap: 6px;\n }\n\n .storage-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n }\n\n / Multi-account switcher list /\n .accounts-list {\n display: flex;\n flex-direction: column;\n gap: 4px;\n box-sizing: border-box;\n }\n\n / Footer /\n .popover-footer {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 12px;\n padding: 12px 16px 16px;\n border-top: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);\n box-sizing: border-box;\n }\n\n .signout-btn {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n width: 100%;\n padding: 10px 16px;\n border-radius: var(--md-sys-shape-corner-full, 9999px);\n background-color: var(--md-sys-color-surface-container-highest, #E6E0E9);\n border: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);\n color: var(--md-sys-color-on-surface, #1D1B20);\n font-family: inherit;\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: background-color 150ms ease, color 150ms ease;\n overflow: hidden;\n -webkit-tap-highlight-color: transparent;\n }\n\n .signout-btn:hover {\n background-color: var(--md-sys-color-error-container, #F9DEDC);\n color: var(--md-sys-color-on-error-container, #410E0B);\n border-color: var(--md-sys-color-error, #B3261E);\n }\n\n .signout-btn md-icon {\n --md-icon-size: 18px;\n font-size: 18px;\n }\n\n .footer-links {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 12px;\n font-size: 11px;\n color: var(--md-sys-color-on-surface-variant, #49454F);\n }\n\n .footer-links a {\n color: inherit;\n text-decoration: none;\n }\n\n .footer-links a:hover {\n text-decoration: underline;\n color: var(--md-sys-color-primary, #6750A4);\n }\n\n .footer-dot {\n opacity: 0.5;\n }\n\n / Responsive Fullscreen / Mobile Mode /\n @media (max-width: 768px) {\n .back-btn,\n slot[name=\"back-button\"] {\n display: inline-flex;\n }\n\n .popover-header .headline {\n display: block;\n }\n\n .popover-header {\n justify-content: space-between;\n min-height: 48px;\n padding: 12px 16px 8px;\n }\n\n :host([open]) .popover {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n width: 100vw;\n max-width: 100vw;\n height: 100vh;\n height: 100dvh;\n max-height: 100vh;\n max-height: 100dvh;\n border-radius: 0;\n box-shadow: none;\n z-index: 10000;\n padding: 0 0 env(safe-area-inset-bottom, 16px) 0;\n margin: 0;\n animation: md-account-menu-mobile-in 200ms cubic-bezier(0.2, 0, 0, 1) forwards;\n }\n\n .profile-card {\n margin: 4px 16px 12px;\n }\n }\n\n @keyframes md-account-menu-mobile-in {\n from {\n opacity: 0;\n transform: translateY(12px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n / Explicit Fullscreen Mode /\n :host([fullscreen]) .back-btn,\n :host([fullscreen]) slot[name=\"back-button\"] {\n display: inline-flex;\n }\n\n :host([fullscreen]) .popover-header .headline {\n display: block;\n }\n\n :host([fullscreen]) .popover-header {\n justify-content: space-between;\n min-height: 48px;\n padding: 12px 16px 8px;\n }\n\n :host([fullscreen][open]) .popover {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n width: 100vw;\n max-width: 100vw;\n height: 100vh;\n height: 100dvh;\n max-height: 100vh;\n max-height: 100dvh;\n border-radius: 0;\n box-shadow: none;\n z-index: 10000;\n padding: 0 0 env(safe-area-inset-bottom, 16px) 0;\n margin: 0;\n }\n\n :host([fullscreen]) .profile-card {\n margin: 4px 16px 12px;\n }\n`;\n\nexport const accountItemStyles = css`\n :host {\n display: block;\n box-sizing: border-box;\n font-family: var(--md-sys-typescale-font-family, inherit);\n }\n\n :host([hidden]) {\n display: none;\n }\n\n .item {\n position: relative;\n display: flex;\n align-items: center;\n gap: 12px;\n width: 100%;\n padding: 10px 12px;\n border-radius: var(--md-sys-shape-corner-medium, 14px);\n background: transparent;\n border: none;\n color: var(--md-sys-color-on-surface, #1D1B20);\n text-align: left;\n cursor: pointer;\n font-family: inherit;\n text-decoration: none;\n transition: background-color 150ms ease;\n box-sizing: border-box;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n }\n\n .item:hover {\n background-color: var(--md-sys-color-surface-container-highest, rgba(0, 0, 0, 0.06));\n }\n\n :host([active]) .item {\n background-color: var(--md-sys-color-secondary-container, #E8DEF8);\n color: var(--md-sys-color-on-secondary-container, #1D192B);\n }\n\n :host([disabled]) .item {\n opacity: 0.38;\n cursor: not-allowed;\n pointer-events: none;\n }\n\n .item-avatar {\n width: 36px;\n height: 36px;\n border-radius: 50%;\n background-color: var(--md-sys-color-primary-container, #EADDFF);\n color: var(--md-sys-color-on-primary-container, #21005D);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 14px;\n font-weight: 600;\n flex-shrink: 0;\n overflow: hidden;\n }\n\n .item-avatar img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n .item-content {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n }\n\n .item-name {\n font-size: 13.5px;\n font-weight: 500;\n color: var(--md-sys-color-on-surface, #1D1B20);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .item-email {\n font-size: 12px;\n color: var(--md-sys-color-on-surface-variant, #49454F);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .item-trailing {\n display: flex;\n align-items: center;\n gap: 6px;\n flex-shrink: 0;\n }\n\n .check-icon {\n color: var(--md-sys-color-primary, #6750A4);\n font-size: 20px;\n }\n\n .action-icon {\n color: var(--md-sys-color-on-surface-variant, #49454F);\n font-size: 20px;\n }\n`;\n\n","import { html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport '../../internal/ripple/ripple.js';\nimport '../../internal/focus-ring/focus-ring.js';\nimport '../icon/icon.js';\nimport '../icon-button/icon-button.js';\nimport { accountMenuStyles, accountItemStyles } from './account-menu.css.js';\n\nexport type AccountMenuAlignment = 'start' \| 'end';\nexport type AccountMenuPivot = 'left' \| 'right';\nexport type AccountMenuTab = 'overview' \| 'security' \| 'storage' \| 'accounts';\n\n/\n Material Design 3 Account Item component.\n * Represents a single account profile in the account switcher or an account action item.\n \n @slot icon - Custom icon or graphic.\n * @slot - Default slot for account name/details.\n * @slot trailing - Custom trailing content or checkmark.\n /\n@customElement('md-account-item')\nexport class MdAccountItem extends MdBaseElement {\n static override styles = [MdBaseElement.styles, accountItemStyles];\n\n @property({ type: String })\n name = '';\n\n @property({ type: String })\n email = '';\n\n @property({ type: String })\n avatar = '';\n\n @property({ type: String })\n initials = '';\n\n @property({ type: String })\n icon = '';\n\n @property({ type: String })\n badge = '';\n\n @property({ type: String })\n href = '';\n\n @property({ type: String })\n target = '';\n\n @property({ type: Boolean, reflect: true })\n active = false;\n\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n @property({ type: Boolean })\n action = false;\n\n private handleClick = (event: MouseEvent) => {\n if (this.disabled) {\n event.preventDefault();\n event.stopImmediatePropagation();\n return;\n }\n\n this.emitEvent('account-click', {\n name: this.name,\n email: this.email,\n avatar: this.avatar,\n initials: this.initials,\n active: this.active,\n action: this.action,\n });\n };\n\n override render() {\n const displayInitials = this.initials \|\| (this.name ? this.name.charAt(0).toUpperCase() : '');\n\n const avatarContent = this.avatar\n ? html`<img class=\"item-avatar-img\" src=${this.avatar} alt=${this.name \|\| 'Account avatar'} />`\n : this.icon\n ? html`<md-icon name=${this.icon}></md-icon>`\n : displayInitials\n ? html`<span>${displayInitials}</span>`\n : html`<md-icon name=\"person\"></md-icon>`;\n\n const trailingContent = this.active\n ? html`<md-icon name=\"check\" class=\"check-icon\"></md-icon>`\n : this.action\n ? html`<md-icon name=\"chevron_right\" class=\"action-icon\"></md-icon>`\n : nothing;\n\n const inner = html`\n <md-ripple ?disabled=${this.disabled}></md-ripple>\n <md-focus-ring></md-focus-ring>\n\n <div class=\"item-avatar\">\n <slot name=\"icon\">${avatarContent}</slot>\n </div>\n\n <div class=\"item-content\">\n <span class=\"item-name\"><slot name=\"name\">${this.name \|\| 'Account'}</slot></span>\n ${this.email ? html`<span class=\"item-email\"><slot name=\"email\">${this.email}</slot></span>` : nothing}\n </div>\n\n <div class=\"item-trailing\">\n <slot name=\"trailing\">${trailingContent}</slot>\n </div>\n `;\n\n if (this.href) {\n return html`\n <a\n class=\"item\"\n href=${this.disabled ? nothing : this.href}\n target=${this.target \|\| nothing}\n aria-disabled=${this.disabled ? 'true' : nothing}\n tabindex=${this.disabled ? '-1' : '0'}\n @click=${this.handleClick}\n >\n ${inner}\n </a>\n `;\n }\n\n return html`\n <button\n class=\"item\"\n type=\"button\"\n tabindex=${this.disabled ? '-1' : '0'}\n aria-disabled=${this.disabled ? 'true' : nothing}\n ?disabled=${this.disabled}\n @click=${this.handleClick}\n >\n ${inner}\n </button>\n `;\n }\n}\n\n/\n Material Design 3 Account Menu (Account Profile Switcher) component.\n * Displays a profile menu with rich user info, storage usage, security overview, and multi-account switcher.\n \n @slot trigger - Custom trigger element replacing the default avatar button.\n * @slot header - Custom header element.\n * @slot overview - Custom overview info content.\n * @slot security - Custom security info content.\n * @slot storage - Custom storage info content.\n * @slot accounts - Container for md-account-item instances.\n * @slot footer - Custom footer content.\n /\n@customElement('md-account-menu')\nexport class MdAccountMenu extends MdBaseElement {\n static override styles = [MdBaseElement.styles, accountMenuStyles];\n\n @property({ type: Boolean, reflect: true })\n open = false;\n\n @property({ type: String })\n name = 'Franco Fantomius';\n\n @property({ type: String })\n email = 'franco.fantomius@example.com';\n\n @property({ type: String })\n avatar = '';\n\n @property({ type: String })\n initials = '';\n\n @property({ type: String })\n icon = 'account_circle';\n\n @property({ type: String, attribute: 'headline' })\n headline = 'Account';\n\n @property({ type: String, attribute: 'manage-text' })\n manageText = 'Manage your Account';\n\n @property({ type: String, attribute: 'manage-url' })\n manageUrl = '';\n\n @property({ type: String, attribute: 'organization' })\n organization = 'Material Components';\n\n @property({ type: String, attribute: 'role-title' })\n roleTitle = 'Lead Architect';\n\n @property({ type: String, attribute: 'status' })\n status = 'Active';\n\n @property({ type: String, attribute: 'storage-used' })\n storageUsed = '10.4 GB';\n\n @property({ type: String, attribute: 'storage-total' })\n storageTotal = '15 GB';\n\n @property({ type: Number, attribute: 'storage-progress' })\n storageProgress = 0.69;\n\n @property({ type: String, attribute: 'security-status' })\n securityStatus = 'Protected';\n\n @property({ type: String, attribute: 'aria-label' })\n ariaLabelText = 'Account info';\n\n @property({ type: Boolean, attribute: 'no-trigger' })\n noTrigger = false;\n\n get trigger(): boolean {\n return !this.noTrigger;\n }\n\n set trigger(value: boolean) {\n this.noTrigger = !value;\n this.requestUpdate('noTrigger');\n }\n\n @property({ type: String, reflect: true })\n alignment: AccountMenuAlignment = 'end';\n\n @property({ type: String, reflect: true })\n pivot: AccountMenuPivot = 'right';\n\n @property({ type: Boolean, reflect: true })\n modal = false;\n\n @property({ type: Boolean, reflect: true })\n fullscreen = false;\n\n @property({ type: Boolean, attribute: 'show-tabs' })\n showTabs = true;\n\n @state()\n activeTab: AccountMenuTab = 'overview';\n\n override connectedCallback() {\n super.connectedCallback();\n window.addEventListener('keydown', this.handleKeyDown);\n document.addEventListener('pointerdown', this.handleDocumentClick);\n this.addEventListener('account-click', this.handleAccountItemClick as EventListener);\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n window.removeEventListener('keydown', this.handleKeyDown);\n document.removeEventListener('pointerdown', this.handleDocumentClick);\n this.removeEventListener('account-click', this.handleAccountItemClick as EventListener);\n }\n\n override updated(changedProperties: Map<string, unknown>) {\n super.updated(changedProperties);\n if (changedProperties.has('open')) {\n if (this.open) {\n this.emitEvent('open');\n } else {\n this.emitEvent('close');\n }\n }\n }\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape' && this.open) {\n this.close();\n }\n };\n\n private handleDocumentClick = (event: MouseEvent \| PointerEvent) => {\n if (!this.open) return;\n const path = event.composedPath();\n if (!path.includes(this)) {\n this.close();\n }\n };\n\n private handleBackdropClick = () => {\n this.close();\n };\n\n private handleBackClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.close();\n };\n\n private handleTriggerClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.toggle();\n };\n\n private handleTabClick = (tab: AccountMenuTab) => {\n this.activeTab = tab;\n this.emitEvent('tab-change', { tab });\n };\n\n private handleManageClick = (event: MouseEvent) => {\n this.emitEvent('manage-click', {\n name: this.name,\n email: this.email,\n manageUrl: this.manageUrl,\n });\n };\n\n private handleSignOutClick = () => {\n this.emitEvent('sign-out', {\n email: this.email,\n });\n this.close();\n };\n\n private handleEditAvatarClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.emitEvent('edit-avatar', {\n email: this.email,\n });\n };\n\n private handleAccountItemClick = (e: CustomEvent) => {\n const detail = e.detail;\n if (!detail.action && detail.email) {\n this.name = detail.name \|\| this.name;\n this.email = detail.email;\n if (detail.avatar) this.avatar = detail.avatar;\n if (detail.initials) this.initials = detail.initials;\n }\n this.emitEvent('account-select', detail);\n };\n\n /\n Opens the account menu popover.\n /\n show() {\n if (!this.open) {\n this.open = true;\n }\n }\n\n /\n Closes the account menu popover.\n /\n close() {\n if (this.open) {\n this.open = false;\n }\n }\n\n /\n Toggles the account menu open/closed state.\n /\n toggle() {\n this.open = !this.open;\n }\n\n override render() {\n const displayInitials = this.initials \|\| (this.name ? this.name.charAt(0).toUpperCase() : 'G');\n\n const triggerAvatar = this.avatar\n ? html`<img class=\"avatar-img\" src=${this.avatar} alt=${this.name \|\| 'User Profile'} />`\n : displayInitials\n ? html`<span class=\"avatar-initials\">${displayInitials}</span>`\n : html`<md-icon name=${this.icon}></md-icon>`;\n\n const triggerContent = !this.noTrigger\n ? html`\n <div class=\"trigger-container\" @click=${this.handleTriggerClick}>\n <slot name=\"trigger\">\n <button\n type=\"button\"\n class=\"avatar-btn\"\n aria-label=${this.ariaLabelText}\n aria-expanded=${this.open ? 'true' : 'false'}\n aria-haspopup=\"dialog\"\n title=\"${this.name} (${this.email})\"\n >\n <md-ripple></md-ripple>\n <md-focus-ring></md-focus-ring>\n ${triggerAvatar}\n </button>\n </slot>\n </div>\n `\n : html`<slot name=\"trigger\" @click=${this.handleTriggerClick}></slot>`;\n\n return html`\n <div class=\"backdrop\" @click=${this.handleBackdropClick}></div>\n\n <div class=\"trigger-wrapper\">\n ${triggerContent}\n </div>\n\n <div\n class=\"popover\"\n role=\"dialog\"\n aria-modal=${this.modal ? 'true' : 'false'}\n aria-label=${this.headline \|\| this.ariaLabelText}\n aria-hidden=${this.open ? 'false' : 'true'}\n >\n <!-- Popover Header -->\n <div class=\"popover-header\">\n <div class=\"header-leading\">\n <slot name=\"back-button\">\n <md-icon-button\n class=\"back-btn\"\n variant=\"standard\"\n icon=\"arrow_back\"\n aria-label=\"Back\"\n title=\"Back\"\n @click=${this.handleBackClick}\n ></md-icon-button>\n </slot>\n ${this.headline ? html`<span class=\"headline\">${this.headline}</span>` : nothing}\n </div>\n <slot name=\"header\">\n <button\n type=\"button\"\n class=\"close-btn\"\n aria-label=\"Close account menu\"\n @click=${this.close}\n >\n <md-icon name=\"close\"></md-icon>\n </button>\n </slot>\n </div>\n\n <!-- Central Profile Card -->\n <div class=\"profile-card\">\n <div class=\"profile-avatar-wrapper\">\n <div class=\"profile-avatar\">\n ${this.avatar\n ? html`<img src=${this.avatar} alt=${this.name} />`\n : html`<span>${displayInitials}</span>`}\n </div>\n <button\n type=\"button\"\n class=\"avatar-edit-badge\"\n aria-label=\"Change profile picture\"\n title=\"Change profile picture\"\n @click=${this.handleEditAvatarClick}\n >\n <md-icon name=\"photo_camera\"></md-icon>\n </button>\n </div>\n\n <h2 class=\"profile-name\">${this.name}</h2>\n <span class=\"profile-email\">${this.email}</span>\n\n <a\n class=\"manage-btn\"\n href=${this.manageUrl \|\| 'javascript:void(0)'}\n @click=${this.handleManageClick}\n >\n <md-ripple></md-ripple>\n <md-focus-ring></md-focus-ring>\n <md-icon name=\"manage_accounts\"></md-icon>\n <span>${this.manageText}</span>\n </a>\n </div>\n\n <!-- Account Info Tabs -->\n ${this.showTabs\n ? html`\n <nav class=\"account-tabs\" role=\"tablist\" aria-label=\"Account information tabs\">\n <button\n type=\"button\"\n class=\"tab-btn ${this.activeTab === 'overview' ? 'active' : ''}\"\n role=\"tab\"\n aria-selected=${this.activeTab === 'overview' ? 'true' : 'false'}\n @click=${() => this.handleTabClick('overview')}\n >\n <md-icon name=\"badge\"></md-icon>\n <span>Overview</span>\n </button>\n <button\n type=\"button\"\n class=\"tab-btn ${this.activeTab === 'security' ? 'active' : ''}\"\n role=\"tab\"\n aria-selected=${this.activeTab === 'security' ? 'true' : 'false'}\n @click=${() => this.handleTabClick('security')}\n >\n <md-icon name=\"shield\"></md-icon>\n <span>Security</span>\n </button>\n <button\n type=\"button\"\n class=\"tab-btn ${this.activeTab === 'storage' ? 'active' : ''}\"\n role=\"tab\"\n aria-selected=${this.activeTab === 'storage' ? 'true' : 'false'}\n @click=${() => this.handleTabClick('storage')}\n >\n <md-icon name=\"cloud\"></md-icon>\n <span>Storage</span>\n </button>\n <button\n type=\"button\"\n class=\"tab-btn ${this.activeTab === 'accounts' ? 'active' : ''}\"\n role=\"tab\"\n aria-selected=${this.activeTab === 'accounts' ? 'true' : 'false'}\n @click=${() => this.handleTabClick('accounts')}\n >\n <md-icon name=\"people\"></md-icon>\n <span>Accounts</span>\n </button>\n </nav>\n `\n : nothing}\n\n <!-- Tab Panels -->\n <!-- 1. Overview Tab Panel -->\n <div class=\"tab-panel ${this.activeTab === 'overview' ? 'active' : ''}\" role=\"tabpanel\">\n <slot name=\"overview\">\n <div class=\"info-card\">\n <div class=\"info-row\">\n <div class=\"info-label\">\n <md-icon name=\"apartment\"></md-icon>\n <span>Organization</span>\n </div>\n <span class=\"info-value\">${this.organization}</span>\n </div>\n <div class=\"info-row\">\n <div class=\"info-label\">\n <md-icon name=\"engineering\"></md-icon>\n <span>Role</span>\n </div>\n <span class=\"info-value\">${this.roleTitle}</span>\n </div>\n <div class=\"info-row\">\n <div class=\"info-label\">\n <md-icon name=\"verified_user\"></md-icon>\n <span>Status</span>\n </div>\n <span class=\"info-value\">\n <span class=\"badge-chip success\">\n <md-icon name=\"check_circle\" style=\"font-size: 13px;\"></md-icon>\n ${this.status}\n </span>\n </span>\n </div>\n </div>\n </slot>\n </div>\n\n <!-- 2. Security Tab Panel -->\n <div class=\"tab-panel ${this.activeTab === 'security' ? 'active' : ''}\" role=\"tabpanel\">\n <slot name=\"security\">\n <div class=\"info-card\">\n <div class=\"info-row\">\n <div class=\"info-label\">\n <md-icon name=\"security\"></md-icon>\n <span>2-Step Verification</span>\n </div>\n <span class=\"info-value\">\n <span class=\"badge-chip success\">Enabled</span>\n </span>\n </div>\n <div class=\"info-row\">\n <div class=\"info-label\">\n <md-icon name=\"devices\"></md-icon>\n <span>Active Sessions</span>\n </div>\n <span class=\"info-value\">2 devices (PC, Mobile)</span>\n </div>\n <div class=\"info-row\">\n <div class=\"info-label\">\n <md-icon name=\"lock_reset\"></md-icon>\n <span>Password Changed</span>\n </div>\n <span class=\"info-value\">3 months ago</span>\n </div>\n </div>\n </slot>\n </div>\n\n <!-- 3. Storage Tab Panel -->\n <div class=\"tab-panel ${this.activeTab === 'storage' ? 'active' : ''}\" role=\"tabpanel\">\n <slot name=\"storage\">\n <div class=\"storage-box\">\n <div class=\"storage-header\">\n <div class=\"storage-title\">\n <md-icon name=\"cloud\"></md-icon>\n <span>Account Storage</span>\n </div>\n <span class=\"storage-meta\">${this.storageUsed} of ${this.storageTotal} used</span>\n </div>\n <div class=\"storage-bar-track\">\n <div\n class=\"storage-bar-fill\"\n style=\"width: ${Math.min(100, Math.max(0, this.storageProgress 100))}%;\"\n ></div>\n </div>\n <div class=\"storage-breakdown\">\n <div class=\"storage-item\">\n <span class=\"storage-dot\" style=\"background-color: var(--md-sys-color-primary, #6750A4);\"></span>\n <span>Files: 6.2 GB</span>\n <div class=\"storage-item\">\n <span class=\"storage-dot\" style=\"background-color: var(--md-sys-color-tertiary, #7D5260);\"></span>\n <span>Mail: 3.1 GB</span>\n </div>\n <span class=\"storage-dot\" style=\"background-color: var(--md-sys-color-secondary, #625B71);\"></span>\n <span>Media: 1.1 GB</span>\n </div>\n <div class=\"storage-item\">\n <span>Free: 4.6 GB</span>\n </div>\n </div>\n </div>\n </slot>\n </div>\n\n <!-- 4. Accounts Multi-switcher Tab Panel -->\n <div class=\"tab-panel ${this.activeTab === 'accounts' ? 'active' : ''}\" role=\"tabpanel\">\n <div class=\"accounts-list\">\n <slot name=\"accounts\">\n <md-account-item\n name=${this.name}\n email=${this.email}\n initials=${displayInitials}\n active\n ></md-account-item>\n <md-account-item\n name=\"Work Workspace\"\n email=\"franco.dev@work.corp\"\n initials=\"W\"\n ></md-account-item>\n <md-account-item\n name=\"Add another account\"\n icon=\"person_add\"\n action\n ></md-account-item>\n </slot>\n </div>\n </div>\n\n <!-- Default Slot for Custom Extensions -->\n <slot></slot>\n\n <!-- Popover Footer -->\n <div class=\"popover-footer\">\n <slot name=\"footer\">\n <button type=\"button\" class=\"signout-btn\" @click=${this.handleSignOutClick}>\n <md-ripple></md-ripple>\n <md-focus-ring></md-focus-ring>\n <md-icon name=\"logout\"></md-icon>\n <span>Sign out of all accounts</span>\n </button>\n <div class=\"footer-links\">\n <a href=\"#/privacy\">Privacy Policy</a>\n <span class=\"footer-dot\">•</span>\n <a href=\"#/terms\">Terms of Service</a>\n </div>\n </slot>\n </div>\n </div>\n `;\n }\n}\n\n// Aliases\n@customElement('md-account-drawer')\nexport class MdAccountDrawer extends MdAccountMenu {}\n\n@customElement('md-account-profile')\nexport class MdAccountProfile extends MdAccountMenu {}\n\n@customElement('md-account-profile-item')\nexport class MdAccountProfileItem extends MdAccountItem {}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'md-account-menu': MdAccountMenu;\n 'md-account-drawer': MdAccountDrawer;\n 'md-account-profile': MdAccountProfile;\n 'md-account-item': MdAccountItem;\n 'md-account-profile-item': MdAccountProfileItem;\n }\n}\n\n"],"mappings":";;;;;;;AAEA,IAAa,IAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAgpBpB,IAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAA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"}
1	+ {"version":3,"file":"account-menu-Bo7NghIm.js","names":[],"sources":["../../src/components/account-menu/account-menu.css.ts","../../src/components/account-menu/account-menu.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const accountMenuStyles = css`\n :host {\n display: inline-block;\n position: relative;\n font-family: var(--md-sys-typescale-font-family, inherit);\n }\n\n :host([hidden]) {\n display: none;\n }\n\n .trigger-container {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n\n .avatar-btn {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: var(--md-account-trigger-size, 40px);\n height: var(--md-account-trigger-size, 40px);\n border-radius: var(--md-sys-shape-corner-full, 9999px);\n background-color: var(--md-sys-color-primary-container, #EADDFF);\n color: var(--md-sys-color-on-primary-container, #21005D);\n border: 2px solid transparent;\n padding: 0;\n cursor: pointer;\n outline: none;\n font-family: inherit;\n font-size: 16px;\n font-weight: 600;\n user-select: none;\n transition: box-shadow 150ms ease, transform 150ms ease, border-color 150ms ease;\n -webkit-tap-highlight-color: transparent;\n overflow: visible;\n }\n\n .avatar-btn:hover {\n box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.3);\n border-color: var(--md-sys-color-outline-variant, #CAC4D0);\n }\n\n .avatar-btn:focus-visible {\n border-color: var(--md-sys-color-primary, #6750A4);\n }\n\n .avatar-img {\n width: 100%;\n height: 100%;\n border-radius: var(--md-sys-shape-corner-full, 9999px);\n object-fit: cover;\n }\n\n .avatar-initials {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n }\n\n .backdrop {\n display: none;\n position: fixed;\n inset: 0;\n z-index: 990;\n background-color: transparent;\n }\n\n :host([modal]) .backdrop {\n background-color: rgba(0, 0, 0, 0.32);\n backdrop-filter: blur(1px);\n }\n\n :host([open][modal]) .backdrop {\n display: block;\n }\n\n .popover {\n display: none;\n position: absolute;\n top: calc(100% + 8px);\n right: 0;\n z-index: 1000;\n width: var(--md-account-menu-width, 380px);\n max-width: calc(100vw - 24px);\n height: fit-content;\n max-height: var(--md-account-menu-max-height, none);\n box-sizing: border-box;\n padding: 0;\n border-radius: var(--md-sys-shape-corner-extra-large, 28px);\n background-color: var(--md-sys-color-surface-container-high, #ECE6F0);\n color: var(--md-sys-color-on-surface, #1D1B20);\n box-shadow: var(--md-sys-elevation-level3, 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.3));\n overflow-y: auto;\n overflow-x: hidden;\n overscroll-behavior: contain;\n scrollbar-width: thin;\n scrollbar-color: var(--md-sys-color-outline-variant, #CAC4D0) transparent;\n }\n\n :host([alignment='start']) .popover,\n :host([pivot='left']) .popover {\n right: auto;\n left: 0;\n }\n\n :host([open]) .popover {\n display: flex;\n flex-direction: column;\n animation: md-account-menu-in 150ms cubic-bezier(0.2, 0, 0, 1) forwards;\n }\n\n @keyframes md-account-menu-in {\n from {\n opacity: 0;\n transform: scale(0.92) translateY(-8px);\n }\n to {\n opacity: 1;\n transform: scale(1) translateY(0);\n }\n }\n\n /* Header Section /\n .popover-header {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n padding: 12px 16px 4px;\n box-sizing: border-box;\n }\n\n .header-leading {\n display: flex;\n align-items: center;\n gap: 8px;\n min-width: 0;\n }\n\n .back-btn,\n slot[name=\"back-button\"] {\n display: none;\n --md-icon-size: 24px;\n font-size: 24px;\n flex-shrink: 0;\n }\n\n .popover-header .headline {\n display: none;\n margin: 0;\n font-size: var(--md-sys-typescale-title-large-size, 20px);\n font-weight: 500;\n line-height: 28px;\n color: var(--md-sys-color-on-surface, #1D1B20);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .close-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n border-radius: 50%;\n background: transparent;\n border: none;\n color: var(--md-sys-color-on-surface-variant, #49454F);\n cursor: pointer;\n padding: 0;\n transition: background-color 150ms ease;\n }\n\n .close-btn:hover {\n background-color: var(--md-sys-color-surface-container-highest, rgba(0, 0, 0, 0.08));\n color: var(--md-sys-color-on-surface, #1D1B20);\n }\n\n / Profile Card (Account Centerpiece) /\n .profile-card {\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n padding: 8px 24px 20px;\n background-color: var(--md-sys-color-surface-container-lowest, #FFFFFF);\n margin: 8px 16px 12px;\n border-radius: var(--md-sys-shape-corner-large, 24px);\n border: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);\n box-sizing: border-box;\n }\n\n .profile-avatar-wrapper {\n position: relative;\n margin: 12px 0 14px;\n }\n\n .profile-avatar {\n width: 76px;\n height: 76px;\n border-radius: 50%;\n background-color: var(--md-sys-color-primary, #6750A4);\n color: var(--md-sys-color-on-primary, #FFFFFF);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 30px;\n font-weight: 600;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);\n overflow: hidden;\n }\n\n .profile-avatar img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n .avatar-edit-badge {\n position: absolute;\n bottom: -2px;\n right: -2px;\n width: 26px;\n height: 26px;\n border-radius: 50%;\n background-color: var(--md-sys-color-surface-container-highest, #E6E0E9);\n border: 2px solid var(--md-sys-color-surface-container-lowest, #FFFFFF);\n color: var(--md-sys-color-on-surface, #1D1B20);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n padding: 0;\n transition: background-color 150ms ease;\n }\n\n .avatar-edit-badge:hover {\n background-color: var(--md-sys-color-primary-container, #EADDFF);\n color: var(--md-sys-color-on-primary-container, #21005D);\n }\n\n .avatar-edit-badge md-icon {\n --md-icon-size: 16px;\n font-size: 16px;\n }\n\n .profile-name {\n font-size: 18px;\n font-weight: 600;\n line-height: 24px;\n color: var(--md-sys-color-on-surface, #1D1B20);\n margin: 0 0 4px;\n }\n\n .profile-email {\n font-size: 13px;\n color: var(--md-sys-color-on-surface-variant, #49454F);\n margin: 0 0 16px;\n }\n\n .manage-btn {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n padding: 8px 18px;\n border-radius: var(--md-sys-shape-corner-full, 9999px);\n border: 1px solid var(--md-sys-color-outline, #79747E);\n background: transparent;\n color: var(--md-sys-color-primary, #6750A4);\n font-family: inherit;\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n text-decoration: none;\n transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;\n overflow: hidden;\n -webkit-tap-highlight-color: transparent;\n }\n\n .manage-btn:hover {\n background-color: var(--md-sys-color-primary-container, rgba(103, 80, 164, 0.08));\n border-color: var(--md-sys-color-primary, #6750A4);\n }\n\n / Internal Tabs for Account Info /\n .account-tabs {\n display: flex;\n border-bottom: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);\n padding: 0 16px;\n margin-bottom: 8px;\n gap: 4px;\n }\n\n .tab-btn {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n padding: 10px 8px;\n background: transparent;\n border: none;\n border-bottom: 2px solid transparent;\n color: var(--md-sys-color-on-surface-variant, #49454F);\n font-family: inherit;\n font-size: 12px;\n font-weight: 500;\n cursor: pointer;\n transition: color 150ms ease, border-color 150ms ease;\n outline: none;\n }\n\n .tab-btn:hover {\n color: var(--md-sys-color-on-surface, #1D1B20);\n }\n\n .tab-btn.active {\n color: var(--md-sys-color-primary, #6750A4);\n border-bottom-color: var(--md-sys-color-primary, #6750A4);\n font-weight: 600;\n }\n\n .tab-btn md-icon {\n --md-icon-size: 16px;\n font-size: 16px;\n }\n\n .tab-panel {\n display: none;\n padding: 8px 16px 14px;\n box-sizing: border-box;\n }\n\n .tab-panel.active {\n display: block;\n animation: tabFadeIn 150ms ease forwards;\n }\n\n @keyframes tabFadeIn {\n from { opacity: 0; transform: translateY(4px); }\n to { opacity: 1; transform: translateY(0); }\n }\n\n / Info & Detail Rows /\n .info-card {\n background-color: var(--md-sys-color-surface-container-lowest, #FFFFFF);\n border: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);\n border-radius: var(--md-sys-shape-corner-medium, 16px);\n padding: 12px 16px;\n margin-bottom: 8px;\n box-sizing: border-box;\n }\n\n .info-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 8px 0;\n border-bottom: 1px solid var(--md-sys-color-surface-container-high, #ECE6F0);\n font-size: 13px;\n }\n\n .info-row:last-child {\n border-bottom: none;\n padding-bottom: 0;\n }\n\n .info-row:first-child {\n padding-top: 0;\n }\n\n .info-label {\n display: flex;\n align-items: center;\n gap: 8px;\n color: var(--md-sys-color-on-surface-variant, #49454F);\n }\n\n .info-label md-icon {\n --md-icon-size: 18px;\n font-size: 18px;\n color: var(--md-sys-color-primary, #6750A4);\n }\n\n .info-value {\n font-weight: 500;\n color: var(--md-sys-color-on-surface, #1D1B20);\n text-align: right;\n }\n\n .badge-chip {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 2px 8px;\n border-radius: 100px;\n font-size: 11px;\n font-weight: 600;\n background-color: var(--md-sys-color-secondary-container, #E8DEF8);\n color: var(--md-sys-color-on-secondary-container, #1D192B);\n }\n\n .badge-chip.success {\n background-color: #E8F5E9;\n color: #2E7D32;\n }\n\n / Storage Section /\n .storage-box {\n background-color: var(--md-sys-color-surface-container-lowest, #FFFFFF);\n border: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);\n border-radius: var(--md-sys-shape-corner-medium, 16px);\n padding: 16px;\n box-sizing: border-box;\n }\n\n .storage-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 10px;\n }\n\n .storage-title {\n font-size: 14px;\n font-weight: 600;\n color: var(--md-sys-color-on-surface, #1D1B20);\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .storage-title md-icon {\n --md-icon-size: 20px;\n font-size: 20px;\n color: var(--md-sys-color-primary, #6750A4);\n }\n\n .storage-meta {\n font-size: 13px;\n font-weight: 500;\n color: var(--md-sys-color-on-surface-variant, #49454F);\n }\n\n .storage-bar-track {\n width: 100%;\n height: 8px;\n border-radius: 4px;\n background-color: var(--md-sys-color-surface-container-highest, #E6E0E9);\n overflow: hidden;\n margin-bottom: 12px;\n }\n\n .storage-bar-fill {\n height: 100%;\n border-radius: 4px;\n background: linear-gradient(90deg, var(--md-sys-color-primary, #6750A4), var(--md-sys-color-tertiary, #7D5260));\n transition: width 300ms ease;\n }\n\n .storage-breakdown {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 8px;\n font-size: 12px;\n color: var(--md-sys-color-on-surface-variant, #49454F);\n }\n\n .storage-item {\n display: flex;\n align-items: center;\n gap: 6px;\n }\n\n .storage-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n }\n\n / Multi-account switcher list /\n .accounts-list {\n display: flex;\n flex-direction: column;\n gap: 4px;\n box-sizing: border-box;\n }\n\n / Footer /\n .popover-footer {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 12px;\n padding: 12px 16px 16px;\n border-top: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);\n box-sizing: border-box;\n }\n\n .signout-btn {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n width: 100%;\n padding: 10px 16px;\n border-radius: var(--md-sys-shape-corner-full, 9999px);\n background-color: var(--md-sys-color-surface-container-highest, #E6E0E9);\n border: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);\n color: var(--md-sys-color-on-surface, #1D1B20);\n font-family: inherit;\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: background-color 150ms ease, color 150ms ease;\n overflow: hidden;\n -webkit-tap-highlight-color: transparent;\n }\n\n .signout-btn:hover {\n background-color: var(--md-sys-color-error-container, #F9DEDC);\n color: var(--md-sys-color-on-error-container, #410E0B);\n border-color: var(--md-sys-color-error, #B3261E);\n }\n\n .signout-btn md-icon {\n --md-icon-size: 18px;\n font-size: 18px;\n }\n\n .footer-links {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 12px;\n font-size: 11px;\n color: var(--md-sys-color-on-surface-variant, #49454F);\n }\n\n .footer-links a {\n color: inherit;\n text-decoration: none;\n }\n\n .footer-links a:hover {\n text-decoration: underline;\n color: var(--md-sys-color-primary, #6750A4);\n }\n\n .footer-dot {\n opacity: 0.5;\n }\n\n / Responsive Fullscreen / Mobile Mode /\n @media (max-width: 768px) {\n .back-btn,\n slot[name=\"back-button\"] {\n display: inline-flex;\n }\n\n .popover-header .headline {\n display: block;\n }\n\n .popover-header {\n justify-content: space-between;\n min-height: 48px;\n padding: 12px 16px 8px;\n }\n\n :host([open]) .popover {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n width: 100vw;\n max-width: 100vw;\n height: 100vh;\n height: 100dvh;\n max-height: 100vh;\n max-height: 100dvh;\n border-radius: 0;\n box-shadow: none;\n z-index: 10000;\n padding: 0 0 env(safe-area-inset-bottom, 16px) 0;\n margin: 0;\n animation: md-account-menu-mobile-in 200ms cubic-bezier(0.2, 0, 0, 1) forwards;\n }\n\n .profile-card {\n margin: 4px 16px 12px;\n }\n }\n\n @keyframes md-account-menu-mobile-in {\n from {\n opacity: 0;\n transform: translateY(12px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n / Explicit Fullscreen Mode /\n :host([fullscreen]) .back-btn,\n :host([fullscreen]) slot[name=\"back-button\"] {\n display: inline-flex;\n }\n\n :host([fullscreen]) .popover-header .headline {\n display: block;\n }\n\n :host([fullscreen]) .popover-header {\n justify-content: space-between;\n min-height: 48px;\n padding: 12px 16px 8px;\n }\n\n :host([fullscreen][open]) .popover {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n width: 100vw;\n max-width: 100vw;\n height: 100vh;\n height: 100dvh;\n max-height: 100vh;\n max-height: 100dvh;\n border-radius: 0;\n box-shadow: none;\n z-index: 10000;\n padding: 0 0 env(safe-area-inset-bottom, 16px) 0;\n margin: 0;\n }\n\n :host([fullscreen]) .profile-card {\n margin: 4px 16px 12px;\n }\n`;\n\nexport const accountItemStyles = css`\n :host {\n display: block;\n box-sizing: border-box;\n font-family: var(--md-sys-typescale-font-family, inherit);\n }\n\n :host([hidden]) {\n display: none;\n }\n\n .item {\n position: relative;\n display: flex;\n align-items: center;\n gap: 12px;\n width: 100%;\n padding: 10px 12px;\n border-radius: var(--md-sys-shape-corner-medium, 14px);\n background: transparent;\n border: none;\n color: var(--md-sys-color-on-surface, #1D1B20);\n text-align: left;\n cursor: pointer;\n font-family: inherit;\n text-decoration: none;\n transition: background-color 150ms ease;\n box-sizing: border-box;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n }\n\n .item:hover {\n background-color: var(--md-sys-color-surface-container-highest, rgba(0, 0, 0, 0.06));\n }\n\n :host([active]) .item {\n background-color: var(--md-sys-color-secondary-container, #E8DEF8);\n color: var(--md-sys-color-on-secondary-container, #1D192B);\n }\n\n :host([disabled]) .item {\n opacity: 0.38;\n cursor: not-allowed;\n pointer-events: none;\n }\n\n .item-avatar {\n width: 36px;\n height: 36px;\n border-radius: 50%;\n background-color: var(--md-sys-color-primary-container, #EADDFF);\n color: var(--md-sys-color-on-primary-container, #21005D);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 14px;\n font-weight: 600;\n flex-shrink: 0;\n overflow: hidden;\n }\n\n .item-avatar img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n .item-content {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n }\n\n .item-name {\n font-size: 13.5px;\n font-weight: 500;\n color: var(--md-sys-color-on-surface, #1D1B20);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .item-email {\n font-size: 12px;\n color: var(--md-sys-color-on-surface-variant, #49454F);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .item-trailing {\n display: flex;\n align-items: center;\n gap: 6px;\n flex-shrink: 0;\n }\n\n .check-icon {\n color: var(--md-sys-color-primary, #6750A4);\n font-size: 20px;\n }\n\n .action-icon {\n color: var(--md-sys-color-on-surface-variant, #49454F);\n font-size: 20px;\n }\n`;\n\n","import { html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport '../../internal/ripple/ripple.js';\nimport '../../internal/focus-ring/focus-ring.js';\nimport '../icon/icon.js';\nimport '../icon-button/icon-button.js';\nimport { accountMenuStyles, accountItemStyles } from './account-menu.css.js';\n\nexport type AccountMenuAlignment = 'start' \| 'end';\nexport type AccountMenuPivot = 'left' \| 'right';\nexport type AccountMenuTab = 'overview' \| 'security' \| 'storage' \| 'accounts';\n\n/\n Material Design 3 Account Item component.\n * Represents a single account profile in the account switcher or an account action item.\n \n @slot icon - Custom icon or graphic.\n * @slot - Default slot for account name/details.\n * @slot trailing - Custom trailing content or checkmark.\n /\n@customElement('md-account-item')\nexport class MdAccountItem extends MdBaseElement {\n static override styles = [MdBaseElement.styles, accountItemStyles];\n\n @property({ type: String })\n name = '';\n\n @property({ type: String })\n email = '';\n\n @property({ type: String })\n avatar = '';\n\n @property({ type: String })\n initials = '';\n\n @property({ type: String })\n icon = '';\n\n @property({ type: String })\n badge = '';\n\n @property({ type: String })\n href = '';\n\n @property({ type: String })\n target = '';\n\n @property({ type: Boolean, reflect: true })\n active = false;\n\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n @property({ type: Boolean })\n action = false;\n\n private handleClick = (event: MouseEvent) => {\n if (this.disabled) {\n event.preventDefault();\n event.stopImmediatePropagation();\n return;\n }\n\n this.emitEvent('account-click', {\n name: this.name,\n email: this.email,\n avatar: this.avatar,\n initials: this.initials,\n active: this.active,\n action: this.action,\n });\n };\n\n override render() {\n const displayInitials = this.initials \|\| (this.name ? this.name.charAt(0).toUpperCase() : '');\n\n const avatarContent = this.avatar\n ? html`<img class=\"item-avatar-img\" src=${this.avatar} alt=${this.name \|\| 'Account avatar'} />`\n : this.icon\n ? html`<md-icon name=${this.icon}></md-icon>`\n : displayInitials\n ? html`<span>${displayInitials}</span>`\n : html`<md-icon name=\"person\"></md-icon>`;\n\n const trailingContent = this.active\n ? html`<md-icon name=\"check\" class=\"check-icon\"></md-icon>`\n : this.action\n ? html`<md-icon name=\"chevron_right\" class=\"action-icon\"></md-icon>`\n : nothing;\n\n const inner = html`\n <md-ripple ?disabled=${this.disabled}></md-ripple>\n <md-focus-ring></md-focus-ring>\n\n <div class=\"item-avatar\">\n <slot name=\"icon\">${avatarContent}</slot>\n </div>\n\n <div class=\"item-content\">\n <span class=\"item-name\"><slot name=\"name\">${this.name \|\| 'Account'}</slot></span>\n ${this.email ? html`<span class=\"item-email\"><slot name=\"email\">${this.email}</slot></span>` : nothing}\n </div>\n\n <div class=\"item-trailing\">\n <slot name=\"trailing\">${trailingContent}</slot>\n </div>\n `;\n\n if (this.href) {\n return html`\n <a\n class=\"item\"\n href=${this.disabled ? nothing : this.href}\n target=${this.target \|\| nothing}\n aria-disabled=${this.disabled ? 'true' : nothing}\n tabindex=${this.disabled ? '-1' : '0'}\n @click=${this.handleClick}\n >\n ${inner}\n </a>\n `;\n }\n\n return html`\n <button\n class=\"item\"\n type=\"button\"\n tabindex=${this.disabled ? '-1' : '0'}\n aria-disabled=${this.disabled ? 'true' : nothing}\n ?disabled=${this.disabled}\n @click=${this.handleClick}\n >\n ${inner}\n </button>\n `;\n }\n}\n\n/\n Material Design 3 Account Menu (Account Profile Switcher) component.\n * Displays a profile menu with rich user info, storage usage, security overview, and multi-account switcher.\n \n @slot trigger - Custom trigger element replacing the default avatar button.\n * @slot header - Custom header element.\n * @slot overview - Custom overview info content.\n * @slot security - Custom security info content.\n * @slot storage - Custom storage info content.\n * @slot accounts - Container for md-account-item instances.\n * @slot footer - Custom footer content.\n /\n@customElement('md-account-menu')\nexport class MdAccountMenu extends MdBaseElement {\n static override styles = [MdBaseElement.styles, accountMenuStyles];\n\n @property({ type: Boolean, reflect: true })\n open = false;\n\n @property({ type: String })\n name = 'Franco Fantomius';\n\n @property({ type: String })\n email = 'franco.fantomius@example.com';\n\n @property({ type: String })\n avatar = '';\n\n @property({ type: String })\n initials = '';\n\n @property({ type: String })\n icon = 'account_circle';\n\n @property({ type: String, attribute: 'headline' })\n headline = 'Account';\n\n @property({ type: String, attribute: 'manage-text' })\n manageText = 'Manage your Account';\n\n @property({ type: String, attribute: 'manage-url' })\n manageUrl = '';\n\n @property({ type: String, attribute: 'organization' })\n organization = 'Material Components';\n\n @property({ type: String, attribute: 'role-title' })\n roleTitle = 'Lead Architect';\n\n @property({ type: String, attribute: 'status' })\n status = 'Active';\n\n @property({ type: String, attribute: 'storage-used' })\n storageUsed = '10.4 GB';\n\n @property({ type: String, attribute: 'storage-total' })\n storageTotal = '15 GB';\n\n @property({ type: Number, attribute: 'storage-progress' })\n storageProgress = 0.69;\n\n @property({ type: String, attribute: 'security-status' })\n securityStatus = 'Protected';\n\n @property({ type: String, attribute: 'aria-label' })\n ariaLabelText = 'Account info';\n\n @property({ type: Boolean, attribute: 'no-trigger' })\n noTrigger = false;\n\n get trigger(): boolean {\n return !this.noTrigger;\n }\n\n set trigger(value: boolean) {\n this.noTrigger = !value;\n this.requestUpdate('noTrigger');\n }\n\n @property({ type: String, reflect: true })\n alignment: AccountMenuAlignment = 'end';\n\n @property({ type: String, reflect: true })\n pivot: AccountMenuPivot = 'right';\n\n @property({ type: Boolean, reflect: true })\n modal = false;\n\n @property({ type: Boolean, reflect: true })\n fullscreen = false;\n\n @property({ type: Boolean, attribute: 'show-tabs' })\n showTabs = true;\n\n @state()\n activeTab: AccountMenuTab = 'overview';\n\n override connectedCallback() {\n super.connectedCallback();\n window.addEventListener('keydown', this.handleKeyDown);\n document.addEventListener('pointerdown', this.handleDocumentClick);\n this.addEventListener('account-click', this.handleAccountItemClick as EventListener);\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n window.removeEventListener('keydown', this.handleKeyDown);\n document.removeEventListener('pointerdown', this.handleDocumentClick);\n this.removeEventListener('account-click', this.handleAccountItemClick as EventListener);\n }\n\n override updated(changedProperties: Map<string, unknown>) {\n super.updated(changedProperties);\n if (changedProperties.has('open')) {\n if (this.open) {\n this.emitEvent('open');\n } else {\n this.emitEvent('close');\n }\n }\n }\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape' && this.open) {\n this.close();\n }\n };\n\n private handleDocumentClick = (event: MouseEvent \| PointerEvent) => {\n if (!this.open) return;\n const path = event.composedPath();\n if (!path.includes(this)) {\n this.close();\n }\n };\n\n private handleBackdropClick = () => {\n this.close();\n };\n\n private handleBackClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.close();\n };\n\n private handleTriggerClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.toggle();\n };\n\n private handleTabClick = (tab: AccountMenuTab) => {\n this.activeTab = tab;\n this.emitEvent('tab-change', { tab });\n };\n\n private handleManageClick = (event: MouseEvent) => {\n this.emitEvent('manage-click', {\n name: this.name,\n email: this.email,\n manageUrl: this.manageUrl,\n });\n };\n\n private handleSignOutClick = () => {\n this.emitEvent('sign-out', {\n email: this.email,\n });\n this.close();\n };\n\n private handleEditAvatarClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.emitEvent('edit-avatar', {\n email: this.email,\n });\n };\n\n private handleAccountItemClick = (e: CustomEvent) => {\n const detail = e.detail;\n if (!detail.action && detail.email) {\n this.name = detail.name \|\| this.name;\n this.email = detail.email;\n if (detail.avatar) this.avatar = detail.avatar;\n if (detail.initials) this.initials = detail.initials;\n }\n this.emitEvent('account-select', detail);\n };\n\n /\n Opens the account menu popover.\n /\n show() {\n if (!this.open) {\n this.open = true;\n }\n }\n\n /\n Closes the account menu popover.\n /\n close() {\n if (this.open) {\n this.open = false;\n }\n }\n\n /\n Toggles the account menu open/closed state.\n /\n toggle() {\n this.open = !this.open;\n }\n\n override render() {\n const displayInitials = this.initials \|\| (this.name ? this.name.charAt(0).toUpperCase() : 'G');\n\n const triggerAvatar = this.avatar\n ? html`<img class=\"avatar-img\" src=${this.avatar} alt=${this.name \|\| 'User Profile'} />`\n : displayInitials\n ? html`<span class=\"avatar-initials\">${displayInitials}</span>`\n : html`<md-icon name=${this.icon}></md-icon>`;\n\n const triggerContent = !this.noTrigger\n ? html`\n <div class=\"trigger-container\" @click=${this.handleTriggerClick}>\n <slot name=\"trigger\">\n <button\n type=\"button\"\n class=\"avatar-btn\"\n aria-label=${this.ariaLabelText}\n aria-expanded=${this.open ? 'true' : 'false'}\n aria-haspopup=\"dialog\"\n title=\"${this.name} (${this.email})\"\n >\n <md-ripple></md-ripple>\n <md-focus-ring></md-focus-ring>\n ${triggerAvatar}\n </button>\n </slot>\n </div>\n `\n : html`<slot name=\"trigger\" @click=${this.handleTriggerClick}></slot>`;\n\n return html`\n <div class=\"backdrop\" @click=${this.handleBackdropClick}></div>\n\n <div class=\"trigger-wrapper\">\n ${triggerContent}\n </div>\n\n <div\n class=\"popover\"\n role=\"dialog\"\n aria-modal=${this.modal ? 'true' : 'false'}\n aria-label=${this.headline \|\| this.ariaLabelText}\n aria-hidden=${this.open ? 'false' : 'true'}\n >\n <!-- Popover Header -->\n <div class=\"popover-header\">\n <div class=\"header-leading\">\n <slot name=\"back-button\">\n <md-icon-button\n class=\"back-btn\"\n variant=\"standard\"\n icon=\"arrow_back\"\n aria-label=\"Back\"\n title=\"Back\"\n @click=${this.handleBackClick}\n ></md-icon-button>\n </slot>\n ${this.headline ? html`<span class=\"headline\">${this.headline}</span>` : nothing}\n </div>\n <slot name=\"header\">\n <button\n type=\"button\"\n class=\"close-btn\"\n aria-label=\"Close account menu\"\n @click=${this.close}\n >\n <md-icon name=\"close\"></md-icon>\n </button>\n </slot>\n </div>\n\n <!-- Central Profile Card -->\n <div class=\"profile-card\">\n <div class=\"profile-avatar-wrapper\">\n <div class=\"profile-avatar\">\n ${this.avatar\n ? html`<img src=${this.avatar} alt=${this.name} />`\n : html`<span>${displayInitials}</span>`}\n </div>\n <button\n type=\"button\"\n class=\"avatar-edit-badge\"\n aria-label=\"Change profile picture\"\n title=\"Change profile picture\"\n @click=${this.handleEditAvatarClick}\n >\n <md-icon name=\"photo_camera\"></md-icon>\n </button>\n </div>\n\n <h2 class=\"profile-name\">${this.name}</h2>\n <span class=\"profile-email\">${this.email}</span>\n\n <a\n class=\"manage-btn\"\n href=${this.manageUrl \|\| 'javascript:void(0)'}\n @click=${this.handleManageClick}\n >\n <md-ripple></md-ripple>\n <md-focus-ring></md-focus-ring>\n <md-icon name=\"manage_accounts\"></md-icon>\n <span>${this.manageText}</span>\n </a>\n </div>\n\n <!-- Account Info Tabs -->\n ${this.showTabs\n ? html`\n <nav class=\"account-tabs\" role=\"tablist\" aria-label=\"Account information tabs\">\n <button\n type=\"button\"\n class=\"tab-btn ${this.activeTab === 'overview' ? 'active' : ''}\"\n role=\"tab\"\n aria-selected=${this.activeTab === 'overview' ? 'true' : 'false'}\n @click=${() => this.handleTabClick('overview')}\n >\n <md-icon name=\"badge\"></md-icon>\n <span>Overview</span>\n </button>\n <button\n type=\"button\"\n class=\"tab-btn ${this.activeTab === 'security' ? 'active' : ''}\"\n role=\"tab\"\n aria-selected=${this.activeTab === 'security' ? 'true' : 'false'}\n @click=${() => this.handleTabClick('security')}\n >\n <md-icon name=\"shield\"></md-icon>\n <span>Security</span>\n </button>\n <button\n type=\"button\"\n class=\"tab-btn ${this.activeTab === 'storage' ? 'active' : ''}\"\n role=\"tab\"\n aria-selected=${this.activeTab === 'storage' ? 'true' : 'false'}\n @click=${() => this.handleTabClick('storage')}\n >\n <md-icon name=\"cloud\"></md-icon>\n <span>Storage</span>\n </button>\n <button\n type=\"button\"\n class=\"tab-btn ${this.activeTab === 'accounts' ? 'active' : ''}\"\n role=\"tab\"\n aria-selected=${this.activeTab === 'accounts' ? 'true' : 'false'}\n @click=${() => this.handleTabClick('accounts')}\n >\n <md-icon name=\"people\"></md-icon>\n <span>Accounts</span>\n </button>\n </nav>\n `\n : nothing}\n\n <!-- Tab Panels -->\n <!-- 1. Overview Tab Panel -->\n <div class=\"tab-panel ${this.activeTab === 'overview' ? 'active' : ''}\" role=\"tabpanel\">\n <slot name=\"overview\">\n <div class=\"info-card\">\n <div class=\"info-row\">\n <div class=\"info-label\">\n <md-icon name=\"apartment\"></md-icon>\n <span>Organization</span>\n </div>\n <span class=\"info-value\">${this.organization}</span>\n </div>\n <div class=\"info-row\">\n <div class=\"info-label\">\n <md-icon name=\"engineering\"></md-icon>\n <span>Role</span>\n </div>\n <span class=\"info-value\">${this.roleTitle}</span>\n </div>\n <div class=\"info-row\">\n <div class=\"info-label\">\n <md-icon name=\"verified_user\"></md-icon>\n <span>Status</span>\n </div>\n <span class=\"info-value\">\n <span class=\"badge-chip success\">\n <md-icon name=\"check_circle\" style=\"font-size: 13px;\"></md-icon>\n ${this.status}\n </span>\n </span>\n </div>\n </div>\n </slot>\n </div>\n\n <!-- 2. Security Tab Panel -->\n <div class=\"tab-panel ${this.activeTab === 'security' ? 'active' : ''}\" role=\"tabpanel\">\n <slot name=\"security\">\n <div class=\"info-card\">\n <div class=\"info-row\">\n <div class=\"info-label\">\n <md-icon name=\"security\"></md-icon>\n <span>2-Step Verification</span>\n </div>\n <span class=\"info-value\">\n <span class=\"badge-chip success\">Enabled</span>\n </span>\n </div>\n <div class=\"info-row\">\n <div class=\"info-label\">\n <md-icon name=\"devices\"></md-icon>\n <span>Active Sessions</span>\n </div>\n <span class=\"info-value\">2 devices (PC, Mobile)</span>\n </div>\n <div class=\"info-row\">\n <div class=\"info-label\">\n <md-icon name=\"lock_reset\"></md-icon>\n <span>Password Changed</span>\n </div>\n <span class=\"info-value\">3 months ago</span>\n </div>\n </div>\n </slot>\n </div>\n\n <!-- 3. Storage Tab Panel -->\n <div class=\"tab-panel ${this.activeTab === 'storage' ? 'active' : ''}\" role=\"tabpanel\">\n <slot name=\"storage\">\n <div class=\"storage-box\">\n <div class=\"storage-header\">\n <div class=\"storage-title\">\n <md-icon name=\"cloud\"></md-icon>\n <span>Account Storage</span>\n </div>\n <span class=\"storage-meta\">${this.storageUsed} of ${this.storageTotal} used</span>\n </div>\n <div class=\"storage-bar-track\">\n <div\n class=\"storage-bar-fill\"\n style=\"width: ${Math.min(100, Math.max(0, this.storageProgress 100))}%;\"\n ></div>\n </div>\n <div class=\"storage-breakdown\">\n <div class=\"storage-item\">\n <span class=\"storage-dot\" style=\"background-color: var(--md-sys-color-primary, #6750A4);\"></span>\n <span>Files: 6.2 GB</span>\n <div class=\"storage-item\">\n <span class=\"storage-dot\" style=\"background-color: var(--md-sys-color-tertiary, #7D5260);\"></span>\n <span>Mail: 3.1 GB</span>\n </div>\n <span class=\"storage-dot\" style=\"background-color: var(--md-sys-color-secondary, #625B71);\"></span>\n <span>Media: 1.1 GB</span>\n </div>\n <div class=\"storage-item\">\n <span>Free: 4.6 GB</span>\n </div>\n </div>\n </div>\n </slot>\n </div>\n\n <!-- 4. Accounts Multi-switcher Tab Panel -->\n <div class=\"tab-panel ${this.activeTab === 'accounts' ? 'active' : ''}\" role=\"tabpanel\">\n <div class=\"accounts-list\">\n <slot name=\"accounts\">\n <md-account-item\n name=${this.name}\n email=${this.email}\n initials=${displayInitials}\n active\n ></md-account-item>\n <md-account-item\n name=\"Work Workspace\"\n email=\"franco.dev@work.corp\"\n initials=\"W\"\n ></md-account-item>\n <md-account-item\n name=\"Add another account\"\n icon=\"person_add\"\n action\n ></md-account-item>\n </slot>\n </div>\n </div>\n\n <!-- Default Slot for Custom Extensions -->\n <slot></slot>\n\n <!-- Popover Footer -->\n <div class=\"popover-footer\">\n <slot name=\"footer\">\n <button type=\"button\" class=\"signout-btn\" @click=${this.handleSignOutClick}>\n <md-ripple></md-ripple>\n <md-focus-ring></md-focus-ring>\n <md-icon name=\"logout\"></md-icon>\n <span>Sign out of all accounts</span>\n </button>\n <div class=\"footer-links\">\n <a href=\"#/privacy\">Privacy Policy</a>\n <span class=\"footer-dot\">•</span>\n <a href=\"#/terms\">Terms of Service</a>\n </div>\n </slot>\n </div>\n </div>\n `;\n }\n}\n\n// Aliases\n@customElement('md-account-drawer')\nexport class MdAccountDrawer extends MdAccountMenu {}\n\n@customElement('md-account-profile')\nexport class MdAccountProfile extends MdAccountMenu {}\n\n@customElement('md-account-profile-item')\nexport class MdAccountProfileItem extends MdAccountItem {}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'md-account-menu': MdAccountMenu;\n 'md-account-drawer': MdAccountDrawer;\n 'md-account-profile': MdAccountProfile;\n 'md-account-item': MdAccountItem;\n 'md-account-profile-item': MdAccountProfileItem;\n }\n}\n\n"],"mappings":"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"}