@wral/active-alerts 0.1.4 → 0.2.1

package/dist/define.mjs

@@ -1,4 +1,4 @@
-import { W as t } from "./wral-active-alerts-CSZAUUIB.js";
+import { W as t } from "./wral-active-alerts-Dd9mTg2z.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, L = 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.");
@@ -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 = 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 = L ? (i) => i : (i) => i instanceof CSSStyleSheet ? ((t) => {
@@ -45,7 +45,7 @@ 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, z = { toAttribute(i, t) {
+const { is: ct, defineProperty: dt, getOwnPropertyDescriptor: pt, getOwnPropertyNames: ut, getOwnPropertySymbols: ft, getPrototypeOf: $t } = Object, I = globalThis, F = I.trustedTypes, mt = F ? F.emptyScript : "", gt = I.reactiveElementPolyfillSupport, x = (i, t) => i, z = { toAttribute(i, t) {
   switch (t) {
     case Boolean:
       i = i ? mt : null;
@@ -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"), M.litPropertyMetadata ??= /* @__PURE__ */ new WeakMap();
+Symbol.metadata ??= Symbol("metadata"), I.litPropertyMetadata ??= /* @__PURE__ */ new WeakMap();
 let b = class extends HTMLElement {
   static addInitializer(t) {
     this._$Ei(), (this.l ??= []).push(t);
@@ -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$", 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, 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 }), u = 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;
@@ -274,10 +274,10 @@ const vt = (i, t) => {
   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 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);
+    let d, l, h = -1, f = 0;
+    for (; f < a.length && (o.lastIndex = f, l = o.exec(a), l !== null); ) f = 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 $ = 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 + m + (h === -2 ? c : $);
   }
   return [nt(i, n + (i[e] || "<?>") + (t === 2 ? "</svg>" : t === 3 ? "</math>" : "")), s];
 };
@@ -287,22 +287,22 @@ 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);
+          const f = l[o++], $ = r.getAttribute(h).split(m), N = /([.?@])?(.*)/.exec(f);
+          a.push({ type: 1, index: n, name: N[2], strings: $, 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(m), 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.append(h[u], P());
+          const h = r.textContent.split(m), f = h.length - 1;
+          if (f > 0) {
+            r.textContent = H ? H.emptyScript : "";
+            for (let $ = 0; $ < f; $++) r.append(h[$], P()), y.nextNode(), a.push({ type: 2, index: ++n });
+            r.append(h[f], P());
           }
         }
       } else if (r.nodeType === 8) if (r.data === it) a.push({ type: 2, index: n });
@@ -314,7 +314,7 @@ class T {
     }
   }
   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"
   });
@@ -581,21 +581,23 @@ async function v(i, t, e) {
   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 Rt = "https://api.wral.com/alerts/v1/active/alerts", zt = "https://assets.wral.com/a1cc0e86-adab-48e9-bd80-703cd2c56aff?w=1200&h=630", Lt = (i) => String(i || "Alert").replace(/[^\p{L}\p{N}]/gu, " ").replace(/\s+/g, " ").trim() || "Alert", jt = (i) => {
+const Rt = {
+  lg: 1366
+}, 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 = i.topic || "", r = i.caption || s || "Alert", n = 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,
-    topic: s,
-    caption: r,
-    image: n,
+    topic: r || s,
+    caption: n,
+    image: o,
     body: i.body || i.summary || "",
     effectiveFrom: i.effectiveFrom || i.effective_from || ""
   };
-}, Dt = (i) => {
+}, Bt = (i) => {
   if (!i) return "";
   try {
     const t = new Date(i);
@@ -618,7 +620,7 @@ class ot extends C {
     refreshInterval: { type: Number, attribute: "refresh-interval" }
   };
   constructor() {
-    super(), this.api = Rt, 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 {
@@ -627,7 +629,7 @@ class ot extends C {
 			color: #000b27;
 		}
 		.wrapper {
-			max-width: 1040px;
+			max-width: ${Rt.lg}px;
 			margin: 0 auto;
 			padding: 1rem 1.25rem 1.5rem;
 		}
@@ -700,10 +702,10 @@ class ot extends C {
 			color: #fff;
 			font-size: .75rem;
 			font-weight: 700;
-			padding: 0.125rem 0.35rem;
-			border-radius: 6px;
+			padding: 0.125rem 0.1875rem 0.05rem;
+			border-radius: 4px;
 			text-transform: uppercase;
-			background-color: #c15800;
+			background-color: #daa520; /* default (gold) */
 			letter-spacing: .03em;
 		}
 		.label.recommended-story {
@@ -721,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;
@@ -780,7 +788,7 @@ class ot extends C {
       this.loading = !0, this.error = "";
       try {
         const t = await this.fetchActiveAlerts();
-        this.items = (t?.items || []).map(jt).filter(Boolean);
+        this.items = (t?.items || []).map(Dt).filter(Boolean);
       } catch (t) {
         console.error("[wral-active-alerts]", t), this.items = [], this.error = "Unable to load active alerts.";
       } finally {
@@ -798,8 +806,8 @@ class ot extends C {
   }
   render() {
     const { items: t, loading: e, error: s } = this, r = (n, o) => {
-      const c = Dt(n.effectiveFrom);
-      return $`
+      const c = Bt(n.effectiveFrom), a = String(n.topic || "").trim().toLowerCase();
+      return u`
 				<li class="alert" data-index=${o} aria-label="Site Alert">
 					<div class="thumb">
 						<img
@@ -807,37 +815,41 @@ class ot extends C {
 							alt=${n.title}
 							loading="lazy"
 						>
-					</div>
-					<div class="alert-body">
-						<div class="alert-header">
-							<div class="label ${n.topic}">
-								${Lt(n.caption)}
+						</div>
+						<div class="alert-body">
+							<div class="alert-header">
+								<div class="label ${a}">
+									${jt(n.caption)}
+								</div>
+								${c ? u`
+									<span class="date">
+										${c}
+									</span>
+								` : ""}
 							</div>
-							${c ? $`
-								<span class="date">
-									${c}
-								</span>
-							` : ""}
+							${n.url ? u`
+								<a class="title" href=${n.url}>${n.title}</a>
+							` : u`
+								<div class="title no-link">${n.title}</div>
+							`}
+							${n.body ? u`<p class="body">${n.body}</p>` : ""}
 						</div>
-						<a class="title" href=${n.url}>${n.title}</a>
-						${n.body ? $`<p class="body">${n.body}</p>` : ""}
-					</div>
-				</li>
+					</li>
 			`;
     };
-    return $`
+    return u`
 			<div class="wrapper" role="region" aria-live="polite">
 				<div class="heading">
 					<span>Active Alerts</span>
-					${e ? $`<span class="pill">Loading…</span>` : ""}
+					${e ? u`<span class="pill">Loading…</span>` : ""}
 				</div>
 
-				${s ? $`<div class="status error">${s}</div>` : ""}
-				${!s && !e && !t.length ? $`
+				${s ? u`<div class="status error">${s}</div>` : ""}
+				${!s && !e && !t.length ? u`
 					<div class="empty">No active alerts right now.</div>
 				` : ""}
 
-				${t.length ? $`
+				${t.length ? u`
 					<ul class="list">
 						${t.map(r)}
 					</ul>
@@ -847,11 +859,11 @@ class ot extends C {
   }
 }
 globalThis?.customElements && !globalThis.customElements.get("wral-active-alerts") && globalThis.customElements.define("wral-active-alerts", ot);
-function Bt() {
+function Wt() {
   const i = globalThis?.customElements;
   i && (i.get("wral-active-alerts") || i.define("wral-active-alerts", ot));
 }
-typeof window < "u" && globalThis.customElements && Bt();
+typeof window < "u" && globalThis.customElements && Wt();
 export {
-  Bt as defineAll
+  Wt as defineAll
 };

package/dist/index.mjs

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

package/dist/{wral-active-alerts-CSZAUUIB.js → wral-active-alerts-Dd9mTg2z.js}

@@ -1,24 +1,26 @@
-import { LitElement as c, css as d, html as i } from "lit";
-import { createClient as m } from "@wral/sdk-alerts/v1";
-const f = "https://api.wral.com/alerts/v1/active/alerts", p = "https://assets.wral.com/a1cc0e86-adab-48e9-bd80-703cd2c56aff?w=1200&h=630", h = (t) => String(t || "Alert").replace(/[^\p{L}\p{N}]/gu, " ").replace(/\s+/g, " ").trim() || "Alert", g = (t) => {
-  if (!t) return null;
-  const e = t.url || t.href || "", s = t.title || t.headline || "";
-  if (!e || !s) return null;
-  const a = t.topic || "", l = t.caption || a || "Alert", r = t.image || t.imageUrl || t.image_url || p;
+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 = (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: a,
-    caption: l,
-    image: r,
-    body: t.body || t.summary || "",
-    effectiveFrom: t.effectiveFrom || t.effective_from || ""
+    topic: l || a,
+    caption: r,
+    image: n,
+    body: e.body || e.summary || "",
+    effectiveFrom: e.effectiveFrom || e.effective_from || ""
   };
-}, u = (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",
@@ -28,7 +30,7 @@ const f = "https://api.wral.com/alerts/v1/active/alerts", p = "https://assets.wr
     return "";
   }
 };
-class b extends c {
+class y extends d {
   static properties = {
     api: { type: String },
     items: { state: !0 },
@@ -37,16 +39,16 @@ class b extends c {
     refreshInterval: { type: Number, attribute: "refresh-interval" }
   };
   constructor() {
-    super(), this.api = f, this.items = [], this.loading = !1, this.error = "", this.refreshInterval = 0, this._refreshId = null;
+    super(), this.api = h, this.items = [], this.loading = !1, this.error = "", this.refreshInterval = 0, this._refreshId = null;
   }
-  static styles = d`
+  static styles = m`
 		:host {
 			display: block;
 			background: #f7f5f4;
 			color: #000b27;
 		}
 		.wrapper {
-			max-width: 1040px;
+			max-width: ${p.lg}px;
 			margin: 0 auto;
 			padding: 1rem 1.25rem 1.5rem;
 		}
@@ -119,10 +121,10 @@ class b extends c {
 			color: #fff;
 			font-size: .75rem;
 			font-weight: 700;
-			padding: 0.125rem 0.35rem;
-			border-radius: 6px;
+			padding: 0.125rem 0.1875rem 0.05rem;
+			border-radius: 4px;
 			text-transform: uppercase;
-			background-color: #c15800;
+			background-color: #daa520; /* default (gold) */
 			letter-spacing: .03em;
 		}
 		.label.recommended-story {
@@ -140,6 +142,12 @@ class b 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;
@@ -186,11 +194,11 @@ class b extends c {
   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 m({
+    return f({
       baseUrl: this.api.replace(/v1\/.*$/, "")
     }).listActiveAlerts();
   }
@@ -198,10 +206,10 @@ class b extends c {
     if (this.api) {
       this.loading = !0, this.error = "";
       try {
-        const e = await this.fetchActiveAlerts();
-        this.items = (e?.items || []).map(g).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;
       }
@@ -209,39 +217,43 @@ class b extends c {
   }
   _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, o) => {
-      const n = u(r.effectiveFrom);
+    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=${o} aria-label="Site Alert">
+				<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 ${r.topic}">
-								${h(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>
-							${n ? i`
-								<span class="date">
-									${n}
-								</span>
-							` : ""}
+							${r.url ? i`
+								<a class="title" href=${r.url}>${r.title}</a>
+							` : i`
+								<div class="title no-link">${r.title}</div>
+							`}
+							${r.body ? i`<p class="body">${r.body}</p>` : ""}
 						</div>
-						<a class="title" href=${r.url}>${r.title}</a>
-						${r.body ? i`<p class="body">${r.body}</p>` : ""}
-					</div>
-				</li>
+					</li>
 			`;
     };
     return i`
@@ -252,22 +264,22 @@ class b extends c {
 				</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>
 		`;
   }
 }
-globalThis?.customElements && !globalThis.customElements.get("wral-active-alerts") && globalThis.customElements.define("wral-active-alerts", b);
+globalThis?.customElements && !globalThis.customElements.get("wral-active-alerts") && globalThis.customElements.define("wral-active-alerts", y);
 export {
-  b as W,
-  g as n,
-  h as s
+  y as W,
+  v as n,
+  u as s
 };

package/package.json

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