nichoth.com
forked from
grain.social/grain-pwa
WIP PWA for Grain
chadtmiller.com
1import { LitElement, html, css } from 'lit';
2import './grain-icon.js';
3
4export class GrainCloseButton extends LitElement {
5 static styles = css`
6 :host {
7 display: inline-flex;
8 }
9 button {
10 display: flex;
11 align-items: center;
12 justify-content: center;
13 background: none;
14 border: none;
15 padding: var(--space-xs);
16 cursor: pointer;
17 color: var(--color-text-secondary);
18 touch-action: manipulation;
19 }
20 button:hover {
21 color: var(--color-text-primary);
22 }
23 `;
24
25 #handleClick() {
26 this.dispatchEvent(new CustomEvent('close', {
27 bubbles: true,
28 composed: true
29 }));
30 }
31
32 render() {
33 return html`
34 <button type="button" @click=${this.#handleClick} aria-label="Close">
35 <grain-icon name="close" size="20"></grain-icon>
36 </button>
37 `;
38 }
39}
40
41customElements.define('grain-close-button', GrainCloseButton);