@zealsolutions/zeal-ui 1.0.0-alpha.330 → 1.0.0-alpha.332

package/dist/components/header/index.js

@@ -1,32 +1,32 @@
-import { openBlock as o, createElementBlock as i, createVNode as C, createElementVNode as n, createTextVNode as U, mergeModels as Z, useModel as ye, getCurrentInstance as ae, ref as b, computed as S, watch as R, nextTick as ee, onMounted as ve, onBeforeUnmount as me, createBlock as I, Teleport as be, withModifiers as A, withDirectives as K, vModelText as ge, createCommentVNode as v, normalizeClass as $, toDisplayString as m, Fragment as N, renderList as j, normalizeStyle as ke, pushScopeId as we, popScopeId as $e, Transition as se, withCtx as re, resolveDynamicComponent as ie, unref as G, vShow as ce, renderSlot as B } from "vue";
-import Ce from "../../HouseIcon-BxmNyxvv.js";
-import _e from "../../ArrowLeftIcon-Cgsy08pY.js";
-import ue from "../../MagnifyingGlassIcon-ChYNIA-H.js";
-import { _ as Me } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
-import { o as pe } from "../../index-CedrSBIl.js";
-import te from "../../BellIcon-lK5EZXNf.js";
-import Se from "../../CircleCheckIcon-CA15yXgI.js";
-import Te from "../../XMarkIcon-DKJ_--uA.js";
-const Ie = /* @__PURE__ */ n("span", { class: "hidden whitespace-nowrap sm:inline" }, "Search", -1), Ae = /* @__PURE__ */ n("kbd", { class: "hidden items-center gap-px rounded border border-proclusteal-300 bg-proclusteal-100 px-[5px] py-0.5 font-sans text-[11px] font-bold leading-none text-proclusteal-500 sm:inline-flex" }, [
-  /* @__PURE__ */ n("span", null, "⌘"),
-  /* @__PURE__ */ U("K ")
-], -1), Ee = {
+import { openBlock as l, createElementBlock as u, createVNode as T, createElementVNode as a, createTextVNode as P, mergeModels as te, useModel as ge, getCurrentInstance as ie, ref as g, computed as $, watch as K, nextTick as ne, onMounted as ke, onBeforeUnmount as we, createBlock as E, Teleport as Ce, withModifiers as N, withDirectives as G, vModelText as $e, createCommentVNode as m, normalizeClass as M, toDisplayString as b, Fragment as H, renderList as U, normalizeStyle as q, pushScopeId as Se, popScopeId as _e, Transition as ce, withCtx as ue, resolveDynamicComponent as pe, unref as F, vShow as de, renderSlot as V } from "vue";
+import Me from "../../HouseIcon-BxmNyxvv.js";
+import Te from "../../ArrowLeftIcon-Cgsy08pY.js";
+import fe from "../../MagnifyingGlassIcon-ChYNIA-H.js";
+import { _ as Ae } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+import { o as xe } from "../../index-CedrSBIl.js";
+import oe from "../../BellIcon-lK5EZXNf.js";
+import Ie from "../../CircleCheckIcon-CA15yXgI.js";
+import Ee from "../../XMarkIcon-DKJ_--uA.js";
+const Ne = /* @__PURE__ */ a("span", { class: "hidden whitespace-nowrap sm:inline" }, "Search", -1), He = /* @__PURE__ */ a("kbd", { class: "hidden items-center gap-px rounded border border-proclusteal-300 bg-proclusteal-100 px-[5px] py-0.5 font-sans text-[11px] font-bold leading-none text-proclusteal-500 sm:inline-flex" }, [
+  /* @__PURE__ */ a("span", null, "⌘"),
+  /* @__PURE__ */ P("K ")
+], -1), Oe = {
   __name: "GlobalSearchPill",
   emits: ["click"],
   setup(e) {
-    return (u, p) => (o(), i("button", {
+    return (i, o) => (l(), u("button", {
       type: "button",
       class: "inline-flex h-[34px] cursor-pointer items-center justify-center gap-[7px] rounded-lg border border-proclusteal-300 bg-white pl-[11px] pr-[9px] font-sans text-[13px] font-semibold text-proclusteal-600 transition-[border-color,color,box-shadow] duration-150 hover:border-proclusteal-950 hover:text-proclusteal-800 hover:shadow-[0_1px_3px_rgba(20,40,45,0.08)] focus:border-proclusteal-950 focus:text-proclusteal-800 focus:outline-none",
       title: "Search (Ctrl K)",
       "aria-label": "Search (Ctrl K)",
-      onClick: p[0] || (p[0] = (g) => u.$emit("click"))
+      onClick: o[0] || (o[0] = (y) => i.$emit("click"))
     }, [
-      C(ue, { class: "!h-[15px] !w-[15px] flex-none text-proclusteal-950" }),
-      Ie,
-      Ae
+      T(fe, { class: "!h-[15px] !w-[15px] flex-none text-proclusteal-950" }),
+      Ne,
+      He
     ]));
   }
-}, Ne = {
+}, j = {
   Contact: { label: "Contacts", colour: "#1a8a7d", icon: '<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>' },
   Incident: { label: "Incidents", colour: "#cd5c5c", icon: '<path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/>' },
   Asset: { label: "Assets", colour: "#8b4789", icon: '<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/>' },
@@ -39,60 +39,60 @@ const Ie = /* @__PURE__ */ n("span", { class: "hidden whitespace-nowrap sm:inlin
   EDS: { label: "Equipment Data", colour: "#708090", icon: '<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><rect x="8" y="2" width="8" height="4" rx="1" ry="1"/><line x1="8" y1="12" x2="16" y2="12"/><line x1="8" y1="16" x2="14" y2="16"/>' },
   TIS: { label: "Training Sheets", colour: "#4682b4", icon: '<line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/>' },
   Training: { label: "Training", colour: "#3f7cac", icon: '<path d="M22 10 12 5 2 10l10 5 10-5z"/><path d="M6 12v5c0 1 2.7 3 6 3s6-2 6-3v-5"/>' }
-}, He = {
+}, Le = {
   colour: "#9aa4ad",
   icon: '<circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>'
 };
-function De(e, u = {}) {
-  const p = { ...Ne, ...u };
-  return Object.prototype.hasOwnProperty.call(p, e) ? p[e] : { ...He, label: e };
+function De(e, i = {}) {
+  const o = { ...j, ...i };
+  return Object.prototype.hasOwnProperty.call(o, e) ? o[e] : { ...Le, label: e };
 }
-function Oe(e) {
-  return (e == null ? "" : String(e)).replace(/[&<>"']/g, (u) => ({
+function je(e) {
+  return (e == null ? "" : String(e)).replace(/[&<>"']/g, (i) => ({
     "&": "&amp;",
     "<": "&lt;",
     ">": "&gt;",
     '"': "&quot;",
     "'": "&#39;"
-  })[u]);
+  })[i]);
 }
-function Ue(e) {
+function he(e) {
   if (!e)
     return "";
-  const u = String(e).trim();
-  return /^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(u) || /^(rgb|rgba|hsl|hsla)\([0-9.,%\s/]+\)$/i.test(u) || /^[a-z]{3,20}$/i.test(u) ? u : "";
+  const i = String(e).trim();
+  return /^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(i) || /^(rgb|rgba|hsl|hsla)\([0-9.,%\s/]+\)$/i.test(i) || /^[a-z]{3,20}$/i.test(i) ? i : "";
 }
-function H(e) {
+function O(e) {
   if (!e)
     return "";
-  const u = String(e).trim();
-  if (u.includes("\\"))
+  const i = String(e).trim();
+  if (i.includes("\\"))
     return "";
-  let p;
+  let o;
   try {
-    p = new URL(u, "https://url-check.invalid/");
+    o = new URL(i, "https://url-check.invalid/");
   } catch {
     return "";
   }
-  return p.protocol === "http:" || p.protocol === "https:" ? u : "";
+  return o.protocol === "http:" || o.protocol === "https:" ? i : "";
 }
-function je(e) {
-  return String(e || "").toLowerCase().split(/\s+/).filter((u) => u.length >= 2);
+function Pe(e) {
+  return String(e || "").toLowerCase().split(/\s+/).filter((i) => i.length >= 2);
 }
-function le(e, u) {
-  const p = Oe(e);
-  if (!u || !u.length)
-    return p;
-  const g = new RegExp(`(${u.map((d) => d.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("|")})`, "ig");
-  return p.replace(g, "<mark>$1</mark>");
+function le(e, i) {
+  const o = je(e);
+  if (!i || !i.length)
+    return o;
+  const y = new RegExp(`(${i.map((d) => d.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("|")})`, "ig");
+  return o.replace(y, "<mark>$1</mark>");
 }
-const Le = (e) => (we("data-v-b4eb0ff3"), e = e(), $e(), e), ze = { class: "flex items-center gap-2.5 border-b border-proclusteal-200 px-4 py-3.5" }, Pe = ["placeholder"], Ve = {
+const Ue = (e) => (Se("data-v-b4eb0ff3"), e = e(), _e(), e), ze = { class: "flex items-center gap-2.5 border-b border-proclusteal-200 px-4 py-3.5" }, Be = ["placeholder"], Re = {
   key: 0,
   class: "px-[18px] pb-0.5 pt-3.5 text-[15px] font-extrabold text-[#1e262c]"
-}, Be = {
+}, Ve = {
   key: 1,
   class: "border-b border-proclusteal-200 px-[18px] pb-3 pt-2.5"
-}, Re = ["onClick"], Ke = { class: "sticky top-0 z-[1] border-t border-proclusteal-200 bg-proclusteal-150 px-[18px] py-2 text-[12px] font-extrabold tracking-[0.3px] text-proclusteal-700" }, Ge = { class: "ml-0.5 text-[#667079]" }, qe = ["href", "data-row-idx", "onClick", "onMouseenter"], Fe = ["innerHTML"], Qe = { class: "min-w-0 flex-1" }, Xe = ["innerHTML"], Ye = ["innerHTML"], Je = /* @__PURE__ */ Le(() => /* @__PURE__ */ n("svg", {
+}, Ke = ["onClick"], qe = { class: "sticky top-0 z-[1] border-t border-proclusteal-200 bg-proclusteal-150 px-[18px] py-2 text-[12px] font-extrabold tracking-[0.3px] text-proclusteal-700" }, Ge = { class: "ml-0.5 text-[#667079]" }, Fe = ["href", "data-row-idx", "onClick", "onMouseenter"], Qe = ["innerHTML"], Ye = { class: "min-w-0 flex-1" }, Xe = ["innerHTML"], Je = ["innerHTML"], We = /* @__PURE__ */ Ue(() => /* @__PURE__ */ a("svg", {
   class: "h-4 w-4 flex-none text-[#c2cad1]",
   viewBox: "0 0 24 24",
   fill: "none",
@@ -101,10 +101,10 @@ const Le = (e) => (we("data-v-b4eb0ff3"), e = e(), $e(), e), ze = { class: "flex
   "stroke-linecap": "round",
   "stroke-linejoin": "round"
 }, [
-  /* @__PURE__ */ n("polyline", { points: "9 18 15 12 9 6" })
-], -1)), oe = "mb-2 mr-2 inline-flex cursor-pointer items-center gap-[7px] rounded-[20px] border border-[#dde3e8] bg-[#f4f6f8] px-3.5 py-1.5 text-[13px] font-bold text-proclusteal-700 hover:border-proclusteal-950", ne = "!border-proclusteal-950 !bg-proclusteal-950 !text-white", V = "px-5 py-[26px] text-center text-[13px] font-medium text-[#667079]", We = {
+  /* @__PURE__ */ a("polyline", { points: "9 18 15 12 9 6" })
+], -1)), ae = "mb-2 mr-2 inline-flex cursor-pointer items-center gap-[7px] rounded-[20px] border border-[#dde3e8] bg-[#f4f6f8] px-3.5 py-1.5 text-[13px] font-bold text-proclusteal-700 hover:border-proclusteal-950", re = "!border-proclusteal-950 !bg-proclusteal-950 !text-white", R = "px-5 py-[26px] text-center text-[13px] font-medium text-[#667079]", Ze = {
   __name: "GlobalSearchModal",
-  props: /* @__PURE__ */ Z({
+  props: /* @__PURE__ */ te({
     searchProvider: {
       type: Function,
       required: !0
@@ -129,139 +129,139 @@ const Le = (e) => (we("data-v-b4eb0ff3"), e = e(), $e(), e), ze = { class: "flex
     open: { type: Boolean, default: !1 },
     openModifiers: {}
   }),
-  emits: /* @__PURE__ */ Z(["navigate"], ["update:open"]),
-  setup(e, { emit: u }) {
-    const p = e, g = u, d = ye(e, "open"), x = ae(), y = b(null), _ = b(null), M = b(null), w = b(""), c = b(""), r = b([]), l = b("all"), h = b("zero"), k = b(-1);
-    let L = null, E = 0, D = null, T = null;
-    const q = S(() => je(c.value)), F = (t) => De(t, p.types), Q = S(() => {
+  emits: /* @__PURE__ */ te(["navigate"], ["update:open"]),
+  setup(e, { emit: i }) {
+    const o = e, y = i, d = ge(e, "open"), x = ie(), w = g(null), _ = g(null), A = g(null), k = g(""), S = g(""), v = g([]), f = g("all"), n = g("zero"), c = g(-1);
+    let p = null, C = 0, L = null, I = null;
+    const Q = $(() => Pe(S.value)), Y = (t) => De(t, o.types), X = $(() => {
       let t = 0;
-      return r.value.filter((s) => l.value === "all" || s.type === l.value).map((s) => {
-        const a = F(s.type);
+      return v.value.filter((s) => f.value === "all" || s.type === f.value).map((s) => {
+        const r = Y(s.type);
         return {
           type: s.type,
-          label: a.label,
-          items: s.items.map((f) => ({
-            url: H(f.Url),
-            titleHtml: le(f.Title, q.value),
-            subtitleHtml: le(f.Subtitle, q.value),
-            tileColour: Ue(f.Colour) || a.colour,
-            tileIcon: a.icon,
+          label: r.label,
+          items: s.items.map((h) => ({
+            url: O(h.Url),
+            titleHtml: le(h.Title, Q.value),
+            subtitleHtml: le(h.Subtitle, Q.value),
+            tileColour: he(h.Colour) || r.colour,
+            tileIcon: r.icon,
             flatIdx: t++
           }))
         };
       });
-    }), X = S(() => Q.value.flatMap((t) => t.items)), de = S(() => r.value.reduce((t, s) => t + s.items.length, 0));
+    }), J = $(() => X.value.flatMap((t) => t.items)), ye = $(() => v.value.reduce((t, s) => t + s.items.length, 0));
     function z(t) {
-      const s = X.value;
+      const s = J.value;
       if (!s.length) {
-        k.value = -1;
+        c.value = -1;
         return;
       }
-      k.value = Math.min(Math.max(t, 0), s.length - 1), ee(() => {
-        var f;
-        const a = (f = M.value) == null ? void 0 : f.querySelector(`[data-row-idx="${k.value}"]`);
-        a == null || a.scrollIntoView({ block: "nearest" });
+      c.value = Math.min(Math.max(t, 0), s.length - 1), ne(() => {
+        var h;
+        const r = (h = A.value) == null ? void 0 : h.querySelector(`[data-row-idx="${c.value}"]`);
+        r == null || r.scrollIntoView({ block: "nearest" });
       });
     }
-    function Y(t) {
+    function W(t) {
       var s;
-      l.value = t, z(0), (s = y.value) == null || s.focus();
+      f.value = t, z(0), (s = w.value) == null || s.focus();
     }
-    function J(t) {
-      var s, a;
-      t && (g("navigate", t), (a = (s = x == null ? void 0 : x.vnode) == null ? void 0 : s.props) != null && a.onNavigate || (window.location.href = t), O());
+    function Z(t) {
+      var s, r;
+      t && (y("navigate", t), (r = (s = x == null ? void 0 : x.vnode) == null ? void 0 : s.props) != null && r.onNavigate || (window.location.href = t), D());
     }
-    function O() {
+    function D() {
       d.value = !1;
     }
-    async function fe(t) {
-      const s = ++E;
-      c.value = t;
+    async function ve(t) {
+      const s = ++C;
+      S.value = t;
       try {
-        const a = await p.searchProvider(t);
-        if (s !== E || !d.value)
+        const r = await o.searchProvider(t);
+        if (s !== C || !d.value)
           return;
-        r.value = a && a.groups || [], l.value = "all", h.value = r.value.length ? "results" : "empty", z(0);
+        v.value = r && r.groups || [], f.value = "all", n.value = v.value.length ? "results" : "empty", z(0);
       } catch {
-        if (s !== E || !d.value)
+        if (s !== C || !d.value)
           return;
-        r.value = [], h.value = "error", k.value = -1;
+        v.value = [], n.value = "error", c.value = -1;
       }
     }
-    R(w, (t) => {
-      clearTimeout(L);
+    K(k, (t) => {
+      clearTimeout(p);
       const s = t.trim();
-      if (s.length < p.minChars) {
-        E++, r.value = [], h.value = s.length ? "hint" : "zero", k.value = -1;
+      if (s.length < o.minChars) {
+        C++, v.value = [], n.value = s.length ? "hint" : "zero", c.value = -1;
         return;
       }
-      L = setTimeout(() => fe(s), p.debounce);
-    }), R(d, (t) => {
-      t ? (D = document.activeElement, w.value = "", c.value = "", r.value = [], l.value = "all", h.value = "zero", k.value = -1, T = document.body.style.overflow, document.body.style.overflow = "hidden", ee(() => {
+      p = setTimeout(() => ve(s), o.debounce);
+    }), K(d, (t) => {
+      t ? (L = document.activeElement, k.value = "", S.value = "", v.value = [], f.value = "all", n.value = "zero", c.value = -1, I = document.body.style.overflow, document.body.style.overflow = "hidden", ne(() => {
         var s;
-        return (s = y.value) == null ? void 0 : s.focus();
-      })) : (clearTimeout(L), E++, T !== null && (document.body.style.overflow = T, T = null), D != null && D.focus && D.focus());
+        return (s = w.value) == null ? void 0 : s.focus();
+      })) : (clearTimeout(p), C++, I !== null && (document.body.style.overflow = I, I = null), L != null && L.focus && L.focus());
     }, { immediate: !0 });
-    function xe(t) {
+    function me(t) {
       var s;
       if (t.key === "Escape") {
-        t.preventDefault(), O();
+        t.preventDefault(), D();
         return;
       }
       if (t.key === "ArrowDown") {
-        t.preventDefault(), z(k.value + 1);
+        t.preventDefault(), z(c.value + 1);
         return;
       }
       if (t.key === "ArrowUp") {
-        t.preventDefault(), z(k.value - 1);
+        t.preventDefault(), z(c.value - 1);
         return;
       }
       if (t.key === "Enter") {
         if (t.isComposing)
           return;
-        const a = X.value;
-        if (!a.length)
+        const r = J.value;
+        if (!r.length)
           return;
-        t.preventDefault(), J(a[k.value >= 0 ? k.value : 0].url);
+        t.preventDefault(), Z(r[c.value >= 0 ? c.value : 0].url);
         return;
       }
       if (t.key === "Tab") {
-        const a = (s = _.value) == null ? void 0 : s.querySelectorAll('input, button, a[href], [tabindex]:not([tabindex="-1"])');
-        if (!(a != null && a.length))
+        const r = (s = _.value) == null ? void 0 : s.querySelectorAll('input, button, a[href], [tabindex]:not([tabindex="-1"])');
+        if (!(r != null && r.length))
           return;
-        const f = a[0], P = a[a.length - 1];
-        t.shiftKey && document.activeElement === f ? (t.preventDefault(), P.focus()) : !t.shiftKey && document.activeElement === P && (t.preventDefault(), f.focus());
+        const h = r[0], B = r[r.length - 1];
+        t.shiftKey && document.activeElement === h ? (t.preventDefault(), B.focus()) : !t.shiftKey && document.activeElement === B && (t.preventDefault(), h.focus());
       }
     }
-    function he(t) {
+    function be(t) {
       if (!t)
         return !1;
       const s = (t.tagName || "").toLowerCase();
       return s === "input" || s === "textarea" || s === "select" || t.isContentEditable;
     }
-    function W(t) {
+    function ee(t) {
       if (t.key === "Escape" && d.value) {
-        t.preventDefault(), O();
+        t.preventDefault(), D();
         return;
       }
       if ((t.ctrlKey || t.metaKey) && (t.key === "k" || t.key === "K")) {
         t.preventDefault(), d.value = !d.value;
         return;
       }
-      t.key === "/" && !d.value && !he(document.activeElement) && (t.preventDefault(), d.value = !0);
+      t.key === "/" && !d.value && !be(document.activeElement) && (t.preventDefault(), d.value = !0);
     }
-    return ve(() => {
-      document.addEventListener("keydown", W);
-    }), me(() => {
-      document.removeEventListener("keydown", W), clearTimeout(L), E++, T !== null && (document.body.style.overflow = T, T = null);
-    }), (t, s) => (o(), I(be, { to: "body" }, [
-      d.value ? (o(), i("div", {
+    return ke(() => {
+      document.addEventListener("keydown", ee);
+    }), we(() => {
+      document.removeEventListener("keydown", ee), clearTimeout(p), C++, I !== null && (document.body.style.overflow = I, I = null);
+    }), (t, s) => (l(), E(Ce, { to: "body" }, [
+      d.value ? (l(), u("div", {
         key: 0,
         class: "fixed inset-0 z-[20000] flex items-start justify-center bg-[#11181c]/45",
-        onMousedown: A(O, ["self"]),
-        onKeydown: xe
+        onMousedown: N(D, ["self"]),
+        onKeydown: me
       }, [
-        n("div", {
+        a("div", {
           ref_key: "panelEl",
           ref: _,
           class: "mt-[4vh] flex max-h-[88vh] w-[94%] max-w-[720px] flex-col overflow-hidden rounded-[14px] bg-white font-sans shadow-[0_30px_80px_rgba(0,0,0,0.3)] sm:mt-[8vh] sm:max-h-[82vh]",
@@ -269,88 +269,88 @@ const Le = (e) => (we("data-v-b4eb0ff3"), e = e(), $e(), e), ze = { class: "flex
           "aria-modal": "true",
           "aria-label": "Search"
         }, [
-          n("div", ze, [
-            C(ue, { class: "!h-[18px] !w-[18px] flex-none text-proclusteal-400" }),
-            K(n("input", {
+          a("div", ze, [
+            T(fe, { class: "!h-[18px] !w-[18px] flex-none text-proclusteal-400" }),
+            G(a("input", {
               ref_key: "inputEl",
-              ref: y,
-              "onUpdate:modelValue": s[0] || (s[0] = (a) => w.value = a),
+              ref: w,
+              "onUpdate:modelValue": s[0] || (s[0] = (r) => k.value = r),
               type: "text",
               autocomplete: "off",
               placeholder: e.placeholder,
               class: "flex-1 border-0 bg-transparent p-0 text-[16px] text-[#1e262c] outline-none placeholder:text-proclusteal-400 focus:ring-0"
-            }, null, 8, Pe), [
-              [ge, w.value]
+            }, null, 8, Be), [
+              [$e, k.value]
             ]),
-            n("button", {
+            a("button", {
               type: "button",
               class: "cursor-pointer border-0 bg-transparent px-1 text-[22px] leading-none text-proclusteal-400 hover:text-proclusteal-700",
               "aria-label": "Close search",
               title: "Close (Esc)",
-              onClick: O
+              onClick: D
             }, "×")
           ]),
-          h.value === "results" ? (o(), i("div", Ve, " Search results ")) : v("", !0),
-          h.value === "results" ? (o(), i("div", Be, [
-            n("button", {
+          n.value === "results" ? (l(), u("div", Re, " Search results ")) : m("", !0),
+          n.value === "results" ? (l(), u("div", Ve, [
+            a("button", {
               type: "button",
-              class: $([oe, l.value === "all" ? ne : ""]),
-              onClick: s[1] || (s[1] = (a) => Y("all"))
+              class: M([ae, f.value === "all" ? re : ""]),
+              onClick: s[1] || (s[1] = (r) => W("all"))
             }, [
-              U(" All "),
-              n("span", {
-                class: $(["font-bold", l.value === "all" ? "opacity-85" : "opacity-60"])
-              }, "(" + m(de.value) + ")", 3)
+              P(" All "),
+              a("span", {
+                class: M(["font-bold", f.value === "all" ? "opacity-85" : "opacity-60"])
+              }, "(" + b(ye.value) + ")", 3)
             ], 2),
-            (o(!0), i(N, null, j(r.value, (a) => (o(), i("button", {
-              key: a.type,
+            (l(!0), u(H, null, U(v.value, (r) => (l(), u("button", {
+              key: r.type,
               type: "button",
-              class: $([oe, l.value === a.type ? ne : ""]),
-              onClick: (f) => Y(a.type)
+              class: M([ae, f.value === r.type ? re : ""]),
+              onClick: (h) => W(r.type)
             }, [
-              U(m(F(a.type).label) + " ", 1),
-              n("span", {
-                class: $(["font-bold", l.value === a.type ? "opacity-85" : "opacity-60"])
-              }, "(" + m(a.items.length) + ")", 3)
-            ], 10, Re))), 128))
-          ])) : v("", !0),
-          n("div", {
+              P(b(Y(r.type).label) + " ", 1),
+              a("span", {
+                class: M(["font-bold", f.value === r.type ? "opacity-85" : "opacity-60"])
+              }, "(" + b(r.items.length) + ")", 3)
+            ], 10, Ke))), 128))
+          ])) : m("", !0),
+          a("div", {
             ref_key: "resultsEl",
-            ref: M,
+            ref: A,
             class: "overflow-y-auto pb-2.5"
           }, [
-            h.value === "zero" ? (o(), i("div", {
+            n.value === "zero" ? (l(), u("div", {
               key: 0,
-              class: $(V)
-            }, " Search across SOPs, incidents, assets, people and more — you only ever see what you have access to. ")) : h.value === "hint" ? (o(), i("div", {
+              class: M(R)
+            }, " Search across SOPs, incidents, assets, people and more — you only ever see what you have access to. ")) : n.value === "hint" ? (l(), u("div", {
               key: 1,
-              class: $(V)
-            }, " Keep typing… enter at least " + m(e.minChars) + " characters to search. ", 1)) : h.value === "empty" ? (o(), i("div", {
+              class: M(R)
+            }, " Keep typing… enter at least " + b(e.minChars) + " characters to search. ", 1)) : n.value === "empty" ? (l(), u("div", {
               key: 2,
-              class: $(V)
-            }, " No results for “" + m(c.value) + "” — try a broader term or a code. ", 1)) : h.value === "error" ? (o(), i("div", {
+              class: M(R)
+            }, " No results for “" + b(S.value) + "” — try a broader term or a code. ", 1)) : n.value === "error" ? (l(), u("div", {
               key: 3,
-              class: $(V)
-            }, " Search is temporarily unavailable. ")) : (o(!0), i(N, { key: 4 }, j(Q.value, (a) => (o(), i("div", {
-              key: a.type
+              class: M(R)
+            }, " Search is temporarily unavailable. ")) : (l(!0), u(H, { key: 4 }, U(X.value, (r) => (l(), u("div", {
+              key: r.type
             }, [
-              n("div", Ke, [
-                U(m(a.label) + " ", 1),
-                n("span", Ge, "(" + m(a.items.length) + ")", 1)
+              a("div", qe, [
+                P(b(r.label) + " ", 1),
+                a("span", Ge, "(" + b(r.items.length) + ")", 1)
               ]),
-              (o(!0), i(N, null, j(a.items, (f) => (o(), i("a", {
-                key: f.flatIdx,
-                href: f.url || null,
-                class: $(["flex items-center gap-[13px] px-[18px] py-[11px] text-[#1e262c] no-underline", { "bg-proclusteal-50": f.flatIdx === k.value }]),
-                "data-row-idx": f.flatIdx,
-                onClick: A((P) => J(f.url), ["exact", "prevent"]),
-                onMouseenter: (P) => k.value = f.flatIdx
+              (l(!0), u(H, null, U(r.items, (h) => (l(), u("a", {
+                key: h.flatIdx,
+                href: h.url || null,
+                class: M(["flex items-center gap-[13px] px-[18px] py-[11px] text-[#1e262c] no-underline", { "bg-proclusteal-50": h.flatIdx === c.value }]),
+                "data-row-idx": h.flatIdx,
+                onClick: N((B) => Z(h.url), ["exact", "prevent"]),
+                onMouseenter: (B) => c.value = h.flatIdx
               }, [
-                n("span", {
+                a("span", {
                   class: "inline-flex h-[42px] w-[42px] flex-none items-center justify-center rounded-[10px] text-white",
-                  style: ke({ background: f.tileColour })
+                  style: q({ background: h.tileColour })
                 }, [
-                  (o(), i("svg", {
+                  (l(), u("svg", {
                     class: "h-5 w-5",
                     viewBox: "0 0 24 24",
                     fill: "none",
@@ -358,85 +358,156 @@ const Le = (e) => (we("data-v-b4eb0ff3"), e = e(), $e(), e), ze = { class: "flex
                     "stroke-width": "2",
                     "stroke-linecap": "round",
                     "stroke-linejoin": "round",
-                    innerHTML: f.tileIcon
-                  }, null, 8, Fe))
+                    innerHTML: h.tileIcon
+                  }, null, 8, Qe))
                 ], 4),
-                n("span", Qe, [
-                  n("span", {
+                a("span", Ye, [
+                  a("span", {
                     class: "gs-marked block truncate text-[14px] font-bold",
-                    innerHTML: f.titleHtml
+                    innerHTML: h.titleHtml
                   }, null, 8, Xe),
-                  n("span", {
+                  a("span", {
                     class: "gs-marked mt-0.5 block truncate text-[12.5px] text-[#5b6570]",
-                    innerHTML: f.subtitleHtml
-                  }, null, 8, Ye)
+                    innerHTML: h.subtitleHtml
+                  }, null, 8, Je)
                 ]),
-                Je
-              ], 42, qe))), 128))
+                We
+              ], 42, Fe))), 128))
             ]))), 128))
           ], 512)
         ], 512)
-      ], 32)) : v("", !0)
+      ], 32)) : m("", !0)
     ]));
   }
-}, Ze = /* @__PURE__ */ Me(We, [["__scopeId", "data-v-b4eb0ff3"]]), et = {
+}, et = /* @__PURE__ */ Ae(Ze, [["__scopeId", "data-v-b4eb0ff3"]]), se = {
+  "reference library": "RefLib",
+  reflib: "RefLib",
+  repository: "RefLib",
+  "equipment data sheets": "EDS",
+  "equipment data": "EDS",
+  "action cards": "ActionCard",
+  "change management": "Change",
+  "safety alert": "Safety",
+  "safety alert system": "Safety",
+  "lessons identified": "LID",
+  "training centre": "Training",
+  "training sheets": "TIS",
+  "incident recording": "Incident",
+  "asset management": "Asset",
+  directory: "Contact",
+  "telephone directory": "Contact"
+};
+function tt(e) {
+  if (!e)
+    return "";
+  const i = String(e).trim();
+  if (!i)
+    return "";
+  let o = null;
+  if (Object.prototype.hasOwnProperty.call(j, i))
+    o = i;
+  else {
+    const y = i.toLowerCase(), d = Object.keys(j).find((x) => x.toLowerCase() === y);
+    d ? o = d : Object.prototype.hasOwnProperty.call(se, y) && (o = se[y]);
+  }
+  return !o || !Object.prototype.hasOwnProperty.call(j, o) ? "" : j[o].icon || "";
+}
+function nt(e) {
+  if (!e)
+    return "";
+  if (e.dateText)
+    return String(e.dateText);
+  const i = e.notifyday != null ? String(e.notifyday).replace(/^0/, "") : "", o = e.notifymonthname ? String(e.notifymonthname) : "", y = e.notifyyear != null ? String(e.notifyyear) : "";
+  return [i, o, y].filter(Boolean).join(" ");
+}
+const ot = {
   key: 0,
   class: "absolute -right-[3px] -top-[3px] h-2 w-2 rounded-full bg-[#dd3730] ring-2 ring-white"
-}, tt = { class: "absolute right-0 top-full z-30 mt-2 w-[400px] max-w-[90vw] origin-top-right overflow-hidden rounded-[10px] border border-proclusteal-300 bg-white shadow-zeal-md" }, lt = { class: "max-h-[420px] overflow-y-auto" }, ot = {
+}, lt = { class: "absolute right-0 top-full z-30 mt-2 w-[400px] max-w-[90vw] origin-top-right overflow-hidden rounded-[10px] border border-proclusteal-300 bg-white shadow-zeal-md" }, at = { class: "max-h-[420px] overflow-y-auto" }, rt = {
   key: 0,
   class: "px-5 py-[26px] text-center text-[13px] font-medium text-[#667079]"
-}, nt = ["onClick"], at = { class: "inline-flex h-[42px] w-[42px] flex-none items-center justify-center rounded-[10px] bg-proclusteal-950 text-white" }, st = { class: "min-w-0 flex-1" }, rt = { class: "block truncate text-[14px] font-bold text-[#1e262c]" }, it = { class: "block truncate text-[12.5px] text-[#5b6570]" }, ct = {
+}, st = {
+  key: 1,
+  class: "px-5 py-[26px] text-center text-[13px] font-medium text-[#667079]"
+}, it = ["onClick"], ct = { class: "inline-flex h-[42px] w-[42px] flex-none items-center justify-center rounded-[10px] bg-proclusteal-950 text-white" }, ut = ["innerHTML"], pt = { class: "min-w-0 flex-1" }, dt = { class: "block truncate text-[14px] font-bold text-[#1e262c]" }, ft = { class: "block truncate text-[12.5px] text-[#5b6570]" }, xt = {
   key: 0,
   class: "mt-0.5 block text-[12px] text-proclusteal-500"
-}, ut = { class: "flex flex-none flex-col items-center gap-2 pt-0.5 text-proclusteal-600" }, pt = ["onClick"], dt = ["onClick"], ft = ["href"], xt = {
+}, ht = { class: "flex flex-none flex-col items-center gap-2 pt-0.5 text-proclusteal-600" }, yt = ["onClick"], vt = ["onClick"], mt = ["href"], bt = {
   __name: "HeaderNotificationDropdown",
   props: {
+    // The feed as /personal/GetNotifications.ashx returns it: { data: [...] }. Null means
+    // "not loaded" — the dropdown shows a loading state and the app can fetch on `open`.
     notifications: {
       type: Object,
       default: null
     },
+    // Unread badge, decoupled from the list so an app can poll the cheap
+    // /personal/notifycheck.ashx ({ notifyCount }) instead of the feed. When null, falls back
+    // to deriving from `notifications` (what apps on the original contract already do).
+    unreadCount: {
+      type: Number,
+      default: null
+    },
     notificationsUrl: {
       type: String,
       default: "/personal/notifications.aspx"
     },
+    // Optional per-item icon override, keyed by VueAppTypeIcon or AppTypeName. Icons resolve
+    // from the shared table without it, so passing this is not required.
     iconMap: {
       type: Object,
       default: () => ({})
     }
   },
-  emits: ["markAsRead", "deleteNotification", "navigate"],
-  setup(e, { emit: u }) {
-    const p = e, g = u, d = b(null), x = b(!1), y = S(() => {
-      var c;
-      return ((c = p.notifications) == null ? void 0 : c.data) || [];
-    }), _ = S(() => y.value.some((c) => c.ClassRead === "unread"));
-    pe(d, () => {
+  emits: ["markAsRead", "deleteNotification", "navigate", "open"],
+  setup(e, { emit: i }) {
+    const o = e, y = i, d = g(null), x = g(!1), w = $(() => {
+      var n;
+      return ((n = o.notifications) == null ? void 0 : n.data) || [];
+    }), _ = $(() => o.unreadCount !== null && o.unreadCount !== void 0 ? o.unreadCount > 0 : w.value.some((n) => n.ClassRead === "unread"));
+    xe(d, () => {
       x.value = !1;
     });
-    function M(c) {
-      return Object.prototype.hasOwnProperty.call(p.iconMap, c.VueAppTypeIcon) && p.iconMap[c.VueAppTypeIcon] || te;
+    function A() {
+      x.value = !x.value, x.value && y("open");
+    }
+    function k(n) {
+      return n && Object.prototype.hasOwnProperty.call(o.iconMap, n) && o.iconMap[n] || null;
     }
-    function w(c) {
+    function S(n) {
+      const c = k(n.VueAppTypeIcon) || k(n.AppTypeName);
+      if (c)
+        return { component: c, path: "" };
+      const p = tt(n.AppTypeName);
+      return p ? { component: null, path: p } : { component: oe, path: "" };
+    }
+    const v = $(() => w.value.map((n) => ({
+      item: n,
+      icon: S(n),
+      date: nt(n),
+      unread: n.ClassRead === "unread"
+    })));
+    function f(n) {
       x.value = !1;
-      const r = H(c);
-      r && g("navigate", r);
+      const c = O(n);
+      c && y("navigate", c);
     }
-    return (c, r) => (o(), i("div", {
+    return (n, c) => (l(), u("div", {
       ref_key: "rootEl",
       ref: d,
       class: "relative font-sans"
     }, [
-      n("button", {
+      a("button", {
         type: "button",
         class: "relative flex cursor-pointer items-center justify-center text-proclusteal-600 transition-colors duration-150 hover:text-proclusteal-900",
         title: "View Notifications",
         "aria-label": "View Notifications",
-        onClick: r[0] || (r[0] = (l) => x.value = !x.value)
+        onClick: A
       }, [
-        C(te, { class: "!h-[21px] !w-[21px]" }),
-        _.value ? (o(), i("span", et)) : v("", !0)
+        T(oe, { class: "!h-[21px] !w-[21px]" }),
+        _.value ? (l(), u("span", ot)) : m("", !0)
       ]),
-      C(se, {
+      T(ce, {
         "enter-active-class": "transition-all ease-out duration-75",
         "enter-from-class": "scale-95 opacity-0",
         "enter-to-class": "scale-100 opacity-100",
@@ -444,66 +515,79 @@ const Le = (e) => (we("data-v-b4eb0ff3"), e = e(), $e(), e), ze = { class: "flex
         "leave-from-class": "scale-100 opacity-100",
         "leave-to-class": "scale-95 opacity-0"
       }, {
-        default: re(() => [
-          K(n("div", tt, [
-            n("div", lt, [
-              y.value.length ? v("", !0) : (o(), i("div", ot, " No notifications. ")),
-              (o(!0), i(N, null, j(y.value, (l) => (o(), i("div", {
-                key: l.NotifyID,
-                class: $(["flex cursor-pointer items-start gap-3 border-b border-proclusteal-200 px-4 py-3", l.ClassRead === "unread" ? "bg-proclusteal-50" : "bg-white"]),
-                onClick: (h) => w(l.url)
+        default: ue(() => [
+          G(a("div", lt, [
+            a("div", at, [
+              e.notifications ? w.value.length ? m("", !0) : (l(), u("div", st, " No notifications. ")) : (l(), u("div", rt, " Loading notifications… ")),
+              (l(!0), u(H, null, U(v.value, (p) => (l(), u("div", {
+                key: p.item.NotifyID,
+                class: M(["flex cursor-pointer items-start gap-3 border-b border-proclusteal-200 px-4 py-3", p.unread ? "bg-proclusteal-50" : "bg-white"]),
+                onClick: (C) => f(p.item.url)
               }, [
-                n("span", at, [
-                  (o(), I(ie(M(l)), { class: "!h-5 !w-5" }))
+                a("span", ct, [
+                  p.icon.component ? (l(), E(pe(p.icon.component), {
+                    key: 0,
+                    class: "!h-5 !w-5"
+                  })) : (l(), u("svg", {
+                    key: 1,
+                    class: "h-5 w-5",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    "stroke-width": "2",
+                    "stroke-linecap": "round",
+                    "stroke-linejoin": "round",
+                    innerHTML: p.icon.path
+                  }, null, 8, ut))
                 ]),
-                n("span", st, [
-                  n("span", rt, m(l.notifyname), 1),
-                  n("span", it, m(l.summary), 1),
-                  l.dateText ? (o(), i("span", ct, m(l.dateText), 1)) : v("", !0)
+                a("span", pt, [
+                  a("span", dt, b(p.item.notifyname), 1),
+                  a("span", ft, b(p.item.summary), 1),
+                  p.date ? (l(), u("span", xt, b(p.date), 1)) : m("", !0)
                 ]),
-                n("span", ut, [
-                  l.ClassRead === "unread" ? (o(), i("button", {
+                a("span", ht, [
+                  p.unread ? (l(), u("button", {
                     key: 0,
                     type: "button",
                     class: "hover:text-proclusteal-900",
                     title: "Mark notification as read",
                     "aria-label": "Mark notification as read",
-                    onClick: A((h) => c.$emit("markAsRead", l.NotifyID), ["stop"])
+                    onClick: N((C) => n.$emit("markAsRead", p.item.NotifyID), ["stop"])
                   }, [
-                    C(Se, { class: "!h-4 !w-4" })
-                  ], 8, pt)) : v("", !0),
-                  n("button", {
+                    T(Ie, { class: "!h-4 !w-4" })
+                  ], 8, yt)) : m("", !0),
+                  a("button", {
                     type: "button",
                     class: "hover:text-[#dd3730]",
                     title: "Delete notification",
                     "aria-label": "Delete notification",
-                    onClick: A((h) => c.$emit("deleteNotification", l.NotifyID), ["stop"])
+                    onClick: N((C) => n.$emit("deleteNotification", p.item.NotifyID), ["stop"])
                   }, [
-                    C(Te, { class: "!w-3" })
-                  ], 8, dt)
+                    T(Ee, { class: "!w-3" })
+                  ], 8, vt)
                 ])
-              ], 10, nt))), 128))
+              ], 10, it))), 128))
             ]),
-            n("a", {
-              href: G(H)(e.notificationsUrl) || null,
+            a("a", {
+              href: F(O)(e.notificationsUrl) || null,
               class: "block border-t border-proclusteal-200 px-4 py-2.5 text-center text-[13px] font-bold text-proclusteal-700 no-underline hover:bg-proclusteal-50 hover:text-proclusteal-900",
-              onClick: r[1] || (r[1] = A((l) => w(e.notificationsUrl), ["exact", "prevent"]))
-            }, " See all notifications ", 8, ft)
+              onClick: c[0] || (c[0] = N((p) => f(e.notificationsUrl), ["exact", "prevent"]))
+            }, " See all notifications ", 8, mt)
           ], 512), [
-            [ce, x.value]
+            [de, x.value]
           ])
         ]),
         _: 1
       })
     ], 512));
   }
-}, ht = ["src"], yt = {
+}, gt = ["src"], kt = {
   key: 1,
   class: "inline-flex h-[34px] w-[34px] items-center justify-center rounded-full bg-proclusteal-900 text-[13px] font-bold uppercase leading-none tracking-[0.5px] text-white"
-}, vt = { class: "absolute right-0 top-full z-30 mt-2 w-[260px] origin-top-right rounded-[10px] border border-proclusteal-300 bg-white py-1 shadow-zeal-md" }, mt = { class: "flex max-w-[260px] flex-col gap-0.5 whitespace-normal px-[18px] pb-2.5 pt-3" }, bt = { class: "block text-[14px] font-bold text-proclusteal-800" }, gt = /* @__PURE__ */ n("span", { class: "my-1.5 block h-0.5 w-8 flex-none rounded-[1px] bg-[#cdd4da]" }, null, -1), kt = { class: "block break-words text-[12px] leading-[1.3] text-proclusteal-600" }, wt = /* @__PURE__ */ n("div", { class: "h-px bg-proclusteal-200" }, null, -1), $t = {
+}, wt = { class: "absolute right-0 top-full z-30 mt-2 w-[260px] origin-top-right rounded-[10px] border border-proclusteal-300 bg-white py-1 shadow-zeal-md" }, Ct = { class: "flex max-w-[260px] flex-col gap-0.5 whitespace-normal px-[18px] pb-2.5 pt-3" }, $t = { class: "block text-[14px] font-bold text-proclusteal-800" }, St = /* @__PURE__ */ a("span", { class: "my-1.5 block h-0.5 w-8 flex-none rounded-[1px] bg-[#cdd4da]" }, null, -1), _t = { class: "block break-words text-[12px] leading-[1.3] text-proclusteal-600" }, Mt = /* @__PURE__ */ a("div", { class: "h-px bg-proclusteal-200" }, null, -1), Tt = {
   key: 0,
   class: "my-1 h-px bg-proclusteal-200"
-}, Ct = ["href", "onClick"], _t = {
+}, At = ["href", "onClick"], It = {
   __name: "HeaderUserMenu",
   props: {
     user: {
@@ -516,39 +600,39 @@ const Le = (e) => (we("data-v-b4eb0ff3"), e = e(), $e(), e), ze = { class: "flex
     }
   },
   emits: ["select"],
-  setup(e, { emit: u }) {
-    const p = e, g = u, d = b(null), x = b(!1), y = b(!1);
-    R(() => p.user.avatarUrl, () => {
-      y.value = !1;
+  setup(e, { emit: i }) {
+    const o = e, y = i, d = g(null), x = g(!1), w = g(!1);
+    K(() => o.user.avatarUrl, () => {
+      w.value = !1;
     });
-    const _ = S(() => `${p.user.firstName || ""} ${p.user.surname || ""}`.trim()), M = S(() => `${(p.user.firstName || "").charAt(0)}${(p.user.surname || "").charAt(0)}`.toUpperCase());
-    pe(d, () => {
+    const _ = $(() => `${o.user.firstName || ""} ${o.user.surname || ""}`.trim()), A = $(() => `${(o.user.firstName || "").charAt(0)}${(o.user.surname || "").charAt(0)}`.toUpperCase());
+    xe(d, () => {
       x.value = !1;
     });
-    function w(c) {
-      x.value = !1, g("select", c);
+    function k(S) {
+      x.value = !1, y("select", S);
     }
-    return (c, r) => (o(), i("div", {
+    return (S, v) => (l(), u("div", {
       ref_key: "rootEl",
       ref: d,
       class: "relative font-sans"
     }, [
-      n("button", {
+      a("button", {
         type: "button",
         class: "flex cursor-pointer items-center justify-center",
         title: "View Menu Options",
         "aria-label": "View Menu Options",
-        onClick: r[1] || (r[1] = (l) => x.value = !x.value)
+        onClick: v[1] || (v[1] = (f) => x.value = !x.value)
       }, [
-        e.user.avatarUrl && !y.value ? (o(), i("img", {
+        e.user.avatarUrl && !w.value ? (l(), u("img", {
           key: 0,
           src: e.user.avatarUrl,
           alt: "",
           class: "h-[34px] w-[34px] rounded-full object-cover",
-          onError: r[0] || (r[0] = (l) => y.value = !0)
-        }, null, 40, ht)) : (o(), i("span", yt, m(M.value), 1))
+          onError: v[0] || (v[0] = (f) => w.value = !0)
+        }, null, 40, gt)) : (l(), u("span", kt, b(A.value), 1))
       ]),
-      C(se, {
+      T(ce, {
         "enter-active-class": "transition-all ease-out duration-75",
         "enter-from-class": "scale-95 opacity-0",
         "enter-to-class": "scale-100 opacity-100",
@@ -556,43 +640,43 @@ const Le = (e) => (we("data-v-b4eb0ff3"), e = e(), $e(), e), ze = { class: "flex
         "leave-from-class": "scale-100 opacity-100",
         "leave-to-class": "scale-95 opacity-0"
       }, {
-        default: re(() => [
-          K(n("div", vt, [
-            n("div", mt, [
-              n("span", bt, m(_.value), 1),
-              gt,
-              n("span", kt, m(e.user.orgName), 1)
+        default: ue(() => [
+          G(a("div", wt, [
+            a("div", Ct, [
+              a("span", $t, b(_.value), 1),
+              St,
+              a("span", _t, b(e.user.orgName), 1)
             ]),
-            wt,
-            (o(!0), i(N, null, j(e.menuItems, (l, h) => (o(), i(N, { key: h }, [
-              l.divider ? (o(), i("div", $t)) : (o(), i("a", {
+            Mt,
+            (l(!0), u(H, null, U(e.menuItems, (f, n) => (l(), u(H, { key: n }, [
+              f.divider ? (l(), u("div", Tt)) : (l(), u("a", {
                 key: 1,
-                href: l.href && G(H)(l.href) || null,
+                href: f.href && F(O)(f.href) || null,
                 class: "flex items-center gap-2.5 px-[18px] py-2 text-[13px] font-semibold text-proclusteal-700 no-underline hover:bg-proclusteal-50 hover:text-proclusteal-900",
-                onClick: A((k) => w(l), ["exact", "prevent"])
+                onClick: N((c) => k(f), ["exact", "prevent"])
               }, [
-                l.icon ? (o(), I(ie(l.icon), {
+                f.icon ? (l(), E(pe(f.icon), {
                   key: 0,
                   class: "!h-4 !w-4 flex-none"
-                })) : v("", !0),
-                n("span", null, m(l.label), 1)
-              ], 8, Ct))
+                })) : m("", !0),
+                a("span", null, b(f.label), 1)
+              ], 8, At))
             ], 64))), 128))
           ], 512), [
-            [ce, x.value]
+            [de, x.value]
           ])
         ]),
         _: 1
       })
     ], 512));
   }
-}, Mt = { class: "flex h-[70px] shrink-0 items-center justify-between border-b border-proclusteal-300 bg-white px-[15px] font-sans shadow-[0_1px_3px_rgba(20,40,45,0.05)] sm:px-[25px]" }, St = { class: "flex min-w-0 items-center gap-[18px]" }, Tt = {
+}, Et = { class: "flex h-[70px] shrink-0 items-center justify-between border-b border-proclusteal-300 bg-white px-[15px] font-sans shadow-[0_1px_3px_rgba(20,40,45,0.05)] sm:px-[25px]" }, Nt = { class: "flex min-w-0 items-center gap-[18px]" }, Ht = {
   key: 0,
   class: "hidden whitespace-nowrap text-[18px] font-semibold text-proclusteal-800 sm:inline"
-}, It = {
+}, Ot = {
   key: 0,
   class: "font-normal text-black-800"
-}, At = { class: "flex items-center gap-3.5 text-proclusteal-600" }, Et = ["href", "title", "aria-label"], Nt = { class: "flex items-center gap-[18px] sm:gap-[25px]" }, Bt = {
+}, Lt = ["href", "title", "aria-label"], Dt = { class: "flex items-center gap-[18px] sm:gap-[25px]" }, Gt = {
   __name: "AppHeader",
   props: {
     title: {
@@ -615,6 +699,12 @@ const Le = (e) => (we("data-v-b4eb0ff3"), e = e(), $e(), e), ze = { class: "flex
       type: Boolean,
       default: !1
     },
+    // Per-module accent (proclus `.top-left-part:after`): a 2x45px bar dividing the
+    // brand block from the header icons. Omit for no divider.
+    accentColour: {
+      type: String,
+      default: ""
+    },
     user: {
       type: Object,
       default: null
@@ -627,6 +717,13 @@ const Le = (e) => (we("data-v-b4eb0ff3"), e = e(), $e(), e), ze = { class: "flex
       type: Object,
       default: null
     },
+    // Drives the bell's unread dot on its own, so an app can poll the cheap
+    // /personal/notifycheck.ashx rather than the write-side-effecting feed. Falls back to
+    // deriving from `notifications` when not supplied.
+    unreadCount: {
+      type: Number,
+      default: null
+    },
     notificationsUrl: {
       type: String,
       default: "/personal/notifications.aspx"
@@ -648,96 +745,114 @@ const Le = (e) => (we("data-v-b4eb0ff3"), e = e(), $e(), e), ze = { class: "flex
       default: () => ({})
     }
   },
-  emits: ["navigate", "home", "menu-select", "markAsRead", "deleteNotification"],
-  setup(e, { emit: u }) {
-    const p = e, g = u, d = ae(), x = b(!1);
-    function y(c) {
-      var l, h;
-      if (!c)
+  emits: [
+    "navigate",
+    "home",
+    "menu-select",
+    "markAsRead",
+    "deleteNotification",
+    "notifications-open"
+  ],
+  setup(e, { emit: i }) {
+    const o = e, y = i, d = ie(), x = g(!1), w = $(() => !!o.notifications || o.unreadCount !== null && o.unreadCount !== void 0), _ = $(() => he(o.accentColour)), A = $(() => _.value || "#1c6f63");
+    function k(n) {
+      var p, C;
+      if (!n)
         return;
-      const r = H(c);
-      r && (g("navigate", r), (h = (l = d == null ? void 0 : d.vnode) == null ? void 0 : l.props) != null && h.onNavigate || (window.location.href = r));
+      const c = O(n);
+      c && (y("navigate", c), (C = (p = d == null ? void 0 : d.vnode) == null ? void 0 : p.props) != null && C.onNavigate || (window.location.href = c));
     }
-    function _() {
-      g("home"), y(p.homeUrl);
+    function S() {
+      y("home"), k(o.homeUrl);
     }
-    function M() {
+    function v() {
       window.history.back();
     }
-    function w(c) {
-      g("menu-select", c), c.href && y(c.href);
+    function f(n) {
+      y("menu-select", n), n.href && k(n.href);
     }
-    return (c, r) => (o(), i("header", Mt, [
-      n("div", St, [
-        B(c.$slots, "logo"),
-        e.title ? (o(), i("span", Tt, [
-          U(m(e.title), 1),
-          e.subtitle ? (o(), i("span", It, " " + m(e.subtitle), 1)) : v("", !0)
-        ])) : v("", !0),
-        n("nav", At, [
-          e.homeUrl ? (o(), i("a", {
+    return (n, c) => (l(), u("header", Et, [
+      a("div", Nt, [
+        V(n.$slots, "logo"),
+        e.title ? (l(), u("span", Ht, [
+          P(b(e.title), 1),
+          e.subtitle ? (l(), u("span", Ot, " " + b(e.subtitle), 1)) : m("", !0)
+        ])) : m("", !0),
+        _.value ? (l(), u("span", {
+          key: 1,
+          class: "h-[45px] w-[2px] shrink-0",
+          style: q({ background: _.value }),
+          "aria-hidden": "true"
+        }, null, 4)) : m("", !0),
+        a("nav", {
+          class: "flex items-center gap-7 text-proclusteal-600",
+          style: q({ "--hdr-accent": A.value })
+        }, [
+          e.homeUrl ? (l(), u("a", {
             key: 0,
-            href: G(H)(e.homeUrl) || null,
-            class: "hover:text-proclusteal-900",
+            href: F(O)(e.homeUrl) || null,
+            class: "hover:text-[var(--hdr-accent)]",
             title: e.homeTooltip,
             "aria-label": e.homeTooltip,
-            onClick: A(_, ["exact", "prevent"])
+            onClick: N(S, ["exact", "prevent"])
           }, [
-            C(Ce, { class: "!h-5 !w-5" })
-          ], 8, Et)) : v("", !0),
-          e.showBack ? (o(), i("button", {
+            T(Me, { class: "!h-[22px] !w-[22px]" })
+          ], 8, Lt)) : m("", !0),
+          e.showBack ? (l(), u("button", {
             key: 1,
             type: "button",
-            class: "cursor-pointer hover:text-proclusteal-900",
+            class: "cursor-pointer hover:text-[var(--hdr-accent)]",
             title: "Go Back",
             "aria-label": "Go Back",
-            onClick: M
+            onClick: v
           }, [
-            C(_e, { class: "!h-5 !w-5" })
-          ])) : v("", !0)
-        ]),
-        B(c.$slots, "left")
+            T(Te, { class: "!h-[22px] !w-[22px]" })
+          ])) : m("", !0)
+        ], 4),
+        V(n.$slots, "left")
       ]),
-      n("div", Nt, [
-        B(c.$slots, "right"),
-        e.searchProvider ? (o(), I(Ee, {
+      a("div", Dt, [
+        V(n.$slots, "right"),
+        e.searchProvider ? (l(), E(Oe, {
           key: 0,
-          onClick: r[0] || (r[0] = (l) => x.value = !0)
-        })) : v("", !0),
-        e.notifications ? (o(), I(xt, {
+          onClick: c[0] || (c[0] = (p) => x.value = !0)
+        })) : m("", !0),
+        w.value ? (l(), E(bt, {
           key: 1,
           notifications: e.notifications,
+          "unread-count": e.unreadCount,
           "notifications-url": e.notificationsUrl,
           "icon-map": e.notificationIconMap,
-          onMarkAsRead: r[1] || (r[1] = (l) => c.$emit("markAsRead", l)),
-          onDeleteNotification: r[2] || (r[2] = (l) => c.$emit("deleteNotification", l)),
-          onNavigate: y
-        }, null, 8, ["notifications", "notifications-url", "icon-map"])) : v("", !0),
-        e.user ? (o(), I(_t, {
+          onMarkAsRead: c[1] || (c[1] = (p) => n.$emit("markAsRead", p)),
+          onDeleteNotification: c[2] || (c[2] = (p) => n.$emit("deleteNotification", p)),
+          onOpen: c[3] || (c[3] = (p) => n.$emit("notifications-open")),
+          onNavigate: k
+        }, null, 8, ["notifications", "unread-count", "notifications-url", "icon-map"])) : m("", !0),
+        e.user ? (l(), E(It, {
           key: 2,
           user: e.user,
           "menu-items": e.menuItems,
-          onSelect: w
-        }, null, 8, ["user", "menu-items"])) : v("", !0)
+          onSelect: f
+        }, null, 8, ["user", "menu-items"])) : m("", !0)
       ]),
-      e.searchProvider ? (o(), I(Ze, {
+      e.searchProvider ? (l(), E(et, {
         key: 0,
         open: x.value,
-        "onUpdate:open": r[3] || (r[3] = (l) => x.value = l),
+        "onUpdate:open": c[4] || (c[4] = (p) => x.value = p),
         "search-provider": e.searchProvider,
         placeholder: e.searchPlaceholder,
         types: e.searchTypes,
-        onNavigate: y
-      }, null, 8, ["open", "search-provider", "placeholder", "types"])) : v("", !0)
+        onNavigate: k
+      }, null, 8, ["open", "search-provider", "placeholder", "types"])) : m("", !0)
     ]));
   }
 };
 export {
-  Bt as AppHeader,
-  Ne as DEFAULT_SEARCH_TYPES,
-  Ze as GlobalSearchModal,
-  Ee as GlobalSearchPill,
-  xt as HeaderNotificationDropdown,
-  _t as HeaderUserMenu,
-  H as safeUrl
+  Gt as AppHeader,
+  j as DEFAULT_SEARCH_TYPES,
+  et as GlobalSearchModal,
+  Oe as GlobalSearchPill,
+  bt as HeaderNotificationDropdown,
+  It as HeaderUserMenu,
+  O as safeUrl
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@zealsolutions/zeal-ui",
-    "version": "1.0.0-alpha.330",
+    "version": "1.0.0-alpha.332",
     "description": "UI library for Zeal Solutions",
     "author": "Zeal Solutions",
     "license": "ISC",