@zealsolutions/zeal-ui 1.0.0-alpha.357 → 1.0.0-alpha.359

package/dist/components/header/index.js

@@ -1,4 +1,4 @@
-import { openBlock as a, createElementBlock as u, createVNode as T, createElementVNode as r, createTextVNode as j, mergeModels as te, useModel as ke, getCurrentInstance as ie, ref as k, computed as $, watch as K, nextTick as ne, onMounted as ge, onBeforeUnmount as we, createBlock as E, Teleport as Ce, withModifiers as N, withDirectives as G, vModelText as $e, createCommentVNode as v, normalizeClass as M, toDisplayString as b, Fragment as H, renderList as P, normalizeStyle as q, pushScopeId as Se, popScopeId as _e, Transition as ce, withCtx as ue, resolveDynamicComponent as de, unref as F, vShow as pe, renderSlot as V } from "vue";
+import { openBlock as a, createElementBlock as i, createVNode as T, createElementVNode as r, createTextVNode as j, mergeModels as te, useModel as ke, getCurrentInstance as ie, ref as k, computed as $, watch as K, nextTick as ne, onMounted as ge, 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 P, normalizeStyle as q, pushScopeId as Se, popScopeId as _e, Transition as ce, withCtx as ue, resolveDynamicComponent as de, unref as F, vShow as pe, renderSlot as V } from "vue";
 import Me from "../../HouseIcon-BxmNyxvv.js";
 import Te from "../../ArrowLeftIcon-Cgsy08pY.js";
 import fe from "../../MagnifyingGlassIcon-ChYNIA-H.js";
