@phila/phila-ui-app-header 1.0.0-beta.17 → 1.0.0-beta.18

package/dist/index.mjs

@@ -1,39 +1,39 @@
-import { defineComponent as w, useSlots as pe, useTemplateRef as G, computed as A, watch as se, nextTick as Z, createElementBlock as d, openBlock as o, Fragment as z, createElementVNode as c, normalizeClass as O, createCommentVNode as $, unref as a, mergeProps as I, createTextVNode as H, createVNode as g, renderSlot as v, ref as M, onMounted as oe, onUnmounted as le, normalizeStyle as re, toDisplayString as x, onBeforeMount as ge, renderList as K, createBlock as B, withModifiers as F, withCtx as _, resolveDynamicComponent as ce, onBeforeUnmount as he, createSlots as ae, normalizeProps as P, useId as me, guardReactiveProps as Q } from "vue";
-import { IconCaretUp as J, IconCaretDown as ee, IconCircleInfo as de, IconBuildingColumns as ye, IconLock as _e, IconClose as U, IconCircleExclamation as $e, IconMagnifyingGlass as ke, IconBars as xe, IconGlobe as we } from "@phila/phila-ui-core/icons";
-import { useVisibility as V, Icon as N, debounce as Be, FocusTrap as ue, cn as q, BaseLink as ve, ActionContent as W } from "@phila/phila-ui-core";
-import { Logo as Ce } from "@phila/phila-ui-logo";
-import './index.css';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", Me = { class: "trusted-wrap" }, Ie = { class: "hidden-tablet trusted-toggle is-flex is-align-center" }, Te = ["src"], Ne = ["aria-label", "aria-expanded"], Le = { class: "hidden-desktop trusted-toggle is-flex is-align-center" }, Ee = ["aria-label", "aria-expanded"], ze = {
+import { defineComponent as M, useSlots as ke, useTemplateRef as j, computed as C, watch as ve, nextTick as oe, createElementBlock as d, openBlock as o, Fragment as S, createElementVNode as c, normalizeClass as P, createCommentVNode as $, unref as a, mergeProps as I, createTextVNode as H, createVNode as m, renderSlot as f, ref as A, onMounted as fe, onUnmounted as be, normalizeStyle as pe, toDisplayString as B, onBeforeMount as xe, renderList as ee, createBlock as w, withModifiers as se, withCtx as y, resolveDynamicComponent as ge, onBeforeUnmount as we, createSlots as ce, normalizeProps as F, useId as Be, Teleport as Me, guardReactiveProps as te } from "vue";
+import { IconCaretUp as le, IconCaretDown as re, IconCircleInfo as he, IconBuildingColumns as Ce, IconLock as Te, IconClose as Q, IconCircleExclamation as Ae, IconMagnifyingGlass as Ie, IconBars as Le, IconGlobe as Ne } from "@phila/phila-ui-core/icons";
+import { useVisibility as W, Icon as N, debounce as Ee, FocusTrap as me, cn as ie, BaseLink as ye, ActionContent as ae } from "@phila/phila-ui-core";
+import { Logo as ze } from "@phila/phila-ui-logo";
+import './index.css';const Se = "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", He = { class: "trusted-wrap" }, Oe = { class: "hidden-tablet trusted-toggle is-flex is-align-center" }, De = ["src"], Re = ["aria-label", "aria-expanded"], Pe = { class: "hidden-desktop trusted-toggle is-flex is-align-center" }, Ge = ["aria-label", "aria-expanded"], Ve = {
   key: 0,
   class: "trusted-translation is-flex is-align-center"
-}, Se = ["hidden"], He = { class: "trusted-site-info-content content has-text-body-small is-flex is-justify-space-between" }, Oe = { class: "info-item-wrap is-flex" }, De = { class: "info-item is-flex is-12-mobile is-align-flex-start is-flex-1 my-4" }, Re = { class: "trusted-icon is-flex is-flex-column has-text-center" }, Ge = { class: "circle-icon p-3 mb-2" }, Pe = { class: "info-item is-flex is-12-mobile is-align-flex-start is-flex-1 my-4" }, Ue = { class: "trusted-icon is-flex is-flex-column has-text-center" }, Ve = { class: "circle-icon p-3 mb-2" }, je = { class: "info-content-close mt-4" }, Ke = /* @__PURE__ */ w({
+}, Ue = ["hidden"], Ke = { 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" }, We = { class: "circle-icon p-3 mb-2" }, qe = { class: "info-item is-flex is-12-mobile is-align-flex-start is-flex-1 my-4" }, Ye = { class: "trusted-icon is-flex is-flex-column has-text-center" }, Ze = { class: "circle-icon p-3 mb-2" }, Xe = { class: "info-content-close mt-4" }, Je = /* @__PURE__ */ M({
   __name: "TrustedSite",
   props: {
     compactMobile: { type: Boolean }
   },
   setup(t) {
-    const e = pe(), { isVisible: i, setVisibility: n, toggleProps: s } = V({
+    const e = ke(), { isVisible: i, setVisibility: n, toggleProps: s } = W({
       id: "trusted-site-info",
       escapeKeyHide: !0
-    }), l = G("infoToggle"), r = G("closeInfoToggle"), k = G("infoToggleMobile"), b = A(() => i());
-    return se(
+    }), l = j("infoToggle"), r = j("closeInfoToggle"), k = j("infoToggleMobile"), b = C(() => i());
+    return ve(
       () => b.value,
-      (m) => {
-        m ? Z(() => {
+      (v) => {
+        v ? oe(() => {
           r.value?.focus();
         }) : (l.value?.focus(), k.value?.focus());
       }
-    ), (m, p) => (o(), d(z, null, [
+    ), (v, p) => (o(), d(S, null, [
       c("div", {
         id: "trusted-site",
-        class: O(["is-flex is-justify-space-between", { "is-compact-mobile": t.compactMobile }])
+        class: P(["is-flex is-justify-space-between", { "is-compact-mobile": t.compactMobile }])
       }, [
-        c("div", Me, [
-          c("div", Ie, [
+        c("div", He, [
+          c("div", Oe, [
             c("img", {
-              src: a(Ae),
+              src: a(Se),
               alt: "",
               class: "icon"
-            }, null, 8, Te),
+            }, null, 8, De),
             p[2] || (p[2] = c("div", { class: "content mx-2" }, "An official website of the City of Philadelphia government", -1)),
             c("button", I({
               ref_key: "infoToggle",
@@ -44,14 +44,14 @@ import './index.css';const Ae = "data:image/svg+xml,%3csvg%20width='16'%20height
               "aria-expanded": b.value
             }, a(s)), [
               p[1] || (p[1] = H(" Here's how you know ", -1)),
-              g(a(N), {
-                icon: b.value ? a(J) : a(ee),
+              m(a(N), {
+                icon: b.value ? a(le) : a(re),
                 inline: !0,
                 decorative: !0
               }, null, 8, ["icon"])
-            ], 16, Ne)
+            ], 16, Re)
           ]),
-          c("div", Le, [
+          c("div", Pe, [
             c("button", I({
               ref_key: "infoToggleMobile",
               ref: k,
@@ -61,16 +61,16 @@ import './index.css';const Ae = "data:image/svg+xml,%3csvg%20width='16'%20height
               "aria-expanded": b.value
             }, a(s)), [
               p[3] || (p[3] = H(" An official website ", -1)),
-              g(a(N), {
-                icon: a(de),
+              m(a(N), {
+                icon: a(he),
                 size: "extra-small",
                 decorative: !0
               }, null, 8, ["icon"])
-            ], 16, Ee)
+            ], 16, Ge)
           ])
         ]),
-        a(e).translation ? (o(), d("div", ze, [
-          v(m.$slots, "translation", {}, void 0, !0)
+        a(e).translation ? (o(), d("div", Ve, [
+          f(v.$slots, "translation", {}, void 0, !0)
         ])) : $("", !0)
       ], 2),
       c("div", {
@@ -78,13 +78,13 @@ import './index.css';const Ae = "data:image/svg+xml,%3csvg%20width='16'%20height
         class: "px-6",
         hidden: !b.value
       }, [
-        c("div", He, [
-          c("div", Oe, [
-            c("div", De, [
-              c("div", Re, [
-                c("span", Ge, [
-                  g(a(N), {
-                    icon: a(ye),
+        c("div", Ke, [
+          c("div", je, [
+            c("div", Fe, [
+              c("div", Qe, [
+                c("span", We, [
+                  m(a(N), {
+                    icon: a(Ce),
                     inline: !0,
                     decorative: !0
                   }, null, 8, ["icon"])
@@ -93,11 +93,11 @@ import './index.css';const Ae = "data:image/svg+xml,%3csvg%20width='16'%20height
               ]),
               p[5] || (p[5] = c("div", { class: "trusted-text m-4" }, "Only government entities in the U.S. can end in .gov", -1))
             ]),
-            c("div", Pe, [
-              c("div", Ue, [
-                c("div", Ve, [
-                  g(a(N), {
-                    icon: a(_e),
+            c("div", qe, [
+              c("div", Ye, [
+                c("div", Ze, [
+                  m(a(N), {
+                    icon: a(Te),
                     inline: !0,
                     decorative: !0
                   }, null, 8, ["icon"])
@@ -107,7 +107,7 @@ import './index.css';const Ae = "data:image/svg+xml,%3csvg%20width='16'%20height
               p[7] || (p[7] = c("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))
             ])
           ]),
-          c("div", je, [
+          c("div", Xe, [
             c("button", {
               ref_key: "closeInfoToggle",
               ref: r,
@@ -115,26 +115,26 @@ import './index.css';const Ae = "data:image/svg+xml,%3csvg%20width='16'%20height
               "aria-label": "Close Trusted Site information panel",
               onClick: p[0] || (p[0] = (u) => a(n)(!1))
             }, [
-              g(a(N), {
-                icon: a(U),
+              m(a(N), {
+                icon: a(Q),
                 size: "extra-small",
                 decorative: !0
               }, null, 8, ["icon"])
             ], 512)
           ])
         ])
-      ], 8, Se)
+      ], 8, Ue)
     ], 64));
   }
-}), R = (t, e) => {
+}), G = (t, e) => {
   const i = t.__vccOpts || t;
   for (const [n, s] of e)
     i[n] = s;
   return i;
-}, Fe = /* @__PURE__ */ R(Ke, [["__scopeId", "data-v-dee4f05c"]]), Qe = {
+}, et = /* @__PURE__ */ G(Je, [["__scopeId", "data-v-dee4f05c"]]), tt = {
   key: 0,
   class: "phila-navbar-end"
-}, ie = "5rem", We = /* @__PURE__ */ w({
+}, de = "5rem", at = /* @__PURE__ */ M({
   __name: "index",
   props: {
     id: {},
@@ -145,30 +145,30 @@ import './index.css';const Ae = "data:image/svg+xml,%3csvg%20width='16'%20height
     links: { default: () => [{ text: "Home", href: "#" }] }
   },
   setup(t) {
-    const e = t, { visibilityState: i } = V({ group: "app-header" }), n = G("navBarElement"), s = M(ie), l = M(0), r = Be(() => {
-      const b = (n.value?.offsetTop || 0) + (n.value?.offsetHeight || 0), m = typeof window < "u" ? window.innerWidth : 1024;
-      s.value = !e.sticky || m < 1024 ? b + "px" : ie, l.value = b;
-    }, 100), k = A(() => i.value?.appHeader);
-    return se(() => k.value, r, { deep: !0, immediate: !0 }), oe(() => {
+    const e = t, { visibilityState: i } = W({ group: "app-header" }), n = j("navBarElement"), s = A(de), l = A(0), r = Ee(() => {
+      const b = (n.value?.offsetTop || 0) + (n.value?.offsetHeight || 0), v = typeof window < "u" ? window.innerWidth : 1024;
+      s.value = !e.sticky || v < 1024 ? b + "px" : de, l.value = b;
+    }, 100), k = C(() => i.value?.appHeader);
+    return ve(() => k.value, r, { deep: !0, immediate: !0 }), fe(() => {
       window.addEventListener("resize", r);
-    }), le(() => {
+    }), be(() => {
       window.removeEventListener("resize", r);
-    }), (b, m) => (o(), d("nav", {
+    }), (b, v) => (o(), d("nav", {
       ref_key: "navBarElement",
       ref: n,
-      class: O(["phila-navbar has-links-on-primary", { "is-sticky-desktop": t.sticky, "is-compact-mobile": t.compactMobile }]),
+      class: P(["phila-navbar has-links-on-primary", { "is-sticky-desktop": t.sticky, "is-compact-mobile": t.compactMobile }]),
       "aria-label": "Main navigation",
-      style: re(`--nav-height:${s.value};--nav-bottom:${l.value}px`)
+      style: pe(`--nav-height:${s.value};--nav-bottom:${l.value}px`)
     }, [
-      v(b.$slots, "navbar-toggle", {}, void 0, !0),
-      v(b.$slots, "navbar-left", {}, void 0, !0),
-      v(b.$slots, "navbar-right", {}, void 0, !0),
-      b.$slots["navbar-end"] ? (o(), d("div", Qe, [
-        v(b.$slots, "navbar-end", {}, void 0, !0)
+      f(b.$slots, "navbar-toggle", {}, void 0, !0),
+      f(b.$slots, "navbar-left", {}, void 0, !0),
+      f(b.$slots, "navbar-right", {}, void 0, !0),
+      b.$slots["navbar-end"] ? (o(), d("div", tt, [
+        f(b.$slots, "navbar-end", {}, void 0, !0)
       ])) : $("", !0)
     ], 6));
   }
-}), qe = /* @__PURE__ */ R(We, [["__scopeId", "data-v-8a07f1df"]]), Xe = { class: "site-wide-alert content" }, Ye = { class: "alert-content" }, Ze = { class: "content-text" }, Je = { class: "title" }, et = { class: "body" }, tt = /* @__PURE__ */ w({
+}), it = /* @__PURE__ */ G(at, [["__scopeId", "data-v-8a07f1df"]]), nt = { class: "site-wide-alert content" }, st = { class: "alert-content" }, ot = { class: "content-text" }, lt = { class: "title" }, rt = { class: "body" }, ct = /* @__PURE__ */ M({
   __name: "AlertBanner",
   props: {
     bannerTitle: {},
@@ -176,35 +176,35 @@ import './index.css';const Ae = "data:image/svg+xml,%3csvg%20width='16'%20height
   },
   setup(t) {
     const e = t;
-    return (i, n) => (o(), d("div", Xe, [
-      c("div", Ye, [
-        g(a(N), {
-          icon: a($e),
+    return (i, n) => (o(), d("div", nt, [
+      c("div", st, [
+        m(a(N), {
+          icon: a(Ae),
           size: "small",
           decorative: !0
         }, null, 8, ["icon"]),
-        c("div", Ze, [
-          c("h6", Je, x(e.bannerTitle), 1),
-          c("div", et, x(e.bannerMessage), 1)
+        c("div", ot, [
+          c("h6", lt, B(e.bannerTitle), 1),
+          c("div", rt, B(e.bannerMessage), 1)
         ])
       ])
     ]));
   }
-}), at = /* @__PURE__ */ R(tt, [["__scopeId", "data-v-f391cc47"]]), it = { class: "phila-navbar-item phila-navbar-list is-flex is-align-center is-justify-space-between content has-text-label-default hidden-tablet" }, nt = ["href"], st = ["id", "onMouseenter", "onMouseleave"], ot = ["href", "aria-controls", "aria-expanded", "data-toggle", "onTouchend", "onClick"], lt = {
+}), dt = /* @__PURE__ */ G(ct, [["__scopeId", "data-v-f391cc47"]]), ut = { class: "phila-navbar-item phila-navbar-list is-flex is-align-center is-justify-space-between content has-text-label-default hidden-tablet" }, vt = ["href"], ft = ["id", "onMouseenter", "onMouseleave"], bt = ["href", "aria-controls", "aria-expanded", "data-toggle", "onTouchend", "onClick"], pt = {
   key: 0,
   class: "content nav-flyout has-background-ghost-gray px-6 py-4",
   tabindex: "-1"
-}, rt = {
+}, gt = {
   class: "is-flex is-flex-column is-flex-wrap-wrap",
   style: { gap: "var(--spacing-4xl)" }
-}, ct = ["href"], dt = /* @__PURE__ */ w({
+}, ht = ["href"], mt = /* @__PURE__ */ M({
   __name: "NavbarLinks",
   props: {
     links: {},
     visibilityGroup: {}
   },
   setup(t) {
-    const e = (m) => !!(m.subLinks || m.subNav), i = (m) => `main-nav-${m.text.split(" ").join("-").toLowerCase().replace(/[^a-z0-9-]/g, "")}`, n = t, { setVisibility: s, create: l, isVisible: r, onMouseEnter: k, onMouseLeave: b } = V({
+    const e = (v) => !!(v.subLinks || v.subNav), i = (v) => `main-nav-${v.text.split(" ").join("-").toLowerCase().replace(/[^a-z0-9-]/g, "")}`, n = t, { setVisibility: s, create: l, isVisible: r, onMouseEnter: k, onMouseLeave: b } = W({
       group: n.visibilityGroup,
       outsideClickHide: !0,
       escapeKeyHide: !0,
@@ -212,67 +212,67 @@ import './index.css';const Ae = "data:image/svg+xml,%3csvg%20width='16'%20height
       blurHide: !0,
       showSingle: !0
     });
-    return ge(() => {
-      n.links?.forEach((m) => {
-        if (e(m)) {
-          const p = i(m);
+    return xe(() => {
+      n.links?.forEach((v) => {
+        if (e(v)) {
+          const p = i(v);
           l(p);
         }
       });
-    }), (m, p) => (o(), d("div", it, [
-      (o(!0), d(z, null, K(t.links, (u, E) => (o(), d(z, null, [
+    }), (v, p) => (o(), d("div", ut, [
+      (o(!0), d(S, null, ee(t.links, (u, E) => (o(), d(S, null, [
         e(u) ? (o(), d("div", {
           id: `${n.visibilityGroup}-item-${i(u)}`,
           key: `navbar-link-${E}`,
           class: "phila-navbar-link-list-item",
-          onMouseenter: (y) => a(k)(i(u)),
-          onMouseleave: (y) => a(b)(i(u))
+          onMouseenter: (_) => a(k)(i(u)),
+          onMouseleave: (_) => a(b)(i(u))
         }, [
           c("a", {
             href: u.href,
-            class: O(["phila-navbar-link px-4", { "phila-navbar-item-flyout-active": a(r)(i(u)) }]),
+            class: P(["phila-navbar-link px-4", { "phila-navbar-item-flyout-active": a(r)(i(u)) }]),
             "aria-controls": i(u),
             "aria-expanded": a(r)(i(u)),
             "data-toggle": `visibility-${i(u)}`,
             tabindex: "0",
-            onTouchend: (y) => a(s)(!a(r)(i(u)), i(u)),
-            onClick: F((y) => a(s)(!a(r)(i(u)), i(u)), ["prevent"])
+            onTouchend: (_) => a(s)(!a(r)(i(u)), i(u)),
+            onClick: se((_) => a(s)(!a(r)(i(u)), i(u)), ["prevent"])
           }, [
-            H(x(u.text) + " ", 1),
-            g(a(N), {
-              icon: a(r)(i(u)) ? a(J) : a(ee),
+            H(B(u.text) + " ", 1),
+            m(a(N), {
+              icon: a(r)(i(u)) ? a(le) : a(re),
               inline: !0,
               decorative: !0,
               class: "ml-1"
             }, null, 8, ["icon"])
-          ], 42, ot),
-          (o(), B(a(ue), {
+          ], 42, bt),
+          (o(), w(a(me), {
             id: i(u),
             key: u.text,
             "allow-escape": "",
             hidden: !a(r)(i(u)),
-            onEscape: (y) => a(s)(!1, i(u))
+            onEscape: (_) => a(s)(!1, i(u))
           }, {
-            default: _(() => [
-              u.subLinks ? (o(), d("div", lt, [
-                c("ul", rt, [
-                  (o(!0), d(z, null, K(u.subLinks, (y) => (o(), d("li", {
-                    key: y.text,
+            default: y(() => [
+              u.subLinks ? (o(), d("div", pt, [
+                c("ul", gt, [
+                  (o(!0), d(S, null, ee(u.subLinks, (_) => (o(), d("li", {
+                    key: _.text,
                     class: "sub-nav-link is-flex is-align-center",
                     style: { width: "150px" }
                   }, [
                     c("a", {
-                      href: y.href,
+                      href: _.href,
                       class: "has-text-link has-text-weight-medium",
                       tabindex: "0"
-                    }, x(y.text), 9, ct)
+                    }, B(_.text), 9, ht)
                   ]))), 128))
                 ])
-              ])) : (o(), B(ce(u.subNav), { key: 1 }))
+              ])) : (o(), w(ge(u.subNav), { key: 1 }))
             ]),
             _: 2
           }, 1032, ["id", "hidden", "onEscape"]))
-        ], 40, st)) : (o(), d("div", {
+        ], 40, ft)) : (o(), d("div", {
           key: `link-${E}`,
           class: "phila-navbar-link-list-item"
         }, [
@@ -280,18 +280,18 @@ import './index.css';const Ae = "data:image/svg+xml,%3csvg%20width='16'%20height
             href: u.href,
             class: "phila-navbar-link px-4",
             tabindex: "0"
-          }, x(u.text), 9, nt)
+          }, B(u.text), 9, vt)
         ]))
       ], 64))), 256))
     ]));
   }
-}), ut = { class: "phila-navbar-search is-flex" }, vt = { id: "navbar-search" }, ft = { class: "pr-4" }, bt = ["aria-controls", "data-toggle", "aria-expanded", "aria-label"], pt = /* @__PURE__ */ w({
+}), yt = { class: "phila-navbar-search is-flex" }, _t = { id: "navbar-search" }, $t = { class: "pr-4" }, kt = ["aria-controls", "data-toggle", "aria-expanded", "aria-label"], xt = /* @__PURE__ */ M({
   __name: "NavbarSearch",
   props: {
     visibilityGroup: {}
   },
   setup(t) {
-    const e = t, { setVisibility: i, isVisible: n } = V({
+    const e = t, { setVisibility: i, isVisible: n } = W({
       id: `${e.visibilityGroup}-flyout-navbar-search`,
       group: e.visibilityGroup,
       outsideClickHide: !0,
@@ -299,39 +299,39 @@ import './index.css';const Ae = "data:image/svg+xml,%3csvg%20width='16'%20height
       blurHide: !0,
       showSingle: !0
     });
-    return (s, l) => (o(), d("div", ut, [
-      c("div", vt, [
-        c("div", ft, [
+    return (s, l) => (o(), d("div", yt, [
+      c("div", _t, [
+        c("div", $t, [
           c("button", {
-            class: O(["phila-button phila-button--primary icon-button is-small", { "phila-navbar-item-flyout-active": a(n)() }]),
+            class: P(["phila-button phila-button--primary icon-button is-small", { "phila-navbar-item-flyout-active": a(n)() }]),
             "aria-controls": `${e.visibilityGroup}-flyout-navbar-search`,
             "data-toggle": `visibility-${e.visibilityGroup}-flyout-navbar-search`,
             "aria-expanded": a(n)(),
             "aria-label": `${a(n)() ? "Close" : "Open"} search panel`,
             onClick: l[0] || (l[0] = (r) => a(i)(!a(n)()))
           }, [
-            g(a(N), {
-              icon: a(n)() ? a(U) : a(ke),
+            m(a(N), {
+              icon: a(n)() ? a(Q) : a(Ie),
               decorative: !0
             }, null, 8, ["icon"])
-          ], 10, bt)
+          ], 10, kt)
         ])
       ]),
-      g(a(ue), {
+      m(a(me), {
         id: `${e.visibilityGroup}-flyout-navbar-search`,
         "allow-escape": "",
         class: "nav-flyout is-12",
         hidden: !a(n)(),
         onEscape: l[1] || (l[1] = (r) => a(i)(!1, `${e.visibilityGroup}-flyout-navbar-search`))
       }, {
-        default: _(() => [
-          v(s.$slots, "search-panel")
+        default: y(() => [
+          f(s.$slots, "search-panel")
         ]),
         _: 3
       }, 8, ["id", "hidden"])
     ]));
   }
-}), gt = /* @__PURE__ */ w({
+}), wt = /* @__PURE__ */ M({
   __name: "NavbarBrandLogo",
   props: {
     logo: {},
@@ -340,22 +340,22 @@ import './index.css';const Ae = "data:image/svg+xml,%3csvg%20width='16'%20height
     altText: {}
   },
   setup(t) {
-    const e = t, i = A(() => ({
+    const e = t, i = C(() => ({
       variant: "city",
       layout: "stacked",
       colorScheme: "on-primary",
       href: e.href,
       ...e.logo
     }));
-    return (n, s) => (o(), B(a(Ce), I(i.value, { class: "phila-navbar-logo" }), null, 16));
+    return (n, s) => (o(), w(a(ze), I(i.value, { class: "phila-navbar-logo" }), null, 16));
   }
-}), ht = /* @__PURE__ */ R(gt, [["__scopeId", "data-v-3011c249"]]), mt = { class: "phila-navbar-brand is-flex" }, yt = {
+}), Bt = /* @__PURE__ */ G(wt, [["__scopeId", "data-v-3011c249"]]), Mt = { class: "phila-navbar-brand is-flex" }, Ct = {
   key: 0,
   class: "phila-navbar-item phila-navbar-brand-link hidden-tablet"
-}, _t = {
+}, Tt = {
   key: 0,
   class: "content"
-}, $t = ["href"], kt = /* @__PURE__ */ w({
+}, At = ["href"], It = /* @__PURE__ */ M({
   __name: "NavbarBrand",
   props: {
     brandingImage: {},
@@ -363,38 +363,38 @@ import './index.css';const Ae = "data:image/svg+xml,%3csvg%20width='16'%20height
     logo: {}
   },
   setup(t) {
-    return (e, i) => (o(), d("div", mt, [
-      v(e.$slots, "navbar-logo", {}, () => [
-        t.brandingImage ? (o(), B(ht, I({ key: 0 }, t.brandingImage, { logo: t.logo }), null, 16, ["logo"])) : $("", !0)
+    return (e, i) => (o(), d("div", Mt, [
+      f(e.$slots, "navbar-logo", {}, () => [
+        t.brandingImage ? (o(), w(Bt, I({ key: 0 }, t.brandingImage, { logo: t.logo }), null, 16, ["logo"])) : $("", !0)
       ]),
-      e.$slots["navbar-brand-link"] || t.brandingLink ? (o(), d("div", yt, [
-        v(e.$slots, "navbar-brand-link", {}, () => [
-          t.brandingLink ? (o(), d("div", _t, [
+      e.$slots["navbar-brand-link"] || t.brandingLink ? (o(), d("div", Ct, [
+        f(e.$slots, "navbar-brand-link", {}, () => [
+          t.brandingLink ? (o(), d("div", Tt, [
             c("a", {
               tabindex: "0",
               href: t.brandingLink.href,
               class: "has-text-underline"
-            }, x(t.brandingLink.text), 9, $t)
+            }, B(t.brandingLink.text), 9, At)
           ])) : $("", !0)
         ])
       ])) : $("", !0)
     ]));
   }
-}), xt = ["id"], wt = ["aria-controls", "aria-expanded", "aria-label"], Bt = ["id", "hidden"], Ct = /* @__PURE__ */ w({
+}), Lt = ["id"], Nt = ["aria-controls", "aria-expanded", "aria-label"], Et = ["id", "hidden"], zt = /* @__PURE__ */ M({
   __name: "NavbarBurger",
   props: {
     visibilityGroup: {},
     id: {}
   },
   setup(t) {
-    const e = t, { isVisible: i, toggleProps: n } = V({
+    const e = t, { isVisible: i, toggleProps: n } = W({
       id: e.id,
       group: e.visibilityGroup,
       outsideClickHide: !0,
       escapeKeyHide: !0,
       blurHide: !1,
       showSingle: !0
-    }), s = A(() => i(e.id));
+    }), s = C(() => i(e.id));
     return (l, r) => (o(), d("div", {
       id: e.id
     }, [
@@ -404,31 +404,31 @@ import './index.css';const Ae = "data:image/svg+xml,%3csvg%20width='16'%20height
         "aria-expanded": s.value,
         "aria-label": `${s.value ? "Close" : "Open"} mobile navigation panel`
       }, a(n)), [
-        g(a(N), {
-          icon: s.value ? a(U) : a(xe),
+        m(a(N), {
+          icon: s.value ? a(Q) : a(Le),
           size: "large",
           decorative: !0
         }, null, 8, ["icon"])
-      ], 16, wt),
+      ], 16, Nt),
       c("div", {
         id: `navbar-burger-flyout-${e.visibilityGroup}`,
         class: "phila-mobile-nav",
         hidden: !s.value
       }, [
-        v(l.$slots, "mobile-nav")
-      ], 8, Bt)
-    ], 8, xt));
+        f(l.$slots, "mobile-nav")
+      ], 8, Et)
+    ], 8, Lt));
   }
-}), At = {
+}), St = {
   class: "language-inline hidden-tablet",
   "aria-label": "Language selection"
-}, Mt = { class: "is-flex is-align-center is-gap-4" }, It = ["lang", "onClick"], Tt = { class: "language-globe" }, Nt = ["aria-expanded"], Lt = {
+}, Ht = { class: "is-flex is-align-center is-gap-4" }, Ot = ["lang", "onClick"], Dt = { class: "language-globe" }, Rt = ["aria-expanded"], Pt = {
   class: "icon",
   "aria-hidden": "true"
-}, Et = {
+}, Gt = {
   class: "icon",
   "aria-hidden": "true"
-}, zt = ["lang", "aria-checked", "tabindex", "onClick"], St = /* @__PURE__ */ w({
+}, Vt = ["lang", "aria-checked", "tabindex", "onClick"], Ut = /* @__PURE__ */ M({
   __name: "LanguageSwitcher",
   props: {
     languages: {},
@@ -436,12 +436,12 @@ import './index.css';const Ae = "data:image/svg+xml,%3csvg%20width='16'%20height
   },
   emits: ["update:locale"],
   setup(t, { emit: e }) {
-    const i = t, n = e, s = M(!1), l = M(-1), r = M(null), k = M(null), b = M([]), m = A(() => i.languages.slice(0, 3));
+    const i = t, n = e, s = A(!1), l = A(-1), r = A(null), k = A(null), b = A([]), v = C(() => i.languages.slice(0, 3));
     function p() {
       s.value = !0, l.value = Math.max(
         0,
-        i.languages.findIndex((f) => f.code === i.locale)
-      ), Z(() => y(l.value));
+        i.languages.findIndex((g) => g.code === i.locale)
+      ), oe(() => _(l.value));
     }
     function u() {
       s.value ? (s.value = !1, l.value = -1) : p();
@@ -449,63 +449,63 @@ import './index.css';const Ae = "data:image/svg+xml,%3csvg%20width='16'%20height
     function E() {
       s.value = !1, l.value = -1, k.value?.focus();
     }
-    function y(f) {
-      b.value[f]?.focus();
+    function _(g) {
+      b.value[g]?.focus();
     }
-    function L(f, S) {
-      f && (b.value[S] = f);
+    function O(g, Z) {
+      g && (b.value[Z] = g);
     }
-    function X(f) {
-      n("update:locale", f), E();
+    function D(g) {
+      n("update:locale", g), E();
     }
-    function Y(f) {
-      (f.key === "ArrowDown" || f.key === "ArrowUp") && (f.preventDefault(), s.value || p());
+    function L(g) {
+      (g.key === "ArrowDown" || g.key === "ArrowUp") && (g.preventDefault(), s.value || p());
     }
-    function h(f) {
-      switch (f.key) {
+    function q(g) {
+      switch (g.key) {
         case "Escape":
-          f.preventDefault(), E();
+          g.preventDefault(), E();
           break;
         case "ArrowDown":
-          f.preventDefault(), l.value = (l.value + 1) % i.languages.length, y(l.value);
+          g.preventDefault(), l.value = (l.value + 1) % i.languages.length, _(l.value);
           break;
         case "ArrowUp":
-          f.preventDefault(), l.value = (l.value - 1 + i.languages.length) % i.languages.length, y(l.value);
+          g.preventDefault(), l.value = (l.value - 1 + i.languages.length) % i.languages.length, _(l.value);
           break;
         case "Home":
-          f.preventDefault(), l.value = 0, y(l.value);
+          g.preventDefault(), l.value = 0, _(l.value);
           break;
         case "End":
-          f.preventDefault(), l.value = i.languages.length - 1, y(l.value);
+          g.preventDefault(), l.value = i.languages.length - 1, _(l.value);
           break;
         case "Tab":
           E();
           break;
       }
     }
-    function T(f) {
-      r.value && !r.value.contains(f.target) && (s.value = !1, l.value = -1);
+    function Y(g) {
+      r.value && !r.value.contains(g.target) && (s.value = !1, l.value = -1);
     }
-    return oe(() => {
-      document.addEventListener("click", T);
-    }), he(() => {
-      document.removeEventListener("click", T);
-    }), (f, S) => (o(), d("div", {
+    return fe(() => {
+      document.addEventListener("click", Y);
+    }), we(() => {
+      document.removeEventListener("click", Y);
+    }), (g, Z) => (o(), d("div", {
       ref_key: "containerRef",
       ref: r,
       class: "language-switcher is-flex is-align-center is-gap-4"
     }, [
-      c("nav", At, [
-        c("div", Mt, [
-          (o(!0), d(z, null, K(m.value, (C) => (o(), d("button", {
-            key: C.code,
-            lang: C.lang,
+      c("nav", St, [
+        c("div", Ht, [
+          (o(!0), d(S, null, ee(v.value, (T) => (o(), d("button", {
+            key: T.code,
+            lang: T.lang,
             class: "language-link",
-            onClick: (D) => n("update:locale", C.code)
-          }, x(C.title), 9, It))), 128))
+            onClick: (h) => n("update:locale", T.code)
+          }, B(T.title), 9, Ot))), 128))
         ])
       ]),
-      c("div", Tt, [
+      c("div", Dt, [
         c("button", {
           ref_key: "toggleRef",
           ref: k,
@@ -513,48 +513,48 @@ import './index.css';const Ae = "data:image/svg+xml,%3csvg%20width='16'%20height
           "aria-label": "Select language",
           "aria-haspopup": "true",
           "aria-expanded": s.value,
-          onClick: F(u, ["stop"]),
-          onKeydown: Y
+          onClick: se(u, ["stop"]),
+          onKeydown: L
         }, [
-          c("span", Lt, [
-            g(a(N), {
-              icon: a(we),
+          c("span", Pt, [
+            m(a(N), {
+              icon: a(Ne),
               decorative: "",
               inline: "",
               style: { "font-size": "1em" }
             }, null, 8, ["icon"])
           ]),
-          c("span", Et, [
-            g(a(N), {
-              icon: s.value ? a(J) : a(ee),
+          c("span", Gt, [
+            m(a(N), {
+              icon: s.value ? a(le) : a(re),
               decorative: "",
               inline: "",
               style: { "font-size": "1em" }
             }, null, 8, ["icon"])
           ])
-        ], 40, Nt),
+        ], 40, Rt),
         s.value ? (o(), d("div", {
           key: 0,
           class: "language-menu",
           role: "menu",
-          onKeydown: h
+          onKeydown: q
         }, [
-          (o(!0), d(z, null, K(t.languages, (C, D) => (o(), d("button", {
-            key: C.code,
+          (o(!0), d(S, null, ee(t.languages, (T, h) => (o(), d("button", {
+            key: T.code,
             ref_for: !0,
-            ref: (j) => L(j, D),
-            lang: C.lang,
+            ref: (x) => O(x, h),
+            lang: T.lang,
             role: "menuitemradio",
-            "aria-checked": C.code === t.locale,
-            tabindex: D === l.value ? 0 : -1,
-            class: O(["language-menu-item", { "is-selected": C.code === t.locale }]),
-            onClick: F((j) => X(C.code), ["stop"])
-          }, x(C.title), 11, zt))), 128))
+            "aria-checked": T.code === t.locale,
+            tabindex: h === l.value ? 0 : -1,
+            class: P(["language-menu-item", { "is-selected": T.code === t.locale }]),
+            onClick: se((x) => D(T.code), ["stop"])
+          }, B(T.title), 11, Vt))), 128))
         ], 32)) : $("", !0)
       ])
     ], 512));
   }
-}), Ht = /* @__PURE__ */ R(St, [["__scopeId", "data-v-f91f4b58"]]), na = /* @__PURE__ */ w({
+}), Kt = /* @__PURE__ */ G(Ut, [["__scopeId", "data-v-f91f4b58"]]), va = /* @__PURE__ */ M({
   __name: "AppHeader",
   props: {
     showTrustedSite: { type: Boolean, default: !0 },
@@ -574,64 +574,64 @@ import './index.css';const Ae = "data:image/svg+xml,%3csvg%20width='16'%20height
   emits: ["update:locale"],
   setup(t, { emit: e }) {
     const i = e;
-    return (n, s) => (o(), d(z, null, [
-      t.showTrustedSite ? (o(), B(Fe, {
+    return (n, s) => (o(), d(S, null, [
+      t.showTrustedSite ? (o(), w(et, {
         key: 0,
         "compact-mobile": t.compactMobile
       }, {
-        translation: _(() => [
-          v(n.$slots, "translations", {}, () => [
-            t.languages ? (o(), B(Ht, {
+        translation: y(() => [
+          f(n.$slots, "translations", {}, () => [
+            t.languages ? (o(), w(Kt, {
               key: 0,
               languages: t.languages,
               locale: t.locale ?? "",
               "onUpdate:locale": s[0] || (s[0] = (l) => i("update:locale", l))
-            }, null, 8, ["languages", "locale"])) : t.translations ? (o(), B(ce(t.translations), { key: 1 })) : $("", !0)
+            }, null, 8, ["languages", "locale"])) : t.translations ? (o(), w(ge(t.translations), { key: 1 })) : $("", !0)
           ])
         ]),
         _: 3
       }, 8, ["compact-mobile"])) : $("", !0),
-      g(qe, {
+      m(it, {
         id: t.id,
         sticky: t.sticky,
         "compact-mobile": t.compactMobile
-      }, ae({
-        "navbar-toggle": _(() => [
-          v(n.$slots, "navbar-toggle", {}, () => [
-            g(Ct, {
+      }, ce({
+        "navbar-toggle": y(() => [
+          f(n.$slots, "navbar-toggle", {}, () => [
+            m(zt, {
               id: `mobile-nav-${t.id}`,
               "visibility-group": t.id
-            }, ae({ _: 2 }, [
+            }, ce({ _: 2 }, [
               n.$slots["mobile-nav"] ? {
                 name: "mobile-nav",
-                fn: _(() => [
-                  v(n.$slots, "mobile-nav")
+                fn: y(() => [
+                  f(n.$slots, "mobile-nav")
                 ]),
                 key: "0"
               } : void 0
             ]), 1032, ["id", "visibility-group"])
           ])
         ]),
-        "navbar-left": _(() => [
-          v(n.$slots, "navbar-left", {}, () => [
-            v(n.$slots, "navbar-brand", {}, () => [
-              t.navbarBrand ? (o(), B(kt, P(I({ key: 0 }, t.navbarBrand)), null, 16)) : $("", !0)
+        "navbar-left": y(() => [
+          f(n.$slots, "navbar-left", {}, () => [
+            f(n.$slots, "navbar-brand", {}, () => [
+              t.navbarBrand ? (o(), w(It, F(I({ key: 0 }, t.navbarBrand)), null, 16)) : $("", !0)
             ])
           ])
         ]),
-        "navbar-right": _(() => [
-          v(n.$slots, "navbar-right", {}, () => [
-            v(n.$slots, "navbar-links", {}, () => [
-              t.links ? (o(), B(dt, {
+        "navbar-right": y(() => [
+          f(n.$slots, "navbar-right", {}, () => [
+            f(n.$slots, "navbar-links", {}, () => [
+              t.links ? (o(), w(mt, {
                 key: 0,
                 links: t.links,
                 "visibility-group": t.id
               }, null, 8, ["links", "visibility-group"])) : $("", !0)
             ]),
-            v(n.$slots, "navbar-search", {}, () => [
-              g(pt, { "visibility-group": t.id }, {
-                "search-panel": _(() => [
-                  v(n.$slots, "search-panel")
+            f(n.$slots, "navbar-search", {}, () => [
+              m(xt, { "visibility-group": t.id }, {
+                "search-panel": y(() => [
+                  f(n.$slots, "search-panel")
                 ]),
                 _: 3
               }, 8, ["visibility-group"])
@@ -642,20 +642,20 @@ import './index.css';const Ae = "data:image/svg+xml,%3csvg%20width='16'%20height
       }, [
         n.$slots["navbar-end"] ? {
           name: "navbar-end",
-          fn: _(() => [
-            v(n.$slots, "navbar-end")
+          fn: y(() => [
+            f(n.$slots, "navbar-end")
           ]),
           key: "0"
         } : void 0
       ]), 1032, ["id", "sticky", "compact-mobile"]),
-      t.bannerTitle || t.bannerMessage ? (o(), B(at, {
+      t.bannerTitle || t.bannerMessage ? (o(), w(dt, {
         key: 1,
         "banner-title": t.bannerTitle,
         "banner-message": t.bannerMessage
       }, null, 8, ["banner-title", "banner-message"])) : $("", !0)
     ], 64));
   }
-}), Ot = ["disabled"], ne = /* @__PURE__ */ w({
+}), jt = ["disabled"], ue = /* @__PURE__ */ M({
   inheritAttrs: !1,
   __name: "PhlButton",
   props: {
@@ -676,14 +676,14 @@ import './index.css';const Ae = "data:image/svg+xml,%3csvg%20width='16'%20height
     svgRaw: {}
   },
   setup(t) {
-    const e = t, i = (r) => "href" in r && r.href !== void 0 || "to" in r && r.to !== void 0, n = A(() => q(
+    const e = t, i = (r) => "href" in r && r.href !== void 0 || "to" in r && r.to !== void 0, n = C(() => ie(
       "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
-    )), s = A(() => i(e) ? "to" in e && e.to !== void 0 ? {
+    )), s = C(() => i(e) ? "to" in e && e.to !== void 0 ? {
       to: e.to,
       disabled: e.disabled,
       className: n.value
@@ -693,7 +693,7 @@ import './index.css';const Ae = "data:image/svg+xml,%3csvg%20width='16'%20height
       rel: e.rel,
       disabled: e.disabled,
       className: n.value
-    } : {}), l = A(
+    } : {}), l = C(
       () => ({
         icon: e.icon,
         src: e.src,
@@ -703,12 +703,12 @@ import './index.css';const Ae = "data:image/svg+xml,%3csvg%20width='16'%20height
         size: e.size
       })
     );
-    return (r, k) => i(e) ? (o(), B(a(ve), I({ key: 0 }, { ...s.value, ...r.$attrs }, { role: "button" }), {
-      default: _(() => [
-        g(a(W), P(Q(l.value)), {
-          default: _(() => [
-            v(r.$slots, "default", {}, () => [
-              H(x(e.text), 1)
+    return (r, k) => i(e) ? (o(), w(a(ye), I({ key: 0 }, { ...s.value, ...r.$attrs }, { role: "button" }), {
+      default: y(() => [
+        m(a(ae), F(te(l.value)), {
+          default: y(() => [
+            f(r.$slots, "default", {}, () => [
+              H(B(e.text), 1)
             ])
           ]),
           _: 3
@@ -721,27 +721,27 @@ import './index.css';const Ae = "data:image/svg+xml,%3csvg%20width='16'%20height
       disabled: e.disabled,
       class: n.value
     }, r.$attrs), [
-      g(a(W), P(Q(l.value)), {
-        default: _(() => [
-          v(r.$slots, "default", {}, () => [
-            H(x(e.text), 1)
+      m(a(ae), F(te(l.value)), {
+        default: y(() => [
+          f(r.$slots, "default", {}, () => [
+            H(B(e.text), 1)
           ])
         ]),
         _: 3
       }, 16)
-    ], 16, Ot));
+    ], 16, jt));
   }
-}), Dt = ["id"], Rt = {
+}), Ft = ["id"], Qt = {
   key: 0,
   class: "tooltip__tail",
   "aria-hidden": "true"
-}, Gt = {
+}, Wt = {
   key: 1,
   class: "tooltip__plain-row has-text-body-small"
-}, Pt = {
+}, qt = {
   key: 0,
   class: "tooltip__title-row"
-}, Ut = { key: 0 }, Vt = /* @__PURE__ */ w({
+}, Yt = { key: 0 }, Zt = /* @__PURE__ */ M({
   __name: "TooltipBubble",
   props: {
     id: {},
@@ -755,8 +755,8 @@ import './index.css';const Ae = "data:image/svg+xml,%3csvg%20width='16'%20height
   },
   emits: ["dismiss"],
   setup(t) {
-    const e = t, i = A(
-      () => q(
+    const e = t, i = C(
+      () => ie(
         "tooltip",
         "content",
         "resets-link-colors",
@@ -768,46 +768,46 @@ import './index.css';const Ae = "data:image/svg+xml,%3csvg%20width='16'%20height
     );
     return (n, s) => (o(), d("div", {
       id: t.id,
-      class: O(i.value),
+      class: P(i.value),
       role: "tooltip"
     }, [
-      t.tail ? (o(), d("div", Rt)) : $("", !0),
-      t.type === "plain" ? (o(), d("div", Gt, [
-        v(n.$slots, "default", {}, void 0, !0),
-        t.dismissable ? (o(), B(a(ne), {
+      t.tail ? (o(), d("div", Qt)) : $("", !0),
+      t.type === "plain" ? (o(), d("div", Wt, [
+        f(n.$slots, "default", {}, void 0, !0),
+        t.dismissable ? (o(), w(a(ue), {
           key: 0,
           class: "tooltip__dismiss",
           variant: "standard",
           size: "extra-small",
           "icon-only": !0,
-          icon: a(U),
+          icon: a(Q),
           "aria-label": "Dismiss tooltip",
           onClick: s[0] || (s[0] = (l) => n.$emit("dismiss"))
         }, null, 8, ["icon"])) : $("", !0)
-      ])) : (o(), d(z, { key: 2 }, [
-        t.title || t.dismissable ? (o(), d("div", Pt, [
-          t.title ? (o(), d("h6", Ut, x(t.title), 1)) : $("", !0),
-          t.dismissable ? (o(), B(a(ne), {
+      ])) : (o(), d(S, { key: 2 }, [
+        t.title || t.dismissable ? (o(), d("div", qt, [
+          t.title ? (o(), d("h6", Yt, B(t.title), 1)) : $("", !0),
+          t.dismissable ? (o(), w(a(ue), {
             key: 1,
             class: "tooltip__dismiss",
             variant: "standard",
             size: "extra-small",
             "icon-only": !0,
-            icon: a(U),
+            icon: a(Q),
             "aria-label": "Dismiss tooltip",
             onClick: s[1] || (s[1] = (l) => n.$emit("dismiss"))
           }, null, 8, ["icon"])) : $("", !0)
         ])) : $("", !0),
-        v(n.$slots, "default", {}, void 0, !0)
+        f(n.$slots, "default", {}, void 0, !0)
       ], 64))
-    ], 10, Dt));
+    ], 10, Ft));
   }
-}), fe = (t, e) => {
+}), _e = (t, e) => {
   const i = t.__vccOpts || t;
   for (const [n, s] of e)
     i[n] = s;
   return i;
-}, jt = /* @__PURE__ */ fe(Vt, [["__scopeId", "data-v-af4a0398"]]), Kt = /* @__PURE__ */ w({
+}, Xt = /* @__PURE__ */ _e(Zt, [["__scopeId", "data-v-af4a0398"]]), X = 8, J = 8, Jt = /* @__PURE__ */ M({
   __name: "Tooltip",
   props: {
     trigger: { default: "hover" },
@@ -820,75 +820,90 @@ import './index.css';const Ae = "data:image/svg+xml,%3csvg%20width='16'%20height
     className: {}
   },
   setup(t, { expose: e }) {
-    const i = t, n = me(), s = M(!1), l = M(null), r = M(null), k = M("top-center"), b = M(0), m = () => {
+    const i = t, n = Be(), s = A(!1), l = A(null), r = A(null), k = A("top-center"), b = A({ top: 0, left: 0 });
+    let v = null;
+    const p = () => {
       const h = l.value?.getBoundingClientRect();
       if (!h) return "top-center";
-      const { innerWidth: T, innerHeight: f } = window, S = h.top, C = f - h.bottom, D = r.value?.firstElementChild?.getBoundingClientRect().height ?? 0, j = (D > 0 ? S >= D : S >= C) ? "top" : "bottom", te = h.left + h.width / 2, be = te < T / 3 ? "left" : te > T * 2 / 3 ? "right" : "center";
-      return `${j}-${be}`;
-    }, p = (h) => {
-      h.key === "Escape" && L();
-    }, u = (h) => {
-      l.value && !l.value.contains(h.target) && L();
+      const { innerWidth: x, innerHeight: V } = window, R = h.top, ne = V - h.bottom, U = r.value?.getBoundingClientRect().height ?? 0, K = (U > 0 ? R >= U : R >= ne) ? "top" : "bottom", z = h.left + h.width / 2, $e = z < x / 3 ? "left" : z > x * 2 / 3 ? "right" : "center";
+      return `${K}-${$e}`;
     };
-    function E() {
-      const h = r.value?.firstElementChild?.getBoundingClientRect();
-      if (!h) return;
-      const T = 8, f = h.right - (window.innerWidth - T), S = T - h.left;
-      f <= 0 && S <= 0 || (b.value = window.innerWidth / 2 - (h.left + h.width / 2));
+    function u() {
+      const h = l.value?.getBoundingClientRect(), x = r.value?.getBoundingClientRect();
+      if (!h || !x) return;
+      const { innerWidth: V, innerHeight: R } = window, [ne, U] = k.value.split("-");
+      let K = ne === "top" ? h.top - X - x.height : h.bottom + X, z;
+      U === "center" ? z = h.left + h.width / 2 - x.width / 2 : U === "left" ? z = h.left - X : z = h.right + X - x.width, z = Math.min(Math.max(z, J), V - J - x.width), K = Math.min(Math.max(K, J), R - J - x.height), b.value = { top: K, left: z };
     }
-    const y = async () => {
-      i.placement === "auto" ? k.value = m() : k.value = i.placement, b.value = 0, s.value = !0, document.addEventListener("keydown", p), i.trigger === "click" && document.addEventListener("click", u), await Z(), E();
+    const E = (h) => {
+      h.key === "Escape" && L();
+    }, _ = (h) => {
+      const x = h.target, V = l.value?.contains(x), R = r.value?.contains(x);
+      !V && !R && L();
+    }, O = () => {
+      s.value && u();
+    }, D = async () => {
+      v && (clearTimeout(v), v = null), k.value = i.placement === "auto" ? p() : i.placement, s.value = !0, document.addEventListener("keydown", E), i.trigger === "click" && document.addEventListener("click", _), window.addEventListener("scroll", O, !0), window.addEventListener("resize", O), await oe(), i.placement === "auto" && (k.value = p()), u();
     }, L = () => {
-      s.value = !1, document.removeEventListener("keydown", p), document.removeEventListener("click", u);
-    }, X = () => {
-      s.value ? L() : y();
+      s.value = !1, v && (clearTimeout(v), v = null), document.removeEventListener("keydown", E), document.removeEventListener("click", _), window.removeEventListener("scroll", O, !0), window.removeEventListener("resize", O);
+    }, q = () => {
+      if (i.trigger !== "hover") return L();
+      v = setTimeout(L, 100);
+    }, Y = () => {
+      v && (clearTimeout(v), v = null);
+    }, g = () => {
+      s.value ? L() : D();
     };
-    le(L), e({ show: y, hide: L });
-    const Y = A(() => ({
+    be(L), e({ show: D, hide: L });
+    const Z = C(() => ({
       type: i.type,
       color: i.color,
       tail: i.tail,
       placement: k.value,
       title: i.title,
       dismissable: i.dismissable
+    })), T = C(() => ({
+      top: `${b.value.top}px`,
+      left: `${b.value.left}px`,
+      visibility: s.value ? "visible" : "hidden"
     }));
-    return (h, T) => (o(), d("span", I(
-      {
-        ref_key: "wrapperEl",
-        ref: l,
-        class: a(q)("tooltip-trigger", i.className)
-      },
-      t.trigger === "click" ? { onClick: X } : { onMouseenter: y, onMouseleave: L, onFocusin: y, onFocusout: L }
-    ), [
-      v(h.$slots, "default", {
-        tooltipId: a(n),
-        isOpen: s.value
-      }, void 0, !0),
-      c("span", {
-        ref_key: "positionerEl",
-        ref: r,
-        class: O(["tooltip-trigger__positioner", `tooltip-trigger__positioner--${k.value}`]),
-        style: re({
-          visibility: s.value ? "visible" : "hidden",
-          "--positioner-gap": t.tail ? "var(--spacing-l)" : "0.5rem",
-          "--adjust-x": `${b.value}px`
-        }),
-        onClick: T[0] || (T[0] = F(() => {
-        }, ["stop"]))
-      }, [
-        g(jt, I(Y.value, {
-          id: a(n),
-          onDismiss: L
-        }), {
-          default: _(() => [
-            v(h.$slots, "body", {}, void 0, !0)
-          ]),
-          _: 3
-        }, 16, ["id"])
-      ], 6)
-    ], 16));
+    return (h, x) => (o(), d(S, null, [
+      c("span", I(
+        {
+          ref_key: "wrapperEl",
+          ref: l,
+          class: a(ie)("tooltip-trigger", i.className)
+        },
+        t.trigger === "click" ? { onClick: g } : { onMouseenter: D, onMouseleave: q, onFocusin: D, onFocusout: L }
+      ), [
+        f(h.$slots, "default", {
+          tooltipId: a(n),
+          isOpen: s.value
+        }, void 0, !0)
+      ], 16),
+      (o(), w(Me, { to: "body" }, [
+        c("div", {
+          ref_key: "bubbleEl",
+          ref: r,
+          class: "tooltip-positioner",
+          style: pe(T.value),
+          onMouseenter: Y,
+          onMouseleave: q
+        }, [
+          m(Xt, I(Z.value, {
+            id: a(n),
+            onDismiss: L
+          }), {
+            default: y(() => [
+              f(h.$slots, "body", {}, void 0, !0)
+            ]),
+            _: 3
+          }, 16, ["id"])
+        ], 36)
+      ]))
+    ], 64));
   }
-}), Ft = /* @__PURE__ */ fe(Kt, [["__scopeId", "data-v-b3f93b8c"]]), Qt = ["disabled"], Wt = /* @__PURE__ */ w({
+}), ea = /* @__PURE__ */ _e(Jt, [["__scopeId", "data-v-591a1092"]]), ta = ["disabled"], aa = /* @__PURE__ */ M({
   inheritAttrs: !1,
   __name: "PhlButton",
   props: {
@@ -909,14 +924,14 @@ import './index.css';const Ae = "data:image/svg+xml,%3csvg%20width='16'%20height
     svgRaw: {}
   },
   setup(t) {
-    const e = t, i = (r) => "href" in r && r.href !== void 0 || "to" in r && r.to !== void 0, n = A(() => q(
+    const e = t, i = (r) => "href" in r && r.href !== void 0 || "to" in r && r.to !== void 0, n = C(() => ie(
       "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
-    )), s = A(() => i(e) ? "to" in e && e.to !== void 0 ? {
+    )), s = C(() => i(e) ? "to" in e && e.to !== void 0 ? {
       to: e.to,
       disabled: e.disabled,
       className: n.value
@@ -926,7 +941,7 @@ import './index.css';const Ae = "data:image/svg+xml,%3csvg%20width='16'%20height
       rel: e.rel,
       disabled: e.disabled,
       className: n.value
-    } : {}), l = A(
+    } : {}), l = C(
       () => ({
         icon: e.icon,
         src: e.src,
@@ -936,12 +951,12 @@ import './index.css';const Ae = "data:image/svg+xml,%3csvg%20width='16'%20height
         size: e.size
       })
     );
-    return (r, k) => i(e) ? (o(), B(a(ve), I({ key: 0 }, { ...s.value, ...r.$attrs }, { role: "button" }), {
-      default: _(() => [
-        g(a(W), P(Q(l.value)), {
-          default: _(() => [
-            v(r.$slots, "default", {}, () => [
-              H(x(e.text), 1)
+    return (r, k) => i(e) ? (o(), w(a(ye), I({ key: 0 }, { ...s.value, ...r.$attrs }, { role: "button" }), {
+      default: y(() => [
+        m(a(ae), F(te(l.value)), {
+          default: y(() => [
+            f(r.$slots, "default", {}, () => [
+              H(B(e.text), 1)
             ])
           ]),
           _: 3
@@ -954,21 +969,21 @@ import './index.css';const Ae = "data:image/svg+xml,%3csvg%20width='16'%20height
       disabled: e.disabled,
       class: n.value
     }, r.$attrs), [
-      g(a(W), P(Q(l.value)), {
-        default: _(() => [
-          v(r.$slots, "default", {}, () => [
-            H(x(e.text), 1)
+      m(a(ae), F(te(l.value)), {
+        default: y(() => [
+          f(r.$slots, "default", {}, () => [
+            H(B(e.text), 1)
           ])
         ]),
         _: 3
       }, 16)
-    ], 16, Qt));
+    ], 16, ta));
   }
-}), qt = { class: "navbar-info" }, Xt = { class: "navbar-info__group" }, Yt = {
+}), ia = { class: "navbar-info" }, na = { class: "navbar-info__group" }, sa = {
   key: 0,
   class: "navbar-info__label has-text-body-default hidden-tablet",
   "aria-hidden": "true"
-}, Zt = { class: "has-text-body-small" }, Jt = /* @__PURE__ */ w({
+}, oa = { class: "has-text-body-small" }, la = /* @__PURE__ */ M({
   __name: "NavbarInfo",
   props: {
     infoTitle: {},
@@ -976,12 +991,12 @@ import './index.css';const Ae = "data:image/svg+xml,%3csvg%20width='16'%20height
     label: {}
   },
   setup(t, { expose: e }) {
-    const i = G("tooltip");
+    const i = j("tooltip");
     return e({
       show: () => i.value?.show(),
       hide: () => i.value?.hide()
-    }), (n, s) => (o(), d("div", qt, [
-      g(a(Ft), {
+    }), (n, s) => (o(), d("div", ia, [
+      m(a(ea), {
         ref_key: "tooltip",
         ref: i,
         type: "rich",
@@ -989,41 +1004,41 @@ import './index.css';const Ae = "data:image/svg+xml,%3csvg%20width='16'%20height
         trigger: "click",
         dismissable: !0
       }, {
-        default: _(({ tooltipId: l, isOpen: r }) => [
-          c("span", Xt, [
-            g(a(Wt), {
+        default: y(({ tooltipId: l, isOpen: r }) => [
+          c("span", na, [
+            m(a(aa), {
               class: "navbar-info__trigger",
               variant: "standard",
               size: "small",
               "icon-only": !0,
-              icon: a(de),
+              icon: a(he),
               "aria-label": "More information",
               "aria-describedby": l,
               "aria-pressed": r
             }, null, 8, ["icon", "aria-describedby", "aria-pressed"]),
-            t.label ? (o(), d("span", Yt, x(t.label), 1)) : $("", !0)
+            t.label ? (o(), d("span", sa, B(t.label), 1)) : $("", !0)
           ])
         ]),
-        body: _(() => [
-          v(n.$slots, "default", {}, () => [
-            c("div", Zt, x(t.infoMessage), 1)
+        body: y(() => [
+          f(n.$slots, "default", {}, () => [
+            c("div", oa, B(t.infoMessage), 1)
           ], !0)
         ]),
         _: 3
       }, 8, ["title"])
     ]));
   }
-}), sa = /* @__PURE__ */ R(Jt, [["__scopeId", "data-v-a29fa022"]]);
+}), fa = /* @__PURE__ */ G(la, [["__scopeId", "data-v-a29fa022"]]);
 export {
-  at as AlertBanner,
-  na as AppHeader,
-  Ht as LanguageSwitcher,
-  qe as NavBar,
-  kt as NavbarBrand,
-  ht as NavbarBrandLogo,
-  Ct as NavbarBurger,
-  sa as NavbarInfo,
-  dt as NavbarLinks,
-  pt as NavbarSearch,
-  Fe as TrustedSite
+  dt as AlertBanner,
+  va as AppHeader,
+  Kt as LanguageSwitcher,
+  it as NavBar,
+  It as NavbarBrand,
+  Bt as NavbarBrandLogo,
+  zt as NavbarBurger,
+  fa as NavbarInfo,
+  mt as NavbarLinks,
+  xt as NavbarSearch,
+  et as TrustedSite
 };