@kiva/kv-components 9.0.3 → 9.1.1

package/dist/utils/headerMenuTiming.d.ts

@@ -0,0 +1,6 @@
+export declare const MENU_OPEN_DELAY_MS = 100;
+export declare const MENU_CLOSE_FADE_MS = 100;
+export declare const MENU_TIMING_VARS: {
+    '--menu-open-delay': string;
+    '--menu-close-fade': string;
+};

package/dist/utils/headerMenuTiming.js

@@ -0,0 +1,9 @@
+const _ = 100, E = 100, M = {
+  "--menu-open-delay": "100ms",
+  "--menu-close-fade": "100ms"
+};
+export {
+  E as MENU_CLOSE_FADE_MS,
+  _ as MENU_OPEN_DELAY_MS,
+  M as MENU_TIMING_VARS
+};

package/dist/utils/useHeaderMenuGroup.d.ts

@@ -0,0 +1,27 @@
+import { Ref } from 'vue';
+import { HeaderMenuState } from '../../../../../../../../../src/utils/useHeaderMenuState';
+import { HeaderMenuPlacement } from '../../../../../../../../../src/utils/useHeaderMenuPlacement';
+export interface TriggerAttrs {
+    'aria-expanded': boolean;
+    'aria-controls': string;
+    onClick(event: Event): void;
+}
+export interface HeaderMenuGroupOptions {
+    panelId: Ref<string>;
+    rootRef: Ref<HTMLElement | null>;
+    menus: HeaderMenuState;
+    placement?: HeaderMenuPlacement | null;
+}
+export declare function useHeaderMenuGroup({ panelId, rootRef, menus, placement, }: HeaderMenuGroupOptions): {
+    approached: Ref<boolean, boolean>;
+    toggled: import('vue').ComputedRef<boolean>;
+    expanded: import('vue').ComputedRef<any>;
+    trigger: import('vue').ComputedRef<TriggerAttrs>;
+    toggle: (event?: Event) => void;
+    close: () => void;
+    onPointerEnter: (event: PointerEvent) => void;
+    onPointerLeave: () => void;
+    onFocusIn: () => void;
+    onFocusOut: (event: FocusEvent) => void;
+    onKeydown: (event: KeyboardEvent) => void;
+};

package/dist/utils/useHeaderMenuGroup.js

@@ -0,0 +1,68 @@
+import { ref as k, computed as s, onMounted as m, onBeforeUnmount as x } from "vue";
+import { MENU_OPEN_DELAY_MS as A } from "./headerMenuTiming.js";
+import { useHoverIntent as D } from "./useHoverIntent.js";
+import { useOutsidePointerDown as H } from "./useOutsidePointerDown.js";
+function w({
+  panelId: l,
+  rootRef: a,
+  menus: t,
+  placement: c
+}) {
+  const n = k(!1), f = D(A);
+  let i;
+  const o = s(() => t.toggledId.value === l.value), v = s(() => o.value || f.settled.value);
+  function d(e) {
+    if ((e == null ? void 0 : e.currentTarget) instanceof HTMLAnchorElement && e.currentTarget.hasAttribute("href")) {
+      if (t.pointerType.value !== "touch") return;
+      e.preventDefault();
+    }
+    n.value = !0, t.toggle(l.value);
+  }
+  function u() {
+    o.value && t.close();
+  }
+  H(a, o, u);
+  function p(e) {
+    n.value = !0, e.pointerType !== "touch" && (o.value || t.close(), f.enter());
+  }
+  function h() {
+    f.leave();
+  }
+  function E() {
+    n.value = !0;
+  }
+  function T(e) {
+    var r;
+    e.relatedTarget instanceof Element && ((r = a.value) != null && r.contains(e.relatedTarget) || u());
+  }
+  function y(e) {
+    var r, g;
+    e.key !== "Escape" || !o.value || (u(), (g = (r = a.value) == null ? void 0 : r.querySelector("[aria-expanded]")) == null || g.focus());
+  }
+  const M = s(() => ({
+    "aria-expanded": v.value,
+    "aria-controls": l.value,
+    onClick: d
+  }));
+  return m(() => {
+    const e = a.value;
+    e && (i = c == null ? void 0 : c.registerGroup(e), e.matches(":hover") && (n.value = !0));
+  }), x(() => {
+    i == null || i(), u();
+  }), {
+    approached: n,
+    toggled: o,
+    expanded: v,
+    trigger: M,
+    toggle: d,
+    close: u,
+    onPointerEnter: p,
+    onPointerLeave: h,
+    onFocusIn: E,
+    onFocusOut: T,
+    onKeydown: y
+  };
+}
+export {
+  w as useHeaderMenuGroup
+};

