@wral/active-alerts 0.2.3 → 0.2.5

package/dist/define.mjs

@@ -1,4 +1,4 @@
-import { W as t } from "./wral-active-alerts-BG8GK-Nj.js";
+import { W as t } from "./wral-active-alerts-C_bQfb95.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 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();
+const H = globalThis, L = H.ShadowRoot && (H.ShadyCSS === void 0 || H.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.");
@@ -32,7 +32,7 @@ const at = (i) => new tt(typeof i == "string" ? i : i + "", void 0, j), lt = (i,
 }, ht = (i, t) => {
   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 = k.litNonce;
+    const s = document.createElement("style"), r = H.litNonce;
     r !== void 0 && s.setAttribute("nonce", r), s.textContent = e.cssText, i.appendChild(s);
   }
 }, q = L ? (i) => i : (i) => i instanceof CSSStyleSheet ? ((t) => {
@@ -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: mt } = Object, I = globalThis, F = I.trustedTypes, $t = F ? F.emptyScript : "", gt = I.reactiveElementPolyfillSupport, x = (i, t) => i, z = { toAttribute(i, t) {
+const { is: ct, defineProperty: dt, getOwnPropertyDescriptor: pt, getOwnPropertyNames: ut, getOwnPropertySymbols: ft, getPrototypeOf: $t } = Object, k = globalThis, F = k.trustedTypes, mt = F ? F.emptyScript : "", gt = k.reactiveElementPolyfillSupport, x = (i, t) => i, z = { toAttribute(i, t) {
   switch (t) {
     case Boolean:
-      i = i ? $t : null;
+      i = i ? mt : null;
       break;
     case Object:
     case Array:
@@ -74,7 +74,7 @@ const { is: ct, defineProperty: dt, getOwnPropertyDescriptor: pt, getOwnProperty
   }
   return e;
 } }, 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();
+Symbol.metadata ??= Symbol("metadata"), k.litPropertyMetadata ??= /* @__PURE__ */ new WeakMap();
 let b = class extends HTMLElement {
   static addInitializer(t) {
     this._$Ei(), (this.l ??= []).push(t);
@@ -95,8 +95,8 @@ let b = class extends HTMLElement {
       this[e] = o;
     } };
     return { get: r, set(o) {
-      const c = r?.call(this);
-      n?.call(this, o), this.requestUpdate(t, c, s);
+      const d = r?.call(this);
+      n?.call(this, o), this.requestUpdate(t, d, s);
     }, configurable: !0, enumerable: !0 };
   }
   static getPropertyOptions(t) {
@@ -104,7 +104,7 @@ let b = class extends HTMLElement {
   }
   static _$Ei() {
     if (this.hasOwnProperty(x("elementProperties"))) return;
-    const t = mt(this);
+    const t = $t(this);
     t.finalize(), t.l !== void 0 && (this.l = [...t.l]), this.elementProperties = new Map(t.elementProperties);
   }
   static finalize() {
@@ -181,8 +181,8 @@ let b = class extends HTMLElement {
     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 : z;
       this._$Em = r;
-      const c = o.fromAttribute(e, n.type);
-      this[r] = c ?? this._$Ej?.get(r) ?? c, this._$Em = null;
+      const d = o.fromAttribute(e, n.type);
+      this[r] = d ?? this._$Ej?.get(r) ?? d, this._$Em = null;
     }
   }
   requestUpdate(t, e, s) {
@@ -218,8 +218,8 @@ let b = class extends HTMLElement {
       }
       const s = this.constructor.elementProperties;
       if (s.size > 0) for (const [r, n] of s) {
-        const { wrapped: o } = n, c = this[r];
-        o !== !0 || this._$AL.has(r) || c === void 0 || this.C(r, void 0, n, c);
+        const { wrapped: o } = n, d = this[r];
+        o !== !0 || this._$AL.has(r) || d === void 0 || this.C(r, void 0, n, d);
       }
     }
     let t = !1;
@@ -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 }), (I.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 }), (k.reactiveElementVersions ??= []).push("2.1.1");
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-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 = `[ 	
+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}>`, 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, 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);
+\f\r"'\`<>=]|("|')|))|$)`, "g"), Q = /'/g, X = /"/g, rt = /^(?:script|style|textarea|title)$/i, At = (i) => (t, ...e) => ({ _$litType$: i, strings: t, values: e }), $ = 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;
@@ -272,12 +272,12 @@ function nt(i, t) {
 const vt = (i, t) => {
   const e = i.length - 1, s = [];
   let r, n = t === 2 ? "<svg>" : t === 3 ? "<math>" : "", o = w;
-  for (let c = 0; c < e; c++) {
-    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 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);
+  for (let d = 0; d < e; d++) {
+    const a = i[d];
+    let c, 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, c = 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[d + 1].startsWith("/>") ? " " : "";
+    n += o === w ? a + _t : h >= 0 ? (s.push(c), a.slice(0, h) + st + a.slice(h) + m + f) : a + m + (h === -2 ? d : f);
   }
   return [nt(i, n + (i[e] || "<?>") + (t === 2 ? "</svg>" : t === 3 ? "</math>" : "")), s];
 };
@@ -286,29 +286,29 @@ class T {
     let r;
     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), y.currentNode = this.el.content, e === 2 || e === 3) {
+    const d = t.length - 1, a = this.parts, [c, l] = vt(t, e);
+    if (this.el = T.createElement(c, s), y.currentNode = this.el.content, e === 2 || e === 3) {
       const h = this.el.content.firstChild;
       h.replaceWith(...h.childNodes);
     }
-    for (; (r = y.nextNode()) !== null && a.length < c; ) {
+    for (; (r = y.nextNode()) !== null && a.length < d; ) {
       if (r.nodeType === 1) {
         if (r.hasAttributes()) for (const h of r.getAttributeNames()) if (h.endsWith(st)) {
-          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));
+          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 : M }), r.removeAttribute(h);
+        } else h.startsWith(m) && (a.push({ type: 6, index: n }), r.removeAttribute(h));
         if (rt.test(r.tagName)) {
-          const h = r.textContent.split($), u = h.length - 1;
+          const h = r.textContent.split(m), u = h.length - 1;
           if (u > 0) {
-            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.textContent = I ? I.emptyScript : "";
+            for (let f = 0; f < u; f++) r.append(h[f], 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($, h + 1)) !== -1; ) a.push({ type: 7, index: n }), h += $.length - 1;
+        for (; (h = r.data.indexOf(m, h + 1)) !== -1; ) a.push({ type: 7, index: n }), h += m.length - 1;
       }
       n++;
     }