@@ -14,12 +14,12 @@ const Ne = /* @__PURE__ */ r("span", { class: "hidden whitespace-nowrap sm:inlin
   __name: "GlobalSearchPill",
   emits: ["click"],
   setup(e) {
-    return (i, o) => (a(), u("button", {
+    return (c, o) => (a(), i("button", {
       type: "button",
       class: "zui-search-pill inline-flex h-[34px] cursor-pointer items-center justify-center gap-[7px] rounded-lg border-[1px] border-solid border-proclusteal-300 dark:border-line bg-surface-raised pl-[11px] pr-[9px] font-sans text-[13px] font-semibold text-proclusteal-600 dark:text-content-muted transition-[border-color,color,box-shadow] duration-150 hover:border-proclusteal-950 dark:hover:border-focus hover:text-proclusteal-800 dark:hover:text-content hover:shadow-[0_1px_3px_rgba(20,40,45,0.08)] focus:border-proclusteal-950 dark:focus:border-focus focus:text-proclusteal-800 dark:focus:text-content focus:outline-none",
       title: "Search (Ctrl K)",
       "aria-label": "Search (Ctrl K)",
-      onClick: o[0] || (o[0] = (y) => i.$emit("click"))
+      onClick: o[0] || (o[0] = (y) => c.$emit("click"))
     }, [
       T(fe, { class: "!h-[15px] !w-[15px] flex-none text-proclusteal-950 dark:text-focus" }),
       Ne,
@@ -43,47 +43,47 @@ const Ne = /* @__PURE__ */ r("span", { class: "hidden whitespace-nowrap sm:inlin
   colour: "#9aa4ad",
   icon: '<circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>'
 };
-function ze(e, i = {}) {
-  const o = { ...D, ...i };
+function ze(e, c = {}) {
+  const o = { ...D, ...c };
   return Object.prototype.hasOwnProperty.call(o, e) ? o[e] : { ...Le, label: e };
 }
 function De(e) {
-  return (e == null ? "" : String(e)).replace(/[&<>"']/g, (i) => ({
+  return (e == null ? "" : String(e)).replace(/[&<>"']/g, (c) => ({
     "&": "&amp;",
     "<": "&lt;",
     ">": "&gt;",
     '"': "&quot;",
     "'": "&#39;"
-  })[i]);
+  })[c]);
 }
 function he(e) {
   if (!e)
     return "";
-  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 : "";
+  const c = String(e).trim();
+  return /^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(c) || /^(rgb|rgba|hsl|hsla)\([0-9.,%\s/]+\)$/i.test(c) || /^[a-z]{3,20}$/i.test(c) ? c : "";
 }
 function O(e) {
   if (!e)
     return "";
-  const i = String(e).trim();
-  if (i.includes("\\"))
+  const c = String(e).trim();
+  if (c.includes("\\"))
     return "";
   let o;
   try {
-    o = new URL(i, "https://url-check.invalid/");
+    o = new URL(c, "https://url-check.invalid/");
   } catch {
     return "";
   }
-  return o.protocol === "http:" || o.protocol === "https:" ? i : "";
+  return o.protocol === "http:" || o.protocol === "https:" ? c : "";
 }
 function je(e) {
-  return String(e || "").toLowerCase().split(/\s+/).filter((i) => i.length >= 2);
+  return String(e || "").toLowerCase().split(/\s+/).filter((c) => c.length >= 2);
 }
-function ae(e, i) {
+function ae(e, c) {
   const o = De(e);
-  if (!i || !i.length)
+  if (!c || !c.length)
     return o;
-  const y = new RegExp(`(${i.map((p) => p.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("|")})`, "ig");
+  const y = new RegExp(`(${c.map((p) => p.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("|")})`, "ig");
   return o.replace(y, "<mark>$1</mark>");
 }
 const Pe = (e) => (Se("data-v-80fd510b"), e = e(), _e(), e), Ue = { class: "zui-search-field flex items-center gap-2.5 border-b-[1px] border-proclusteal-200 dark:border-line px-4 py-3.5" }, Be = ["placeholder"], Re = {
@@ -130,12 +130,12 @@ const Pe = (e) => (Se("data-v-80fd510b"), e = e(), _e(), e), Ue = { class: "zui-
     openModifiers: {}
   }),
   emits: /* @__PURE__ */ te(["navigate"], ["update:open"]),
-  setup(e, { emit: i }) {
-    const o = e, y = i, p = ke(e, "open"), x = ie(), w = k(null), _ = k(null), A = k(null), g = k(""), S = k(""), m = k([]), f = k("all"), n = k("zero"), c = k(-1);
+  setup(e, { emit: c }) {
+    const o = e, y = c, p = ke(e, "open"), x = ie(), w = k(null), _ = k(null), A = k(null), g = k(""), S = k(""), v = k([]), f = k("all"), n = k("zero"), u = k(-1);
     let d = null, C = 0, L = null, I = null;
     const Q = $(() => je(S.value)), Y = (t) => ze(t, o.types), X = $(() => {
       let t = 0;
-      return m.value.filter((s) => f.value === "all" || s.type === f.value).map((s) => {
+      return v.value.filter((s) => f.value === "all" || s.type === f.value).map((s) => {
         const l = Y(s.type);
         return {
           type: s.type,
@@ -150,16 +150,16 @@ const Pe = (e) => (Se("data-v-80fd510b"), e = e(), _e(), e), Ue = { class: "zui-
           }))
         };
       });
-    }), J = $(() => X.value.flatMap((t) => t.items)), ye = $(() => m.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 U(t) {
       const s = J.value;
       if (!s.length) {
-        c.value = -1;
+        u.value = -1;
         return;
       }
-      c.value = Math.min(Math.max(t, 0), s.length - 1), ne(() => {
+      u.value = Math.min(Math.max(t, 0), s.length - 1), ne(() => {
         var h;
-        const l = (h = A.value) == null ? void 0 : h.querySelector(`[data-row-idx="${c.value}"]`);
+        const l = (h = A.value) == null ? void 0 : h.querySelector(`[data-row-idx="${u.value}"]`);
         l == null || l.scrollIntoView({ block: "nearest" });
       });
     }
@@ -181,23 +181,23 @@ const Pe = (e) => (Se("data-v-80fd510b"), e = e(), _e(), e), Ue = { class: "zui-
         const l = await o.searchProvider(t);
         if (s !== C || !p.value)
           return;
-        m.value = l && l.groups || [], f.value = "all", n.value = m.value.length ? "results" : "empty", U(0);
+        v.value = l && l.groups || [], f.value = "all", n.value = v.value.length ? "results" : "empty", U(0);
       } catch {
         if (s !== C || !p.value)
           return;
-        m.value = [], n.value = "error", c.value = -1;
+        v.value = [], n.value = "error", u.value = -1;
       }
     }
     K(g, (t) => {
       clearTimeout(d);
       const s = t.trim();
       if (s.length < o.minChars) {
-        C++, m.value = [], n.value = s.length ? "hint" : "zero", c.value = -1;
+        C++, v.value = [], n.value = s.length ? "hint" : "zero", u.value = -1;
         return;
       }
       d = setTimeout(() => me(s), o.debounce);
     }), K(p, (t) => {
-      t ? (L = document.activeElement, g.value = "", S.value = "", m.value = [], f.value = "all", n.value = "zero", c.value = -1, I = document.body.style.overflow, document.body.style.overflow = "hidden", ne(() => {
+      t ? (L = document.activeElement, g.value = "", S.value = "", v.value = [], f.value = "all", n.value = "zero", u.value = -1, I = document.body.style.overflow, document.body.style.overflow = "hidden", ne(() => {
         var s;
         return (s = w.value) == null ? void 0 : s.focus();
       })) : (clearTimeout(d), C++, I !== null && (document.body.style.overflow = I, I = null), L != null && L.focus && L.focus());
@@ -209,11 +209,11 @@ const Pe = (e) => (Se("data-v-80fd510b"), e = e(), _e(), e), Ue = { class: "zui-
         return;
       }
       if (t.key === "ArrowDown") {
-        t.preventDefault(), U(c.value + 1);
+        t.preventDefault(), U(u.value + 1);
         return;
       }
       if (t.key === "ArrowUp") {
-        t.preventDefault(), U(c.value - 1);
+        t.preventDefault(), U(u.value - 1);
         return;
       }
       if (t.key === "Enter") {
@@ -222,7 +222,7 @@ const Pe = (e) => (Se("data-v-80fd510b"), e = e(), _e(), e), Ue = { class: "zui-
         const l = J.value;
         if (!l.length)
           return;
-        t.preventDefault(), Z(l[c.value >= 0 ? c.value : 0].url);
+        t.preventDefault(), Z(l[u.value >= 0 ? u.value : 0].url);
         return;
       }
       if (t.key === "Tab") {
@@ -255,7 +255,7 @@ const Pe = (e) => (Se("data-v-80fd510b"), e = e(), _e(), e), Ue = { class: "zui-
     }), we(() => {
       document.removeEventListener("keydown", ee), clearTimeout(d), C++, I !== null && (document.body.style.overflow = I, I = null);
     }), (t, s) => (a(), E(Ce, { to: "body" }, [
-      p.value ? (a(), u("div", {
+      p.value ? (a(), i("div", {
         key: 0,
         class: "zui-search-overlay fixed inset-0 z-[20000] flex items-start justify-center bg-[#11181c]/45",
         onMousedown: N(z, ["self"]),
@@ -290,8 +290,8 @@ const Pe = (e) => (Se("data-v-80fd510b"), e = e(), _e(), e), Ue = { class: "zui-
               onClick: z
             }, "×")
           ]),
-          n.value === "results" ? (a(), u("div", Re, " Search results ")) : v("", !0),
-          n.value === "results" ? (a(), u("div", Ve, [
+          n.value === "results" ? (a(), i("div", Re, " Search results ")) : m("", !0),
+          n.value === "results" ? (a(), i("div", Ve, [
             r("button", {
               type: "button",
               class: M([re, f.value === "all" ? le : ""]),
@@ -302,7 +302,7 @@ const Pe = (e) => (Se("data-v-80fd510b"), e = e(), _e(), e), Ue = { class: "zui-
                 class: M(["font-bold", f.value === "all" ? "opacity-85" : "opacity-60"])
               }, "(" + b(ye.value) + ")", 3)
             ], 2),
-            (a(!0), u(H, null, P(m.value, (l) => (a(), u("button", {
+            (a(!0), i(H, null, P(v.value, (l) => (a(), i("button", {
               key: l.type,
               type: "button",
               class: M([re, f.value === l.type ? le : ""]),
@@ -313,44 +313,44 @@ const Pe = (e) => (Se("data-v-80fd510b"), e = e(), _e(), e), Ue = { class: "zui-
                 class: M(["font-bold", f.value === l.type ? "opacity-85" : "opacity-60"])
               }, "(" + b(l.items.length) + ")", 3)
             ], 10, Ke))), 128))
-          ])) : v("", !0),
+          ])) : m("", !0),
           r("div", {
             ref_key: "resultsEl",
             ref: A,
             class: "zui-search-results overflow-y-auto pb-2.5"
           }, [
-            n.value === "zero" ? (a(), u("div", {
+            n.value === "zero" ? (a(), i("div", {
               key: 0,
               class: M(R)
-            }, " Search across SOPs, incidents, assets, people and more — you only ever see what you have access to. ")) : n.value === "hint" ? (a(), u("div", {
+            }, " Search across SOPs, incidents, assets, people and more — you only ever see what you have access to. ")) : n.value === "hint" ? (a(), i("div", {
               key: 1,
               class: M(R)
-            }, " Keep typing… enter at least " + b(e.minChars) + " characters to search. ", 1)) : n.value === "empty" ? (a(), u("div", {
+            }, " Keep typing… enter at least " + b(e.minChars) + " characters to search. ", 1)) : n.value === "empty" ? (a(), i("div", {
               key: 2,
               class: M(R)
-            }, " No results for “" + b(S.value) + "” — try a broader term or a code. ", 1)) : n.value === "error" ? (a(), u("div", {
+            }, " No results for “" + b(S.value) + "” — try a broader term or a code. ", 1)) : n.value === "error" ? (a(), i("div", {
               key: 3,
               class: M(R)
-            }, " Search is temporarily unavailable. ")) : (a(!0), u(H, { key: 4 }, P(X.value, (l) => (a(), u("div", {
+            }, " Search is temporarily unavailable. ")) : (a(!0), i(H, { key: 4 }, P(X.value, (l) => (a(), i("div", {
               key: l.type
             }, [
               r("div", qe, [
                 j(b(l.label) + " ", 1),
                 r("span", Ge, "(" + b(l.items.length) + ")", 1)
               ]),
-              (a(!0), u(H, null, P(l.items, (h) => (a(), u("a", {
+              (a(!0), i(H, null, P(l.items, (h) => (a(), i("a", {
                 key: h.flatIdx,
                 href: h.url || null,
-                class: M(["zui-search-row flex items-center gap-[13px] px-[18px] py-[11px] text-[#1e262c] dark:text-content no-underline", { "bg-proclusteal-50 dark:bg-surface-hover": h.flatIdx === c.value }]),
+                class: M(["zui-search-row flex items-center gap-[13px] px-[18px] py-[11px] text-[#1e262c] dark:text-content no-underline", { "bg-proclusteal-50 dark:bg-surface-hover": h.flatIdx === u.value }]),
                 "data-row-idx": h.flatIdx,
                 onClick: N((B) => Z(h.url), ["exact", "prevent"]),
-                onMouseenter: (B) => c.value = h.flatIdx
+                onMouseenter: (B) => u.value = h.flatIdx
               }, [
                 r("span", {
                   class: "inline-flex h-[42px] w-[42px] flex-none items-center justify-center rounded-[10px] text-white",
                   style: q({ background: h.tileColour })
                 }, [
-                  (a(), u("svg", {
+                  (a(), i("svg", {
                     class: "h-5 w-5",
                     viewBox: "0 0 24 24",
                     fill: "none",
@@ -376,7 +376,7 @@ const Pe = (e) => (Se("data-v-80fd510b"), e = e(), _e(), e), Ue = { class: "zui-
             ]))), 128))
           ], 512)
         ], 512)
-      ], 32)) : v("", !0)
+      ], 32)) : m("", !0)
     ]));
   }
 }, et = /* @__PURE__ */ Ae(Ze, [["__scopeId", "data-v-80fd510b"]]), se = {
@@ -400,14 +400,14 @@ const Pe = (e) => (Se("data-v-80fd510b"), e = e(), _e(), e), Ue = { class: "zui-
 function tt(e) {
   if (!e)
     return "";
-  const i = String(e).trim();
-  if (!i)
+  const c = String(e).trim();
+  if (!c)
     return "";
   let o = null;
-  if (Object.prototype.hasOwnProperty.call(D, i))
-    o = i;
+  if (Object.prototype.hasOwnProperty.call(D, c))
+    o = c;
   else {
-    const y = i.toLowerCase(), p = Object.keys(D).find((x) => x.toLowerCase() === y);
+    const y = c.toLowerCase(), p = Object.keys(D).find((x) => x.toLowerCase() === y);
     p ? o = p : Object.prototype.hasOwnProperty.call(se, y) && (o = se[y]);
   }
   return !o || !Object.prototype.hasOwnProperty.call(D, o) ? "" : D[o].icon || "";
@@ -417,8 +417,8 @@ function nt(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 c = e.notifyday != null ? String(e.notifyday).replace(/^0/, "") : "", o = e.notifymonthname ? String(e.notifymonthname) : "", y = e.notifyyear != null ? String(e.notifyyear) : "";
+  return [c, o, y].filter(Boolean).join(" ");
 }
 const ot = {
   key: 0,
@@ -460,8 +460,8 @@ const ot = {
     }
   },
   emits: ["markAsRead", "deleteNotification", "navigate", "open"],
-  setup(e, { emit: i }) {
-    const o = e, y = i, p = k(null), x = k(!1), w = $(() => {
+  setup(e, { emit: c }) {
+    const o = e, y = c, p = k(null), x = k(!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"));
@@ -475,13 +475,13 @@ const ot = {
       return n && Object.prototype.hasOwnProperty.call(o.iconMap, n) && o.iconMap[n] || null;
     }
     function S(n) {
-      const c = g(n.VueAppTypeIcon) || g(n.AppTypeName);
-      if (c)
-        return { component: c, path: "" };
+      const u = g(n.VueAppTypeIcon) || g(n.AppTypeName);
+      if (u)
+        return { component: u, path: "" };
       const d = tt(n.AppTypeName);
       return d ? { component: null, path: d } : { component: oe, path: "" };
     }
-    const m = $(() => w.value.map((n) => ({
+    const v = $(() => w.value.map((n) => ({
       item: n,
       icon: S(n),
       date: nt(n),
@@ -489,10 +489,10 @@ const ot = {
     })));
     function f(n) {
       x.value = !1;
-      const c = O(n);
-      c && y("navigate", c);
+      const u = O(n);
+      u && y("navigate", u);
     }
-    return (n, c) => (a(), u("div", {
+    return (n, u) => (a(), i("div", {
       ref_key: "rootEl",
       ref: p,
       class: "relative font-sans"
@@ -505,7 +505,7 @@ const ot = {
         onClick: A
       }, [
         T(oe, { class: "!h-[21px] !w-[21px]" }),
-        _.value ? (a(), u("span", ot)) : v("", !0)
+        _.value ? (a(), i("span", ot)) : m("", !0)
       ]),
       T(ce, {
         "enter-active-class": "transition-all ease-out duration-75",
@@ -518,8 +518,8 @@ const ot = {
         default: ue(() => [
           G(r("div", at, [
             r("div", rt, [
-              e.notifications ? w.value.length ? v("", !0) : (a(), u("div", st, " No notifications. ")) : (a(), u("div", lt, " Loading notifications… ")),
-              (a(!0), u(H, null, P(m.value, (d) => (a(), u("div", {
+              e.notifications ? w.value.length ? m("", !0) : (a(), i("div", st, " No notifications. ")) : (a(), i("div", lt, " Loading notifications… ")),
+              (a(!0), i(H, null, P(v.value, (d) => (a(), i("div", {
                 key: d.item.NotifyID,
                 class: M(["flex cursor-pointer items-start gap-3 border-b-[1px] border-proclusteal-200 dark:border-line px-4 py-3", d.unread ? "bg-proclusteal-50 dark:bg-surface-hover" : "bg-surface-raised"]),
                 onClick: (C) => f(d.item.url)
@@ -528,7 +528,7 @@ const ot = {
                   d.icon.component ? (a(), E(de(d.icon.component), {
                     key: 0,
                     class: "!h-5 !w-5"
-                  })) : (a(), u("svg", {
+                  })) : (a(), i("svg", {
                     key: 1,
                     class: "h-5 w-5",
                     viewBox: "0 0 24 24",
@@ -543,10 +543,10 @@ const ot = {
                 r("span", dt, [
                   r("span", pt, b(d.item.notifyname), 1),
                   r("span", ft, b(d.item.summary), 1),
-                  d.date ? (a(), u("span", xt, b(d.date), 1)) : v("", !0)
+                  d.date ? (a(), i("span", xt, b(d.date), 1)) : m("", !0)
                 ]),
                 r("span", ht, [
-                  d.unread ? (a(), u("button", {
+                  d.unread ? (a(), i("button", {
                     key: 0,
                     type: "button",
                     class: "hover:text-proclusteal-900 dark:hover:text-focus",
@@ -555,7 +555,7 @@ const ot = {
                     onClick: N((C) => n.$emit("markAsRead", d.item.NotifyID), ["stop"])
                   }, [
                     T(Ie, { class: "!h-4 !w-4" })
-                  ], 8, yt)) : v("", !0),
+                  ], 8, yt)) : m("", !0),
                   r("button", {
                     type: "button",
                     class: "hover:text-[#dd3730]",
@@ -571,7 +571,7 @@ const ot = {
             r("a", {
               href: F(O)(e.notificationsUrl) || null,
               class: "block border-t-[1px] border-proclusteal-200 dark:border-line px-4 py-2.5 text-center text-[13px] font-bold text-proclusteal-700 dark:text-content no-underline hover:bg-proclusteal-50 dark:hover:bg-surface-hover hover:text-proclusteal-900 dark:hover:text-focus",
-              onClick: c[0] || (c[0] = N((d) => f(e.notificationsUrl), ["exact", "prevent"]))
+              onClick: u[0] || (u[0] = N((d) => f(e.notificationsUrl), ["exact", "prevent"]))
             }, " See all notifications ", 8, vt)
           ], 512), [
             [pe, x.value]
@@ -600,8 +600,8 @@ const ot = {
     }
   },
   emits: ["select"],
-  setup(e, { emit: i }) {
-    const o = e, y = i, p = k(null), x = k(!1), w = k(!1);
+  setup(e, { emit: c }) {
+    const o = e, y = c, p = k(null), x = k(!1), w = k(!1);
     K(() => o.user.avatarUrl, () => {
       w.value = !1;
     });
@@ -612,7 +612,7 @@ const ot = {
     function g(S) {
       x.value = !1, y("select", S);
     }
-    return (S, m) => (a(), u("div", {
+    return (S, v) => (a(), i("div", {
       ref_key: "rootEl",
       ref: p,
       class: "relative font-sans"
@@ -622,15 +622,15 @@ const ot = {
         class: "flex cursor-pointer items-center justify-center",
         title: "View Menu Options",
         "aria-label": "View Menu Options",
-        onClick: m[1] || (m[1] = (f) => x.value = !x.value)
+        onClick: v[1] || (v[1] = (f) => x.value = !x.value)
       }, [
-        e.user.avatarUrl && !w.value ? (a(), u("img", {
+        e.user.avatarUrl && !w.value ? (a(), i("img", {
           key: 0,
           src: e.user.avatarUrl,
           alt: "",
           class: "h-[34px] w-[34px] rounded-full object-cover",
-          onError: m[0] || (m[0] = (f) => w.value = !0)
-        }, null, 40, kt)) : (a(), u("span", gt, b(A.value), 1))
+          onError: v[0] || (v[0] = (f) => w.value = !0)
+        }, null, 40, kt)) : (a(), i("span", gt, b(A.value), 1))
       ]),
       T(ce, {
         "enter-active-class": "transition-all ease-out duration-75",
@@ -648,17 +648,17 @@ const ot = {
               r("span", _t, b(e.user.orgName), 1)
             ]),
             Mt,
-            (a(!0), u(H, null, P(e.menuItems, (f, n) => (a(), u(H, { key: n }, [
-              f.divider ? (a(), u("div", Tt)) : (a(), u("a", {
+            (a(!0), i(H, null, P(e.menuItems, (f, n) => (a(), i(H, { key: n }, [
+              f.divider ? (a(), i("div", Tt)) : (a(), i("a", {
                 key: 1,
                 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 dark:text-content no-underline hover:bg-proclusteal-50 dark:hover:bg-surface-hover hover:text-proclusteal-900 dark:hover:text-focus",
-                onClick: N((c) => g(f), ["exact", "prevent"])
+                onClick: N((u) => g(f), ["exact", "prevent"])
               }, [
                 f.icon ? (a(), E(de(f.icon), {
                   key: 0,
                   class: "!h-4 !w-4 flex-none"
-                })) : v("", !0),
+                })) : m("", !0),
                 r("span", null, b(f.label), 1)
               ], 8, At))
             ], 64))), 128))
@@ -743,6 +743,13 @@ const ot = {
     searchTypes: {
       type: Object,
       default: () => ({})
+    },
+    // #479: gate for the three top-right icons (search pill, bell, profile). Default true so
+    // existing consumers are unaffected; an app that loads its header data asynchronously passes
+    // false until user + notifications + search have all settled, then true to reveal all at once.
+    ready: {
+      type: Boolean,
+      default: !0
     }
   },
   emits: [
@@ -753,42 +760,42 @@ const ot = {
     "deleteNotification",
     "notifications-open"
   ],
-  setup(e, { emit: i }) {
-    const o = e, y = i, p = ie(), x = k(!1), w = $(() => !!o.notifications || o.unreadCount !== null && o.unreadCount !== void 0), _ = $(() => he(o.accentColour)), A = $(() => _.value || "#1c6f63");
+  setup(e, { emit: c }) {
+    const o = e, y = c, p = ie(), x = k(!1), w = $(() => !!o.notifications || o.unreadCount !== null && o.unreadCount !== void 0), _ = $(() => he(o.accentColour)), A = $(() => _.value || "#1c6f63");
     function g(n) {
       var d, C;
       if (!n)
         return;
-      const c = O(n);
-      c && (y("navigate", c), (C = (d = p == null ? void 0 : p.vnode) == null ? void 0 : d.props) != null && C.onNavigate || (window.location.href = c));
+      const u = O(n);
+      u && (y("navigate", u), (C = (d = p == null ? void 0 : p.vnode) == null ? void 0 : d.props) != null && C.onNavigate || (window.location.href = u));
     }
     function S() {
       y("home"), g(o.homeUrl);
     }
-    function m() {
+    function v() {
       window.history.back();
     }
     function f(n) {
       y("menu-select", n), n.href && g(n.href);
     }
-    return (n, c) => (a(), u("header", Et, [
+    return (n, u) => (a(), i("header", Et, [
       r("div", Nt, [
         V(n.$slots, "logo"),
-        e.title ? (a(), u("span", Ht, [
+        e.title ? (a(), i("span", Ht, [
           j(b(e.title), 1),
-          e.subtitle ? (a(), u("span", Ot, " " + b(e.subtitle), 1)) : v("", !0)
-        ])) : v("", !0),
-        _.value ? (a(), u("span", {
+          e.subtitle ? (a(), i("span", Ot, " " + b(e.subtitle), 1)) : m("", !0)
+        ])) : m("", !0),
+        _.value ? (a(), i("span", {
           key: 1,
           class: "h-[45px] w-[2px] shrink-0",
           style: q({ background: _.value }),
           "aria-hidden": "true"
-        }, null, 4)) : v("", !0),
+        }, null, 4)) : m("", !0),
         r("nav", {
           class: "flex items-center gap-7 text-proclusteal-600 dark:text-content-muted",
           style: q({ "--hdr-accent": A.value })
         }, [
-          e.homeUrl ? (a(), u("a", {
+          e.homeUrl ? (a(), i("a", {
             key: 0,
             href: F(O)(e.homeUrl) || null,
             class: "hover:text-[var(--hdr-accent)]",
@@ -797,53 +804,55 @@ const ot = {
             onClick: N(S, ["exact", "prevent"])
           }, [
             T(Me, { class: "!h-[22px] !w-[22px]" })
-          ], 8, Lt)) : v("", !0),
-          e.showBack ? (a(), u("button", {
+          ], 8, Lt)) : m("", !0),
+          e.showBack ? (a(), i("button", {
             key: 1,
             type: "button",
             class: "cursor-pointer hover:text-[var(--hdr-accent)]",
             title: "Go Back",
             "aria-label": "Go Back",
-            onClick: m
+            onClick: v
           }, [
             T(Te, { class: "!h-[22px] !w-[22px]" })
-          ])) : v("", !0)
+          ])) : m("", !0)
         ], 4),
         V(n.$slots, "left")
       ]),
       r("div", zt, [
         V(n.$slots, "right"),
-        e.searchProvider ? (a(), E(Oe, {
-          key: 0,
-          onClick: c[0] || (c[0] = (d) => x.value = !0)
-        })) : v("", !0),
-        w.value ? (a(), E(bt, {
-          key: 1,
-          notifications: e.notifications,
-          "unread-count": e.unreadCount,
-          "notifications-url": e.notificationsUrl,
-          "icon-map": e.notificationIconMap,
-          onMarkAsRead: c[1] || (c[1] = (d) => n.$emit("markAsRead", d)),
-          onDeleteNotification: c[2] || (c[2] = (d) => n.$emit("deleteNotification", d)),
-          onOpen: c[3] || (c[3] = (d) => n.$emit("notifications-open")),
-          onNavigate: g
-        }, null, 8, ["notifications", "unread-count", "notifications-url", "icon-map"])) : v("", !0),
-        e.user ? (a(), E(It, {
-          key: 2,
-          user: e.user,
-          "menu-items": e.menuItems,
-          onSelect: f
-        }, null, 8, ["user", "menu-items"])) : v("", !0)
+        e.ready ? (a(), i(H, { key: 0 }, [
+          e.searchProvider ? (a(), E(Oe, {
+            key: 0,
+            onClick: u[0] || (u[0] = (d) => x.value = !0)
+          })) : m("", !0),
+          w.value ? (a(), E(bt, {
+            key: 1,
+            notifications: e.notifications,
+            "unread-count": e.unreadCount,
+            "notifications-url": e.notificationsUrl,
+            "icon-map": e.notificationIconMap,
+            onMarkAsRead: u[1] || (u[1] = (d) => n.$emit("markAsRead", d)),
+            onDeleteNotification: u[2] || (u[2] = (d) => n.$emit("deleteNotification", d)),
+            onOpen: u[3] || (u[3] = (d) => n.$emit("notifications-open")),
+            onNavigate: g
+          }, null, 8, ["notifications", "unread-count", "notifications-url", "icon-map"])) : m("", !0),
+          e.user ? (a(), E(It, {
+            key: 2,
+            user: e.user,
+            "menu-items": e.menuItems,
+            onSelect: f
+          }, null, 8, ["user", "menu-items"])) : m("", !0)
+        ], 64)) : m("", !0)
       ]),
       e.searchProvider ? (a(), E(et, {
         key: 0,
         open: x.value,
-        "onUpdate:open": c[4] || (c[4] = (d) => x.value = d),
+        "onUpdate:open": u[4] || (u[4] = (d) => x.value = d),
         "search-provider": e.searchProvider,
         placeholder: e.searchPlaceholder,
         types: e.searchTypes,
         onNavigate: g
-      }, null, 8, ["open", "search-provider", "placeholder", "types"])) : v("", !0)
+      }, null, 8, ["open", "search-provider", "placeholder", "types"])) : m("", !0)
     ]));
   }
 };