Mercurial

comparison design_system/src/components/alert.js @ 251:117c4d53c9a4

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[ui] Add HTML-first Web Component system Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Tue, 04 Aug 2026 09:14:57 -0700
parents
children 2b6e732087ff
comparison
equal deleted inserted replaced
250:745fd127b2a1 251:117c4d53c9a4
1 export class ZenAlert extends HTMLElement {
2 static get observedAttributes() {
3 return ["dismissible", "tone"];
4 }
5
6 connectedCallback() {
7 if (!this._observer) {
8 this._observer = new MutationObserver(() => this.sync());
9 }
10 this._observer.observe(this, { childList: true });
11 this.sync();
12 }
13
14 disconnectedCallback() {
15 this._observer?.disconnect();
16 this.unbindDismissControl();
17 }
18
19 attributeChangedCallback() {
20 this.sync();
21 }
22
23 unbindDismissControl() {
24 if (this._dismissControl && this._dismissHandler) {
25 this._dismissControl.removeEventListener(
26 "click",
27 this._dismissHandler,
28 );
29 }
30 this._dismissControl = null;
31 this._dismissHandler = null;
32 }
33
34 sync() {
35 this.setAttribute(
36 "role",
37 this.getAttribute("tone") === "danger" ? "alert" : "status",
38 );
39
40 let dismiss = this.querySelector(":scope > [data-zen-dismiss]");
41 if (!this.hasAttribute("dismissible")) {
42 this.unbindDismissControl();
43 if (dismiss?.dataset.zenGenerated === "true") dismiss.remove();
44 return;
45 }
46
47 if (!dismiss) {
48 dismiss = document.createElement("button");
49 dismiss.type = "button";
50 dismiss.dataset.zenDismiss = "";
51 dismiss.dataset.zenGenerated = "true";
52 dismiss.setAttribute("aria-label", "Dismiss message");
53 dismiss.textContent = "×";
54 this.append(dismiss);
55 }
56 if (dismiss === this._dismissControl) return;
57
58 this.unbindDismissControl();
59 this._dismissControl = dismiss;
60 this._dismissHandler = () => {
61 this.dispatchEvent(new CustomEvent("zen-dismiss", {
62 bubbles: true,
63 composed: true,
64 }));
65 this.remove();
66 };
67 dismiss.addEventListener("click", this._dismissHandler);
68 }
69 }
70
71 if (!customElements.get("zen-alert")) {
72 customElements.define("zen-alert", ZenAlert);
73 }