DevToolbarAuditListItem Class — astro Architecture

Source Code

packages/astro/src/runtime/client/dev-toolbar/apps/audit/ui/audit-list-item.ts lines 1–146

export class DevToolbarAuditListItem extends HTMLElement {
	clickAction?: () => void | (() => Promise<void>);
	shadowRoot: ShadowRoot;
	isManualFocus: boolean;

	constructor() {
		super();
		this.shadowRoot = this.attachShadow({ mode: 'open' });
		this.isManualFocus = false;

		this.shadowRoot.innerHTML = `
			<style>
				:host>button, :host>div {
					box-sizing: border-box;
					padding: 16px;
					background: transparent;
					border: none;
					border-bottom: 1px solid #1F2433;
					text-decoration: none;
					width: 100%;
	    		height: 100%;
				}

				h1, h2, h3, h4, h5, h6 {
					color: #fff;
					font-weight: 600;
				}

				:host>button:hover, :host([hovered])>button {
					background: #FFFFFF20;
				}

				svg {
					display: block;
					margin: 0 auto;
				}

			:host>button#astro-overlay-card {
			  text-align: left;
				box-shadow: none;
				display: flex;
				align-items: center;
				overflow: hidden;
				gap: 8px;
			}

			:host(:not([active]))>button:hover {
			  cursor: pointer;
			}

			.extended-info {
				display: none;
				color: white;
				font-size: 14px;
			}

			.extended-info hr {
				border: 1px solid rgba(27, 30, 36, 1);
			}

			:host([active]) .extended-info {
				display: block;
				position: absolute;
				height: 100%;
				top: 98px;
				height: calc(100% - 98px);
				background: #0d0e12;
				user-select: text;
				overflow: auto;
				border: none;
				z-index: 1000000000;
				flex-direction: column;
				line-height: 1.25rem;
			}

			:host([active])>button#astro-overlay-card {
				display: none;
			}

			.audit-title {
				margin: 0;