@phila/phila-ui-app-header 0.3.0 → 1.0.0-beta.10

package/dist/index.mjs

@@ -1,33 +1,32 @@
-import { defineComponent as g, useSlots as ve, computed as _, createElementBlock as u, openBlock as o, Fragment as z, createElementVNode as s, createCommentVNode as p, unref as n, createTextVNode as N, createVNode as h, renderSlot as f, createBlock as b, withCtx as v, resolveDynamicComponent as I, normalizeClass as L, renderList as V, toDisplayString as y, withKeys as me, mergeProps as C, useTemplateRef as q, ref as B, watch as pe, onMounted as be, onUnmounted as X, normalizeStyle as Y, createSlots as Z, useId as he, withModifiers as ye, nextTick as ge, normalizeProps as T, guardReactiveProps as S } from "vue";
-import { FontAwesomeIcon as w } from "@fortawesome/vue-fontawesome";
-import { useCollapse as J, debounce as ke, Icon as _e, cn as O, BaseLink as P, ActionContent as E } from "@phila/phila-ui-core";
-import { CollapsePanel as H } from "@phila/phila-ui-collapse-panel";
+import { defineComponent as _, useSlots as he, useTemplateRef as S, computed as B, watch as Y, nextTick as Z, createElementBlock as c, openBlock as n, Fragment as T, createElementVNode as s, createCommentVNode as y, unref as i, mergeProps as C, createTextVNode as A, createVNode as p, renderSlot as v, ref as z, onMounted as me, onUnmounted as J, normalizeStyle as ee, normalizeClass as I, toDisplayString as w, onBeforeMount as ge, renderList as Q, createBlock as k, withModifiers as te, withCtx as m, resolveDynamicComponent as ie, createSlots as K, normalizeProps as E, useId as ye, guardReactiveProps as D } from "vue";
+import { FontAwesomeIcon as L } from "@fortawesome/vue-fontawesome";
+import { useVisibility as H, debounce as _e, Icon as $e, FocusTrap as ae, cn as R, BaseLink as se, ActionContent as P } from "@phila/phila-ui-core";
 import { Logo as xe } from "@phila/phila-ui-logo";
