pragma-views2/webcomponents/pragma-app-bar/pragma-app-bar.html

<template id="pragma-appbar">
    <header role="banner">
        <button id="app-bar-button">
            <svg width="26" height="26" xmlns="http://www.w3.org/2000/svg" class="app-bar-icon">
                <g fill="none" fill-rule="evenodd">
                    <path stroke-opacity=".008" stroke="#000" stroke-width=".667" d="M1 1h24v24H1z" />
                    <path d="M4 19h18v-2H4v2zm0-5h18v-2H4v2zm0-7v2h18V7H4z" fill="#FFF" />
                </g>
            </svg>
        </button>

        <h1 id="appTitle">App Title</h1>

        <button>
            <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" class="app-bar-icon">
                <path d="M12 22c1.1 0 2-.9 2-2h-4a2 2 0 0 0 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/>
            </svg>
        </button>

        <button id="assistant-button">
            <svg width="26" height="26" xmlns="http://www.w3.org/2000/svg" class="app-bar-icon">
                <g fill="none" fill-rule="evenodd">
                    <path stroke-opacity=".008" stroke="#000" stroke-width=".667" d="M1 1h24v24H1z" />
                    <path d="M21.725 15.956c-1.093 3.582-4.999 6.027-8.633 6.027A9.09 9.09 0 0 1 4 12.893c0-.987.182-2.065.493-2.998 1.006-3.016 3.682-5.24 6.747-5.891v3.8a5.418 5.418 0 0 0-3.57 5.088 5.42 5.42 0 0 0 5.422 5.42 5.416 5.416 0 0 0 5.084-3.558h3.82a8.84 8.84 0 0 1-.271 1.202z"
                          fill="#FFF" />
                    <path fill="#FFD12D" d="M13.692 4v3.672h4.538v4.574h3.708V4h-8.246z" />
                </g>
            </svg>
        </button>
        <button id="errors-button">
            <svg width="26" height="26" xmlns="http://www.w3.org/2000/svg" class="app-bar-icon">
                <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>
            </svg>
            <div id="errors-arrow">
                <svg width="26" height="26"  viewBox="0 0 40 20">
                    <path d="M0 0 L20 20 L40 0 Z" fill="var(--color-brand)"/>
                    <path d="M0 0 L20 20 L40 0 Z" fill="var(--color-ui-1-50)" />
                </svg>
            </div>
        </button>
    </header>
</template>