@@ -337,11 +337,11 @@ class bt {
   u(t) {
     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];
+    let n = y.nextNode(), o = 0, d = 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];
+        let c;
+        a.type === 2 ? c = new O(n, n.nextSibling, this, t) : a.type === 1 ? c = new a.ctor(n, a.name, a.strings, this, t) : a.type === 6 && (c = new xt(n, this, t)), this._$AV.push(c), a = s[++d];
       }
       o !== a?.index && (n = y.nextNode(), o++);
     }
@@ -426,9 +426,9 @@ class M {
     let o = !1;
     if (n === void 0) t = S(this, t, e, 0), o = !U(t) || t !== this._$AH && t !== E, o && (this._$AH = t);
     else {
-      const c = t;
-      let a, d;
-      for (t = n[0], a = 0; a < n.length - 1; a++) d = S(this, c[s + a], e, a), d === E && (d = this._$AH[a]), o ||= !U(d) || d !== this._$AH[a], d === p ? t = p : t !== p && (t += (d ?? "") + n[a + 1]), this._$AH[a] = d;
+      const d = t;
+      let a, c;
+      for (t = n[0], a = 0; a < n.length - 1; a++) c = S(this, d[s + a], e, a), c === E && (c = this._$AH[a]), o ||= !U(c) || c !== this._$AH[a], c === p ? t = p : t !== p && (t += (c ?? "") + n[a + 1]), this._$AH[a] = c;
     }
     o && !r && this.j(t);
   }
@@ -526,9 +526,9 @@ function Tt(i) {
     api: _(v, i),
     listActiveAlerts: _(Ot, i),
     getActiveAlert: _(Nt, i),
-    listAlerts: _(kt, i),
-    getAlert: _(Ht, i),
-    sendAlert: _(It, i),
+    listAlerts: _(Ht, i),
+    getAlert: _(It, i),
+    sendAlert: _(kt, i),
     cancelAlert: _(Mt, i)
   };
 }
