@opentiny/tiny-robot 0.4.1 → 0.4.2-alpha.1

package/dist/content-nav/index.js

@@ -0,0 +1,856 @@
+import { defineComponent as G, ref as M, computed as g, watch as F, openBlock as _, createElementBlock as H, normalizeClass as pe, createElementVNode as D, renderSlot as L, Fragment as W, renderList as ye, toDisplayString as te, createTextVNode as Te, createCommentVNode as re, createBlock as xe, createSlots as ne, withCtx as P, mergeProps as ae, useSlots as Se, normalizeStyle as Ne, onBeforeUnmount as oe, nextTick as ke, useAttrs as be, toRefs as _e, unref as E, createVNode as ce, normalizeProps as ue, guardReactiveProps as de } from "vue";
+import { h as Ee, i as Me, g as z, j as fe } from "../index4.js";
+import { _ as Y } from "../_plugin-vue_export-helper.js";
+const Oe = ["data-tooltip"], we = ["data-item-id", "aria-current", "tabindex"], Ae = { class: "tr-content-nav__marker-slot" }, He = { class: "tr-content-nav__item-content" }, Le = {
+  key: 0,
+  class: "tr-content-nav__highlight"
+}, $e = /* @__PURE__ */ G({
+  name: "ContentNavItem",
+  __name: "ContentNavItem",
+  props: {
+    entry: {},
+    activeId: {},
+    expanded: { type: Boolean },
+    highlighted: { type: Boolean },
+    placement: {},
+    tooltipDelay: {}
+  },
+  emits: ["select"],
+  setup(e, { emit: a }) {
+    const l = e, i = a, f = M(null), r = M(!1), n = M(!1), { start: c, stop: u } = Ee(
+      () => {
+        requestAnimationFrame(() => {
+          C();
+        });
+      },
+      () => Math.max(0, l.tooltipDelay),
+      { immediate: !1 }
+    ), d = g(() => l.entry.item.id === l.activeId), v = g(() => [
+      "tr-content-nav__list-item",
+      `is-${l.placement}`,
+      {
+        "is-active": d.value,
+        "is-expanded": l.expanded,
+        "is-highlighted": l.highlighted,
+        "is-tooltip-visible": n.value
+      }
+    ]);
+    function y(p) {
+      return !!(p && p.scrollWidth > p.clientWidth);
+    }
+    function N() {
+      var p;
+      return ((p = f.value) == null ? void 0 : p.querySelector(".tr-content-nav__item-label")) ?? null;
+    }
+    function C() {
+      n.value = l.expanded && r.value && y(N());
+    }
+    function I() {
+      u(), n.value = !1, !(!l.expanded || !r.value) && c();
+    }
+    function k() {
+      u(), n.value = !1;
+    }
+    function $() {
+      r.value = !0, I();
+    }
+    function w() {
+      r.value = !1, k();
+    }
+    function S(p) {
+      p.propertyName === "max-width" && r.value && C();
+    }
+    return F(
+      () => l.expanded,
+      (p) => {
+        if (!p) {
+          k();
+          return;
+        }
+        r.value && I();
+      }
+    ), (p, o) => (_(), H("li", {
+      class: pe(v.value),
+      "data-tooltip": e.entry.item.tooltipText || e.entry.item.label
+    }, [
+      D("button", {
+        ref_key: "itemButtonRef",
+        ref: f,
+        type: "button",
+        class: "tr-content-nav__item",
+        "data-item-id": e.entry.item.id,
+        "aria-current": d.value ? "location" : void 0,
+        tabindex: e.highlighted ? 0 : -1,
+        onMouseenter: $,
+        onMouseleave: w,
+        onClick: o[0] || (o[0] = (t) => i("select", e.entry.item))
+      }, [
+        D("span", Ae, [
+          L(p.$slots, "marker", {
+            item: e.entry.item,
+            active: d.value
+          }, () => [
+            o[1] || (o[1] = D("span", { class: "tr-content-nav__marker" }, null, -1))
+          ], !0)
+        ]),
+        D("span", He, [
+          L(p.$slots, "item", {
+            item: e.entry.item,
+            segments: e.entry.segments,
+            active: d.value,
+            expanded: e.expanded,
+            highlighted: l.highlighted || r.value
+          }, () => [
+            D("span", {
+              class: "tr-content-nav__item-label",
+              onTransitionend: S
+            }, [
+              (_(!0), H(W, null, ye(e.entry.segments, (t, s) => (_(), H(W, {
+                key: `${e.entry.item.id}-${s}`
+              }, [
+                t.highlighted ? (_(), H("mark", Le, te(t.text), 1)) : (_(), H(W, { key: 1 }, [
+                  Te(te(t.text), 1)
+                ], 64))
+              ], 64))), 128))
+            ], 32)
+          ], !0)
+        ])
+      ], 40, we)
+    ], 10, Oe));
+  }
+}), Re = /* @__PURE__ */ Y($e, [["__scopeId", "data-v-c22afe17"]]), Be = {
+  class: "tr-content-nav__list",
+  role: "list"
+}, De = {
+  key: 0,
+  class: "tr-content-nav__empty",
+  "aria-live": "polite"
+}, Fe = /* @__PURE__ */ G({
+  name: "ContentNavList",
+  __name: "ContentNavList",
+  props: {
+    items: {},
+    activeId: {},
+    expanded: { type: Boolean },
+    highlightedIndex: {},
+    placement: {},
+    tooltipDelay: {},
+    emptyText: {}
+  },
+  emits: ["select"],
+  setup(e, { emit: a }) {
+    const l = a;
+    return (i, f) => (_(), H("ul", Be, [
+      e.expanded && e.items.length === 0 ? (_(), H("li", De, [
+        L(i.$slots, "empty", {}, () => [
+          Te(te(e.emptyText), 1)
+        ], !0)
+      ])) : re("", !0),
+      (_(!0), H(W, null, ye(e.items, (r, n) => (_(), xe(Re, {
+        key: r.item.id,
+        entry: r,
+        "active-id": e.activeId,
+        expanded: e.expanded,
+        highlighted: n === e.highlightedIndex,
+        placement: e.placement,
+        "tooltip-delay": e.tooltipDelay,
+        onSelect: f[0] || (f[0] = (c) => l("select", c))
+      }, ne({ _: 2 }, [
+        i.$slots.item ? {
+          name: "item",
+          fn: P((c) => [
+            L(i.$slots, "item", ae({ ref_for: !0 }, c), void 0, !0)
+          ]),
+          key: "0"
+        } : void 0,
+        i.$slots.marker ? {
+          name: "marker",
+          fn: P((c) => [
+            L(i.$slots, "marker", ae({ ref_for: !0 }, c), void 0, !0)
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1032, ["entry", "active-id", "expanded", "highlighted", "placement", "tooltip-delay"]))), 128))
+    ]));
+  }
+}), Qe = /* @__PURE__ */ Y(Fe, [["__scopeId", "data-v-1b8c77f5"]]), Pe = {
+  key: 0,
+  class: "tr-content-nav__search-cap"
+}, Ue = { class: "tr-content-nav__surface" }, Ke = /* @__PURE__ */ G({
+  name: "ContentNavOverlay",
+  __name: "ContentNavOverlay",
+  props: {
+    expanded: { type: Boolean },
+    placement: {},
+    floatingOffset: { default: 0 }
+  },
+  setup(e, { expose: a }) {
+    const l = e, i = M(null), f = M(null), r = M(null), n = Se(), c = g(() => [
+      "tr-content-nav",
+      `is-${l.placement}`,
+      {
+        "is-expanded": l.expanded,
+        "has-search-cap": !!n.search
+      }
+    ]), u = g(() => ({
+      transform: `translate3d(0, ${l.floatingOffset}px, 0)`
+    }));
+    return a({
+      hostEl: i,
+      overlayEl: f,
+      navEl: r
+    }), (d, v) => (_(), H("div", {
+      ref_key: "hostEl",
+      ref: i,
+      class: pe(c.value),
+      style: Ne(u.value)
+    }, [
+      D("div", {
+        ref_key: "overlayEl",
+        ref: f,
+        class: "tr-content-nav__overlay",
+        "data-testid": "content-nav-overlay"
+      }, [
+        d.$slots.search ? (_(), H("div", Pe, [
+          L(d.$slots, "search", {}, void 0, !0)
+        ])) : re("", !0),
+        D("div", Ue, [
+          D("nav", {
+            ref_key: "navEl",
+            ref: r,
+            class: "tr-content-nav__panel",
+            "aria-label": "Content navigation"
+          }, [
+            L(d.$slots, "default", {}, void 0, !0)
+          ], 512)
+        ])
+      ], 512)
+    ], 6));
+  }
+}), Ve = /* @__PURE__ */ Y(Ke, [["__scopeId", "data-v-017456fd"]]), qe = ["value", "placeholder", "aria-label"], ze = /* @__PURE__ */ G({
+  name: "ContentNavSearch",
+  __name: "ContentNavSearch",
+  props: {
+    searchQuery: {},
+    searchOptions: {}
+  },
+  emits: ["update:searchQuery"],
+  setup(e, { emit: a }) {
+    const l = e, i = a;
+    return (f, r) => {
+      var n, c;
+      return _(), H("input", {
+        class: "tr-content-nav__search",
+        type: "search",
+        value: l.searchQuery,
+        placeholder: ((n = l.searchOptions) == null ? void 0 : n.placeholder) ?? "Search",
+        "aria-label": ((c = l.searchOptions) == null ? void 0 : c.placeholder) ?? "Search content navigation",
+        "data-testid": "content-nav-search",
+        onInput: r[0] || (r[0] = (u) => i("update:searchQuery", u.target.value))
+      }, null, 40, qe);
+    };
+  }
+}), Ge = /* @__PURE__ */ Y(ze, [["__scopeId", "data-v-5faf8941"]]), We = (e, a) => {
+  const l = a.trim().toLowerCase(), i = (e.searchText || e.label).trim();
+  if (!l)
+    return [{ text: e.label, highlighted: !1 }];
+  const r = e.label.toLowerCase().indexOf(l);
+  return r !== -1 ? [
+    { text: e.label.slice(0, r), highlighted: !1 },
+    { text: e.label.slice(r, r + l.length), highlighted: !0 },
+    { text: e.label.slice(r + l.length), highlighted: !1 }
+  ].filter((n) => n.text.length > 0) : i.toLowerCase().includes(l) ? [{ text: e.label, highlighted: !1 }] : !1;
+};
+function je(e) {
+  var c, u;
+  const { viewport: a, anchors: l } = e;
+  if (!l.length)
+    return;
+  const i = a.scrollHeight - a.clientHeight > 2, f = a.scrollTop + a.clientHeight >= a.scrollHeight - 2;
+  if (i && f)
+    return (c = l[l.length - 1]) == null ? void 0 : c.id;
+  const r = a.top + Math.max(0, e.activeOffset ?? 120);
+  let n = (u = l[0]) == null ? void 0 : u.id;
+  for (const d of l)
+    if (d.el.getBoundingClientRect().top <= r)
+      n = d.id;
+    else
+      break;
+  return n;
+}
+function Ye(e, a) {
+  return !a || a.length === 0 ? [{ text: e.label, highlighted: !1 }] : a;
+}
+function Ze(e) {
+  const a = M(!1), l = M(""), i = M(void 0), f = M(!1), r = g(() => {
+    var t;
+    return (t = e.searchOptions) == null ? void 0 : t.value;
+  }), n = g(() => e.expandTrigger.value === "manual"), c = g(
+    () => n.value ? e.expanded.value ?? !1 : a.value
+  ), u = g(() => {
+    var t;
+    return ((t = e.searchQuery) == null ? void 0 : t.value) ?? l.value;
+  }), d = g(() => {
+    var t;
+    return ((t = r.value) == null ? void 0 : t.matcher) ?? We;
+  }), v = g(() => {
+    const t = u.value.trim();
+    return e.items.value.map((s) => {
+      const m = d.value(s, t), T = Array.isArray(m) && m.length > 0;
+      return t && !T ? null : {
+        item: s,
+        segments: Ye(s, m)
+      };
+    }).filter((s) => s !== null);
+  }), y = g(
+    () => {
+      var t;
+      return (t = v.value.find((s) => s.item.id === e.activeId.value)) == null ? void 0 : t.item.id;
+    }
+  ), N = g(() => {
+    var t;
+    return f.value && i.value && v.value.some((s) => s.item.id === i.value) ? i.value : y.value ?? ((t = v.value[0]) == null ? void 0 : t.item.id);
+  }), C = g(() => {
+    if (!v.value.length)
+      return 0;
+    const t = v.value.findIndex((s) => s.item.id === N.value);
+    return t === -1 ? 0 : t;
+  }), I = g(() => N.value);
+  function k() {
+    f.value = !1, i.value = void 0;
+  }
+  function $(t) {
+    var s, m;
+    n.value || (a.value = t), (s = e.onUpdateExpanded) == null || s.call(e, t), !t && ((m = r.value) != null && m.clearOnCollapse) && u.value && w("");
+  }
+  function w(t) {
+    var s, m;
+    ((s = e.searchQuery) == null ? void 0 : s.value) === void 0 && (l.value = t), (m = e.onUpdateSearchQuery) == null || m.call(e, t);
+  }
+  function S(t) {
+    var m;
+    if (!v.value.length) {
+      k();
+      return;
+    }
+    const s = Math.max(0, Math.min(t, v.value.length - 1));
+    i.value = (m = v.value[s]) == null ? void 0 : m.item.id, f.value = !0;
+  }
+  function p() {
+    var t;
+    return (t = v.value[C.value]) == null ? void 0 : t.item;
+  }
+  function o(t) {
+    return t.key === "ArrowDown" ? (t.preventDefault(), S(C.value + 1), !0) : t.key === "ArrowUp" ? (t.preventDefault(), S(C.value - 1), !0) : t.key === "Home" ? (t.preventDefault(), S(0), !0) : t.key === "End" ? (t.preventDefault(), S(v.value.length - 1), !0) : t.key === "Escape" ? n.value ? !1 : (t.preventDefault(), $(!1), !0) : !1;
+  }
+  return F(
+    v,
+    (t) => {
+      if (!t.length) {
+        k();
+        return;
+      }
+      if (y.value) {
+        k();
+        return;
+      }
+      f.value && i.value && t.some((s) => s.item.id === i.value) || k();
+    },
+    { immediate: !0, flush: "sync" }
+  ), F(
+    () => e.activeId.value,
+    (t) => {
+      t && k();
+    },
+    { immediate: !0, flush: "sync" }
+  ), {
+    expanded: c,
+    searchQuery: u,
+    filteredItems: v,
+    highlightedIndex: C,
+    highlightedId: I,
+    setExpanded: $,
+    setSearchQuery: w,
+    getHighlightedItem: p,
+    handleNavigationKeydown: o
+  };
+}
+function Z(e) {
+  return typeof HTMLElement < "u" && e instanceof HTMLElement;
+}
+function Ie() {
+  return typeof document > "u" ? null : document.scrollingElement ?? document.documentElement ?? document.body ?? null;
+}
+function le(e) {
+  return e || (typeof window < "u" ? window : null);
+}
+function ve(e) {
+  if (!e)
+    return 0;
+  if (Z(e))
+    return e.scrollTop;
+  const a = Ie();
+  return e.scrollY || e.pageYOffset || (a == null ? void 0 : a.scrollTop) || 0;
+}
+function ee(e) {
+  return e ? Z(e) ? e.clientHeight : e.innerHeight : 0;
+}
+function he(e) {
+  if (!e)
+    return 0;
+  if (Z(e))
+    return e.scrollHeight;
+  const a = Ie(), l = typeof document < "u" ? document.documentElement : null, i = typeof document < "u" ? document.body : null;
+  return Math.max((a == null ? void 0 : a.scrollHeight) || 0, (l == null ? void 0 : l.scrollHeight) || 0, (i == null ? void 0 : i.scrollHeight) || 0);
+}
+function me(e) {
+  return e && Z(e) ? e.getBoundingClientRect().top : 0;
+}
+function Je(e, a, l) {
+  e && e.scrollTo({
+    top: a,
+    behavior: l
+  });
+}
+function Xe(e) {
+  var p;
+  const i = M((p = e.activeId) == null ? void 0 : p.value);
+  let f = null, r = null;
+  const n = g(() => {
+    var o;
+    return ((o = e.activeId) == null ? void 0 : o.value) ?? i.value;
+  }), c = Me();
+  function u(o) {
+    var t, s;
+    n.value !== o && (((t = e.activeId) == null ? void 0 : t.value) === void 0 && (i.value = o), (s = e.onUpdateActiveId) == null || s.call(e, o));
+  }
+  function d() {
+    f = null;
+  }
+  function v() {
+    r = null;
+  }
+  function y() {
+    d(), v();
+  }
+  function N(o) {
+    return o instanceof HTMLElement ? o instanceof HTMLInputElement || o instanceof HTMLTextAreaElement || o instanceof HTMLSelectElement || o.isContentEditable : !1;
+  }
+  function C(o) {
+    return [...o].sort((t, s) => {
+      if (t.el === s.el)
+        return 0;
+      const m = t.el.compareDocumentPosition(s.el);
+      return m & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : m & Node.DOCUMENT_POSITION_PRECEDING ? 1 : t.el.getBoundingClientRect().top - s.el.getBoundingClientRect().top;
+    });
+  }
+  function I(o) {
+    const t = Number.parseFloat(window.getComputedStyle(o).scrollMarginTop || "0");
+    return Number.isFinite(t) ? t : 0;
+  }
+  function k() {
+    var Q, K;
+    const o = le(e.container.value);
+    if (!o)
+      return;
+    const t = ve(o), s = me(o), m = s + ee(o), T = s + Math.max(0, ((Q = e.activeOffset) == null ? void 0 : Q.value) ?? 120);
+    if (f) {
+      const b = Math.abs(t - f.top) <= 2, A = Date.now() - f.startedAt > 2e3;
+      if (!b && !A)
+        return;
+      d();
+    }
+    if (r) {
+      const b = e.resolveTarget(r);
+      if (b != null && b.isConnected) {
+        const A = b.getBoundingClientRect(), J = A.bottom <= T, q = A.top >= m;
+        if (!J && !q) {
+          u(r);
+          return;
+        }
+      }
+      r && v();
+    }
+    const x = C(
+      e.items.value.flatMap((b) => {
+        const A = e.resolveTarget(b.id);
+        return A ? [{ id: b.id, el: A }] : [];
+      })
+    ), U = je({
+      viewport: {
+        top: s,
+        scrollTop: t,
+        clientHeight: ee(o),
+        scrollHeight: he(o)
+      },
+      anchors: x,
+      activeOffset: (K = e.activeOffset) == null ? void 0 : K.value
+    });
+    U !== void 0 && u(U);
+  }
+  function $(o) {
+    const t = le(e.container.value), s = e.resolveTarget(o);
+    if (!t || !s)
+      return;
+    const m = ve(t), T = s.getBoundingClientRect(), x = m + T.top - me(t) - I(s), U = Math.max(0, he(t) - ee(t)), Q = Math.max(0, Math.min(x, U));
+    f = {
+      top: Q,
+      startedAt: Date.now()
+    }, r = o, u(o), Je(t, Q, c.value === "reduce" ? "auto" : "smooth");
+  }
+  function w() {
+    y();
+  }
+  function S(o) {
+    var s;
+    if (o.defaultPrevented || o.altKey || o.ctrlKey || o.metaKey)
+      return;
+    const t = (s = e.host) == null ? void 0 : s.value;
+    t && o.target instanceof Node && t.contains(o.target) || N(o.target) || ["ArrowDown", "ArrowUp", "PageDown", "PageUp", "Home", "End", " "].includes(o.key) && y();
+  }
+  return F(
+    () => {
+      var o;
+      return (o = e.activeId) == null ? void 0 : o.value;
+    },
+    (o) => {
+      i.value = o, r && o !== r && v();
+    }
+  ), oe(() => {
+    d(), v();
+  }), {
+    activeId: n,
+    scrollTo: $,
+    sync: k,
+    clearPendingScroll: d,
+    releaseSelectionLock: y,
+    handleUserScrollIntent: w,
+    handleScrollIntentKeydown: S
+  };
+}
+function et(e) {
+  const a = M(0);
+  function l() {
+    const r = e.host.value, n = r == null ? void 0 : r.firstElementChild;
+    if (!(n instanceof HTMLElement))
+      return {
+        hostEl: r ?? null,
+        floatingEl: null,
+        measuredEl: null
+      };
+    const c = n.querySelector(".tr-content-nav__surface") ?? n.querySelector(".tr-content-nav__panel") ?? n;
+    return {
+      hostEl: r ?? null,
+      floatingEl: n,
+      measuredEl: c
+    };
+  }
+  const i = g(() => {
+    const { hostEl: r, floatingEl: n, measuredEl: c } = l(), u = [];
+    return r && u.push(r), n && u.push(n), c && c !== n && u.push(c), u;
+  });
+  function f() {
+    const { hostEl: r, floatingEl: n, measuredEl: c } = l(), u = e.container.value, d = r == null ? void 0 : r.parentElement;
+    if (!r || !u || !d || !n || !c) {
+      a.value = 0;
+      return;
+    }
+    const v = d.getBoundingClientRect(), y = u.getBoundingClientRect(), N = c.getBoundingClientRect().height || 0;
+    if (!y.height || !N) {
+      a.value = 0;
+      return;
+    }
+    const C = y.top - v.top, I = y.bottom - v.top, $ = C + y.height / 2 - N / 2, w = C + 24, S = Math.max(w, I - N - 24);
+    a.value = Math.max(w, Math.min($, S));
+  }
+  return {
+    offset: a,
+    sync: f,
+    resizeTargets: i
+  };
+}
+const tt = "data-content-nav-id", nt = `[${tt}]`, at = "data-item-id", lt = `[${at}]`;
+function Ce(e, a, l, i) {
+  return Array.from(e.querySelectorAll(a)).find((f) => f.dataset[l] === i);
+}
+function ge(e, a) {
+  return Ce(e, nt, "contentNavId", a);
+}
+function rt(e, a) {
+  return Ce(e, lt, "itemId", a);
+}
+function ot(e) {
+  function a(n) {
+    return n instanceof HTMLElement ? n instanceof HTMLInputElement || n instanceof HTMLTextAreaElement || n instanceof HTMLSelectElement || n.isContentEditable : !1;
+  }
+  function l() {
+    ke(() => {
+      var u, d;
+      const n = e.highlightedId.value, c = (u = e.overlay.value) == null ? void 0 : u.navEl;
+      !n || !c || (d = rt(c, n)) == null || d.focus();
+    });
+  }
+  function i(n) {
+    if (a(n.target))
+      return;
+    const c = e.handleNavigationKeydown(n);
+    if (n.key === "Enter" || n.key === " ") {
+      const u = e.getHighlightedItem();
+      if (u) {
+        n.preventDefault(), e.onSelectItem(u.id);
+        return;
+      }
+    }
+    c && l();
+  }
+  function f() {
+    var u;
+    if (!e.shouldAutoCollapse.value)
+      return;
+    const n = ((u = e.overlay.value) == null ? void 0 : u.overlayEl) ?? null, c = document.activeElement;
+    n && c instanceof Node && n.contains(c) || e.setExpanded(!1);
+  }
+  function r(n) {
+    var d;
+    if (!e.shouldAutoCollapse.value)
+      return;
+    const c = n.relatedTarget, u = ((d = e.overlay.value) == null ? void 0 : d.overlayEl) ?? null;
+    (!c || !(u != null && u.contains(c))) && e.setExpanded(!1);
+  }
+  return {
+    handleKeydown: i,
+    handleMouseLeave: f,
+    handleFocusOut: r
+  };
+}
+function it(e) {
+  return (e ?? "").split(/\s+/).map((a) => a.trim()).filter(Boolean);
+}
+function st(e) {
+  let a = null, l = [];
+  function i() {
+    a && l.length && a.classList.remove(...l), a = null, l = [];
+  }
+  const { start: f, stop: r } = Ee(
+    () => {
+      i();
+    },
+    () => Math.max(0, e.feedbackDuration.value ?? 0),
+    { immediate: !1 }
+  );
+  function n() {
+    r(), i();
+  }
+  function c(u) {
+    const d = it(e.feedbackClass.value);
+    if (n(), !d.length)
+      return;
+    const v = e.resolveTarget(u);
+    v && (v.classList.remove(...d), v.offsetWidth, v.classList.add(...d), a = v, l = d, f());
+  }
+  return F(
+    () => e.feedbackClass.value,
+    () => {
+      n();
+    }
+  ), oe(() => {
+    n();
+  }), {
+    activate: c,
+    clear: n
+  };
+}
+const j = /* @__PURE__ */ G({
+  name: "TrContentNav",
+  inheritAttrs: !1,
+  __name: "index",
+  props: {
+    items: {},
+    scrollContainer: {},
+    activeId: {},
+    activeOffset: { default: 120 },
+    expanded: { type: Boolean },
+    searchQuery: {},
+    placement: { default: "right" },
+    expandTrigger: { default: "hover" },
+    searchOptions: {},
+    tooltipDelay: { default: 260 },
+    targetFeedbackClass: {},
+    targetFeedbackDuration: { default: 700 },
+    emptyText: { default: "No matching items" }
+  },
+  emits: ["update:activeId", "update:expanded", "update:searchQuery", "select"],
+  setup(e, { emit: a }) {
+    const l = e, i = a, f = be(), {
+      activeId: r,
+      activeOffset: n,
+      emptyText: c,
+      expandTrigger: u,
+      expanded: d,
+      items: v,
+      placement: y,
+      searchOptions: N,
+      searchQuery: C,
+      scrollContainer: I,
+      targetFeedbackClass: k,
+      targetFeedbackDuration: $,
+      tooltipDelay: w
+    } = _e(l), S = M(null), p = g(() => {
+      var h;
+      return ((h = S.value) == null ? void 0 : h.hostEl) ?? null;
+    }), o = g(() => N.value), t = g(() => o.value ?? {});
+    function s(h) {
+      const O = I.value;
+      return O ? ge(O, h) ?? null : ge(document, h) ?? null;
+    }
+    const m = g(() => v.value), T = Xe({
+      items: m,
+      resolveTarget: s,
+      container: I,
+      host: p,
+      activeId: r,
+      activeOffset: n,
+      onUpdateActiveId: (h) => i("update:activeId", h)
+    }), x = Ze({
+      items: m,
+      activeId: T.activeId,
+      expanded: d,
+      expandTrigger: u,
+      searchQuery: C,
+      searchOptions: N,
+      onUpdateExpanded: (h) => i("update:expanded", h),
+      onUpdateSearchQuery: (h) => i("update:searchQuery", h)
+    }), U = g(() => m.value.length > 0), Q = g(() => !!o.value && x.expanded.value), K = g(() => u.value === "hover"), b = g(() => le(I.value)), A = et({
+      container: I,
+      host: p
+    }), J = st({
+      resolveTarget: s,
+      feedbackClass: k,
+      feedbackDuration: $
+    });
+    function q(h) {
+      x.setExpanded(h);
+    }
+    function ie(h) {
+      x.setSearchQuery(h);
+    }
+    function se(h) {
+      const O = m.value.find((R) => R.id === h);
+      O && (T.scrollTo(h), J.activate(h), B(), i("select", O));
+    }
+    const X = ot({
+      overlay: S,
+      highlightedId: x.highlightedId,
+      shouldAutoCollapse: K,
+      handleNavigationKeydown: x.handleNavigationKeydown,
+      getHighlightedItem: x.getHighlightedItem,
+      onSelectItem: se,
+      setExpanded: q
+    });
+    let V = null;
+    function B() {
+      V !== null && cancelAnimationFrame(V), V = requestAnimationFrame(() => {
+        V = null, T.sync(), A.sync();
+      });
+    }
+    return z(b, "scroll", B, { passive: !0 }), z(b, "wheel", T.handleUserScrollIntent, { passive: !0 }), z(b, "touchmove", T.handleUserScrollIntent, { passive: !0 }), z("keydown", T.handleScrollIntentKeydown), z("resize", B, { passive: !0 }), fe(I, () => {
+      B();
+    }), fe(A.resizeTargets, () => {
+      B();
+    }), F(
+      () => I.value,
+      () => {
+        T.clearPendingScroll(), B();
+      },
+      { immediate: !0 }
+    ), F(
+      () => p.value,
+      () => {
+        B();
+      }
+    ), F(
+      () => m.value.map((h) => h.id).join(","),
+      () => {
+        T.clearPendingScroll(), B();
+      },
+      { immediate: !0 }
+    ), oe(() => {
+      V !== null && cancelAnimationFrame(V), T.clearPendingScroll();
+    }), (h, O) => U.value ? (_(), xe(Ve, ae({
+      key: 0,
+      ref_key: "overlayShellRef",
+      ref: S
+    }, E(f), {
+      expanded: E(x).expanded.value,
+      placement: E(y),
+      "floating-offset": E(A).offset.value,
+      onMouseenter: O[1] || (O[1] = (R) => K.value && q(!0)),
+      onMouseleave: E(X).handleMouseLeave,
+      onFocusin: O[2] || (O[2] = (R) => K.value && q(!0)),
+      onFocusout: E(X).handleFocusOut,
+      onKeydown: E(X).handleKeydown
+    }), ne({
+      default: P(() => [
+        ce(Qe, {
+          items: E(x).filteredItems.value,
+          "active-id": E(T).activeId.value,
+          expanded: E(x).expanded.value,
+          "highlighted-index": E(x).highlightedIndex.value,
+          placement: E(y),
+          "tooltip-delay": E(w),
+          "empty-text": E(c),
+          onSelect: O[0] || (O[0] = (R) => se(R.id))
+        }, ne({ _: 2 }, [
+          h.$slots.marker ? {
+            name: "marker",
+            fn: P((R) => [
+              L(h.$slots, "marker", ue(de(R)))
+            ]),
+            key: "0"
+          } : void 0,
+          h.$slots.item ? {
+            name: "item",
+            fn: P((R) => [
+              L(h.$slots, "item", ue(de(R)))
+            ]),
+            key: "1"
+          } : void 0,
+          h.$slots.empty ? {
+            name: "empty",
+            fn: P(() => [
+              L(h.$slots, "empty")
+            ]),
+            key: "2"
+          } : void 0
+        ]), 1032, ["items", "active-id", "expanded", "highlighted-index", "placement", "tooltip-delay", "empty-text"])
+      ]),
+      _: 2
+    }, [
+      Q.value ? {
+        name: "search",
+        fn: P(() => [
+          L(h.$slots, "search", {
+            searchQuery: E(x).searchQuery.value,
+            setSearchQuery: ie,
+            searchOptions: t.value
+          }, () => [
+            ce(Ge, {
+              "search-query": E(x).searchQuery.value,
+              "search-options": t.value,
+              "onUpdate:searchQuery": ie
+            }, null, 8, ["search-query", "search-options"])
+          ])
+        ]),
+        key: "0"
+      } : void 0
+    ]), 1040, ["expanded", "placement", "floating-offset", "onMouseleave", "onFocusout", "onKeydown"])) : re("", !0);
+  }
+});
+j.name = "TrContentNav";
+const ct = function(e) {
+  e.component(j.name, j);
+};
+j.install = ct;
+export {
+  j as default
+};