-import './index.css';var $e = {
+import './index.css';var ke = {
   prefix: "fas",
   iconName: "magnifying-glass",
   icon: [512, 512, [128269, "search"], "f002", "M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376C296.3 401.1 253.9 416 208 416 93.1 416 0 322.9 0 208S93.1 0 208 0 416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"]
-}, we = $e, Ce = {
+}, we = ke, Be = {
   prefix: "fas",
   iconName: "circle-exclamation",
   icon: [512, 512, ["exclamation-circle"], "f06a", "M256 512a256 256 0 1 1 0-512 256 256 0 1 1 0 512zm0-192a32 32 0 1 0 0 64 32 32 0 1 0 0-64zm0-192c-18.2 0-32.7 15.5-31.4 33.7l7.4 104c.9 12.6 11.4 22.3 23.9 22.3 12.6 0 23-9.7 23.9-22.3l7.4-104c1.3-18.2-13.1-33.7-31.4-33.7z"]
-}, ee = {
+}, ne = {
   prefix: "fas",
   iconName: "xmark",
   icon: [384, 512, [128473, 10005, 10006, 10060, 215, "close", "multiply", "remove", "times"], "f00d", "M55.1 73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L147.2 256 9.9 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192.5 301.3 329.9 438.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.8 256 375.1 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192.5 210.7 55.1 73.4z"]
-}, Be = ee, te = ee, Ne = {
+}, Ce = ne, oe = ne, Ne = {
   prefix: "fas",
   iconName: "lock",
   icon: [384, 512, [128274], "f023", "M128 96l0 64 128 0 0-64c0-35.3-28.7-64-64-64s-64 28.7-64 64zM64 160l0-64C64 25.3 121.3-32 192-32S320 25.3 320 96l0 64c35.3 0 64 28.7 64 64l0 224c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 224c0-35.3 28.7-64 64-64z"]
-}, ae = {
+}, le = {
   prefix: "fas",
   iconName: "caret-up",
   icon: [320, 512, [], "f0d8", "M140.3 135.2c12.6-10.3 31.1-9.5 42.8 2.2l128 128c9.2 9.2 11.9 22.9 6.9 34.9S301.4 320 288.5 320l-256 0c-12.9 0-24.6-7.8-29.6-19.8S.7 274.5 9.9 265.4l128-128 2.4-2.2z"]
-}, ie = {
+}, re = {
   prefix: "fas",
   iconName: "caret-down",
   icon: [320, 512, [], "f0d7", "M140.3 376.8c12.6 10.2 31.1 9.5 42.8-2.2l128-128c9.2-9.2 11.9-22.9 6.9-34.9S301.4 192 288.5 192l-256 0c-12.9 0-24.6 7.8-29.6 19.8S.7 237.5 9.9 246.6l128 128 2.4 2.2z"]
-}, ze = {
+}, Me = {
   prefix: "fas",
   iconName: "building-columns",
   icon: [512, 512, ["bank", "institution", "museum", "university"], "f19c", "M271.9 20.2c-9.8-5.6-21.9-5.6-31.8 0l-224 128c-12.6 7.2-18.8 22-15.1 36S17.5 208 32 208l32 0 0 208 0 0-51.2 38.4C4.7 460.4 0 469.9 0 480 0 497.7 14.3 512 32 512l448 0c17.7 0 32-14.3 32-32 0-10.1-4.7-19.6-12.8-25.6l-51.2-38.4 0-208 32 0c14.5 0 27.2-9.8 30.9-23.8s-2.5-28.8-15.1-36l-224-128zM400 208l0 208-64 0 0-208 64 0zm-112 0l0 208-64 0 0-208 64 0zm-112 0l0 208-64 0 0-208 64 0zM256 96a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"]
@@ -35,247 +34,331 @@ import './index.css';var $e = {
   prefix: "fas",
   iconName: "bars",
   icon: [448, 512, ["navicon"], "f0c9", "M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"]
-}, Ae = {
+}, ze = {
   prefix: "fas",
   iconName: "circle-info",
   icon: [512, 512, ["info-circle"], "f05a", "M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zM224 160a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm-8 64l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24z"]
-}, ne = Ae;
-const Me = "data:image/svg+xml,%3csvg%20width='16'%20height='11'%20viewBox='0%200%2016%2011'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3crect%20width='16'%20height='11'%20fill='url(%23pattern0_61022_1867)'/%3e%3cdefs%3e%3cpattern%20id='pattern0_61022_1867'%20patternContentUnits='objectBoundingBox'%20width='1'%20height='1'%3e%3cuse%20xlink:href='%23image0_61022_1867'%20transform='scale(0.0625%200.0909091)'/%3e%3c/pattern%3e%3cimage%20id='image0_61022_1867'%20width='16'%20height='11'%20preserveAspectRatio='none'%20xlink:href='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAMAAABBPP0LAAAAG1BMVEUdM7EeNLIeM7HgQCDaPh/bPh/bPx/////bPyBEby41AAAAUElEQVQI123MNw4CABDEwD3jC/9/MQ1BQrgeOSkIqYe2o2FZtthXgQLgbHVMZdlsfUQFQnHtjP1+8BUhBDKOqtmfot6ojqPzR7TjdU+f6vkED+IDPhTBcMAAAAAASUVORK5CYII='/%3e%3c/defs%3e%3c/svg%3e", Te = {
+}, ce = ze;
+const Ae = "data:image/svg+xml,%3csvg%20width='16'%20height='11'%20viewBox='0%200%2016%2011'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3crect%20width='16'%20height='11'%20fill='url(%23pattern0_61022_1867)'/%3e%3cdefs%3e%3cpattern%20id='pattern0_61022_1867'%20patternContentUnits='objectBoundingBox'%20width='1'%20height='1'%3e%3cuse%20xlink:href='%23image0_61022_1867'%20transform='scale(0.0625%200.0909091)'/%3e%3c/pattern%3e%3cimage%20id='image0_61022_1867'%20width='16'%20height='11'%20preserveAspectRatio='none'%20xlink:href='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAALCAMAAABBPP0LAAAAG1BMVEUdM7EeNLIeM7HgQCDaPh/bPh/bPx/////bPyBEby41AAAAUElEQVQI123MNw4CABDEwD3jC/9/MQ1BQrgeOSkIqYe2o2FZtthXgQLgbHVMZdlsfUQFQnHtjP1+8BUhBDKOqtmfot6ojqPzR7TjdU+f6vkED+IDPhTBcMAAAAAASUVORK5CYII='/%3e%3c/defs%3e%3c/svg%3e", Te = {
   id: "trusted-site",
   class: "is-flex is-justify-space-between"
-}, Se = { class: "trusted-wrap" }, Ee = { class: "hidden-tablet trusted-toggle is-flex is-align-center" }, Ie = ["src"], Oe = ["aria-label", "aria-expanded"], De = {
+}, Se = { class: "trusted-wrap" }, Ee = { class: "hidden-tablet trusted-toggle is-flex is-align-center" }, Ie = ["src"], He = ["aria-label", "aria-expanded"], Oe = {
   class: "icon",
   "aria-hidden": "true"
-}, Re = { class: "hidden-desktop trusted-toggle is-flex is-align-center" }, He = ["aria-label", "aria-expanded"], Ue = {
+}, Ge = { class: "hidden-desktop trusted-toggle is-flex is-align-center" }, De = ["aria-label", "aria-expanded"], Pe = {
   class: "icon",
   "aria-hidden": "true"
-}, je = {
+}, Re = {
   key: 0,
   class: "trusted-translation is-flex is-align-center"
-}, Ge = ["hidden"], Fe = { class: "trusted-site-info-content content has-text-body-small is-flex is-justify-space-between" }, Ve = { class: "info-item-wrap is-flex" }, Qe = { class: "info-item is-flex is-12-mobile is-align-flex-start is-flex-1 my-4" }, Ke = { class: "trusted-icon is-flex is-flex-column has-text-center" }, We = { class: "icon circle-icon p-3 mb-2" }, qe = { class: "info-item is-flex is-12-mobile is-align-flex-start is-flex-1 my-4" }, Xe = { class: "trusted-icon is-flex is-flex-column has-text-center" }, Ye = { class: "icon circle-icon p-3 mb-2" }, Ze = { class: "info-content-close mt-4" }, Je = /* @__PURE__ */ g({
+}, Ve = ["hidden"], Ue = { class: "trusted-site-info-content content has-text-body-small is-flex is-justify-space-between" }, je = { class: "info-item-wrap is-flex" }, Fe = { class: "info-item is-flex is-12-mobile is-align-flex-start is-flex-1 my-4" }, Qe = { class: "trusted-icon is-flex is-flex-column has-text-center" }, Ke = { class: "icon circle-icon p-3 mb-2" }, We = { class: "info-item is-flex is-12-mobile is-align-flex-start is-flex-1 my-4" }, qe = { class: "trusted-icon is-flex is-flex-column has-text-center" }, Xe = { class: "icon circle-icon p-3 mb-2" }, Ye = { class: "info-content-close mt-4" }, Ze = /* @__PURE__ */ _({
   __name: "TrustedSite",
   setup(t) {
-    const e = ve(), { isCollapsed: l, onClickToggle: a } = J({
+    const e = he(), { isVisible: a, setVisibility: o, toggleProps: r } = H({
       id: "trusted-site-info",
-      escapeKeyClose: !0
-    }), c = _(() => l("trusted-site-info"));
-    return (d, i) => (o(), u(z, null, [
+      escapeKeyHide: !0
+    }), d = S("infoToggle"), l = S("closeInfoToggle"), $ = S("infoToggleMobile"), f = B(() => a());
+    return Y(
+      () => f.value,
+      (g) => {
+        g ? Z(() => {
+          l.value?.focus();
+        }) : (d.value?.focus(), $.value?.focus());
+      }
+    ), (g, b) => (n(), c(T, null, [
       s("div", Te, [
         s("div", Se, [
           s("div", Ee, [
             s("img", {
-              src: n(Me),
+              src: i(Ae),
               alt: "",
               class: "icon"
             }, null, 8, Ie),
-            i[4] || (i[4] = s("div", { class: "content mx-2" }, "An official website of the City of Philadelphia government", -1)),
-            s("button", {
+            b[2] || (b[2] = s("div", { class: "content mx-2" }, "An official website of the City of Philadelphia government", -1)),
+            s("button", C({
+              ref_key: "infoToggle",
+              ref: d,
               class: "phila-button is-extra-small",
-              "aria-label": `${c.value ? "Close" : "Open"} Trusted Site information panel`,
+              "aria-label": `${f.value ? "Close" : "Open"} Trusted Site information panel`,
               "aria-controls": "trusted-site-info",
-              "aria-expanded": c.value,
-              onClick: i[0] || (i[0] = //@ts-ignore
-              (...r) => n(a) && n(a)(...r))
-            }, [
-              i[3] || (i[3] = N(" Here's how you know ", -1)),
-              s("span", De, [
-                h(n(w), {
-                  icon: c.value ? n(ae) : n(ie)
+              "aria-expanded": f.value
+            }, i(r)), [
+              b[1] || (b[1] = A(" Here's how you know ", -1)),
+              s("span", Oe, [
+                p(i(L), {
+                  icon: f.value ? i(le) : i(re)
                 }, null, 8, ["icon"])
               ])
-            ], 8, Oe)
+            ], 16, He)
           ]),
-          s("div", Re, [
-            s("button", {
+          s("div", Ge, [
+            s("button", C({
+              ref_key: "infoToggleMobile",
+              ref: $,
               class: "phila-button is-extra-small",
-              "aria-label": `${c.value ? "Close" : "Open"} Trusted Site information panel`,
+              "aria-label": `${f.value ? "Close" : "Open"} Trusted Site information panel`,
               "aria-controls": "trusted-site-info",
-              "aria-expanded": c.value,
-              onClick: i[1] || (i[1] = //@ts-ignore
-              (...r) => n(a) && n(a)(...r))
-            }, [
-              i[5] || (i[5] = N(" An official website ", -1)),
-              s("span", Ue, [
-                h(n(w), { icon: n(ne) }, null, 8, ["icon"])
+              "aria-expanded": f.value
+            }, i(r)), [
+              b[3] || (b[3] = A(" An official website ", -1)),
+              s("span", Pe, [
+                p(i(L), { icon: i(ce) }, null, 8, ["icon"])
               ])
-            ], 8, He)
+            ], 16, De)
           ])
         ]),
-        n(e).translation ? (o(), u("div", je, [
-          f(d.$slots, "translation", {}, void 0, !0)
-        ])) : p("", !0)
+        i(e).translation ? (n(), c("div", Re, [
+          v(g.$slots, "translation", {}, void 0, !0)
+        ])) : y("", !0)
       ]),
       s("div", {
         id: "trusted-site-info",
         class: "px-6",
-        hidden: !c.value
+        hidden: !f.value
       }, [
-        s("div", Fe, [
-          s("div", Ve, [
-            s("div", Qe, [
-              s("div", Ke, [
-                s("span", We, [
-                  h(n(w), { icon: n(ze) }, null, 8, ["icon"])
+        s("div", Ue, [
+          s("div", je, [
+            s("div", Fe, [
+              s("div", Qe, [
+                s("span", Ke, [
+                  p(i(L), { icon: i(Me) }, null, 8, ["icon"])
                 ]),
-                i[6] || (i[6] = s("span", { class: "has-text-bold" }, ".gov", -1))
+                b[4] || (b[4] = s("span", { class: "has-text-bold" }, ".gov", -1))
               ]),
-              i[7] || (i[7] = s("div", { class: "trusted-text m-4" }, "Only government entities in the U.S. can end in .gov", -1))
+              b[5] || (b[5] = s("div", { class: "trusted-text m-4" }, "Only government entities in the U.S. can end in .gov", -1))
             ]),
-            s("div", qe, [
-              s("div", Xe, [
-                s("div", Ye, [
-                  h(n(w), { icon: n(Ne) }, null, 8, ["icon"])
+            s("div", We, [
+              s("div", qe, [
+                s("div", Xe, [
+                  p(i(L), { icon: i(Ne) }, null, 8, ["icon"])
                 ]),
-                i[8] || (i[8] = s("span", { class: "has-text-bold" }, "https://", -1))
+                b[6] || (b[6] = s("span", { class: "has-text-bold" }, "https://", -1))
               ]),
-              i[9] || (i[9] = s("div", { class: "trusted-text m-4" }, " The https:// in the address bar means your information is encrypted and can not be accessed by anyone else ", -1))
+              b[7] || (b[7] = s("div", { class: "trusted-text m-4" }, " The https:// in the address bar means your information is encrypted and can not be accessed by anyone else ", -1))
             ])
           ]),
-          s("div", Ze, [
+          s("div", Ye, [
             s("button", {
+              ref_key: "closeInfoToggle",
+              ref: l,
               class: "phila-button phila-button--primary icon-button is-extra-small",
               "aria-label": "Close Trusted Site information panel",
-              onClick: i[2] || (i[2] = //@ts-ignore
-              (...r) => n(a) && n(a)(...r))
+              onClick: b[0] || (b[0] = (u) => i(o)(!1))
             }, [
-              h(n(w), { icon: n(Be) }, null, 8, ["icon"])
-            ])
+              p(i(L), { icon: i(Ce) }, null, 8, ["icon"])
+            ], 512)
           ])
         ])
-      ], 8, Ge)
+      ], 8, Ve)
     ], 64));
   }
-}), D = (t, e) => {
-  const l = t.__vccOpts || t;
-  for (const [a, c] of e)
-    l[a] = c;
-  return l;
-}, Pe = /* @__PURE__ */ D(Je, [["__scopeId", "data-v-3fc90bb2"]]), et = ["aria-controls", "aria-expanded", "aria-label", "onClick"], tt = { class: "icon" }, at = ["id", "hidden"], it = /* @__PURE__ */ g({
-  __name: "NavbarBurger",
+}), V = (t, e) => {
+  const a = t.__vccOpts || t;
+  for (const [o, r] of e)
+    a[o] = r;
+  return a;
+}, Je = /* @__PURE__ */ V(Ze, [["__scopeId", "data-v-adf7cbee"]]), et = {
+  key: 0,
+  class: "phila-navbar-end"
+}, W = "5rem", tt = /* @__PURE__ */ _({
+  __name: "index",
   props: {
+    id: {},
+    sticky: { type: Boolean },
+    navbarBrand: {},
     mobileNav: {},
-    collapseGroup: {}
+    visibilityGroup: {},
+    search: {},
+    links: { default: () => [{ text: "Home", href: "#" }] }
   },
   setup(t) {
-    return (e, l) => (o(), b(n(H), {
-      id: "mobile-nav",
-      group: t.collapseGroup,
-      "outside-click-close": "",
-      "escape-key-close": "",
-      "blur-close": "",
-      "open-single": ""
-    }, {
-      toggle: v((a) => [
-        s("button", {
-          class: L(["phila-navbar-burger phila-button icon-button", { "phila-navbar-item-flyout-active": a.open }]),
-          "aria-controls": a.ariaControls,
-          "aria-expanded": a.open,
-          "aria-label": `${a.open ? "Close" : "Open"} mobile navigation panel`,
-          onClick: a.onClick
-        }, [
-          s("span", tt, [
-            h(n(w), {
-              icon: a.open ? n(te) : n(Le)
-            }, null, 8, ["icon"])
-          ])
-        ], 10, et)
-      ]),
-      default: v((a) => [
-        s("div", {
-          id: a.id,
-          class: "phila-mobile-nav",
-          hidden: !a.open
-        }, [
-          f(e.$slots, "mobile-nav", {}, () => [
-            (o(), b(I(t.mobileNav)))
-          ])
-        ], 8, at)
-      ]),
-      _: 3
-    }, 8, ["group"]));
+    const e = t, { visibilityState: a } = H({ group: "app-header" }), o = S("navBarElement"), r = z(W), d = z(0), l = _e(() => {
+      const f = (o.value?.offsetTop || 0) + (o.value?.offsetHeight || 0), g = typeof window < "u" ? window.innerWidth : 1024;
+      r.value = !e.sticky || g < 1024 ? f + "px" : W, d.value = f;
+    }, 100), $ = B(() => a.value?.appHeader);
+    return Y(() => $.value, l, { deep: !0, immediate: !0 }), me(() => {
+      window.addEventListener("resize", l);
+    }), J(() => {
+      window.removeEventListener("resize", l);
+    }), (f, g) => (n(), c("nav", {
+      ref_key: "navBarElement",
+      ref: o,
+      class: I(["phila-navbar has-links-on-primary", { "is-sticky-desktop": t.sticky }]),
+      "aria-label": "Main navigation",
+      style: ee(`--nav-height:${r.value};--nav-bottom:${d.value}px`)
+    }, [
+      v(f.$slots, "navbar-toggle", {}, void 0, !0),
+      v(f.$slots, "navbar-left", {}, void 0, !0),
+      v(f.$slots, "navbar-right", {}, void 0, !0),
+      f.$slots["navbar-end"] ? (n(), c("div", et, [
+        v(f.$slots, "navbar-end", {}, void 0, !0)
+      ])) : y("", !0)
+    ], 6));
+  }
+}), it = /* @__PURE__ */ V(tt, [["__scopeId", "data-v-23ed37fb"]]), at = { class: "site-wide-alert content" }, st = { class: "alert-content" }, nt = { class: "content-text" }, ot = { class: "title" }, lt = { class: "body" }, rt = /* @__PURE__ */ _({
+  __name: "AlertBanner",
+  props: {
+    bannerTitle: {},
+    bannerMessage: {}
+  },
+  setup(t) {
+    const e = t;
+    return (a, o) => (n(), c("div", at, [
+      s("div", st, [
+        p(i($e), {
+          "icon-definition": i(Be),
+          size: "small",
+          decorative: !0
+        }, null, 8, ["icon-definition"]),
+        s("div", nt, [
+          s("h6", ot, w(e.bannerTitle), 1),
+          s("div", lt, w(e.bannerMessage), 1)
+        ])
+      ])
+    ]));
   }
-}), nt = ["href"], st = ["href", "aria-controls", "aria-expanded", "onKeypress", "onTouchend", "onClick"], ot = ["id", "hidden"], lt = {
+}), ct = { class: "phila-navbar-item phila-navbar-list is-flex is-align-center is-justify-space-between content has-text-label-default hidden-tablet" }, dt = ["href"], ut = ["id", "onMouseenter", "onMouseleave"], vt = ["href", "aria-controls", "aria-expanded", "data-toggle", "onTouchend", "onClick"], ft = {
   key: 0,
   class: "content nav-flyout has-background-ghost-gray px-6 py-4",
   tabindex: "-1"
-}, rt = {
+}, bt = {
   class: "is-flex is-flex-column is-flex-wrap-wrap",
   style: { gap: "var(--spacing-4xl)" }
-}, ct = ["href"], dt = /* @__PURE__ */ g({
+}, pt = ["href"], ht = /* @__PURE__ */ _({
   __name: "NavbarLinks",
   props: {
     links: {},
-    collapseGroup: {}
+    visibilityGroup: {}
   },
   setup(t) {
-    const e = (a) => !!(a.subLinks || a.subNav), l = (a) => `main-nav-${a.text.split(" ").join("-").toLowerCase().replace(/[^a-z0-9-]/g, "")}`;
-    return (a, c) => (o(!0), u(z, null, V(t.links, (d, i) => (o(), u(z, null, [
-      e(d) ? (o(), b(n(H), {
-        id: l(d),
-        key: `collapse-${i}`,
-        group: t.collapseGroup,
-        "outside-click-close": "",
-        "escape-key-close": "",
-        "blur-close": "",
-        "mouse-over-toggle": "",
-        "open-single": "",
-        class: "phila-navbar-link-list-item"
-      }, {
-        toggle: v((r) => [
+    const e = (g) => !!(g.subLinks || g.subNav), a = (g) => `main-nav-${g.text.split(" ").join("-").toLowerCase().replace(/[^a-z0-9-]/g, "")}`, o = t, { setVisibility: r, create: d, isVisible: l, onMouseEnter: $, onMouseLeave: f } = H({
+      group: o.visibilityGroup,
+      outsideClickHide: !0,
+      escapeKeyHide: !0,
+      mouseOverToggle: !0,
+      blurHide: !0,
+      showSingle: !0
+    });
+    return ge(() => {
+      o.links?.forEach((g) => {
+        if (e(g)) {
+          const b = a(g);
+          d(b);
+        }
+      });
+    }), (g, b) => (n(), c("div", ct, [
+      (n(!0), c(T, null, Q(t.links, (u, O) => (n(), c(T, null, [
+        e(u) ? (n(), c("div", {
+          id: `${o.visibilityGroup}-item-${a(u)}`,
+          key: `navbar-link-${O}`,
+          class: "phila-navbar-link-list-item",
+          onMouseenter: (x) => i($)(a(u)),
+          onMouseleave: (x) => i(f)(a(u))
+        }, [
           s("a", {
-            href: d.href,
-            class: L(["phila-navbar-link px-4", { "phila-navbar-item-flyout-active": r.open }]),
-            "aria-controls": r.ariaControls,
-            "aria-expanded": r.open,
+            href: u.href,
+            class: I(["phila-navbar-link px-4", { "phila-navbar-item-flyout-active": i(l)(a(u)) }]),
+            "aria-controls": a(u),
+            "aria-expanded": i(l)(a(u)),
+            "data-toggle": `visibility-${a(u)}`,
             tabindex: "0",
-            onKeypress: me(r.onClick, ["enter"]),
-            onTouchend: r.onClick,
-            onClick: r.onClick
+            onTouchend: (x) => i(r)(!i(l)(a(u)), a(u)),
+            onClick: te((x) => i(r)(!i(l)(a(u)), a(u)), ["prevent"])
           }, [
-            N(y(d.text) + " ", 1),
-            h(n(w), {
+            A(w(u.text) + " ", 1),
+            p(i(L), {
               class: "ml-1",
-              icon: r.open ? n(ae) : n(ie)
+              icon: i(l)(a(u)) ? i(le) : i(re)
             }, null, 8, ["icon"])
-          ], 42, st)
-        ]),
-        default: v((r) => [
-          (o(), u("div", {
-            id: r.id,
-            key: d.text,
-            hidden: !r.open
+          ], 42, vt),
+          (n(), k(i(ae), {
+            id: a(u),
+            key: u.text,
+            "allow-escape": "",
+            hidden: !i(l)(a(u)),
+            onEscape: (x) => i(r)(!1, a(u))
+          }, {
+            default: m(() => [
+              u.subLinks ? (n(), c("div", ft, [
+                s("ul", bt, [
+                  (n(!0), c(T, null, Q(u.subLinks, (x) => (n(), c("li", {
+                    key: x.text,
+                    class: "sub-nav-link is-flex is-align-center",
+                    style: { width: "150px" }
+                  }, [
+                    s("a", {
+                      href: x.href,
+                      class: "has-text-link has-text-weight-medium",
+                      tabindex: "0"
+                    }, w(x.text), 9, pt)
+                  ]))), 128))
+                ])
+              ])) : (n(), k(ie(u.subNav), { key: 1 }))
+            ]),
+            _: 2
+          }, 1032, ["id", "hidden", "onEscape"]))
+        ], 40, ut)) : (n(), c("div", {
+          key: `link-${O}`,
+          class: "phila-navbar-link-list-item"
+        }, [
+          s("a", {
+            href: u.href,
+            class: "phila-navbar-link px-4",
+            tabindex: "0"
+          }, w(u.text), 9, dt)
+        ]))
+      ], 64))), 256))
+    ]));
+  }
+}), mt = { class: "phila-navbar-search is-flex" }, gt = { id: "navbar-search" }, yt = { class: "pr-4" }, _t = ["aria-controls", "data-toggle", "aria-expanded", "aria-label"], $t = { class: "icon" }, xt = /* @__PURE__ */ _({
+  __name: "NavbarSearch",
+  props: {
+    search: {},
+    visibilityGroup: {}
+  },
+  setup(t) {
+    const e = t, { setVisibility: a, isVisible: o } = H({
+      id: `${e.visibilityGroup}-flyout-navbar-search`,
+      group: e.visibilityGroup,
+      outsideClickHide: !0,
+      escapeKeyHide: !0,
+      blurHide: !0,
+      showSingle: !0
+    });
+    return (r, d) => (n(), c("div", mt, [
+      s("div", gt, [
+        s("div", yt, [
+          s("button", {
+            class: I(["phila-button phila-button--primary icon-button is-small", { "phila-navbar-item-flyout-active": i(o)() }]),
+            "aria-controls": `${e.visibilityGroup}-flyout-navbar-search`,
+            "data-toggle": `visibility-${e.visibilityGroup}-flyout-navbar-search`,
+            "aria-expanded": i(o)(),
+            "aria-label": `${i(o)() ? "Close" : "Open"} search panel`,
+            onClick: d[0] || (d[0] = (l) => i(a)(!i(o)()))
           }, [
-            d.subLinks ? (o(), u("div", lt, [
-              s("ul", rt, [
-                (o(!0), u(z, null, V(d.subLinks, (k) => (o(), u("li", {
-                  key: k.text,
-                  class: "sub-nav-link is-flex is-align-center",
-                  style: { width: "150px" }
-                }, [
-                  s("a", {
-                    href: k.href,
-                    class: "has-text-link has-text-weight-medium",
-                    tabindex: "0"
-                  }, y(k.text), 9, ct)
-                ]))), 128))
-              ])
-            ])) : (o(), b(I(d.subNav), { key: 1 }))
-          ], 8, ot))
+            s("span", $t, [
+              p(i(L), {
+                icon: i(o)() ? i(oe) : i(we)
+              }, null, 8, ["icon"])
+            ])
+          ], 10, _t)
+        ])
+      ]),
+      p(i(ae), {
+        id: `${e.visibilityGroup}-flyout-navbar-search`,
+        "allow-escape": "",
+        class: "nav-flyout is-12",
+        hidden: !i(o)(),
+        onEscape: d[1] || (d[1] = (l) => i(a)(!1, `${e.visibilityGroup}-flyout-navbar-search`))
+      }, {
+        default: m(() => [
+          v(r.$slots, "search-panel")
         ]),
-        _: 2
-      }, 1032, ["id", "group"])) : (o(), u("div", {
-        key: `link-${i}`,
-        class: "phila-navbar-link-list-item"
-      }, [
-        s("a", {
-          href: d.href,
-          class: "phila-navbar-link px-4",
-          tabindex: "0"
-        }, y(d.text), 9, nt)
-      ]))
-    ], 64))), 256));
+        _: 3
+      }, 8, ["id", "hidden"])
+    ]));
   }
-}), ut = /* @__PURE__ */ g({
+}), kt = /* @__PURE__ */ _({
   __name: "NavbarBrandLogo",
   props: {
     logo: {},
@@ -284,176 +367,84 @@ const Me = "data:image/svg+xml,%3csvg%20width='16'%20height='11'%20viewBox='0%20
     altText: {}
   },
   setup(t) {
-    const e = t, l = _(() => ({
+    const e = t, a = B(() => ({
       variant: "city",
       layout: "stacked",
       colorScheme: "on-primary",
       href: e.href,
       ...e.logo
     }));
-    return (a, c) => (o(), b(n(xe), C(l.value, { class: "phila-navbar-logo" }), null, 16));
-  }
-}), ft = /* @__PURE__ */ D(ut, [["__scopeId", "data-v-3011c249"]]), vt = { class: "pr-4" }, mt = ["aria-controls", "aria-expanded", "aria-label", "onClick"], pt = { class: "icon" }, bt = ["id", "hidden"], ht = /* @__PURE__ */ g({
-  __name: "NavbarSearch",
-  props: {
-    search: {},
-    collapseGroup: {}
-  },
-  setup(t) {
-    return (e, l) => (o(), b(n(H), {
-      id: "navbar-search",
-      group: t.collapseGroup,
-      "outside-click-close": "",
-      "escape-key-close": "",
-      "blur-close": "",
-      "open-single": ""
-    }, {
-      toggle: v((a) => [
-        s("div", vt, [
-          s("button", {
-            class: L(["phila-button phila-button--primary icon-button is-small", { "phila-navbar-item-flyout-active": a.open }]),
-            "aria-controls": a.ariaControls,
-            "aria-expanded": a.open,
-            "aria-label": `${a.open ? "Close" : "Open"} search panel`,
-            onClick: a.onClick
-          }, [
-            s("span", pt, [
-              h(n(w), {
-                icon: a.open ? n(te) : n(we)
-              }, null, 8, ["icon"])
-            ])
-          ], 10, mt)
-        ])
-      ]),
-      default: v((a) => [
-        s("div", {
-          id: a.id,
-          class: "nav-flyout is-12",
-          hidden: !a.open
-        }, [
-          f(e.$slots, "default", {}, () => [
-            t.search && a.open ? (o(), b(I(t.search), { key: 0 })) : p("", !0)
-          ])
-        ], 8, bt)
-      ]),
-      _: 3
-    }, 8, ["group"]));
+    return (o, r) => (n(), k(i(xe), C(a.value, { class: "phila-navbar-logo" }), null, 16));
   }
-}), yt = { class: "phila-navbar-brand" }, gt = {
+}), wt = /* @__PURE__ */ V(kt, [["__scopeId", "data-v-3011c249"]]), Bt = { class: "phila-navbar-brand is-flex" }, Ct = {
   key: 0,
   class: "phila-navbar-item phila-navbar-brand-link hidden-tablet"
-}, kt = {
+}, Nt = {
   key: 0,
   class: "content"
-}, _t = ["href"], xt = { class: "phila-navbar-item phila-navbar-list is-flex is-align-center is-justify-space-between content has-text-label-default hidden-tablet" }, $t = { class: "phila-navbar-search" }, wt = {
-  key: 0,
-  class: "phila-navbar-end"
-}, Q = "5rem", Ct = /* @__PURE__ */ g({
-  __name: "index",
+}, Mt = ["href"], Lt = /* @__PURE__ */ _({
+  __name: "NavbarBrand",
   props: {
-    id: {},
-    sticky: { type: Boolean },
-    navbarBrand: {},
-    mobileNav: {},
-    collapseGroup: {},
-    search: {},
-    links: { default: () => [{ text: "Home", href: "#" }] }
+    brandingImage: {},
+    brandingLink: {},
+    logo: {}
   },
   setup(t) {
-    const e = t, { state: l } = J(), a = q("navBarElement"), c = B(Q), d = B(0), i = ke(() => {
-      const r = (a.value?.offsetTop || 0) + (a.value?.offsetHeight || 0), k = typeof window < "u" ? window.innerWidth : 1024;
-      c.value = !e.sticky || k < 1024 ? r + "px" : Q, d.value = r;
-    }, 100);
-    return pe(() => l.value, i, { deep: !0, immediate: !0 }), be(() => {
-      window.addEventListener("resize", i);
-    }), X(() => {
-      window.removeEventListener("resize", i);
-    }), (r, k) => (o(), u("nav", {
-      ref_key: "navBarElement",
-      ref: a,
-      class: L(["phila-navbar has-links-on-primary", { "is-sticky-desktop": t.sticky }]),
-      "aria-label": "Main navigation",
-      style: Y(`--nav-height:${c.value};--nav-bottom:${d.value}px`)
-    }, [
-      f(r.$slots, "navbar-burger", {}, () => [
-        t.mobileNav || r.$slots["mobile-nav"] ? (o(), b(it, {
-          key: 0,
-          "mobile-nav": t.mobileNav,
-          "collapse-group": t.id
-        }, Z({ _: 2 }, [
-          r.$slots["mobile-nav"] ? {
-            name: "mobile-nav",
-            fn: v(() => [
-              f(r.$slots, "mobile-nav", {}, void 0, !0)
-            ]),
-            key: "0"
-          } : void 0
-        ]), 1032, ["mobile-nav", "collapse-group"])) : p("", !0)
-      ], !0),
-      s("div", yt, [
-        f(r.$slots, "navbar-logo", {}, () => [
-          t.navbarBrand?.brandingImage ? (o(), b(ft, C({ key: 0 }, t.navbarBrand.brandingImage, {
-            logo: t.navbarBrand?.logo
-          }), null, 16, ["logo"])) : p("", !0)
-        ], !0),
-        r.$slots["navbar-brand-link"] || t.navbarBrand?.brandingLink ? (o(), u("div", gt, [
-          f(r.$slots, "navbar-brand-link", {}, () => [
-            t.navbarBrand?.brandingLink ? (o(), u("div", kt, [
-              s("a", {
-                tabindex: "0",
-                href: t.navbarBrand.brandingLink.href,
-                class: "has-text-underline"
-              }, y(t.navbarBrand.brandingLink.text), 9, _t)
-            ])) : p("", !0)
-          ], !0)
-        ])) : p("", !0)
+    return (e, a) => (n(), c("div", Bt, [
+      v(e.$slots, "navbar-logo", {}, () => [
+        t.brandingImage ? (n(), k(wt, C({ key: 0 }, t.brandingImage, { logo: t.logo }), null, 16, ["logo"])) : y("", !0)
       ]),
-      s("div", xt, [
-        f(r.$slots, "navbar-links", {}, () => [
-          t.links ? (o(), b(dt, {
-            key: 0,
-            links: t.links,
-            "collapse-group": t.id
-          }, null, 8, ["links", "collapse-group"])) : p("", !0)
-        ], !0)
-      ]),
-      s("div", $t, [
-        f(r.$slots, "navbar-search", {}, () => [
-          t.search ? (o(), b(ht, {
-            key: 0,
-            search: t.search,
-            "collapse-group": t.id
-          }, null, 8, ["search", "collapse-group"])) : p("", !0)
-        ], !0)
-      ]),
-      r.$slots["navbar-end"] ? (o(), u("div", wt, [
-        f(r.$slots, "navbar-end", {}, void 0, !0)
-      ])) : p("", !0)
-    ], 6));
+      e.$slots["navbar-brand-link"] || t.brandingLink ? (n(), c("div", Ct, [
+        v(e.$slots, "navbar-brand-link", {}, () => [
+          t.brandingLink ? (n(), c("div", Nt, [
+            s("a", {
+              tabindex: "0",
+              href: t.brandingLink.href,
+              class: "has-text-underline"
+            }, w(t.brandingLink.text), 9, Mt)
+          ])) : y("", !0)
+        ])
+      ])) : y("", !0)
+    ]));
   }
-}), Bt = /* @__PURE__ */ D(Ct, [["__scopeId", "data-v-caf52a6d"]]), Nt = { class: "site-wide-alert content" }, zt = { class: "alert-content" }, Lt = { class: "content-text" }, At = { class: "title" }, Mt = { class: "body" }, Tt = /* @__PURE__ */ g({
-  __name: "AlertBanner",
+}), zt = { id: "mobile-nav" }, At = ["aria-controls", "aria-expanded", "aria-label"], Tt = { class: "icon" }, St = ["id", "hidden"], Et = /* @__PURE__ */ _({
+  __name: "NavbarBurger",
   props: {
-    bannerTitle: {},
-    bannerMessage: {}
+    mobileNav: {},
+    visibilityGroup: {}
   },
   setup(t) {
-    const e = t;
-    return (l, a) => (o(), u("div", Nt, [
-      s("div", zt, [
-        h(n(_e), {
-          "icon-definition": n(Ce),
-          size: "small",
-          decorative: !0
-        }, null, 8, ["icon-definition"]),
-        s("div", Lt, [
-          s("h6", At, y(e.bannerTitle), 1),
-          s("div", Mt, y(e.bannerMessage), 1)
+    const e = t, { isVisible: a, toggleProps: o } = H({
+      id: "mobile-nav",
+      group: e.visibilityGroup,
+      outsideClickHide: !0,
+      escapeKeyHide: !0,
+      blurHide: !1,
+      showSingle: !0
+    }), r = B(() => a("mobile-nav"));
+    return (d, l) => (n(), c("div", zt, [
+      s("button", C({
+        class: ["phila-navbar-burger phila-button icon-button", { "phila-navbar-item-flyout-active": r.value }],
+        "aria-controls": `navbar-burger-flyout-${e.visibilityGroup}`,
+        "aria-expanded": r.value,
+        "aria-label": `${r.value ? "Close" : "Open"} mobile navigation panel`
+      }, i(o)), [
+        s("span", Tt, [
+          p(i(L), {
+            icon: r.value ? i(oe) : i(Le)
+          }, null, 8, ["icon"])
         ])
-      ])
+      ], 16, At),
+      s("div", {
+        id: `navbar-burger-flyout-${e.visibilityGroup}`,
+        class: "phila-mobile-nav",
+        hidden: !r.value
+      }, [
+        v(d.$slots, "mobile-nav")
+      ], 8, St)
     ]));
   }
-}), ta = /* @__PURE__ */ g({
+}), ii = /* @__PURE__ */ _({
   __name: "AppHeader",
   props: {
     showTrustedSite: { type: Boolean, default: !0 },
@@ -462,54 +453,84 @@ const Me = "data:image/svg+xml,%3csvg%20width='16'%20height='11'%20viewBox='0%20
     id: { default: "main-nav" },
     sticky: { type: Boolean, default: !0 },
     navbarBrand: { default: void 0 },
-    mobileNav: { default: void 0 },
-    collapseGroup: {},
-    search: { default: void 0 },
+    mobileNav: {},
+    visibilityGroup: {},
+    search: {},
     links: { default: void 0 },
     bannerTitle: { default: void 0 },
     bannerMessage: { default: void 0 }
   },
   setup(t) {
-    return (e, l) => (o(), u(z, null, [
-      t.showTrustedSite ? (o(), b(Pe, { key: 0 }, {
-        translation: v(() => [
-          f(e.$slots, "translations", {}, () => [
-            t.translations ? (o(), b(I(t.translations), { key: 0 })) : p("", !0)
+    return (e, a) => (n(), c(T, null, [
+      t.showTrustedSite ? (n(), k(Je, { key: 0 }, {
+        translation: m(() => [
+          v(e.$slots, "translations", {}, () => [
+            t.translations ? (n(), k(ie(t.translations), { key: 0 })) : y("", !0)
           ])
         ]),
         _: 3
-      })) : p("", !0),
-      h(Bt, {
+      })) : y("", !0),
+      p(it, {
         id: t.id,
-        sticky: t.sticky,
-        "mobile-nav": t.mobileNav,
-        links: t.links,
-        "navbar-brand": t.navbarBrand,
-        search: t.search
-      }, Z({ _: 2 }, [
-        e.$slots["mobile-nav"] ? {
-          name: "mobile-nav",
-          fn: v(() => [
-            f(e.$slots, "mobile-nav")
-          ]),
-          key: "0"
-        } : void 0,
+        sticky: t.sticky
+      }, K({
+        "navbar-toggle": m(() => [
+          v(e.$slots, "navbar-toggle", {}, () => [
+            p(Et, { "visibility-group": t.id }, K({ _: 2 }, [
+              e.$slots["mobile-nav"] ? {
+                name: "mobile-nav",
+                fn: m(() => [
+                  v(e.$slots, "mobile-nav")
+                ]),
+                key: "0"
+              } : void 0
+            ]), 1032, ["visibility-group"])
+          ])
+        ]),
+        "navbar-left": m(() => [
+          v(e.$slots, "navbar-left", {}, () => [
+            v(e.$slots, "navbar-brand", {}, () => [
+              t.navbarBrand ? (n(), k(Lt, E(C({ key: 0 }, t.navbarBrand)), null, 16)) : y("", !0)
+            ])
+          ])
+        ]),
+        "navbar-right": m(() => [
+          v(e.$slots, "navbar-right", {}, () => [
+            v(e.$slots, "navbar-links", {}, () => [
+              t.links ? (n(), k(ht, {
+                key: 0,
+                links: t.links,
+                "visibility-group": t.id
+              }, null, 8, ["links", "visibility-group"])) : y("", !0)
+            ]),
+            v(e.$slots, "navbar-search", {}, () => [
+              p(xt, { "visibility-group": t.id }, {
+                "search-panel": m(() => [
+                  v(e.$slots, "search-panel")
+                ]),
+                _: 3
+              }, 8, ["visibility-group"])
+            ])
+          ])
+        ]),
+        _: 2
+      }, [
         e.$slots["navbar-end"] ? {
           name: "navbar-end",
-          fn: v(() => [
-            f(e.$slots, "navbar-end")
+          fn: m(() => [
+            v(e.$slots, "navbar-end")
           ]),
-          key: "1"
+          key: "0"
         } : void 0
-      ]), 1032, ["id", "sticky", "mobile-nav", "links", "navbar-brand", "search"]),
-      t.bannerTitle || t.bannerMessage ? (o(), b(Tt, {
+      ]), 1032, ["id", "sticky"]),
+      t.bannerTitle || t.bannerMessage ? (n(), k(rt, {
         key: 1,
         "banner-title": t.bannerTitle,
         "banner-message": t.bannerMessage
-      }, null, 8, ["banner-title", "banner-message"])) : p("", !0)
+      }, null, 8, ["banner-title", "banner-message"])) : y("", !0)
     ], 64));
   }
-}), St = ["disabled"], K = /* @__PURE__ */ g({
+}), It = ["disabled"], q = /* @__PURE__ */ _({
   inheritAttrs: !1,
   __name: "PhlButton",
   props: {
@@ -531,24 +552,24 @@ const Me = "data:image/svg+xml,%3csvg%20width='16'%20height='11'%20viewBox='0%20
     svgRaw: {}
   },
   setup(t) {
-    const e = t, l = (i) => "href" in i && i.href !== void 0 || "to" in i && i.to !== void 0, a = _(() => O(
+    const e = t, a = (l) => "href" in l && l.href !== void 0 || "to" in l && l.to !== void 0, o = B(() => R(
       "phila-button",
       `phila-button--${e.variant}`,
       e.size && `is-${e.size}`,
       e.iconOnly && "icon-button",
       e.iconOnly && e.variant === "standard" && "icon-button--standard",
       e.className
-    )), c = _(() => l(e) ? "to" in e && e.to !== void 0 ? {
+    )), r = B(() => a(e) ? "to" in e && e.to !== void 0 ? {
       to: e.to,
       disabled: e.disabled,
-      className: a.value
+      className: o.value
     } : {
       href: e.href,
       target: e.target,
       rel: e.rel,
       disabled: e.disabled,
-      className: a.value
-    } : {}), d = _(
+      className: o.value
+    } : {}), d = B(
       () => ({
         iconDefinition: e.iconDefinition,
         iconClass: e.iconClass,
@@ -559,51 +580,51 @@ const Me = "data:image/svg+xml,%3csvg%20width='16'%20height='11'%20viewBox='0%20
         size: e.size
       })
     );
-    return (i, r) => l(e) ? (o(), b(n(P), C({ key: 0 }, { ...c.value, ...i.$attrs }, { role: "button" }), {
-      default: v(() => [
-        h(n(E), T(S(d.value)), {
-          default: v(() => [
-            f(i.$slots, "default", {}, () => [
-              N(y(e.text), 1)
+    return (l, $) => a(e) ? (n(), k(i(se), C({ key: 0 }, { ...r.value, ...l.$attrs }, { role: "button" }), {
+      default: m(() => [
+        p(i(P), E(D(d.value)), {
+          default: m(() => [
+            v(l.$slots, "default", {}, () => [
+              A(w(e.text), 1)
             ])
           ]),
           _: 3
         }, 16)
       ]),
       _: 3
-    }, 16)) : (o(), u("button", C({
+    }, 16)) : (n(), c("button", C({
       key: 1,
       type: "button",
       disabled: e.disabled,
-      class: a.value
-    }, i.$attrs), [
-      h(n(E), T(S(d.value)), {
-        default: v(() => [
-          f(i.$slots, "default", {}, () => [
-            N(y(e.text), 1)
+      class: o.value
+    }, l.$attrs), [
+      p(i(P), E(D(d.value)), {
+        default: m(() => [
+          v(l.$slots, "default", {}, () => [
+            A(w(e.text), 1)
           ])
         ]),
         _: 3
       }, 16)
-    ], 16, St));
+    ], 16, It));
   }
 });
-var W = {
+var X = {
   prefix: "fas",
   iconName: "xmark",
   icon: [384, 512, [128473, 10005, 10006, 10060, 215, "close", "multiply", "remove", "times"], "f00d", "M55.1 73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L147.2 256 9.9 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192.5 301.3 329.9 438.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.8 256 375.1 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192.5 210.7 55.1 73.4z"]
 };
-const Et = ["id"], It = {
+const Ht = ["id"], Ot = {
   key: 0,
   class: "tooltip__tail",
   "aria-hidden": "true"
-}, Ot = {
+}, Gt = {
   key: 1,
   class: "tooltip__plain-row has-text-body-small"
 }, Dt = {
   key: 0,
   class: "tooltip__title-row"
-}, Rt = { key: 0 }, Ht = /* @__PURE__ */ g({
+}, Pt = { key: 0 }, Rt = /* @__PURE__ */ _({
   __name: "TooltipBubble",
   props: {
     id: {},
@@ -617,8 +638,8 @@ const Et = ["id"], It = {
   },
   emits: ["dismiss"],
   setup(t) {
-    const e = t, l = _(
-      () => O(
+    const e = t, a = B(
+      () => R(
         "tooltip",
         "content",
         "resets-link-colors",
@@ -628,48 +649,48 @@ const Et = ["id"], It = {
         e.className
       )
     );
-    return (a, c) => (o(), u("div", {
+    return (o, r) => (n(), c("div", {
       id: t.id,
-      class: L(l.value),
+      class: I(a.value),
       role: "tooltip"
     }, [
-      t.tail ? (o(), u("div", It)) : p("", !0),
-      t.type === "plain" ? (o(), u("div", Ot, [
-        f(a.$slots, "default", {}, void 0, !0),
-        t.dismissable ? (o(), b(n(K), {
+      t.tail ? (n(), c("div", Ot)) : y("", !0),
+      t.type === "plain" ? (n(), c("div", Gt, [
+        v(o.$slots, "default", {}, void 0, !0),
+        t.dismissable ? (n(), k(i(q), {
           key: 0,
           class: "tooltip__dismiss",
           variant: "standard",
           size: "extra-small",
           "icon-only": !0,
-          "icon-definition": n(W),
+          "icon-definition": i(X),
           "aria-label": "Dismiss tooltip",
-          onClick: c[0] || (c[0] = (d) => a.$emit("dismiss"))
-        }, null, 8, ["icon-definition"])) : p("", !0)
-      ])) : (o(), u(z, { key: 2 }, [
-        t.title || t.dismissable ? (o(), u("div", Dt, [
-          t.title ? (o(), u("h6", Rt, y(t.title), 1)) : p("", !0),
-          t.dismissable ? (o(), b(n(K), {
+          onClick: r[0] || (r[0] = (d) => o.$emit("dismiss"))
+        }, null, 8, ["icon-definition"])) : y("", !0)
+      ])) : (n(), c(T, { key: 2 }, [
+        t.title || t.dismissable ? (n(), c("div", Dt, [
+          t.title ? (n(), c("h6", Pt, w(t.title), 1)) : y("", !0),
+          t.dismissable ? (n(), k(i(q), {
             key: 1,
             class: "tooltip__dismiss",
             variant: "standard",
             size: "extra-small",
             "icon-only": !0,
-            "icon-definition": n(W),
+            "icon-definition": i(X),
             "aria-label": "Dismiss tooltip",
-            onClick: c[1] || (c[1] = (d) => a.$emit("dismiss"))
-          }, null, 8, ["icon-definition"])) : p("", !0)
-        ])) : p("", !0),
-        f(a.$slots, "default", {}, void 0, !0)
+            onClick: r[1] || (r[1] = (d) => o.$emit("dismiss"))
+          }, null, 8, ["icon-definition"])) : y("", !0)
+        ])) : y("", !0),
+        v(o.$slots, "default", {}, void 0, !0)
       ], 64))
-    ], 10, Et));
+    ], 10, Ht));
   }
-}), se = (t, e) => {
-  const l = t.__vccOpts || t;
-  for (const [a, c] of e)
-    l[a] = c;
-  return l;
-}, Ut = /* @__PURE__ */ se(Ht, [["__scopeId", "data-v-7ccd7c7d"]]), jt = /* @__PURE__ */ g({
+}), de = (t, e) => {
+  const a = t.__vccOpts || t;
+  for (const [o, r] of e)
+    a[o] = r;
+  return a;
+}, Vt = /* @__PURE__ */ de(Rt, [["__scopeId", "data-v-7ccd7c7d"]]), Ut = /* @__PURE__ */ _({
   __name: "Tooltip",
   props: {
     trigger: { default: "hover" },
@@ -682,75 +703,75 @@ const Et = ["id"], It = {
     className: {}
   },
   setup(t, { expose: e }) {
-    const l = t, a = he(), c = B(!1), d = B(null), i = B(null), r = B("top-center"), k = B(0), oe = () => {
-      const m = d.value?.getBoundingClientRect();
-      if (!m) return "top-center";
-      const { innerWidth: $, innerHeight: R } = window, M = m.top, de = R - m.bottom, G = i.value?.firstElementChild?.getBoundingClientRect().height ?? 0, ue = (G > 0 ? M >= G : M >= de) ? "top" : "bottom", F = m.left + m.width / 2, fe = F < $ / 3 ? "left" : F > $ * 2 / 3 ? "right" : "center";
-      return `${ue}-${fe}`;
-    }, U = (m) => {
-      m.key === "Escape" && x();
-    }, j = (m) => {
-      d.value && !d.value.contains(m.target) && x();
+    const a = t, o = ye(), r = z(!1), d = z(null), l = z(null), $ = z("top-center"), f = z(0), g = () => {
+      const h = d.value?.getBoundingClientRect();
+      if (!h) return "top-center";
+      const { innerWidth: M, innerHeight: U } = window, G = h.top, fe = U - h.bottom, j = l.value?.firstElementChild?.getBoundingClientRect().height ?? 0, be = (j > 0 ? G >= j : G >= fe) ? "top" : "bottom", F = h.left + h.width / 2, pe = F < M / 3 ? "left" : F > M * 2 / 3 ? "right" : "center";
+      return `${be}-${pe}`;
+    }, b = (h) => {
+      h.key === "Escape" && N();
+    }, u = (h) => {
+      d.value && !d.value.contains(h.target) && N();
     };
-    function le() {
-      const m = i.value?.firstElementChild?.getBoundingClientRect();
-      if (!m) return;
-      const $ = 8, R = m.right - (window.innerWidth - $), M = $ - m.left;
-      R <= 0 && M <= 0 || (k.value = window.innerWidth / 2 - (m.left + m.width / 2));
+    function O() {
+      const h = l.value?.firstElementChild?.getBoundingClientRect();
+      if (!h) return;
+      const M = 8, U = h.right - (window.innerWidth - M), G = M - h.left;
+      U <= 0 && G <= 0 || (f.value = window.innerWidth / 2 - (h.left + h.width / 2));
     }
-    const A = async () => {
-      l.placement === "auto" ? r.value = oe() : r.value = l.placement, k.value = 0, c.value = !0, document.addEventListener("keydown", U), l.trigger === "click" && document.addEventListener("click", j), await ge(), le();
-    }, x = () => {
-      c.value = !1, document.removeEventListener("keydown", U), document.removeEventListener("click", j);
-    }, re = () => {
-      c.value ? x() : A();
+    const x = async () => {
+      a.placement === "auto" ? $.value = g() : $.value = a.placement, f.value = 0, r.value = !0, document.addEventListener("keydown", b), a.trigger === "click" && document.addEventListener("click", u), await Z(), O();
+    }, N = () => {
+      r.value = !1, document.removeEventListener("keydown", b), document.removeEventListener("click", u);
+    }, ue = () => {
+      r.value ? N() : x();
     };
-    X(x), e({ show: A, hide: x });
-    const ce = _(() => ({
-      type: l.type,
-      color: l.color,
-      tail: l.tail,
-      placement: r.value,
-      title: l.title,
-      dismissable: l.dismissable
+    J(N), e({ show: x, hide: N });
+    const ve = B(() => ({
+      type: a.type,
+      color: a.color,
+      tail: a.tail,
+      placement: $.value,
+      title: a.title,
+      dismissable: a.dismissable
     }));
-    return (m, $) => (o(), u("span", C(
+    return (h, M) => (n(), c("span", C(
       {
         ref_key: "wrapperEl",
         ref: d,
-        class: n(O)("tooltip-trigger", l.className)
+        class: i(R)("tooltip-trigger", a.className)
       },
-      t.trigger === "click" ? { onClick: re } : { onMouseenter: A, onMouseleave: x, onFocusin: A, onFocusout: x }
+      t.trigger === "click" ? { onClick: ue } : { onMouseenter: x, onMouseleave: N, onFocusin: x, onFocusout: N }
     ), [
-      f(m.$slots, "default", {
-        tooltipId: n(a),
-        isOpen: c.value
+      v(h.$slots, "default", {
+        tooltipId: i(o),
+        isOpen: r.value
       }, void 0, !0),
       s("span", {
         ref_key: "positionerEl",
-        ref: i,
-        class: L(["tooltip-trigger__positioner", `tooltip-trigger__positioner--${r.value}`]),
-        style: Y({
-          visibility: c.value ? "visible" : "hidden",
+        ref: l,
+        class: I(["tooltip-trigger__positioner", `tooltip-trigger__positioner--${$.value}`]),
+        style: ee({
+          visibility: r.value ? "visible" : "hidden",
           "--positioner-gap": t.tail ? "var(--spacing-l)" : "0.5rem",
-          "--adjust-x": `${k.value}px`
+          "--adjust-x": `${f.value}px`
         }),
-        onClick: $[0] || ($[0] = ye(() => {
+        onClick: M[0] || (M[0] = te(() => {
         }, ["stop"]))
       }, [
-        h(Ut, C(ce.value, {
-          id: n(a),
-          onDismiss: x
+        p(Vt, C(ve.value, {
+          id: i(o),
+          onDismiss: N
         }), {
-          default: v(() => [
-            f(m.$slots, "body", {}, void 0, !0)
+          default: m(() => [
+            v(h.$slots, "body", {}, void 0, !0)
           ]),
           _: 3
         }, 16, ["id"])
       ], 6)
     ], 16));
   }
-}), Gt = /* @__PURE__ */ se(jt, [["__scopeId", "data-v-b3f93b8c"]]), Ft = ["disabled"], Vt = /* @__PURE__ */ g({
+}), jt = /* @__PURE__ */ de(Ut, [["__scopeId", "data-v-b3f93b8c"]]), Ft = ["disabled"], Qt = /* @__PURE__ */ _({
   inheritAttrs: !1,
   __name: "PhlButton",
   props: {
@@ -772,24 +793,24 @@ const Et = ["id"], It = {
     svgRaw: {}
   },
   setup(t) {
-    const e = t, l = (i) => "href" in i && i.href !== void 0 || "to" in i && i.to !== void 0, a = _(() => O(
+    const e = t, a = (l) => "href" in l && l.href !== void 0 || "to" in l && l.to !== void 0, o = B(() => R(
       "phila-button",
       `phila-button--${e.variant}`,
       e.size && `is-${e.size}`,
       e.iconOnly && "icon-button",
       e.iconOnly && e.variant === "standard" && "icon-button--standard",
       e.className
-    )), c = _(() => l(e) ? "to" in e && e.to !== void 0 ? {
+    )), r = B(() => a(e) ? "to" in e && e.to !== void 0 ? {
       to: e.to,
       disabled: e.disabled,
-      className: a.value
+      className: o.value
     } : {
       href: e.href,
       target: e.target,
       rel: e.rel,
       disabled: e.disabled,
-      className: a.value
-    } : {}), d = _(
+      className: o.value
+    } : {}), d = B(
       () => ({
         iconDefinition: e.iconDefinition,
         iconClass: e.iconClass,
@@ -800,39 +821,39 @@ const Et = ["id"], It = {
         size: e.size
       })
     );
-    return (i, r) => l(e) ? (o(), b(n(P), C({ key: 0 }, { ...c.value, ...i.$attrs }, { role: "button" }), {
-      default: v(() => [
-        h(n(E), T(S(d.value)), {
-          default: v(() => [
-            f(i.$slots, "default", {}, () => [
-              N(y(e.text), 1)
+    return (l, $) => a(e) ? (n(), k(i(se), C({ key: 0 }, { ...r.value, ...l.$attrs }, { role: "button" }), {
+      default: m(() => [
+        p(i(P), E(D(d.value)), {
+          default: m(() => [
+            v(l.$slots, "default", {}, () => [
+              A(w(e.text), 1)
             ])
           ]),
           _: 3
         }, 16)
       ]),
       _: 3
-    }, 16)) : (o(), u("button", C({
+    }, 16)) : (n(), c("button", C({
       key: 1,
       type: "button",
       disabled: e.disabled,
-      class: a.value
-    }, i.$attrs), [
-      h(n(E), T(S(d.value)), {
-        default: v(() => [
-          f(i.$slots, "default", {}, () => [
-            N(y(e.text), 1)
+      class: o.value
+    }, l.$attrs), [
+      p(i(P), E(D(d.value)), {
+        default: m(() => [
+          v(l.$slots, "default", {}, () => [
+            A(w(e.text), 1)
           ])
         ]),
         _: 3
       }, 16)
     ], 16, Ft));
   }
-}), Qt = { class: "navbar-info" }, Kt = { class: "navbar-info__group" }, Wt = {
+}), Kt = { class: "navbar-info" }, Wt = { class: "navbar-info__group" }, qt = {
   key: 0,
   class: "navbar-info__label has-text-body-default hidden-tablet",
   "aria-hidden": "true"
-}, qt = { class: "has-text-body-small" }, Xt = /* @__PURE__ */ g({
+}, Xt = { class: "has-text-body-small" }, Yt = /* @__PURE__ */ _({
   __name: "NavbarInfo",
   props: {
     infoTitle: {},
@@ -840,45 +861,53 @@ const Et = ["id"], It = {
     label: {}
   },
   setup(t, { expose: e }) {
-    const l = q("tooltip");
+    const a = S("tooltip");
     return e({
-      show: () => l.value?.show(),
-      hide: () => l.value?.hide()
-    }), (a, c) => (o(), u("div", Qt, [
-      h(n(Gt), {
+      show: () => a.value?.show(),
+      hide: () => a.value?.hide()
+    }), (o, r) => (n(), c("div", Kt, [
+      p(i(jt), {
         ref_key: "tooltip",
-        ref: l,
+        ref: a,
         type: "rich",
         title: t.infoTitle,
         trigger: "click",
         dismissable: !0
       }, {
-        default: v(({ tooltipId: d, isOpen: i }) => [
-          s("span", Kt, [
-            h(n(Vt), {
+        default: m(({ tooltipId: d, isOpen: l }) => [
+          s("span", Wt, [
+            p(i(Qt), {
               class: "navbar-info__trigger",
               variant: "standard",
               size: "small",
               "icon-only": !0,
-              "icon-definition": n(ne),
+              "icon-definition": i(ce),
               "aria-label": "More information",
               "aria-describedby": d,
-              "aria-pressed": i
+              "aria-pressed": l
             }, null, 8, ["icon-definition", "aria-describedby", "aria-pressed"]),
-            t.label ? (o(), u("span", Wt, y(t.label), 1)) : p("", !0)
+            t.label ? (n(), c("span", qt, w(t.label), 1)) : y("", !0)
           ])
         ]),
-        body: v(() => [
-          f(a.$slots, "default", {}, () => [
-            s("div", qt, y(t.infoMessage), 1)
+        body: m(() => [
+          v(o.$slots, "default", {}, () => [
+            s("div", Xt, w(t.infoMessage), 1)
           ], !0)
         ]),
         _: 3
       }, 8, ["title"])
     ]));
   }
-}), aa = /* @__PURE__ */ D(Xt, [["__scopeId", "data-v-c3989251"]]);
+}), ai = /* @__PURE__ */ V(Yt, [["__scopeId", "data-v-c3989251"]]);
 export {
-  ta as AppHeader,
-  aa as NavbarInfo
+  rt as AlertBanner,
+  ii as AppHeader,
+  it as NavBar,
+  Lt as NavbarBrand,
+  wt as NavbarBrandLogo,
+  Et as NavbarBurger,
+  ai as NavbarInfo,
+  ht as NavbarLinks,
+  xt as NavbarSearch,
+  Je as TrustedSite
 };