@wral/active-alerts 0.2.0 → 0.2.2

package/dist/define.mjs

@@ -1,4 +1,4 @@
-import { W as t } from "./wral-active-alerts-LMZOZ_Es.js";
+import { W as t } from "./wral-active-alerts-Cm01hLhV.js";
 function i() {
   const e = globalThis?.customElements;
   e && (e.get("wral-active-alerts") || e.define("wral-active-alerts", t));

package/dist/define.standalone.js

@@ -3,7 +3,7 @@
  * Copyright 2019 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const H = globalThis, z = H.ShadowRoot && (H.ShadyCSS === void 0 || H.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, j = Symbol(), V = /* @__PURE__ */ new WeakMap();
+const k = globalThis, L = k.ShadowRoot && (k.ShadyCSS === void 0 || k.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, j = Symbol(), V = /* @__PURE__ */ new WeakMap();
 let tt = class {
   constructor(t, e, s) {
     if (this._$cssResult$ = !0, s !== j) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
@@ -12,7 +12,7 @@ let tt = class {
   get styleSheet() {
     let t = this.o;
     const e = this.t;
-    if (z && t === void 0) {
+    if (L && t === void 0) {
       const s = e !== void 0 && e.length === 1;
       s && (t = V.get(e)), t === void 0 && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), s && V.set(e, t));
     }
@@ -30,12 +30,12 @@ const at = (i) => new tt(typeof i == "string" ? i : i + "", void 0, j), lt = (i,
   })(r) + i[n + 1]), i[0]);
   return new tt(e, i, j);
 }, ht = (i, t) => {
-  if (z) i.adoptedStyleSheets = t.map(((e) => e instanceof CSSStyleSheet ? e : e.styleSheet));
+  if (L) i.adoptedStyleSheets = t.map(((e) => e instanceof CSSStyleSheet ? e : e.styleSheet));
   else for (const e of t) {
-    const s = document.createElement("style"), r = H.litNonce;
+    const s = document.createElement("style"), r = k.litNonce;
     r !== void 0 && s.setAttribute("nonce", r), s.textContent = e.cssText, i.appendChild(s);
   }
-}, q = z ? (i) => i : (i) => i instanceof CSSStyleSheet ? ((t) => {
+}, q = L ? (i) => i : (i) => i instanceof CSSStyleSheet ? ((t) => {
   let e = "";
   for (const s of t.cssRules) e += s.cssText;
   return at(e);
@@ -45,10 +45,10 @@ const at = (i) => new tt(typeof i == "string" ? i : i + "", void 0, j), lt = (i,
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const { is: ct, defineProperty: dt, getOwnPropertyDescriptor: pt, getOwnPropertyNames: ut, getOwnPropertySymbols: ft, getPrototypeOf: $t } = Object, M = globalThis, F = M.trustedTypes, mt = F ? F.emptyScript : "", gt = M.reactiveElementPolyfillSupport, x = (i, t) => i, L = { toAttribute(i, t) {
+const { is: ct, defineProperty: dt, getOwnPropertyDescriptor: pt, getOwnPropertyNames: ut, getOwnPropertySymbols: ft, getPrototypeOf: mt } = Object, I = globalThis, F = I.trustedTypes, $t = F ? F.emptyScript : "", gt = I.reactiveElementPolyfillSupport, x = (i, t) => i, z = { toAttribute(i, t) {
   switch (t) {
     case Boolean:
-      i = i ? mt : null;
+      i = i ? $t : null;
       break;
     case Object:
     case Array:
@@ -73,8 +73,8 @@ const { is: ct, defineProperty: dt, getOwnPropertyDescriptor: pt, getOwnProperty
       }
   }
   return e;
-} }, et = (i, t) => !ct(i, t), K = { attribute: !0, type: String, converter: L, reflect: !1, useDefault: !1, hasChanged: et };
-Symbol.metadata ??= Symbol("metadata"), M.litPropertyMetadata ??= /* @__PURE__ */ new WeakMap();
+} }, et = (i, t) => !ct(i, t), K = { attribute: !0, type: String, converter: z, reflect: !1, useDefault: !1, hasChanged: et };
+Symbol.metadata ??= Symbol("metadata"), I.litPropertyMetadata ??= /* @__PURE__ */ new WeakMap();
 let b = class extends HTMLElement {
   static addInitializer(t) {
     this._$Ei(), (this.l ??= []).push(t);
@@ -104,7 +104,7 @@ let b = class extends HTMLElement {
   }
   static _$Ei() {
     if (this.hasOwnProperty(x("elementProperties"))) return;
-    const t = $t(this);
+    const t = mt(this);
     t.finalize(), t.l !== void 0 && (this.l = [...t.l]), this.elementProperties = new Map(t.elementProperties);
   }
   static finalize() {
@@ -172,14 +172,14 @@ let b = class extends HTMLElement {
   _$ET(t, e) {
     const s = this.constructor.elementProperties.get(t), r = this.constructor._$Eu(t, s);
     if (r !== void 0 && s.reflect === !0) {
-      const n = (s.converter?.toAttribute !== void 0 ? s.converter : L).toAttribute(e, s.type);
+      const n = (s.converter?.toAttribute !== void 0 ? s.converter : z).toAttribute(e, s.type);
       this._$Em = t, n == null ? this.removeAttribute(r) : this.setAttribute(r, n), this._$Em = null;
     }
   }
   _$AK(t, e) {
     const s = this.constructor, r = s._$Eh.get(t);
     if (r !== void 0 && this._$Em !== r) {
-      const n = s.getPropertyOptions(r), o = typeof n.converter == "function" ? { fromAttribute: n.converter } : n.converter?.fromAttribute !== void 0 ? n.converter : L;
+      const n = s.getPropertyOptions(r), o = typeof n.converter == "function" ? { fromAttribute: n.converter } : n.converter?.fromAttribute !== void 0 ? n.converter : z;
       this._$Em = r;
       const c = o.fromAttribute(e, n.type);
       this[r] = c ?? this._$Ej?.get(r) ?? c, this._$Em = null;
@@ -256,15 +256,15 @@ let b = class extends HTMLElement {
   firstUpdated(t) {
   }
 };
-b.elementStyles = [], b.shadowRootOptions = { mode: "open" }, b[x("elementProperties")] = /* @__PURE__ */ new Map(), b[x("finalized")] = /* @__PURE__ */ new Map(), gt?.({ ReactiveElement: b }), (M.reactiveElementVersions ??= []).push("2.1.1");
+b.elementStyles = [], b.shadowRootOptions = { mode: "open" }, b[x("elementProperties")] = /* @__PURE__ */ new Map(), b[x("finalized")] = /* @__PURE__ */ new Map(), gt?.({ ReactiveElement: b }), (I.reactiveElementVersions ??= []).push("2.1.1");
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const D = globalThis, I = D.trustedTypes, J = I ? I.createPolicy("lit-html", { createHTML: (i) => i }) : void 0, st = "$lit$", m = `lit$${Math.random().toFixed(9).slice(2)}$`, it = "?" + m, _t = `<${it}>`, y = document, P = () => y.createComment(""), U = (i) => i === null || typeof i != "object" && typeof i != "function", B = Array.isArray, At = (i) => B(i) || typeof i?.[Symbol.iterator] == "function", R = `[ 	
+const D = globalThis, H = D.trustedTypes, J = H ? H.createPolicy("lit-html", { createHTML: (i) => i }) : void 0, st = "$lit$", $ = `lit$${Math.random().toFixed(9).slice(2)}$`, it = "?" + $, _t = `<${it}>`, A = document, P = () => A.createComment(""), U = (i) => i === null || typeof i != "object" && typeof i != "function", B = Array.isArray, yt = (i) => B(i) || typeof i?.[Symbol.iterator] == "function", R = `[ 	
 \f\r]`, w = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, Z = /-->/g, G = />/g, g = RegExp(`>|${R}(?:([^\\s"'>=/]+)(${R}*=${R}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), Q = /'/g, X = /"/g, rt = /^(?:script|style|textarea|title)$/i, yt = (i) => (t, ...e) => ({ _$litType$: i, strings: t, values: e }), $ = yt(1), E = Symbol.for("lit-noChange"), p = Symbol.for("lit-nothing"), Y = /* @__PURE__ */ new WeakMap(), A = y.createTreeWalker(y, 129);
+\f\r"'\`<>=]|("|')|))|$)`, "g"), Q = /'/g, X = /"/g, rt = /^(?:script|style|textarea|title)$/i, At = (i) => (t, ...e) => ({ _$litType$: i, strings: t, values: e }), f = At(1), E = Symbol.for("lit-noChange"), p = Symbol.for("lit-nothing"), Y = /* @__PURE__ */ new WeakMap(), y = A.createTreeWalker(A, 129);
 function nt(i, t) {
   if (!B(i) || !i.hasOwnProperty("raw")) throw Error("invalid template strings array");
   return J !== void 0 ? J.createHTML(t) : t;
@@ -276,8 +276,8 @@ const vt = (i, t) => {
     const a = i[c];
     let d, l, h = -1, u = 0;
     for (; u < a.length && (o.lastIndex = u, l = o.exec(a), l !== null); ) u = o.lastIndex, o === w ? l[1] === "!--" ? o = Z : l[1] !== void 0 ? o = G : l[2] !== void 0 ? (rt.test(l[2]) && (r = RegExp("</" + l[2], "g")), o = g) : l[3] !== void 0 && (o = g) : o === g ? l[0] === ">" ? (o = r ?? w, h = -1) : l[1] === void 0 ? h = -2 : (h = o.lastIndex - l[2].length, d = l[1], o = l[3] === void 0 ? g : l[3] === '"' ? X : Q) : o === X || o === Q ? o = g : o === Z || o === G ? o = w : (o = g, r = void 0);
-    const f = o === g && i[c + 1].startsWith("/>") ? " " : "";
-    n += o === w ? a + _t : h >= 0 ? (s.push(d), a.slice(0, h) + st + a.slice(h) + m + f) : a + m + (h === -2 ? c : f);
+    const m = o === g && i[c + 1].startsWith("/>") ? " " : "";
+    n += o === w ? a + _t : h >= 0 ? (s.push(d), a.slice(0, h) + st + a.slice(h) + $ + m) : a + $ + (h === -2 ? c : m);
   }
   return [nt(i, n + (i[e] || "<?>") + (t === 2 ? "</svg>" : t === 3 ? "</math>" : "")), s];
 };
@@ -287,34 +287,34 @@ class T {
     this.parts = [];
     let n = 0, o = 0;
     const c = t.length - 1, a = this.parts, [d, l] = vt(t, e);
-    if (this.el = T.createElement(d, s), A.currentNode = this.el.content, e === 2 || e === 3) {
+    if (this.el = T.createElement(d, s), y.currentNode = this.el.content, e === 2 || e === 3) {
       const h = this.el.content.firstChild;
       h.replaceWith(...h.childNodes);
     }
-    for (; (r = A.nextNode()) !== null && a.length < c; ) {
+    for (; (r = y.nextNode()) !== null && a.length < c; ) {
       if (r.nodeType === 1) {
         if (r.hasAttributes()) for (const h of r.getAttributeNames()) if (h.endsWith(st)) {
-          const u = l[o++], f = r.getAttribute(h).split(m), N = /([.?@])?(.*)/.exec(u);
-          a.push({ type: 1, index: n, name: N[2], strings: f, ctor: N[1] === "." ? Et : N[1] === "?" ? St : N[1] === "@" ? wt : k }), r.removeAttribute(h);
-        } else h.startsWith(m) && (a.push({ type: 6, index: n }), r.removeAttribute(h));
+          const u = l[o++], m = r.getAttribute(h).split($), N = /([.?@])?(.*)/.exec(u);
+          a.push({ type: 1, index: n, name: N[2], strings: m, ctor: N[1] === "." ? Et : N[1] === "?" ? St : N[1] === "@" ? wt : M }), r.removeAttribute(h);
+        } else h.startsWith($) && (a.push({ type: 6, index: n }), r.removeAttribute(h));
         if (rt.test(r.tagName)) {
-          const h = r.textContent.split(m), u = h.length - 1;
+          const h = r.textContent.split($), u = h.length - 1;
           if (u > 0) {
-            r.textContent = I ? I.emptyScript : "";
-            for (let f = 0; f < u; f++) r.append(h[f], P()), A.nextNode(), a.push({ type: 2, index: ++n });
+            r.textContent = H ? H.emptyScript : "";
+            for (let m = 0; m < u; m++) r.append(h[m], P()), y.nextNode(), a.push({ type: 2, index: ++n });
             r.append(h[u], P());
           }
         }
       } else if (r.nodeType === 8) if (r.data === it) a.push({ type: 2, index: n });
       else {
         let h = -1;
-        for (; (h = r.data.indexOf(m, h + 1)) !== -1; ) a.push({ type: 7, index: n }), h += m.length - 1;
+        for (; (h = r.data.indexOf($, h + 1)) !== -1; ) a.push({ type: 7, index: n }), h += $.length - 1;
       }
       n++;
     }
   }
   static createElement(t, e) {
-    const s = y.createElement("template");
+    const s = A.createElement("template");
     return s.innerHTML = t, s;
   }
 }
@@ -335,17 +335,17 @@ class bt {
     return this._$AM._$AU;
   }
   u(t) {
-    const { el: { content: e }, parts: s } = this._$AD, r = (t?.creationScope ?? y).importNode(e, !0);
-    A.currentNode = r;
-    let n = A.nextNode(), o = 0, c = 0, a = s[0];
+    const { el: { content: e }, parts: s } = this._$AD, r = (t?.creationScope ?? A).importNode(e, !0);
+    y.currentNode = r;
+    let n = y.nextNode(), o = 0, c = 0, a = s[0];
     for (; a !== void 0; ) {
       if (o === a.index) {
         let d;
         a.type === 2 ? d = new O(n, n.nextSibling, this, t) : a.type === 1 ? d = new a.ctor(n, a.name, a.strings, this, t) : a.type === 6 && (d = new xt(n, this, t)), this._$AV.push(d), a = s[++c];
       }
-      o !== a?.index && (n = A.nextNode(), o++);
+      o !== a?.index && (n = y.nextNode(), o++);
     }
-    return A.currentNode = y, r;
+    return y.currentNode = A, r;
   }
   p(t) {
     let e = 0;
@@ -371,7 +371,7 @@ class O {
     return this._$AB;
   }
   _$AI(t, e = this) {
-    t = S(this, t, e), U(t) ? t === p || t == null || t === "" ? (this._$AH !== p && this._$AR(), this._$AH = p) : t !== this._$AH && t !== E && this._(t) : t._$litType$ !== void 0 ? this.$(t) : t.nodeType !== void 0 ? this.T(t) : At(t) ? this.k(t) : this._(t);
+    t = S(this, t, e), U(t) ? t === p || t == null || t === "" ? (this._$AH !== p && this._$AR(), this._$AH = p) : t !== this._$AH && t !== E && this._(t) : t._$litType$ !== void 0 ? this.$(t) : t.nodeType !== void 0 ? this.T(t) : yt(t) ? this.k(t) : this._(t);
   }
   O(t) {
     return this._$AA.parentNode.insertBefore(t, this._$AB);
@@ -380,7 +380,7 @@ class O {
     this._$AH !== t && (this._$AR(), this._$AH = this.O(t));
   }
   _(t) {
-    this._$AH !== p && U(this._$AH) ? this._$AA.nextSibling.data = t : this.T(y.createTextNode(t)), this._$AH = t;
+    this._$AH !== p && U(this._$AH) ? this._$AA.nextSibling.data = t : this.T(A.createTextNode(t)), this._$AH = t;
   }
   $(t) {
     const { values: e, _$litType$: s } = t, r = typeof s == "number" ? this._$AC(t) : (s.el === void 0 && (s.el = T.createElement(nt(s.h, s.h[0]), this.options)), s);
@@ -411,7 +411,7 @@ class O {
     this._$AM === void 0 && (this._$Cv = t, this._$AP?.(t));
   }
 }
-class k {
+class M {
   get tagName() {
     return this.element.tagName;
   }
@@ -436,7 +436,7 @@ class k {
     t === p ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t ?? "");
   }
 }
-class Et extends k {
+class Et extends M {
   constructor() {
     super(...arguments), this.type = 3;
   }
@@ -444,7 +444,7 @@ class Et extends k {
     this.element[this.name] = t === p ? void 0 : t;
   }
 }
-class St extends k {
+class St extends M {
   constructor() {
     super(...arguments), this.type = 4;
   }
@@ -452,7 +452,7 @@ class St extends k {
     this.element.toggleAttribute(this.name, !!t && t !== p);
   }
 }
-class wt extends k {
+class wt extends M {
   constructor(t, e, s, r, n) {
     super(t, e, s, r, n), this.type = 5;
   }
@@ -526,10 +526,10 @@ function Tt(i) {
     api: _(v, i),
     listActiveAlerts: _(Ot, i),
     getActiveAlert: _(Nt, i),
-    listAlerts: _(Ht, i),
-    getAlert: _(It, i),
-    sendAlert: _(Mt, i),
-    cancelAlert: _(kt, i)
+    listAlerts: _(kt, i),
+    getAlert: _(Ht, i),
+    sendAlert: _(It, i),
+    cancelAlert: _(Mt, i)
   };
 }
 function Ot(i) {
@@ -540,19 +540,19 @@ function Nt(i, t) {
   const e = Object.assign({}, i, { apiKey: void 0 });
   return v(e, `/v1/active/alerts/${t}`);
 }
-function Ht(i) {
+function kt(i) {
   return v(i, "/v1/alerts");
 }
-function It(i, t) {
+function Ht(i, t) {
   return v(i, `/v1/alerts/${t}`);
 }
-function Mt(i, t) {
+function It(i, t) {
   return v(i, "/v1/alerts", {
     method: "POST",
     body: t
   });
 }
-function kt(i, t) {
+function Mt(i, t) {
   return v(i, `/v1/alerts/${t}`, {
     method: "DELETE"
   });
@@ -583,11 +583,11 @@ async function v(i, t, e) {
 }
 const Rt = {
   lg: 1366
-}, Lt = "https://api.wral.com/alerts/v1/active/alerts", zt = "https://assets.wral.com/a1cc0e86-adab-48e9-bd80-703cd2c56aff?w=1200&h=630", jt = (i) => String(i || "Alert").replace(/[^\p{L}\p{N}]/gu, " ").replace(/\s+/g, " ").trim() || "Alert", Dt = (i) => {
+}, zt = "https://api.wral.com/alerts/v1/active/alerts", Lt = "https://assets.wral.com/a1cc0e86-adab-48e9-bd80-703cd2c56aff?w=1200&h=630", jt = (i) => String(i || "Alert").replace(/[^\p{L}\p{N}]/gu, " ").replace(/\s+/g, " ").trim() || "Alert", Dt = (i) => {
   if (!i) return null;
   const t = i.url || i.href || "", e = i.title || i.headline || "";
-  if (!t || !e) return null;
-  const s = String(i.topic || "").trim(), r = s.toLowerCase(), n = i.caption || s || "Alert", o = i.image || i.imageUrl || i.image_url || zt;
+  if (!e) return null;
+  const s = String(i.topic || "").trim(), r = s.toLowerCase(), n = i.caption || s || "Alert", o = i.image || i.imageUrl || i.image_url || Lt;
   return {
     url: t,
     title: e,
@@ -620,7 +620,7 @@ class ot extends C {
     refreshInterval: { type: Number, attribute: "refresh-interval" }
   };
   constructor() {
-    super(), this.api = Lt, this.items = [], this.loading = !1, this.error = "", this.refreshInterval = 0, this._refreshId = null;
+    super(), this.api = zt, this.items = [], this.loading = !1, this.error = "", this.refreshInterval = 0, this._refreshId = null;
   }
   static styles = lt`
 		:host {
@@ -723,6 +723,12 @@ class ot extends C {
 		a.title:focus-visible {
 			text-decoration: underline;
 		}
+		.title.no-link {
+			font-size: 1.0625rem;
+			line-height: 1.35;
+			font-family: var(--heading-font-family, sans-serif);
+			font-weight: 700;
+		}
 		.body {
 			margin: 0;
 			color: #323232;
@@ -801,7 +807,7 @@ class ot extends C {
   render() {
     const { items: t, loading: e, error: s } = this, r = (n, o) => {
       const c = Bt(n.effectiveFrom), a = String(n.topic || "").trim().toLowerCase();
-      return $`
+      return f`
 				<li class="alert" data-index=${o} aria-label="Site Alert">
 					<div class="thumb">
 						<img
@@ -809,37 +815,40 @@ class ot extends C {
 							alt=${n.title}
 							loading="lazy"
 						>
-					</div>
-					<div class="alert-body">
-						<div class="alert-header">
-							<div class="label ${a}">
-								${jt(n.caption)}
+						</div>
+						<div class="alert-body">
+							<div class="alert-header">
+								<div class="label ${a}">
+									${jt(n.caption)}
+								</div>
+								${c ? f`
+									<span class="date">
+										${c}
+									</span>
+								` : ""}
 							</div>
-							${c ? $`
-								<span class="date">
-									${c}
-								</span>
-							` : ""}
+							${n.url ? f`
+								<a class="title" href=${n.url}>${n.body || n.title}</a>
+							` : f`
+								<div class="title no-link">${n.body || n.title}</div>
+							`}
 						</div>
-						<a class="title" href=${n.url}>${n.title}</a>
-						${n.body ? $`<p class="body">${n.body}</p>` : ""}
-					</div>
-				</li>
+					</li>
 			`;
     };
-    return $`
+    return f`
 			<div class="wrapper" role="region" aria-live="polite">
 				<div class="heading">
 					<span>Active Alerts</span>
-					${e ? $`<span class="pill">Loading…</span>` : ""}
+					${e ? f`<span class="pill">Loading…</span>` : ""}
 				</div>
 
-				${s ? $`<div class="status error">${s}</div>` : ""}
-				${!s && !e && !t.length ? $`
+				${s ? f`<div class="status error">${s}</div>` : ""}
+				${!s && !e && !t.length ? f`
 					<div class="empty">No active alerts right now.</div>
 				` : ""}
 
-				${t.length ? $`
+				${t.length ? f`
 					<ul class="list">
 						${t.map(r)}
 					</ul>

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { W as r, n as s, s as l } from "./wral-active-alerts-LMZOZ_Es.js";
+import { W as r, n as s, s as l } from "./wral-active-alerts-Cm01hLhV.js";
 export {
   r as WralActiveAlerts,
   s as normalizeAlert,

package/dist/{wral-active-alerts-LMZOZ_Es.js → wral-active-alerts-Cm01hLhV.js}

@@ -2,25 +2,25 @@ import { LitElement as d, css as m, html as i } from "lit";
 import { createClient as f } from "@wral/sdk-alerts/v1";
 const p = {
   lg: 1366
-}, h = "https://api.wral.com/alerts/v1/active/alerts", g = "https://assets.wral.com/a1cc0e86-adab-48e9-bd80-703cd2c56aff?w=1200&h=630", u = (t) => String(t || "Alert").replace(/[^\p{L}\p{N}]/gu, " ").replace(/\s+/g, " ").trim() || "Alert", b = (t) => {
-  if (!t) return null;
-  const e = t.url || t.href || "", s = t.title || t.headline || "";
-  if (!e || !s) return null;
-  const a = String(t.topic || "").trim(), l = a.toLowerCase(), r = t.caption || a || "Alert", n = t.image || t.imageUrl || t.image_url || g;
+}, h = "https://api.wral.com/alerts/v1/active/alerts", g = "https://assets.wral.com/a1cc0e86-adab-48e9-bd80-703cd2c56aff?w=1200&h=630", u = (e) => String(e || "Alert").replace(/[^\p{L}\p{N}]/gu, " ").replace(/\s+/g, " ").trim() || "Alert", v = (e) => {
+  if (!e) return null;
+  const t = e.url || e.href || "", s = e.title || e.headline || "";
+  if (!s) return null;
+  const a = String(e.topic || "").trim(), l = a.toLowerCase(), r = e.caption || a || "Alert", n = e.image || e.imageUrl || e.image_url || g;
   return {
-    url: e,
+    url: t,
     title: s,
     topic: l || a,
     caption: r,
     image: n,
-    body: t.body || t.summary || "",
-    effectiveFrom: t.effectiveFrom || t.effective_from || ""
+    body: e.body || e.summary || "",
+    effectiveFrom: e.effectiveFrom || e.effective_from || ""
   };
-}, v = (t) => {
-  if (!t) return "";
+}, b = (e) => {
+  if (!e) return "";
   try {
-    const e = new Date(t);
-    return Number.isNaN(e.getTime()) ? "" : e.toLocaleString(void 0, {
+    const t = new Date(e);
+    return Number.isNaN(t.getTime()) ? "" : t.toLocaleString(void 0, {
       month: "short",
       day: "numeric",
       hour: "numeric",
@@ -142,6 +142,12 @@ class y extends d {
 		a.title:focus-visible {
 			text-decoration: underline;
 		}
+		.title.no-link {
+			font-size: 1.0625rem;
+			line-height: 1.35;
+			font-family: var(--heading-font-family, sans-serif);
+			font-weight: 700;
+		}
 		.body {
 			margin: 0;
 			color: #323232;
@@ -188,8 +194,8 @@ class y extends d {
   disconnectedCallback() {
     super.disconnectedCallback(), this._clearInterval();
   }
-  updated(e) {
-    e.has("api") && e.get("api") !== this.api && this.load(), e.has("refreshInterval") && this._setupInterval();
+  updated(t) {
+    t.has("api") && t.get("api") !== this.api && this.load(), t.has("refreshInterval") && this._setupInterval();
   }
   async fetchActiveAlerts() {
     return f({
@@ -200,10 +206,10 @@ class y extends d {
     if (this.api) {
       this.loading = !0, this.error = "";
       try {
-        const e = await this.fetchActiveAlerts();
-        this.items = (e?.items || []).map(b).filter(Boolean);
-      } catch (e) {
-        console.error("[wral-active-alerts]", e), this.items = [], this.error = "Unable to load active alerts.";
+        const t = await this.fetchActiveAlerts();
+        this.items = (t?.items || []).map(v).filter(Boolean);
+      } catch (t) {
+        console.error("[wral-active-alerts]", t), this.items = [], this.error = "Unable to load active alerts.";
       } finally {
         this.loading = !1;
       }
@@ -211,15 +217,15 @@ class y extends d {
   }
   _setupInterval() {
     this._clearInterval();
-    const e = Number(this.refreshInterval) || 0;
-    e > 0 && (this._refreshId = globalThis.setInterval(() => this.load(), e));
+    const t = Number(this.refreshInterval) || 0;
+    t > 0 && (this._refreshId = globalThis.setInterval(() => this.load(), t));
   }
   _clearInterval() {
     this._refreshId && (globalThis.clearInterval(this._refreshId), this._refreshId = null);
   }
   render() {
-    const { items: e, loading: s, error: a } = this, l = (r, n) => {
-      const o = v(r.effectiveFrom), c = String(r.topic || "").trim().toLowerCase();
+    const { items: t, loading: s, error: a } = this, l = (r, n) => {
+      const o = b(r.effectiveFrom), c = String(r.topic || "").trim().toLowerCase();
       return i`
 				<li class="alert" data-index=${n} aria-label="Site Alert">
 					<div class="thumb">
@@ -228,22 +234,25 @@ class y extends d {
 							alt=${r.title}
 							loading="lazy"
 						>
-					</div>
-					<div class="alert-body">
-						<div class="alert-header">
-							<div class="label ${c}">
-								${u(r.caption)}
+						</div>
+						<div class="alert-body">
+							<div class="alert-header">
+								<div class="label ${c}">
+									${u(r.caption)}
+								</div>
+								${o ? i`
+									<span class="date">
+										${o}
+									</span>
+								` : ""}
 							</div>
-							${o ? i`
-								<span class="date">
-									${o}
-								</span>
-							` : ""}
+							${r.url ? i`
+								<a class="title" href=${r.url}>${r.body || r.title}</a>
+							` : i`
+								<div class="title no-link">${r.body || r.title}</div>
+							`}
 						</div>
-						<a class="title" href=${r.url}>${r.title}</a>
-						${r.body ? i`<p class="body">${r.body}</p>` : ""}
-					</div>
-				</li>
+					</li>
 			`;
     };
     return i`
@@ -254,13 +263,13 @@ class y extends d {
 				</div>
 
 				${a ? i`<div class="status error">${a}</div>` : ""}
-				${!a && !s && !e.length ? i`
+				${!a && !s && !t.length ? i`
 					<div class="empty">No active alerts right now.</div>
 				` : ""}
 
-				${e.length ? i`
+				${t.length ? i`
 					<ul class="list">
-						${e.map(l)}
+						${t.map(l)}
 					</ul>
 				` : ""}
 			</div>
@@ -270,6 +279,6 @@ class y extends d {
 globalThis?.customElements && !globalThis.customElements.get("wral-active-alerts") && globalThis.customElements.define("wral-active-alerts", y);
 export {
   y as W,
-  b as n,
+  v as n,
   u as s
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wral/active-alerts",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "type": "module",
   "description": "Lit web component for rendering the current set of active WRAL alerts.",
   "author": "Dominick Jones <djones@wral.com>",