@@ -540,13 +540,13 @@ function Nt(i, t) {
   const e = Object.assign({}, i, { apiKey: void 0 });
   return v(e, `/v1/active/alerts/${t}`);
 }
-function kt(i) {
+function Ht(i) {
   return v(i, "/v1/alerts");
 }
-function Ht(i, t) {
+function It(i, t) {
   return v(i, `/v1/alerts/${t}`);
 }
-function It(i, t) {
+function kt(i, t) {
   return v(i, "/v1/alerts", {
     method: "POST",
     body: t
@@ -562,10 +562,10 @@ async function v(i, t, e) {
     "Content-Type": "application/json"
   };
   i.apiKey && (o.Authorization = `Bearer ${i.apiKey}`);
-  const c = Object.assign({}, e, {
+  const d = Object.assign({}, e, {
     headers: Object.assign({}, o, e?.headers),
     body: e?.body ? JSON.stringify(e.body) : void 0
-  }), a = await fetch(n.toString(), c);
+  }), a = await fetch(n.toString(), d);
   if (!a.ok) {
     const l = new Error("API request failed.", { cause: a });
     if (l.status = a.status, l.statusText = a.statusText, l.url = n.toString(), l.headers = a.headers, l.bodyUsed = a.bodyUsed, a.headers.get("Content-Type")?.includes("application/json"))
@@ -578,8 +578,8 @@ async function v(i, t, e) {
   }
   if (a.status === 204)
     return;
-  const d = await a.json();
-  return d.caption && console.warn("Alert API provided a value with a caption field.  The caption field is deprecated and will be removed."), (d?.items || []).some((l) => l.caption) && console.warn("Alert API provided an item with a caption field.  The caption field is deprecated and will be removed."), d;
+  const c = await a.json();
+  return c.caption && console.warn("Alert API provided a value with a caption field.  The caption field is deprecated and will be removed."), (c?.items || []).some((l) => l.caption) && console.warn("Alert API provided an item with a caption field.  The caption field is deprecated and will be removed."), c;
 }
 const Rt = {
   lg: 1366
@@ -664,13 +664,26 @@ class ot extends C {
 			gap: .75rem;
 		}
 		.alert {
+			margin: 0;
+		}
+		.alert-card {
 			background: #fff;
 			border: 1px solid #e5e5e5;
 			padding: .9rem 1rem;
 			box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
 			display: grid;
-			grid-template-columns: 112px 1fr;
+			grid-template-columns: 240px 1fr;
 			gap: .9rem;
+			color: inherit;
+			text-decoration: none;
+		}
+		.alert-card:hover .title,
+		.alert-card:focus-visible .title {
+			text-decoration: underline;
+		}
+		.alert-card:focus-visible {
+			outline: 2px solid #000b27;
+			outline-offset: 2px;
 		}
 		.thumb {
 			overflow: hidden;
@@ -711,7 +724,7 @@ class ot extends C {
 		.label.recommended-story {
 			background-color: #2594e3;
 		}
-		a.title {
+		.title {
 			color: inherit;
 			font-size: 1.0625rem;
 			line-height: 1.35;
@@ -719,16 +732,6 @@ class ot extends C {
 			font-weight: 700;
 			text-decoration: none;
 		}
-		a.title:hover,
-		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;
@@ -756,14 +759,6 @@ class ot extends C {
 		}
 		@media (max-width: 720px) {
 			.wrapper { padding: .75rem .75rem 1.25rem; }
-			.alert {
-				grid-template-columns: 1fr;
-				padding: .85rem .9rem;
-			}
-			.alert-header {
-				align-items: flex-start;
-				flex-direction: column;
-			}
 		}
 	`;
   async firstUpdated() {
@@ -806,49 +801,55 @@ 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 f`
-				<li class="alert" data-index=${o} aria-label="Site Alert">
-					<div class="thumb">
-						<img
-							src=${n.image}
-							alt=${n.title}
-							loading="lazy"
-						>
+      const d = Bt(n.effectiveFrom), a = String(n.topic || "").trim().toLowerCase(), c = n.title || n.body, l = String(n.title || "").trim(), h = String(n.body || "").trim(), u = l && h && l !== h ? n.body : "", f = $`
+				<div class="thumb">
+					<img
+						src=${n.image}
+						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>
-							${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>
-							`}
+						${d ? $`
+							<span class="date">
+								${d}
+							</span>
+						` : ""}
+					</div>
+					<div class="title">${c}</div>
+					${u ? $`<p class="body">${u}</p>` : ""}
+				</div>
+			`;
+      return $`
+				<li class="alert" data-index=${o} aria-label="Site Alert">
+					${n.url ? $`
+						<a class="alert-card" href=${n.url} aria-label=${c}>
+							${f}
+						</a>
+					` : $`
+						<div class="alert-card">
+							${f}
 						</div>
-					</li>
+					`}
+				</li>
 			`;
     };
-    return f`
+    return $`
 			<div class="wrapper" role="region" aria-live="polite">
 				<div class="heading">
-					<span>Active Alerts</span>
-					${e ? f`<span class="pill">Loading…</span>` : ""}
+					${e ? $`<span class="pill">Loading…</span>` : ""}
 				</div>
 
-				${s ? f`<div class="status error">${s}</div>` : ""}
-				${!s && !e && !t.length ? f`
+				${s ? $`<div class="status error">${s}</div>` : ""}
+				${!s && !e && !t.length ? $`
 					<div class="empty">No active alerts right now.</div>
 				` : ""}
 
-				${t.length ? f`
+				${t.length ? $`
 					<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-BG8GK-Nj.js";
+import { W as r, n as s, s as l } from "./wral-active-alerts-C_bQfb95.js";
 export {
   r as WralActiveAlerts,
   s as normalizeAlert,

package/dist/{wral-active-alerts-BG8GK-Nj.js → wral-active-alerts-C_bQfb95.js}

@@ -1,12 +1,12 @@
-import { LitElement as d, css as m, html as i } from "lit";
-import { createClient as f } from "@wral/sdk-alerts/v1";
-const p = {
+import { LitElement as g, css as u, html as i } from "lit";
+import { createClient as b } from "@wral/sdk-alerts/v1";
+const v = {
   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 = (e) => String(e || "Alert").replace(/[^\p{L}\p{N}]/gu, " ").replace(/\s+/g, " ").trim() || "Alert", v = (e) => {
+}, y = "https://api.wral.com/alerts/v1/active/alerts", x = "https://assets.wral.com/a1cc0e86-adab-48e9-bd80-703cd2c56aff?w=1200&h=630", $ = (e) => String(e || "Alert").replace(/[^\p{L}\p{N}]/gu, " ").replace(/\s+/g, " ").trim() || "Alert", I = (e) => {
   if (!e) return null;
   const t = e.link || 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;
+  const a = String(e.topic || "").trim(), l = a.toLowerCase(), r = e.caption || a || "Alert", n = e.image || e.imageUrl || e.image_url || x;
   return {
     url: t,
     title: s,
@@ -16,7 +16,7 @@ const p = {
     body: e.body || e.summary || "",
     effectiveFrom: e.effectiveFrom || e.effective_from || ""
   };
-}, b = (e) => {
+}, A = (e) => {
   if (!e) return "";
   try {
     const t = new Date(e);
@@ -30,7 +30,7 @@ const p = {
     return "";
   }
 };
-class y extends d {
+class _ extends g {
   static properties = {
     api: { type: String },
     items: { state: !0 },
@@ -39,16 +39,16 @@ class y extends d {
     refreshInterval: { type: Number, attribute: "refresh-interval" }
   };
   constructor() {
-    super(), this.api = h, this.items = [], this.loading = !1, this.error = "", this.refreshInterval = 0, this._refreshId = null;
+    super(), this.api = y, this.items = [], this.loading = !1, this.error = "", this.refreshInterval = 0, this._refreshId = null;
   }
-  static styles = m`
+  static styles = u`
 		:host {
 			display: block;
 			background: #f7f5f4;
 			color: #000b27;
 		}
 		.wrapper {
-			max-width: ${p.lg}px;
+			max-width: ${v.lg}px;
 			margin: 0 auto;
 			padding: 1rem 1.25rem 1.5rem;
 		}
@@ -83,13 +83,26 @@ class y extends d {
 			gap: .75rem;
 		}
 		.alert {
+			margin: 0;
+		}
+		.alert-card {
 			background: #fff;
 			border: 1px solid #e5e5e5;
 			padding: .9rem 1rem;
 			box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
 			display: grid;
-			grid-template-columns: 112px 1fr;
+			grid-template-columns: 240px 1fr;
 			gap: .9rem;
+			color: inherit;
+			text-decoration: none;
+		}
+		.alert-card:hover .title,
+		.alert-card:focus-visible .title {
+			text-decoration: underline;
+		}
+		.alert-card:focus-visible {
+			outline: 2px solid #000b27;
+			outline-offset: 2px;
 		}
 		.thumb {
 			overflow: hidden;
@@ -130,7 +143,7 @@ class y extends d {
 		.label.recommended-story {
 			background-color: #2594e3;
 		}
-		a.title {
+		.title {
 			color: inherit;
 			font-size: 1.0625rem;
 			line-height: 1.35;
@@ -138,16 +151,6 @@ class y extends d {
 			font-weight: 700;
 			text-decoration: none;
 		}
-		a.title:hover,
-		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;
@@ -175,14 +178,6 @@ class y extends d {
 		}
 		@media (max-width: 720px) {
 			.wrapper { padding: .75rem .75rem 1.25rem; }
-			.alert {
-				grid-template-columns: 1fr;
-				padding: .85rem .9rem;
-			}
-			.alert-header {
-				align-items: flex-start;
-				flex-direction: column;
-			}
 		}
 	`;
   async firstUpdated() {
@@ -198,7 +193,7 @@ class y extends d {
     t.has("api") && t.get("api") !== this.api && this.load(), t.has("refreshInterval") && this._setupInterval();
   }
   async fetchActiveAlerts() {
-    return f({
+    return b({
       baseUrl: this.api.replace(/v1\/.*$/, "")
     }).listActiveAlerts();
   }
@@ -207,7 +202,7 @@ class y extends d {
       this.loading = !0, this.error = "";
       try {
         const t = await this.fetchActiveAlerts();
-        this.items = (t?.items || []).map(v).filter(Boolean);
+        this.items = (t?.items || []).map(I).filter(Boolean);
       } catch (t) {
         console.error("[wral-active-alerts]", t), this.items = [], this.error = "Unable to load active alerts.";
       } finally {
@@ -225,40 +220,46 @@ class y extends d {
   }
   render() {
     const { items: t, loading: s, error: a } = this, l = (r, n) => {
-      const o = b(r.effectiveFrom), c = String(r.topic || "").trim().toLowerCase();
+      const o = A(r.effectiveFrom), h = String(r.topic || "").trim().toLowerCase(), c = r.title || r.body, d = String(r.title || "").trim(), m = String(r.body || "").trim(), f = d && m && d !== m ? r.body : "", p = i`
+				<div class="thumb">
+					<img
+						src=${r.image}
+						alt=${r.title}
+						loading="lazy"
+					>
+				</div>
+				<div class="alert-body">
+					<div class="alert-header">
+						<div class="label ${h}">
+							${$(r.caption)}
+						</div>
+						${o ? i`
+							<span class="date">
+								${o}
+							</span>
+						` : ""}
+					</div>
+					<div class="title">${c}</div>
+					${f ? i`<p class="body">${f}</p>` : ""}
+				</div>
+			`;
       return i`
 				<li class="alert" data-index=${n} aria-label="Site Alert">
-					<div class="thumb">
-						<img
-							src=${r.image}
-							alt=${r.title}
-							loading="lazy"
-						>
-						</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>
-							${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>
-							`}
+					${r.url ? i`
+						<a class="alert-card" href=${r.url} aria-label=${c}>
+							${p}
+						</a>
+					` : i`
+						<div class="alert-card">
+							${p}
 						</div>
-					</li>
+					`}
+				</li>
 			`;
     };
     return i`
 			<div class="wrapper" role="region" aria-live="polite">
 				<div class="heading">
-					<span>Active Alerts</span>
 					${s ? i`<span class="pill">Loading…</span>` : ""}
 				</div>
 
@@ -276,9 +277,9 @@ class y extends d {
 		`;
   }
 }
-globalThis?.customElements && !globalThis.customElements.get("wral-active-alerts") && globalThis.customElements.define("wral-active-alerts", y);
+globalThis?.customElements && !globalThis.customElements.get("wral-active-alerts") && globalThis.customElements.define("wral-active-alerts", _);
 export {
-  y as W,
-  v as n,
-  u as s
+  _ as W,
+  I as n,
+  $ as s
 };

package/package.json

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