package/dist/utils/useHeaderMenuPlacement.d.ts

@@ -0,0 +1,6 @@
+import { InjectionKey, Ref } from 'vue';
+export interface HeaderMenuPlacement {
+    registerGroup(el: HTMLElement): () => void;
+}
+export declare const HEADER_MENU_PLACEMENT: InjectionKey<HeaderMenuPlacement>;
+export declare function useHeaderMenuPlacement(rootRef: Ref<HTMLElement | null>): HeaderMenuPlacement;

package/dist/utils/useHeaderMenuPlacement.js

@@ -0,0 +1,30 @@
+import { onMounted as g, onBeforeUnmount as d } from "vue";
+const p = Symbol("headerMenuPlacement");
+function y(c) {
+  const o = /* @__PURE__ */ new Set();
+  let e = null;
+  function a() {
+    const t = c.value, i = t == null ? void 0 : t.offsetParent;
+    if (!t || !(i instanceof HTMLElement)) return;
+    const n = i.getBoundingClientRect(), u = Array.from(o, (r) => [r, r.getBoundingClientRect()]);
+    t.style.setProperty("--nav-height", `${n.height}px`), u.forEach(([r, s]) => {
+      const f = s.left + s.width / 2;
+      r.style.setProperty("--trigger-gap-left", `${f - n.left}px`), r.style.setProperty("--trigger-gap-right", `${n.right - f}px`), r.style.setProperty("--trigger-width", `${s.width}px`);
+    });
+  }
+  function l(t) {
+    return o.add(t), e == null || e.observe(t), () => {
+      o.delete(t), e == null || e.unobserve(t);
+    };
+  }
+  return g(() => {
+    const t = c.value, i = t == null ? void 0 : t.offsetParent;
+    typeof ResizeObserver < "u" && t && i instanceof HTMLElement && (e = new ResizeObserver(a), e.observe(i), Array.from(t.children).forEach((n) => e == null ? void 0 : e.observe(n)), o.forEach((n) => e == null ? void 0 : e.observe(n))), a();
+  }), d(() => {
+    e == null || e.disconnect(), e = null;
+  }), { registerGroup: l };
+}
+export {
+  p as HEADER_MENU_PLACEMENT,
+  y as useHeaderMenuPlacement
+};

package/dist/utils/useHeaderMenuState.d.ts

@@ -0,0 +1,10 @@
+import { InjectionKey, Ref } from 'vue';
+import { PointerType } from '../../../../../../../../../src/utils/usePointerType';
+export interface HeaderMenuState {
+    toggledId: Readonly<Ref<string | null>>;
+    pointerType: Readonly<Ref<PointerType | null>>;
+    toggle(id: string): void;
+    close(): void;
+}
+export declare const HEADER_MENU_STATE: InjectionKey<HeaderMenuState>;
+export declare function useHeaderMenuState(pointerType: Readonly<Ref<PointerType | null>>): HeaderMenuState;

package/dist/utils/useHeaderMenuState.js

@@ -0,0 +1,21 @@
+import { ref as u, readonly as r } from "vue";
+const c = Symbol("headerMenuState");
+function d(n) {
+  const e = u(null);
+  function t(l) {
+    e.value = e.value === l ? null : l;
+  }
+  function o() {
+    e.value = null;
+  }
+  return {
+    toggledId: r(e),
+    pointerType: n,
+    toggle: t,
+    close: o
+  };
+}
+export {
+  c as HEADER_MENU_STATE,
+  d as useHeaderMenuState
+};

package/dist/utils/useHoverIntent.d.ts

@@ -0,0 +1,5 @@
+export declare function useHoverIntent(delayMs: number): {
+    settled: import('vue').Ref<boolean, boolean>;
+    enter: () => void;
+    leave: () => void;
+};

package/dist/utils/useHoverIntent.js

@@ -0,0 +1,17 @@
+import { ref as u, onBeforeUnmount as l } from "vue";
+function a(o) {
+  const t = u(!1);
+  let e;
+  function n() {
+    clearTimeout(e), e = setTimeout(() => {
+      t.value = !0;
+    }, o);
+  }
+  function r() {
+    clearTimeout(e), t.value = !1;
+  }
+  return l(() => clearTimeout(e)), { settled: t, enter: n, leave: r };
+}
+export {
+  a as useHoverIntent
+};

package/dist/utils/useOutsidePointerDown.d.ts

@@ -0,0 +1,2 @@
+import { Ref } from 'vue';
+export declare function useOutsidePointerDown(rootRef: Ref<HTMLElement | null>, active: Ref<boolean>, onOutside: () => void): void;

package/dist/utils/useOutsidePointerDown.js

@@ -0,0 +1,19 @@
+import { watch as f, onMounted as a, onBeforeUnmount as c } from "vue";
+function s(u, o, d) {
+  function e(n) {
+    var i;
+    n.target instanceof Node && ((i = u.value) != null && i.contains(n.target)) || d();
+  }
+  function t() {
+    document.addEventListener("pointerdown", e);
+  }
+  function r() {
+    document.removeEventListener("pointerdown", e);
+  }
+  f(o, (n) => n ? t() : r()), a(() => {
+    o.value && t();
+  }), c(r);
+}
+export {
+  s as useOutsidePointerDown
+};

package/dist/utils/usePointerType.d.ts

@@ -0,0 +1,5 @@
+import { Ref } from 'vue';
+export type PointerType = 'mouse' | 'pen' | 'touch';
+export declare function usePointerType(rootRef: Ref<HTMLElement | null>): {
+    pointerType: Ref<PointerType, PointerType>;
+};

package/dist/utils/usePointerType.js

@@ -0,0 +1,19 @@
+import { ref as i, onMounted as a, onBeforeUnmount as p } from "vue";
+function s(n) {
+  const o = i(null);
+  function r(t) {
+    const e = t.pointerType;
+    e && e !== o.value && (o.value = e);
+  }
+  return a(() => {
+    var e, u;
+    const t = typeof window.matchMedia == "function" && window.matchMedia("(hover: none)").matches;
+    o.value = t ? "touch" : "mouse", (e = n.value) == null || e.addEventListener("pointerdown", r, { capture: !0, passive: !0 }), (u = n.value) == null || u.addEventListener("pointermove", r, { capture: !0, passive: !0 });
+  }), p(() => {
+    var t, e;
+    (t = n.value) == null || t.removeEventListener("pointerdown", r, { capture: !0 }), (e = n.value) == null || e.removeEventListener("pointermove", r, { capture: !0 });
+  }), { pointerType: o };
+}
+export {
+  s as usePointerType
+};

package/dist/vue/KvWwwHeader/LendMenu/KvLendMenu2.js

@@ -1,17 +1,17 @@
-import { gql as l } from "@apollo/client/core";
-import { toRefs as I, ref as s, computed as v, onMounted as w } from "vue";
-import A from "./KvLendListMenu.js";
+import { gql as i } from "@apollo/client/core";
+import { toRefs as q, ref as s, computed as g, onMounted as w } from "vue";
+import I from "./KvLendListMenu.js";
 import O from "./KvLendMegaMenu.js";
-import F from "../../KvWwwHeaderBasic/MobileLendMenu/MobileLendMenu.js";
-import { indexIn as N } from "../../../utils/comparators.js";
-import { groupBy as x, sortBy as C } from "../../../utils/arrayUtils.js";
-import B from "../../KvPageContainer.js";
-const U = {
+import A from "../../KvWwwHeaderBasic/MobileLendMenu/MobileLendMenu.js";
+import { indexIn as F } from "../../../utils/comparators.js";
+import { groupBy as N, sortBy as v } from "../../../utils/arrayUtils.js";
+import x from "../../KvPageContainer.js";
+const Q = {
   components: {
-    KvLendListMenu: A,
+    KvLendListMenu: I,
     KvLendMegaMenu: O,
-    MobileLendMenu: F,
-    KvPageContainer: B
+    MobileLendMenu: A,
+    KvPageContainer: x
   },
   props: {
     userId: {
@@ -52,10 +52,10 @@ const U = {
     }
   },
   emits: ["load-lend-menu-data", "load-search-data", "search-submit"],
-  setup(h, { emit: M }) {
+  setup(C, { emit: h }) {
     const {
-      userId: i
-    } = I(h), c = s([]), d = s([]), m = s(0), p = s([]), b = [
+      userId: l
+    } = q(C), c = s([]), m = s([]), d = s(0), y = s([]), M = [
       "North America",
       "Central America",
       "South America",
@@ -64,10 +64,10 @@ const U = {
       "Middle East",
       "Asia",
       "Oceania"
-    ], y = s(!0), f = s(!0), L = async (r) => {
-      var o, t, n, u;
-      if (r.watchQuery({
-        query: l`query countryFacets {
+    ], p = s(!0), f = s(!0), b = async (n) => {
+      var o, r, t, a;
+      if (n.watchQuery({
+        query: i`query countryFacets {
 					lend {
 						countryFacets {
 							count
@@ -82,31 +82,32 @@ const U = {
 				}`
       }).subscribe({
         next: ({ data: e }) => {
-          var a;
-          d.value = ((a = e == null ? void 0 : e.lend) == null ? void 0 : a.countryFacets) ?? [], y.value = !1;
+          var u;
+          m.value = ((u = e == null ? void 0 : e.lend) == null ? void 0 : u.countryFacets) ?? [], p.value = !1;
         }
-      }), r.watchQuery({
-        query: l`
+      }), n.watchQuery({
+        query: i`
 					query lendMenuData {
-						lend {
-							loanChannels(popular: true, applyMinLoanCount: true, limit: 50) {
-								values {
-									id
-									name
-									url
-								}
+						browsingCategories(
+							filters: { popularOnly: true, applyMinimumLoanCount: true }
+							limit: 50
+						) {
+							values {
+								id
+								name
+								url
 							}
 						}
 					}
 				`
       }).subscribe({
         next: ({ data: e }) => {
-          var a, g;
-          c.value = ((g = (a = e == null ? void 0 : e.lend) == null ? void 0 : a.loanChannels) == null ? void 0 : g.values) ?? [], f.value = !1;
+          var u;
+          c.value = ((u = e == null ? void 0 : e.browsingCategories) == null ? void 0 : u.values) ?? [], f.value = !1;
         }
-      }), i.value) {
-        const { data: e } = await r.query({
-          query: l`
+      }), l.value) {
+        const { data: e } = await n.query({
+          query: i`
 						query lendMenuPrivateData($userId: Int!) {
 							lend {
 								loans(limit: 1, filters: {
@@ -127,45 +128,45 @@ const U = {
 						}
 					`,
           variables: {
-            userId: i.value
+            userId: l.value
           },
           fetchPolicy: "network-only"
         });
-        m.value = ((t = (o = e == null ? void 0 : e.lend) == null ? void 0 : o.loans) == null ? void 0 : t.totalCount) ?? 0, p.value = ((u = (n = e == null ? void 0 : e.my) == null ? void 0 : n.savedSearches) == null ? void 0 : u.values) ?? [];
+        d.value = ((r = (o = e == null ? void 0 : e.lend) == null ? void 0 : o.loans) == null ? void 0 : r.totalCount) ?? 0, y.value = ((a = (t = e == null ? void 0 : e.my) == null ? void 0 : t.savedSearches) == null ? void 0 : a.values) ?? [];
       }
-    }, S = v(() => {
-      const r = d.value.map((n) => ({
-        name: n.country.name,
-        region: n.country.region,
-        isoCode: n.country.isoCode.toLowerCase(),
-        count: n.count || 0
-      })), o = x(r, "region"), t = [];
-      for (const [n, u] of Object.entries(o))
-        t.push({
-          name: n,
-          countries: u.sort(C("name"))
+    }, L = g(() => {
+      const n = m.value.map((t) => ({
+        name: t.country.name,
+        region: t.country.region,
+        isoCode: t.country.isoCode.toLowerCase(),
+        count: t.count || 0
+      })), o = N(n, "region"), r = [];
+      for (const [t, a] of Object.entries(o))
+        r.push({
+          name: t,
+          countries: a.sort(v("name"))
         });
-      return t.sort(N(b, "name"));
-    }), q = v(() => {
+      return r.sort(F(M, "name"));
+    }), S = g(() => {
       var o;
-      return ((o = c.value) == null ? void 0 : o.map((t) => {
-        const n = JSON.parse(JSON.stringify(t));
-        return n.url = n.url.replace("lend", "lend-by-category"), n;
-      })).sort(C("name"));
+      return ((o = c.value) == null ? void 0 : o.map((r) => {
+        const t = JSON.parse(JSON.stringify(r));
+        return t.url = t.url.replace("lend", "lend-by-category"), t;
+      })).sort(v("name"));
     });
     return w(() => {
-      M("load-lend-menu-data");
+      h("load-lend-menu-data");
     }), {
-      onLoad: L,
-      regions: S,
-      computedCategories: q,
+      onLoad: b,
+      regions: L,
+      computedCategories: S,
       isChannelsLoading: f,
-      isRegionsLoading: y,
-      savedSearches: p,
-      favoritesCount: m
+      isRegionsLoading: p,
+      savedSearches: y,
+      favoritesCount: d
     };
   }
 };
 export {
-  U as default
+  Q as default
 };

package/dist/vue/KvWwwHeaderBasic/HeaderMenuGroup.css

@@ -0,0 +1 @@
+@media(min-width:45.875rem){.menu-group[data-v-22583929]{align-self:stretch}.menu-group[data-v-22583929]:hover:after{content:"";position:absolute;top:4rem;height:calc(var(--nav-height, 4rem) - 4rem);left:calc(var(--trigger-gap-left, 0px) - var(--trigger-width, 0px) / 2);width:var(--trigger-width, 0px)}}.menu-panel[data-v-22583929]{position:absolute;z-index:1400;overflow-y:auto;--tw-bg-opacity: 1;background-color:rgba(var(--bg-primary),var(--tw-bg-opacity, 1));top:var(--nav-height, 4rem);max-height:0;visibility:hidden;opacity:0;transition:opacity var(--menu-close-fade) ease var(--menu-open-delay),visibility 0s calc(var(--menu-open-delay) + var(--menu-close-fade)),max-height 0s calc(var(--menu-open-delay) + var(--menu-close-fade)),min-height 0s calc(var(--menu-open-delay) + var(--menu-close-fade))}.menu-group:has(>[aria-expanded=true])>.menu-panel[data-v-22583929],[data-pointer=mouse] .menu-group:hover>.menu-panel[data-v-22583929]{visibility:visible;opacity:1;max-height:calc(100dvh - var(--nav-height, 4rem));transition:opacity .3s ease var(--menu-open-delay),visibility 0s var(--menu-open-delay),max-height 0s var(--menu-open-delay),min-height 0s var(--menu-open-delay)}.menu-panel--full[data-v-22583929],.menu-panel--drawer[data-v-22583929]{inset-inline:0}.menu-panel--card[data-v-22583929]{border-bottom-right-radius:1rem;border-bottom-left-radius:1rem;border-width:.0625rem;border-top-width:0px;--tw-border-opacity: 1;border-color:rgba(var(--border-tertiary),var(--tw-border-opacity, 1));right:var(--trigger-gap-right, 0px);translate:clamp(calc(100% - var(--trigger-gap-left, 0px)),50%,var(--trigger-gap-right, 0px)) 0;max-width:100%}.menu-panel--drawer[data-v-22583929]{border-radius:0}.menu-group:has(>[aria-expanded=true])>.menu-panel--drawer[data-v-22583929],[data-pointer=mouse] .menu-group:hover>.menu-panel--drawer[data-v-22583929]{max-height:none;min-height:100dvh}

package/dist/vue/KvWwwHeaderBasic/HeaderMenuGroup.js

@@ -0,0 +1,35 @@
+import s from "./HeaderMenuGroup2.js";
+import { openBlock as d, createElementBlock as i, renderSlot as t, createElementVNode as l, normalizeClass as u, createCommentVNode as a } from "vue";
+import "./HeaderMenuGroup.css";
+import p from "../../_virtual/_plugin-vue_export-helper.js";
+const m = ["id"];
+function f(e, o, r, g, v, F) {
+  return d(), i("div", {
+    ref: "root",
+    class: "menu-group tw-flex tw-items-center",
+    onPointerenter: o[0] || (o[0] = (...n) => e.onPointerEnter && e.onPointerEnter(...n)),
+    onPointerleave: o[1] || (o[1] = (...n) => e.onPointerLeave && e.onPointerLeave(...n)),
+    onFocusin: o[2] || (o[2] = (...n) => e.onFocusIn && e.onFocusIn(...n)),
+    onFocusout: o[3] || (o[3] = (...n) => e.onFocusOut && e.onFocusOut(...n)),
+    onKeydown: o[4] || (o[4] = (...n) => e.onKeydown && e.onKeydown(...n))
+  }, [
+    t(e.$slots, "default", {
+      trigger: e.trigger,
+      toggle: e.toggle,
+      expanded: e.expanded
+    }, void 0, !0),
+    l("div", {
+      id: r.panelId,
+      class: u(["menu-panel", `menu-panel--${r.variant}`])
+    }, [
+      e.approached ? t(e.$slots, "panel", {
+        key: 0,
+        close: e.close
+      }, void 0, !0) : a("", !0)
+    ], 10, m)
+  ], 544);
+}
+const E = /* @__PURE__ */ p(s, [["render", f], ["__scopeId", "data-v-22583929"]]);
+export {
+  E as default
+};

package/dist/vue/KvWwwHeaderBasic/HeaderMenuGroup.vue.d.ts

@@ -0,0 +1,25 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    panelId: {
+        type: StringConstructor;
+        required: true;
+    };
+    variant: {
+        type: () => "full" | "card" | "drawer";
+        default: string;
+    };
+}>, any, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("close" | "open")[], "close" | "open", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    panelId: {
+        type: StringConstructor;
+        required: true;
+    };
+    variant: {
+        type: () => "full" | "card" | "drawer";
+        default: string;
+    };
+}>> & Readonly<{
+    onOpen?: (...args: any[]) => any;
+    onClose?: (...args: any[]) => any;
+}>, {
+    variant: "card" | "full" | "drawer";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/vue/KvWwwHeaderBasic/HeaderMenuGroup2.js

@@ -0,0 +1,37 @@
+import { inject as t, shallowRef as s, toRef as l, watch as i } from "vue";
+import { HEADER_MENU_STATE as E } from "../../utils/useHeaderMenuState.js";
+import { HEADER_MENU_PLACEMENT as c } from "../../utils/useHeaderMenuPlacement.js";
+import { useHeaderMenuGroup as d } from "../../utils/useHeaderMenuGroup.js";
+const A = {
+  name: "HeaderMenuGroup",
+  props: {
+    /**
+     * Id for the panel element, referenced by the trigger's aria-controls. Also identifies the
+     * group in the shared toggled state.
+     */
+    panelId: { type: String, required: !0 },
+    /**
+     * Panel shape: 'full' spans the nav, 'drawer' is the full-screen mobile drawer, 'card'
+     * centers under the trigger and clamps to the nav's edges.
+     */
+    variant: {
+      type: String,
+      default: "card"
+    }
+  },
+  emits: ["open", "close"],
+  setup(n, { emit: p }) {
+    const e = t(E);
+    if (!e) throw new Error("HeaderMenuGroup requires a HEADER_MENU_STATE provider");
+    const a = t(c, null), r = s(null), o = d({
+      panelId: l(n, "panelId"),
+      rootRef: r,
+      menus: e,
+      placement: a
+    });
+    return i(o.expanded, (u) => p(u ? "open" : "close"), { flush: "sync" }), { root: r, ...o };
+  }
+};
+export {
+  A as default
+};

package/dist/vue/KvWwwHeaderBasic/KvWwwHeaderBasic.css

@@ -1 +1 @@
-.header-fade-enter-active[data-v-ec338a13]{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.header-fade-leave-active[data-v-ec338a13]{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.1s}.header-fade-enter[data-v-ec338a13],.header-fade-leave-to[data-v-ec338a13]{opacity:0}.header-fade-leave[data-v-ec338a13],.header-fade-enter-to[data-v-ec338a13]{opacity:1}.bg-opacity-50[data-v-ec338a13]{background-color:rgba(var(--bg-action-highlight),.5)}
+.header-fade-enter-active[data-v-25e697e2]{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.header-fade-leave-active[data-v-25e697e2]{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.1s}.header-fade-enter[data-v-25e697e2],.header-fade-leave-to[data-v-25e697e2]{opacity:0}.header-fade-leave[data-v-25e697e2],.header-fade-enter-to[data-v-25e697e2]{opacity:1}