@eodash/eodash 5.6.1 → 5.7.1

package/dist/client/index-BWq1ZKaV.js

@@ -0,0 +1,3168 @@
+import { onMounted, onUnmounted, inject, shallowRef, useId, provide, toRaw, computed, onBeforeUnmount, watch, toValue, toRef, onBeforeMount, nextTick, ref, createVNode, normalizeStyle, normalizeClass, withDirectives, createElementVNode, vShow, mergeProps, Fragment, toDisplayString, onDeactivated, withAsyncContext, useTemplateRef, openBlock, createElementBlock, createBlock, withCtx, renderList, createTextVNode, createCommentVNode, unref } from 'vue';
+import { storeToRefs } from 'pinia';
+import { H as useSTAcStore, L as useOnLayersUpdate, M as wrapInArray, z as useProxiedModel, N as getCurrentInstance, O as consoleError, p as propsFactory, g as genericComponent, c as useRender, V as VDefaultsProvider, P as defineComponent, Q as IconValue, m as makeTagProps, e as makeComponentProps, R as createSimpleFunctional, S as Ripple, T as useLink, l as provideTheme, h as useBorder, U as useVariant, W as useDensity, b as useDimension, i as useElevation, k as useRounded, X as makeVariantProps, r as makeThemeProps, Y as makeRouterProps, s as makeRoundedProps, v as makeElevationProps, d as makeDimensionProps, Z as makeDensityProps, w as makeBorderProps, $ as EventProp, a0 as deprecate, q as convertToUnit, a1 as genOverlays, K as VIcon, a2 as useTextColor, f as useBackgroundColor, o as provideDefaults, a3 as focusChild, a4 as isPrimitive, a5 as getPropertyFromItem, C as omit, n as useRtl, a6 as isClickInsideElement, a7 as getNextElement, a8 as focusableChildren, _ as _export_sfc, a9 as VRow, J as VBtn } from './asWebComponent-BlFN2lkB.js';
+import { M as indicator, f as axios, n as mapEl, $ as sanitizeBbox, a0 as tooltipAdapter, K as mapPosition, a1 as mapCompareEl } from './helpers-CBqIUSXJ.js';
+import { b as buildCqlFilter, u as useMosaicState, r as renderLatestMosaic, a as useScheduleMosaicUpdate, c as useInitMosaic } from './mosaic-BFYLEwyx.js';
+import { i as inAndOut } from './easing-CH0-9wR8.js';
+import { mdiViewDashboard } from '@mdi/js';
+import _sfc_main$1 from './EodashLayoutSwitcher-iJ8mX1rF.js';
+import { u as useScopeId, V as VMenuSymbol, f as forwardRefs, m as makeVOverlayProps, a as VOverlay } from './forwardRefs-DAlror6d.js';
+import { V as VDialogTransition } from './dialog-transition-BrMkMiNa.js';
+import { a as VExpandTransition } from './VImg-Ddv5OyMz.js';
+import { u as useSsrBoot } from './ssrBoot-Zgc_Ttvi.js';
+import { M as MaybeTransition } from './transition-D_W6Wn9v.js';
+import { V as VAvatar, a as VDivider } from './VDivider-Bj9LG_JV.js';
+import { V as VTooltip } from './VTooltip-2hAJyEoa.js';
+
+function throttle(fn, delay) {
+  let options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
+    leading: true,
+    trailing: true
+  };
+  let timeoutId = 0;
+  let lastExec = 0;
+  let throttling = false;
+  let start = 0;
+  function clear() {
+    clearTimeout(timeoutId);
+    throttling = false;
+    start = 0;
+  }
+  const wrap = function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    clearTimeout(timeoutId);
+    const now = Date.now();
+    if (!start) start = now;
+    const elapsed = now - Math.max(start, lastExec);
+    function invoke() {
+      lastExec = Date.now();
+      timeoutId = setTimeout(clear, delay);
+      fn(...args);
+    }
+    if (!throttling) {
+      throttling = true;
+      if (options.leading) {
+        invoke();
+      }
+    } else if (elapsed >= delay) {
+      invoke();
+    } else if (options.trailing) {
+      timeoutId = setTimeout(invoke, delay - elapsed);
+    }
+  };
+  wrap.clear = clear;
+  wrap.immediate = fn;
+  return wrap;
+}
+
+/**
+ *
+ * @param {import("../types").FiltersConfig} filtersConfig
+ */
+const createSubtitleProperty = (filtersConfig) => {
+  /**
+   * @param {Record<string, any>} item
+   */ // should be dynamic based on a prop
+  return (item) => {
+    let subtitle = "";
+    filtersConfig.forEach((filter) => {
+      const property = filter.property;
+      if ((!filter.icon && !filter.unitLabel) || !item.properties[property]) {
+        return;
+      }
+      if (filter.icon) {
+        subtitle += filter.icon;
+      }
+
+      let value = item.properties[property];
+      if (typeof value === "number" && !Number.isInteger(value)) {
+        value = value.toFixed(1);
+      }
+
+      subtitle += value;
+
+      if (filter.unitLabel) {
+        subtitle += filter.unitLabel;
+      }
+    });
+    return subtitle;
+  };
+};
+
+/**
+ * @param {Array<{
+ *   property: string,
+ *   type: "range" | "multiselect" | "select",
+ *   title?: string,
+ *   min?: number,
+ *   max?: number,
+ *   step?: number,
+ *   filterKeys?: string[],
+ *   state?: Record<string, boolean>,
+ *   placeholder?: string,
+ *   format?: string,
+ * }>} filtersConfig
+ * @param {boolean} datetimeFilter
+ */
+// Transform simple filter configs into eox-itemfilter format
+const createFilterProperties = (filtersConfig, datetimeFilter) => {
+  const store = useSTAcStore();
+  const customDatetimeConfig = filtersConfig.find(
+    (f) => f.property === "datetime",
+  );
+  const baseFilters = [
+    {
+      key: "collection",
+      title: "Collections",
+      type: "multiselect",
+      placeholder: "Select collections",
+      inline: false,
+      filterKeys:
+        store.stac?.filter((col) => col.id).map((col) => col.id) || [],
+      ...(indicator.value && { state: { [indicator.value]: true } }),
+    },
+    ...(datetimeFilter || customDatetimeConfig
+      ? [
+          {
+            key: "datetime",
+            title: "Date",
+            type: "range",
+            format: "date",
+            ...(customDatetimeConfig || {}),
+          },
+        ]
+      : []),
+  ];
+
+  const dynamicFilters = filtersConfig
+    .filter((f) => f.property !== "datetime")
+    .map((filter) => {
+      const propertyKey = `properties.${filter.property}`;
+
+      if (filter.type === "range") {
+        return {
+          key: propertyKey,
+          title: filter.title || filter.property,
+          type: "range",
+          expanded: true,
+          min: filter.min,
+          max: filter.max,
+          step: filter.step,
+          format: filter.format,
+          filterKeys: [filter.min || 0, filter.max || 100],
+          state: filter.state ?? {
+            min: filter.min ?? 0,
+            max: filter.max ?? 100,
+          },
+        };
+      } else if (filter.type === "multiselect") {
+        return {
+          key: propertyKey,
+          title: filter.title || filter.property,
+          type: "multiselect",
+          placeholder: filter.placeholder || `Select ${filter.property}`,
+          inline: false,
+          filterKeys: filter.filterKeys || [],
+          state: filter.state,
+        };
+      } else if (filter.type === "select") {
+        return {
+          key: propertyKey,
+          title: filter.title || filter.property,
+          type: "select",
+          placeholder:
+            filter.placeholder || `Select ${filter.title || filter.property}`,
+          filterKeys: filter.filterKeys || [],
+          state: filter.state,
+        };
+      }
+
+      return null;
+    })
+    .filter(Boolean);
+
+  return [...baseFilters, ...dynamicFilters];
+};
+
+/**
+ * Build search URL with proper STAC API parameters
+ * @param {import("@/types").ItemFilterFilters} filters
+ * @param {boolean} bboxFilter
+ * @param {boolean} datetimeFilter
+ * @param {Number} searchLimit
+ * @param {string} [sortBy]
+ * @param {string | null} [stacEndpoint]
+ * @returns {string}
+ */
+const buildSearchUrl = (
+  filters,
+  bboxFilter,
+  datetimeFilter,
+  searchLimit,
+  sortBy,
+  stacEndpoint,
+) => {
+  const store = useSTAcStore();
+  const endpoint = stacEndpoint || store.stacEndpoint;
+  const params = new URLSearchParams();
+
+  if (filters.collection?.stringifiedState) {
+    params.append(
+      "collections",
+      filters.collection.stringifiedState.replaceAll(" ", ""),
+    );
+  }
+
+  if (mapEl.value?.lonLatExtent && bboxFilter) {
+    params.append(
+      "bbox",
+      sanitizeBbox([...mapEl.value.lonLatExtent]).join(","),
+    );
+  }
+
+  if (datetimeFilter) {
+    const datetime = formatDatetimeParam(
+      /** @type {import("@/types").ItemFilterRange} */ (filters.datetime),
+    );
+    if (datetime) {
+      params.append("datetime", datetime);
+    }
+  }
+
+  const cqlFilter = buildCqlFilter(filters);
+  if (cqlFilter) {
+    params.append("filter", cqlFilter);
+  }
+  if (sortBy) {
+    params.append("sortby", sortBy);
+  }
+
+  params.append("limit", searchLimit.toString());
+
+  return `${endpoint}/search?${params.toString()}`;
+};
+
+/**
+ *
+ * @param {import("../types").FiltersConfig} propsFilters
+ * @param {boolean} bboxFilter
+ * @param {boolean} datetimeFilter
+ * @param {import("vue").Ref<import("@/types").GeoJsonFeature[]>} currentItems
+ * @param {import("vue").Ref<string>} sortBy
+ * @param {Number} searchLimit
+ * @param {import("vue").Ref<import("stac-ts").StacItem | null>} [selectedItemRef]
+ * @param {import("vue").Ref<string | null> | string | null} [stacEndpoint]
+ */
+const createExternalFilter = (
+  propsFilters,
+  bboxFilter,
+  datetimeFilter,
+  currentItems,
+  sortBy,
+  searchLimit,
+  selectedItemRef,
+  stacEndpoint,
+) => {
+  const hasCustomDatetime = propsFilters.some((f) => f.property === "datetime");
+  const effectiveDatetimeFilter = datetimeFilter || hasCustomDatetime;
+  let controller = new AbortController();
+  /**
+   * @param {Array<any>} _items
+   * @param {Record<string,any>} filters
+   */
+  return (_items, filters) => ({
+    url: buildSearchUrl(
+      filters,
+      bboxFilter,
+      effectiveDatetimeFilter,
+      searchLimit,
+      sortBy.value,
+      typeof stacEndpoint === "object" ? stacEndpoint?.value : stacEndpoint,
+    ),
+    /** @param {string} url */
+    fetchFn: async (url) => {
+      controller.abort();
+      controller = new AbortController();
+      const signal = controller.signal;
+      return await axios
+        .get(url, { signal })
+        .then((res) => {
+          /** @type {import("@/types").GeoJsonFeature[]} */
+          const results = res.data.features;
+          const selected = selectedItemRef?.value;
+          if (selected && !results.some((r) => r.id === selected.id)) {
+            return [selected, ...results];
+          }
+          return results;
+        })
+        .catch((e) => {
+          // return previous items if aborted
+          if (e.name === "AbortError" || e.name === "CanceledError") {
+            return currentItems.value;
+          }
+          console.error(e);
+          return [];
+        });
+    },
+  });
+};
+/**
+ *
+ * @param {import("@/types").ItemFilterRange} datetimeFilter
+ */
+function formatDatetimeParam(datetimeFilter) {
+  if (!datetimeFilter) {
+    return null;
+  }
+  const min = datetimeFilter?.min ? new Date(datetimeFilter.min) : null;
+  const max = datetimeFilter?.max ? new Date(datetimeFilter.max) : null;
+  const start = datetimeFilter.state?.min
+    ? new Date(datetimeFilter.state.min)
+    : null;
+  const end = datetimeFilter.state?.max
+    ? new Date(datetimeFilter.state.max)
+    : null;
+  const includeStart = start && (!min || start > min);
+  const includeEnd = end && (!max || end < max);
+  if (!includeStart && !includeEnd) {
+    return null;
+  }
+  return `${includeStart ? start.toISOString() : ".."}/${includeEnd ? end.toISOString() : ".."}`;
+}
+
+/**
+ * Build a compact signature from filter key + stringified state.
+ * @param {import("@/types").ItemFilterFilters | undefined} filters
+ * @returns {string}
+ */
+const getFiltersSignature = (filters) => {
+  if (!filters) return "";
+  return Object.keys(filters)
+    .sort()
+    .map((key) => `${key}:${filters[key]?.stringifiedState ?? ""}`)
+    .join("|");
+};
+
+/**
+ * @param {{
+ *  currentItems: import("vue").Ref<import("@/types").GeoJsonFeature[]>,
+ *  mapElement: import("vue").Ref<import("@eox/map").EOxMap | null>,
+ *  hoverProperties: string[] | undefined,
+ *  stacItemsStyle?: object,
+ *  stacItemsInteractionStyle?: object,
+ *  itemfilterEl?: import("vue").Ref<any>,
+ *  selectedItemRef?: import("vue").Ref<import("stac-ts").StacItem | null>,
+ *  mosaicOptions?: {
+ *    isMosaicEnabled: import("vue").ComputedRef<boolean>,
+ *    getMosaicEndpoint: () => string | null | undefined,
+ *    scheduleMosaicUpdate: (mosaicEndpoint: string | null | undefined, timeRange?: [string,string], filters?: import("@/types").ItemFilterFilters) => void,
+ *  } | null
+ * }} params
+ */
+const createOnFilterHandler = ({
+  currentItems,
+  mapElement,
+  hoverProperties,
+  stacItemsStyle,
+  stacItemsInteractionStyle,
+  itemfilterEl,
+  selectedItemRef,
+  mosaicOptions = null,
+}) => {
+  let lastScheduledFiltersKey = "";
+
+  /** @param {CustomEvent} evt */
+  return (evt) => {
+    currentItems.value = evt.detail.results;
+    renderItemsFeatures(
+      currentItems.value,
+      mapElement,
+      hoverProperties,
+      stacItemsStyle,
+      stacItemsInteractionStyle,
+    );
+
+    const selected = selectedItemRef?.value;
+    if (selected && itemfilterEl?.value) {
+      itemfilterEl.value.selectedResult = selected;
+    }
+
+    if (mosaicOptions?.isMosaicEnabled.value && !selected) {
+      const nextFiltersKey = getFiltersSignature(evt.detail.filters);
+      if (nextFiltersKey === lastScheduledFiltersKey) {
+        return;
+      }
+
+      lastScheduledFiltersKey = nextFiltersKey;
+      mosaicOptions.scheduleMosaicUpdate(
+        mosaicOptions.getMosaicEndpoint(),
+        undefined,
+        evt.detail.filters,
+      );
+    }
+  };
+};
+/**
+ *
+ * @param {ReturnType<typeof import("@/store/stac.js").useSTAcStore>} store
+ * @param {boolean} enableCompare
+ * @param {import("vue").Ref<import("@eox/map").EOxMap | null>} mapElement
+ * @returns
+ */
+const createOnSelectHandler = (store, enableCompare, mapElement) => {
+  /** @param {CustomEvent} evt */
+  return async (evt) => {
+    const item = /** @type {import("stac-ts").StacItem} */ (evt.detail);
+    if (!item) {
+      return;
+    }
+    if (enableCompare) {
+      if (item.id === store.selectedCompareItem?.id) {
+        store.selectedCompareItem = null;
+        return;
+      }
+      if (store.selectedCompareStac?.id === item.collection) {
+        store.selectedCompareItem = item;
+      } else {
+        await store.loadSelectedCompareSTAC(item.collection, false, item);
+      }
+    } else {
+      if (item.id === store.selectedItem?.id) {
+        store.selectedItem = null;
+        return;
+      }
+      if (store.selectedStac?.id === item.collection) {
+        store.selectedItem = item;
+      } else {
+        await store.loadSelectedSTAC(item.collection, false, item);
+      }
+    }
+
+    mapElement.value?.selectInteractions["stac-items"]?.highlightById(
+      [item.id],
+      {
+        padding: [100, 100, 100, 100],
+        duration: 1200,
+        easing: inAndOut,
+      },
+    );
+  };
+};
+
+/**
+ * @param {import("vue").Ref<import("@eox/map").EOxMap | null>} mapElement
+ */
+const createOnMouseEnterResult = (mapElement) => {
+  /**
+   * @param {CustomEvent} evt
+   */
+  return (evt) => {
+    mapElement.value?.selectInteractions["stac-item-hover"]?.highlightById([
+      evt.detail.id,
+    ]);
+  };
+};
+
+/**
+ * @param {import("vue").Ref<import("@eox/map").EOxMap | null>} mapElement
+ */
+const createOnMouseLeaveResult = (mapElement) => {
+  return () => {
+    mapElement.value?.selectInteractions["stac-item-hover"]?.highlightById([]);
+  };
+};
+
+/**
+ *
+ * @param {import("@/types").GeoJsonFeature[]} features
+ * @param {import("vue").Ref<import("@eox/map").EOxMap | null>} mapElement
+ * @param {string[] | undefined} hoverProperties
+ * @param {object} [stacItemsStyle]
+ * @param {object} [stacItemsInteractionStyle]
+ */
+function renderItemsFeatures(
+  features,
+  mapElement,
+  hoverProperties,
+  stacItemsStyle,
+  stacItemsInteractionStyle,
+) {
+  const currentMap = mapElement.value;
+  let analysisLayers =
+    /** @type {import("@eox/map/src/layers").EOxLayerTypeGroup} */ (
+      currentMap?.layers?.find((l) => l.properties?.id === "AnalysisGroup")
+    );
+  if (!currentMap || !features) {
+    return;
+  }
+  if (!analysisLayers) {
+    analysisLayers = {
+      type: "Group",
+      properties: {
+        id: "AnalysisGroup",
+        title: "Data Layers",
+      },
+      layers: [],
+    };
+    currentMap.layers = [...currentMap.layers, analysisLayers];
+  }
+  /** @type {import("@eox/map/src/layers").EOxLayerType<"Vector","Vector">} */
+  const stacItemsLayer = {
+    type: "Vector",
+    properties: {
+      id: "stac-items",
+      title: "STAC Items",
+    },
+    source: {
+      type: "Vector",
+      //@ts-expect-error todo
+      url:
+        "data:application/geo+json," +
+        encodeURIComponent(
+          JSON.stringify({ type: "FeatureCollection", features }),
+        ),
+      format: "GeoJSON",
+      projection: "EPSG:4326",
+    },
+    style: stacItemsStyle || {
+      "fill-color": "transparent",
+      "stroke-color": "#003170",
+    },
+    interactions: [
+      {
+        type: "select",
+        options: {
+          id: "stac-item-hover",
+          condition: "pointermove",
+          tooltip: hoverProperties?.length,
+          style: stacItemsInteractionStyle || {
+            "stroke-color": "white",
+            "stroke-width": 3,
+          },
+        },
+      },
+      {
+        type: "select",
+        options: {
+          id: "stac-items",
+          condition: "click",
+          tooltip: false,
+          style: stacItemsInteractionStyle || {
+            "stroke-color": "#003047",
+            "stroke-width": 3.2,
+          },
+        },
+      },
+    ],
+  };
+  const exists = analysisLayers.layers.some(
+    (l) => l.properties?.id === stacItemsLayer.properties?.id,
+  );
+  if (exists) {
+    currentMap.addOrUpdateLayer(stacItemsLayer);
+    return;
+  } else {
+    analysisLayers.layers.unshift(stacItemsLayer);
+    currentMap.layers = [...currentMap.layers];
+  }
+}
+
+/**
+ * @param {import("vue").Ref<any>} itemFilter
+ * @param {boolean} bboxFilter
+ * @param {import("vue").Ref<import("@eox/map").EOxMap | null>} mapElement
+ */
+const useSearchOnMapMove = (itemFilter, bboxFilter, mapElement) => {
+  if (!bboxFilter) {
+    return;
+  }
+  /** @type {NodeJS.Timeout} */
+  let timeout;
+  const handler = () => {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => {
+      if (mapElement.value?.projection == "globe") {
+        return;
+      }
+      itemFilter.value?.search();
+    }, 500);
+  };
+  onMounted(() => {
+    mapElement.value?.map.on("moveend", handler);
+  });
+  onUnmounted(() => {
+    mapElement.value?.map.un("moveend", handler);
+  });
+};
+/**
+ *
+ * @param {import("vue").Ref<import("@/types").GeoJsonFeature[]>} currentItems
+ * @param {import("vue").Ref<import("@eox/map").EOxMap | null>} mapElement
+ * @param {string[] | undefined} hoverProperties
+ * @param {object} [stacItemsStyle]
+ * @param {object} [stacItemsInteractionStyle]
+ */
+const useRenderItemsFeatures = (
+  currentItems,
+  mapElement,
+  hoverProperties,
+  stacItemsStyle,
+  stacItemsInteractionStyle,
+) => {
+  onMounted(() => {
+    renderItemsFeatures(
+      currentItems.value,
+      mapElement,
+      hoverProperties,
+      stacItemsStyle,
+      stacItemsInteractionStyle,
+    );
+  });
+
+  useOnLayersUpdate(() => {
+    // consider cases where this is not needed
+    renderItemsFeatures(
+      currentItems.value,
+      mapElement,
+      hoverProperties,
+      stacItemsStyle,
+      stacItemsInteractionStyle,
+    );
+  });
+};
+/**
+ * Registers a tooltip adapter that displays item properties when hovering over map features.
+ * @param {string[]} [hoverProperties]
+ */
+function useHoverTooltip(hoverProperties) {
+  /**
+   * @param {*} val
+   */
+  const formatValue = (val) => {
+    if (typeof val === "number") {
+      return val.toFixed(0);
+    }
+
+    if (typeof val === "string") {
+      // Attempt to parse as date if string looks like ISO date
+      if (val.length > 9 && /\d{4}-\d{2}-\d{2}/.test(val)) {
+        const timestamp = Date.parse(val);
+        if (!isNaN(timestamp)) {
+          return new Date(timestamp).toUTCString();
+        }
+      }
+    }
+    return val;
+  };
+  /**
+   * @param {string} key
+   */
+  const formatKey = (key) => {
+    let formattedKey = key;
+    if (key.includes(":")) {
+      formattedKey = key.split(":")[1];
+    }
+    return formattedKey
+      .replace(/_/g, " ")
+      .replace(/\b\w/g, (c) => c.toUpperCase());
+  };
+  onMounted(() => {
+    tooltipAdapter.value = ({ key, value }) => {
+      if (hoverProperties && hoverProperties.includes(key)) {
+        return { key: formatKey(key), value: formatValue(value) };
+      }
+      return undefined;
+    };
+  });
+  onUnmounted(() => {
+    tooltipAdapter.value = null;
+  });
+}
+
+/**
+ *
+ * @param {import("vue").Ref<any>} itemfilterEl
+ * @param {ReturnType< typeof import("@/store/stac").useSTAcStore>} store
+ * @param {import("vue").Ref<import("@eox/map").EOxMap | null>} mapElement
+ * @param {boolean} enableCompare
+ */
+function useRenderOnFeatureClick(
+  itemfilterEl,
+  store,
+  mapElement,
+  enableCompare,
+) {
+  const onSelectItem = createOnSelectHandler(store, enableCompare, mapElement);
+  /**
+   *
+   * @param {CustomEvent} evt
+   */
+  const handler = (evt) => {
+    if (evt.detail.originalEvent.type !== "click") {
+      return;
+    }
+    const itemId = evt.detail?.feature?.getId();
+    if (!itemId) {
+      return;
+    }
+    const item = itemfilterEl.value.results?.find(
+      //@ts-expect-error todo
+      (r) => r?.id === itemId,
+    );
+
+    if (item) {
+      onSelectItem(new CustomEvent("select", { detail: item }));
+    }
+  };
+
+  onMounted(() => {
+    //@ts-expect-error todo
+    mapElement.value?.addEventListener("select", handler);
+  });
+  onUnmounted(() => {
+    //@ts-expect-error todo
+    mapElement.value?.removeEventListener("select", handler);
+  });
+}
+
+const _style_0 = ".itemfilter-scroll[data-v-5a4d8ea3]{flex:1;min-height:0;overflow:hidden;padding:.5rem;--eox-itemfilter-results-color: var(--v-theme-primary) !important}.title[data-v-5a4d8ea3]{padding:1em;margin:.2em;flex-shrink:0}";
+
+// Utilities
+
+// List
+const ListKey = Symbol.for('vuetify:list');
+function createList() {
+  let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+    filterable: false
+  };
+  const parent = inject(ListKey, {
+    filterable: false,
+    hasPrepend: shallowRef(false),
+    updateHasPrepend: () => null,
+    trackingIndex: shallowRef(-1),
+    navigationStrategy: shallowRef('focus'),
+    uid: ''
+  });
+  const {
+    filterable,
+    trackingIndex = parent.trackingIndex,
+    navigationStrategy = parent.navigationStrategy,
+    uid = parent.uid || useId()
+  } = options;
+  const data = {
+    filterable: parent.filterable || filterable,
+    hasPrepend: shallowRef(false),
+    updateHasPrepend: value => {
+      if (value) data.hasPrepend.value = value;
+    },
+    trackingIndex,
+    navigationStrategy,
+    uid
+  };
+  provide(ListKey, data);
+  return parent;
+}
+function useList() {
+  return inject(ListKey, null);
+}
+
+/* eslint-disable sonarjs/no-identical-functions */
+// Utilities
+const independentActiveStrategy = mandatory => {
+  const strategy = {
+    activate: _ref => {
+      let {
+        id,
+        value,
+        activated
+      } = _ref;
+      id = toRaw(id);
+
+      // When mandatory and we're trying to deselect when id
+      // is the only currently selected item then do nothing
+      if (mandatory && !value && activated.size === 1 && activated.has(id)) return activated;
+      if (value) {
+        activated.add(id);
+      } else {
+        activated.delete(id);
+      }
+      return activated;
+    },
+    in: (v, children, parents) => {
+      let set = new Set();
+      if (v != null) {
+        for (const id of wrapInArray(v)) {
+          set = strategy.activate({
+            id,
+            value: true,
+            activated: new Set(set),
+            children,
+            parents
+          });
+        }
+      }
+      return set;
+    },
+    out: v => {
+      return Array.from(v);
+    }
+  };
+  return strategy;
+};
+const independentSingleActiveStrategy = mandatory => {
+  const parentStrategy = independentActiveStrategy(mandatory);
+  const strategy = {
+    activate: _ref2 => {
+      let {
+        activated,
+        id,
+        ...rest
+      } = _ref2;
+      id = toRaw(id);
+      const singleSelected = activated.has(id) ? new Set([id]) : new Set();
+      return parentStrategy.activate({
+        ...rest,
+        id,
+        activated: singleSelected
+      });
+    },
+    in: (v, children, parents) => {
+      let set = new Set();
+      if (v != null) {
+        const arr = wrapInArray(v);
+        if (arr.length) {
+          set = parentStrategy.in(arr.slice(0, 1), children, parents);
+        }
+      }
+      return set;
+    },
+    out: (v, children, parents) => {
+      return parentStrategy.out(v, children, parents);
+    }
+  };
+  return strategy;
+};
+const leafActiveStrategy = mandatory => {
+  const parentStrategy = independentActiveStrategy(mandatory);
+  const strategy = {
+    activate: _ref3 => {
+      let {
+        id,
+        activated,
+        children,
+        ...rest
+      } = _ref3;
+      id = toRaw(id);
+      if (children.has(id)) return activated;
+      return parentStrategy.activate({
+        id,
+        activated,
+        children,
+        ...rest
+      });
+    },
+    in: parentStrategy.in,
+    out: parentStrategy.out
+  };
+  return strategy;
+};
+const leafSingleActiveStrategy = mandatory => {
+  const parentStrategy = independentSingleActiveStrategy(mandatory);
+  const strategy = {
+    activate: _ref4 => {
+      let {
+        id,
+        activated,
+        children,
+        ...rest
+      } = _ref4;
+      id = toRaw(id);
+      if (children.has(id)) return activated;
+      return parentStrategy.activate({
+        id,
+        activated,
+        children,
+        ...rest
+      });
+    },
+    in: parentStrategy.in,
+    out: parentStrategy.out
+  };
+  return strategy;
+};
+
+const singleOpenStrategy = {
+  open: _ref => {
+    let {
+      id,
+      value,
+      opened,
+      parents
+    } = _ref;
+    if (value) {
+      const newOpened = new Set();
+      newOpened.add(id);
+      let parent = parents.get(id);
+      while (parent != null) {
+        newOpened.add(parent);
+        parent = parents.get(parent);
+      }
+      return newOpened;
+    } else {
+      opened.delete(id);
+      return opened;
+    }
+  },
+  select: () => null
+};
+const multipleOpenStrategy = {
+  open: _ref2 => {
+    let {
+      id,
+      value,
+      opened,
+      parents
+    } = _ref2;
+    if (value) {
+      let parent = parents.get(id);
+      opened.add(id);
+      while (parent != null && parent !== id) {
+        opened.add(parent);
+        parent = parents.get(parent);
+      }
+      return opened;
+    } else {
+      opened.delete(id);
+    }
+    return opened;
+  },
+  select: () => null
+};
+const listOpenStrategy = {
+  open: multipleOpenStrategy.open,
+  select: _ref3 => {
+    let {
+      id,
+      value,
+      opened,
+      parents
+    } = _ref3;
+    if (!value) return opened;
+    const path = [];
+    let parent = parents.get(id);
+    while (parent != null) {
+      path.push(parent);
+      parent = parents.get(parent);
+    }
+    return new Set(path);
+  }
+};
+
+/* eslint-disable sonarjs/no-identical-functions */
+// Utilities
+const independentSelectStrategy = mandatory => {
+  const strategy = {
+    select: _ref => {
+      let {
+        id,
+        value,
+        selected
+      } = _ref;
+      id = toRaw(id);
+
+      // When mandatory and we're trying to deselect when id
+      // is the only currently selected item then do nothing
+      if (mandatory && !value) {
+        const on = Array.from(selected.entries()).reduce((arr, _ref2) => {
+          let [key, value] = _ref2;
+          if (value === 'on') arr.push(key);
+          return arr;
+        }, []);
+        if (on.length === 1 && on[0] === id) return selected;
+      }
+      selected.set(id, value ? 'on' : 'off');
+      return selected;
+    },
+    in: (v, children, parents, disabled) => {
+      const map = new Map();
+      for (const id of v || []) {
+        strategy.select({
+          id,
+          value: true,
+          selected: map,
+          children,
+          parents,
+          disabled
+        });
+      }
+      return map;
+    },
+    out: v => {
+      const arr = [];
+      for (const [key, value] of v.entries()) {
+        if (value === 'on') arr.push(key);
+      }
+      return arr;
+    }
+  };
+  return strategy;
+};
+const independentSingleSelectStrategy = mandatory => {
+  const parentStrategy = independentSelectStrategy(mandatory);
+  const strategy = {
+    select: _ref3 => {
+      let {
+        selected,
+        id,
+        ...rest
+      } = _ref3;
+      id = toRaw(id);
+      const singleSelected = selected.has(id) ? new Map([[id, selected.get(id)]]) : new Map();
+      return parentStrategy.select({
+        ...rest,
+        id,
+        selected: singleSelected
+      });
+    },
+    in: (v, children, parents, disabled) => {
+      if (v?.length) {
+        return parentStrategy.in(v.slice(0, 1), children, parents, disabled);
+      }
+      return new Map();
+    },
+    out: (v, children, parents) => {
+      return parentStrategy.out(v, children, parents);
+    }
+  };
+  return strategy;
+};
+const leafSelectStrategy = mandatory => {
+  const parentStrategy = independentSelectStrategy(mandatory);
+  const strategy = {
+    select: _ref4 => {
+      let {
+        id,
+        selected,
+        children,
+        ...rest
+      } = _ref4;
+      id = toRaw(id);
+      if (children.has(id)) return selected;
+      return parentStrategy.select({
+        id,
+        selected,
+        children,
+        ...rest
+      });
+    },
+    in: parentStrategy.in,
+    out: parentStrategy.out
+  };
+  return strategy;
+};
+const leafSingleSelectStrategy = mandatory => {
+  const parentStrategy = independentSingleSelectStrategy(mandatory);
+  const strategy = {
+    select: _ref5 => {
+      let {
+        id,
+        selected,
+        children,
+        ...rest
+      } = _ref5;
+      id = toRaw(id);
+      if (children.has(id)) return selected;
+      return parentStrategy.select({
+        id,
+        selected,
+        children,
+        ...rest
+      });
+    },
+    in: parentStrategy.in,
+    out: parentStrategy.out
+  };
+  return strategy;
+};
+const classicSelectStrategy = mandatory => {
+  const strategy = {
+    select: _ref6 => {
+      let {
+        id,
+        value,
+        selected,
+        children,
+        parents,
+        disabled
+      } = _ref6;
+      id = toRaw(id);
+      const original = new Map(selected);
+      const items = [id];
+      while (items.length) {
+        const item = items.shift();
+        if (!disabled.has(item)) {
+          selected.set(toRaw(item), value ? 'on' : 'off');
+        }
+        if (children.has(item)) {
+          items.push(...children.get(item));
+        }
+      }
+      let parent = toRaw(parents.get(id));
+      while (parent) {
+        let everySelected = true;
+        let noneSelected = true;
+        for (const child of children.get(parent)) {
+          const cid = toRaw(child);
+          if (disabled.has(cid)) continue;
+          if (selected.get(cid) !== 'on') everySelected = false;
+          if (selected.has(cid) && selected.get(cid) !== 'off') noneSelected = false;
+          if (!everySelected && !noneSelected) break;
+        }
+        selected.set(parent, everySelected ? 'on' : noneSelected ? 'off' : 'indeterminate');
+        parent = toRaw(parents.get(parent));
+      }
+
+      // If mandatory and planned deselect results in no selected
+      // items then we can't do it, so return original state
+      if (mandatory && !value) {
+        const on = Array.from(selected.entries()).reduce((arr, _ref7) => {
+          let [key, value] = _ref7;
+          if (value === 'on') arr.push(key);
+          return arr;
+        }, []);
+        if (on.length === 0) return original;
+      }
+      return selected;
+    },
+    in: (v, children, parents) => {
+      let map = new Map();
+      for (const id of v || []) {
+        map = strategy.select({
+          id,
+          value: true,
+          selected: map,
+          children,
+          parents,
+          disabled: new Set()
+        });
+      }
+      return map;
+    },
+    out: (v, children) => {
+      const arr = [];
+      for (const [key, value] of v.entries()) {
+        if (value === 'on' && !children.has(key)) arr.push(key);
+      }
+      return arr;
+    }
+  };
+  return strategy;
+};
+const trunkSelectStrategy = mandatory => {
+  const parentStrategy = classicSelectStrategy(mandatory);
+  const strategy = {
+    select: parentStrategy.select,
+    in: parentStrategy.in,
+    out: (v, children, parents) => {
+      const arr = [];
+      for (const [key, value] of v.entries()) {
+        if (value === 'on') {
+          if (parents.has(key)) {
+            const parent = parents.get(key);
+            if (v.get(parent) === 'on') continue;
+          }
+          arr.push(key);
+        }
+      }
+      return arr;
+    }
+  };
+  return strategy;
+};
+const branchSelectStrategy = mandatory => {
+  const parentStrategy = classicSelectStrategy(mandatory);
+  const strategy = {
+    select: parentStrategy.select,
+    in: (v, children, parents, disabled) => {
+      let map = new Map();
+      for (const id of v || []) {
+        if (children.has(id)) continue;
+        map = strategy.select({
+          id,
+          value: true,
+          selected: map,
+          children,
+          parents,
+          disabled
+        });
+      }
+      return map;
+    },
+    out: v => {
+      const arr = [];
+      for (const [key, value] of v.entries()) {
+        if (value === 'on' || value === 'indeterminate') {
+          arr.push(key);
+        }
+      }
+      return arr;
+    }
+  };
+  return strategy;
+};
+
+// Composables
+const VNestedSymbol = Symbol.for('vuetify:nested');
+const emptyNested = {
+  id: shallowRef(),
+  root: {
+    itemsRegistration: ref('render'),
+    register: () => null,
+    unregister: () => null,
+    updateDisabled: () => null,
+    children: ref(new Map()),
+    parents: ref(new Map()),
+    disabled: ref(new Set()),
+    open: () => null,
+    openOnSelect: () => null,
+    activate: () => null,
+    select: () => null,
+    activatable: ref(false),
+    scrollToActive: ref(false),
+    selectable: ref(false),
+    opened: ref(new Set()),
+    activated: ref(new Set()),
+    selected: ref(new Map()),
+    selectedValues: ref([]),
+    getPath: () => []
+  }
+};
+const makeNestedProps = propsFactory({
+  activatable: Boolean,
+  selectable: Boolean,
+  activeStrategy: [String, Function, Object],
+  selectStrategy: [String, Function, Object],
+  openStrategy: [String, Object],
+  opened: null,
+  activated: null,
+  selected: null,
+  mandatory: Boolean,
+  itemsRegistration: {
+    type: String,
+    default: 'render'
+  }
+}, 'nested');
+const useNested = (props, _ref) => {
+  let {
+    items,
+    returnObject,
+    scrollToActive
+  } = _ref;
+  let isUnmounted = false;
+  const children = shallowRef(new Map());
+  const parents = shallowRef(new Map());
+  const disabled = shallowRef(new Set());
+  const opened = useProxiedModel(props, 'opened', props.opened, v => new Set(Array.isArray(v) ? v.map(i => toRaw(i)) : v), v => [...v.values()]);
+  const activeStrategy = computed(() => {
+    if (typeof props.activeStrategy === 'object') return props.activeStrategy;
+    if (typeof props.activeStrategy === 'function') return props.activeStrategy(props.mandatory);
+    switch (props.activeStrategy) {
+      case 'leaf':
+        return leafActiveStrategy(props.mandatory);
+      case 'single-leaf':
+        return leafSingleActiveStrategy(props.mandatory);
+      case 'independent':
+        return independentActiveStrategy(props.mandatory);
+      case 'single-independent':
+      default:
+        return independentSingleActiveStrategy(props.mandatory);
+    }
+  });
+  const selectStrategy = computed(() => {
+    if (typeof props.selectStrategy === 'object') return props.selectStrategy;
+    if (typeof props.selectStrategy === 'function') return props.selectStrategy(props.mandatory);
+    switch (props.selectStrategy) {
+      case 'single-leaf':
+        return leafSingleSelectStrategy(props.mandatory);
+      case 'leaf':
+        return leafSelectStrategy(props.mandatory);
+      case 'independent':
+        return independentSelectStrategy(props.mandatory);
+      case 'single-independent':
+        return independentSingleSelectStrategy(props.mandatory);
+      case 'trunk':
+        return trunkSelectStrategy(props.mandatory);
+      case 'branch':
+        return branchSelectStrategy(props.mandatory);
+      case 'classic':
+      default:
+        return classicSelectStrategy(props.mandatory);
+    }
+  });
+  const openStrategy = computed(() => {
+    if (typeof props.openStrategy === 'object') return props.openStrategy;
+    switch (props.openStrategy) {
+      case 'list':
+        return listOpenStrategy;
+      case 'single':
+        return singleOpenStrategy;
+      case 'multiple':
+      default:
+        return multipleOpenStrategy;
+    }
+  });
+  const activated = useProxiedModel(props, 'activated', props.activated, v => activeStrategy.value.in(v, children.value, parents.value), v => activeStrategy.value.out(v, children.value, parents.value));
+  const selected = useProxiedModel(props, 'selected', props.selected, v => selectStrategy.value.in(v, children.value, parents.value, disabled.value), v => selectStrategy.value.out(v, children.value, parents.value));
+  onBeforeUnmount(() => {
+    isUnmounted = true;
+  });
+  function getPath(id) {
+    const path = [];
+    let parent = toRaw(id);
+    while (parent !== undefined) {
+      path.unshift(parent);
+      parent = parents.value.get(parent);
+    }
+    return path;
+  }
+  const vm = getCurrentInstance('nested');
+  const nodeIds = new Set();
+  const itemsUpdatePropagation = throttle(() => {
+    nextTick(() => {
+      children.value = new Map(children.value);
+      parents.value = new Map(parents.value);
+    });
+  }, 100);
+  watch(() => [items.value, toValue(returnObject)], () => {
+    if (props.itemsRegistration === 'props') {
+      updateInternalMaps();
+    }
+  }, {
+    immediate: true
+  });
+  function updateInternalMaps() {
+    const _parents = new Map();
+    const _children = new Map();
+    const _disabled = new Set();
+    const getValue = toValue(returnObject) ? item => toRaw(item.raw) : item => item.value;
+    const stack = [...items.value];
+    let i = 0;
+    while (i < stack.length) {
+      const item = stack[i++];
+      const itemValue = getValue(item);
+      if (item.children) {
+        const childValues = [];
+        for (const child of item.children) {
+          const childValue = getValue(child);
+          _parents.set(childValue, itemValue);
+          childValues.push(childValue);
+          stack.push(child);
+        }
+        _children.set(itemValue, childValues);
+      }
+      if (item.props.disabled) {
+        _disabled.add(itemValue);
+      }
+    }
+    children.value = _children;
+    parents.value = _parents;
+    disabled.value = _disabled;
+  }
+  const nested = {
+    id: shallowRef(),
+    root: {
+      opened,
+      activatable: toRef(() => props.activatable),
+      scrollToActive: toRef(() => toValue(scrollToActive)),
+      selectable: toRef(() => props.selectable),
+      activated,
+      selected,
+      selectedValues: computed(() => {
+        const arr = [];
+        for (const [key, value] of selected.value.entries()) {
+          if (value === 'on') arr.push(key);
+        }
+        return arr;
+      }),
+      itemsRegistration: toRef(() => props.itemsRegistration),
+      register: (id, parentId, isDisabled, isGroup) => {
+        if (nodeIds.has(id)) {
+          const path = getPath(id).map(String).join(' -> ');
+          const newPath = getPath(parentId).concat(id).map(String).join(' -> ');
+          consoleError(`Multiple nodes with the same ID\n\t${path}\n\t${newPath}`);
+          return;
+        } else {
+          nodeIds.add(id);
+        }
+        parentId && id !== parentId && parents.value.set(id, parentId);
+        isDisabled && disabled.value.add(id);
+        isGroup && children.value.set(id, []);
+        if (parentId != null) {
+          children.value.set(parentId, [...(children.value.get(parentId) || []), id]);
+        }
+        itemsUpdatePropagation();
+      },
+      unregister: id => {
+        if (isUnmounted) return;
+        nodeIds.delete(id);
+        children.value.delete(id);
+        disabled.value.delete(id);
+        const parent = parents.value.get(id);
+        if (parent) {
+          const list = children.value.get(parent) ?? [];
+          children.value.set(parent, list.filter(child => child !== id));
+        }
+        parents.value.delete(id);
+        itemsUpdatePropagation();
+      },
+      updateDisabled: (id, isDisabled) => {
+        if (isDisabled) {
+          disabled.value.add(id);
+        } else {
+          disabled.value.delete(id);
+        }
+        // classic selection requires refresh to re-evaluate on/off/indeterminate but
+        // currently it is only run for selection interactions, so it will set new disabled
+        // to "off" and the visual state becomes out of sync
+        // -- selected.value = new Map(selected.value)
+        // it is not clear if the framework should un-select when disabled changed to true
+        // more discussion is needed
+      },
+      open: (id, value, event) => {
+        vm.emit('click:open', {
+          id,
+          value,
+          path: getPath(id),
+          event
+        });
+        const newOpened = openStrategy.value.open({
+          id,
+          value,
+          opened: new Set(opened.value),
+          children: children.value,
+          parents: parents.value,
+          event
+        });
+        newOpened && (opened.value = newOpened);
+      },
+      openOnSelect: (id, value, event) => {
+        const newOpened = openStrategy.value.select({
+          id,
+          value,
+          selected: new Map(selected.value),
+          opened: new Set(opened.value),
+          children: children.value,
+          parents: parents.value,
+          event
+        });
+        newOpened && (opened.value = newOpened);
+      },
+      select: (id, value, event) => {
+        vm.emit('click:select', {
+          id,
+          value,
+          path: getPath(id),
+          event
+        });
+        const newSelected = selectStrategy.value.select({
+          id,
+          value,
+          selected: new Map(selected.value),
+          children: children.value,
+          parents: parents.value,
+          disabled: disabled.value,
+          event
+        });
+        newSelected && (selected.value = newSelected);
+        nested.root.openOnSelect(id, value, event);
+      },
+      activate: (id, value, event) => {
+        if (!props.activatable) {
+          return nested.root.select(id, true, event);
+        }
+        vm.emit('click:activate', {
+          id,
+          value,
+          path: getPath(id),
+          event
+        });
+        const newActivated = activeStrategy.value.activate({
+          id,
+          value,
+          activated: new Set(activated.value),
+          children: children.value,
+          parents: parents.value,
+          event
+        });
+        if (newActivated.size !== activated.value.size) {
+          activated.value = newActivated;
+        } else {
+          for (const value of newActivated) {
+            if (!activated.value.has(value)) {
+              activated.value = newActivated;
+              return;
+            }
+          }
+          for (const value of activated.value) {
+            if (!newActivated.has(value)) {
+              activated.value = newActivated;
+              return;
+            }
+          }
+        }
+      },
+      children,
+      parents,
+      disabled,
+      getPath
+    }
+  };
+  provide(VNestedSymbol, nested);
+  return nested.root;
+};
+const useNestedItem = (id, isDisabled, isGroup) => {
+  const parent = inject(VNestedSymbol, emptyNested);
+  const uidSymbol = Symbol('nested item');
+  const computedId = computed(() => {
+    const idValue = toRaw(toValue(id));
+    return idValue !== undefined ? idValue : uidSymbol;
+  });
+  const item = {
+    ...parent,
+    id: computedId,
+    open: (open, e) => parent.root.open(computedId.value, open, e),
+    openOnSelect: (open, e) => parent.root.openOnSelect(computedId.value, open, e),
+    isOpen: computed(() => parent.root.opened.value.has(computedId.value)),
+    parent: computed(() => parent.root.parents.value.get(computedId.value)),
+    activate: (activated, e) => parent.root.activate(computedId.value, activated, e),
+    isActivated: computed(() => parent.root.activated.value.has(computedId.value)),
+    scrollToActive: parent.root.scrollToActive,
+    select: (selected, e) => parent.root.select(computedId.value, selected, e),
+    isSelected: computed(() => parent.root.selected.value.get(computedId.value) === 'on'),
+    isIndeterminate: computed(() => parent.root.selected.value.get(computedId.value) === 'indeterminate'),
+    isLeaf: computed(() => !parent.root.children.value.get(computedId.value)),
+    isGroupActivator: parent.isGroupActivator
+  };
+  onBeforeMount(() => {
+    if (parent.isGroupActivator || parent.root.itemsRegistration.value === 'props') return;
+    nextTick(() => {
+      parent.root.register(computedId.value, parent.id.value, toValue(isDisabled), isGroup);
+    });
+  });
+  onBeforeUnmount(() => {
+    if (parent.isGroupActivator || parent.root.itemsRegistration.value === 'props') return;
+    parent.root.unregister(computedId.value);
+  });
+  watch(computedId, (val, oldVal) => {
+    if (parent.isGroupActivator || parent.root.itemsRegistration.value === 'props') return;
+    parent.root.unregister(oldVal);
+    nextTick(() => {
+      parent.root.register(val, parent.id.value, toValue(isDisabled), isGroup);
+    });
+  });
+  watch(() => toValue(isDisabled), val => {
+    parent.root.updateDisabled(computedId.value, val);
+  });
+  isGroup && provide(VNestedSymbol, item);
+  return item;
+};
+const useNestedGroupActivator = () => {
+  const parent = inject(VNestedSymbol, emptyNested);
+  provide(VNestedSymbol, {
+    ...parent,
+    isGroupActivator: true
+  });
+};
+
+const VListGroupActivator = defineComponent({
+  name: 'VListGroupActivator',
+  setup(_, _ref) {
+    let {
+      slots
+    } = _ref;
+    useNestedGroupActivator();
+    return () => slots.default?.();
+  }
+});
+const makeVListGroupProps = propsFactory({
+  /* @deprecated */
+  activeColor: String,
+  baseColor: String,
+  color: String,
+  collapseIcon: {
+    type: IconValue,
+    default: '$collapse'
+  },
+  disabled: Boolean,
+  expandIcon: {
+    type: IconValue,
+    default: '$expand'
+  },
+  rawId: [String, Number],
+  prependIcon: IconValue,
+  appendIcon: IconValue,
+  fluid: Boolean,
+  subgroup: Boolean,
+  title: String,
+  value: null,
+  ...makeComponentProps(),
+  ...makeTagProps()
+}, 'VListGroup');
+const VListGroup = genericComponent()({
+  name: 'VListGroup',
+  props: makeVListGroupProps(),
+  setup(props, _ref2) {
+    let {
+      slots
+    } = _ref2;
+    const {
+      isOpen,
+      open,
+      id: _id
+    } = useNestedItem(() => props.value, () => props.disabled, true);
+    const id = computed(() => `v-list-group--id-${String(props.rawId ?? _id.value)}`);
+    const list = useList();
+    const {
+      isBooted
+    } = useSsrBoot();
+    const parent = inject(VNestedSymbol);
+    const renderWhenClosed = toRef(() => parent?.root?.itemsRegistration.value === 'render');
+    function onClick(e) {
+      if (['INPUT', 'TEXTAREA'].includes(e.target?.tagName)) return;
+      open(!isOpen.value, e);
+    }
+    const activatorProps = computed(() => ({
+      onClick,
+      class: 'v-list-group__header',
+      id: id.value
+    }));
+    const toggleIcon = computed(() => isOpen.value ? props.collapseIcon : props.expandIcon);
+    const activatorDefaults = computed(() => ({
+      VListItem: {
+        activeColor: props.activeColor,
+        baseColor: props.baseColor,
+        color: props.color,
+        prependIcon: props.prependIcon || props.subgroup && toggleIcon.value,
+        appendIcon: props.appendIcon || !props.subgroup && toggleIcon.value,
+        title: props.title,
+        value: props.value
+      }
+    }));
+    useRender(() => createVNode(props.tag, {
+      "class": normalizeClass(['v-list-group', {
+        'v-list-group--prepend': list?.hasPrepend.value,
+        'v-list-group--fluid': props.fluid,
+        'v-list-group--subgroup': props.subgroup,
+        'v-list-group--open': isOpen.value
+      }, props.class]),
+      "style": normalizeStyle(props.style)
+    }, {
+      default: () => [slots.activator && createVNode(VDefaultsProvider, {
+        "defaults": activatorDefaults.value
+      }, {
+        default: () => [createVNode(VListGroupActivator, null, {
+          default: () => [slots.activator({
+            props: activatorProps.value,
+            isOpen: isOpen.value
+          })]
+        })]
+      }), createVNode(MaybeTransition, {
+        "transition": {
+          component: VExpandTransition
+        },
+        "disabled": !isBooted.value
+      }, {
+        default: () => [renderWhenClosed.value ? withDirectives(createElementVNode("div", {
+          "class": "v-list-group__items",
+          "role": "group",
+          "aria-labelledby": id.value
+        }, [slots.default?.()]), [[vShow, isOpen.value]]) : isOpen.value && createElementVNode("div", {
+          "class": "v-list-group__items",
+          "role": "group",
+          "aria-labelledby": id.value
+        }, [slots.default?.()])]
+      })]
+    }));
+    return {
+      isOpen
+    };
+  }
+});
+
+const makeVListItemSubtitleProps = propsFactory({
+  opacity: [Number, String],
+  ...makeComponentProps(),
+  ...makeTagProps()
+}, 'VListItemSubtitle');
+const VListItemSubtitle = genericComponent()({
+  name: 'VListItemSubtitle',
+  props: makeVListItemSubtitleProps(),
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    useRender(() => createVNode(props.tag, {
+      "class": normalizeClass(['v-list-item-subtitle', props.class]),
+      "style": normalizeStyle([{
+        '--v-list-item-subtitle-opacity': props.opacity
+      }, props.style])
+    }, slots));
+    return {};
+  }
+});
+
+// Utilities
+const VListItemTitle = createSimpleFunctional('v-list-item-title');
+
+const makeVListItemProps = propsFactory({
+  active: {
+    type: Boolean,
+    default: undefined
+  },
+  activeClass: String,
+  /* @deprecated */
+  activeColor: String,
+  appendAvatar: String,
+  appendIcon: IconValue,
+  baseColor: String,
+  disabled: Boolean,
+  lines: [Boolean, String],
+  link: {
+    type: Boolean,
+    default: undefined
+  },
+  nav: Boolean,
+  prependAvatar: String,
+  prependIcon: IconValue,
+  ripple: {
+    type: [Boolean, Object],
+    default: true
+  },
+  slim: Boolean,
+  prependGap: [Number, String],
+  subtitle: {
+    type: [String, Number, Boolean],
+    default: undefined
+  },
+  title: {
+    type: [String, Number, Boolean],
+    default: undefined
+  },
+  value: null,
+  index: Number,
+  tabindex: [Number, String],
+  onClick: EventProp(),
+  onClickOnce: EventProp(),
+  ...makeBorderProps(),
+  ...makeComponentProps(),
+  ...makeDensityProps(),
+  ...makeDimensionProps(),
+  ...makeElevationProps(),
+  ...makeRoundedProps(),
+  ...makeRouterProps(),
+  ...makeTagProps(),
+  ...makeThemeProps(),
+  ...makeVariantProps({
+    variant: 'text'
+  })
+}, 'VListItem');
+const VListItem = genericComponent()({
+  name: 'VListItem',
+  directives: {
+    vRipple: Ripple
+  },
+  props: makeVListItemProps(),
+  emits: {
+    click: e => true
+  },
+  setup(props, _ref) {
+    let {
+      attrs,
+      slots,
+      emit
+    } = _ref;
+    const link = useLink(props, attrs);
+    const rootEl = ref();
+    const id = computed(() => props.value === undefined ? link.href.value : props.value);
+    const {
+      activate,
+      isActivated,
+      select,
+      isOpen,
+      isSelected,
+      isIndeterminate,
+      isGroupActivator,
+      root,
+      parent,
+      openOnSelect,
+      scrollToActive,
+      id: uid
+    } = useNestedItem(id, () => props.disabled, false);
+    const list = useList();
+    const isActive = computed(() => props.active !== false && (props.active || link.isActive?.value || (root.activatable.value ? isActivated.value : isSelected.value)));
+    const isLink = toRef(() => props.link !== false && link.isLink.value);
+    const isSelectable = computed(() => !!list && (root.selectable.value || root.activatable.value || props.value != null));
+    const isClickable = computed(() => !props.disabled && props.link !== false && (props.link || link.isClickable.value || isSelectable.value));
+    const isTracked = computed(() => list && list.navigationStrategy.value === 'track' && props.index !== undefined && list.trackingIndex.value === props.index);
+    const role = computed(() => list ? isLink.value ? 'link' : isSelectable.value ? 'option' : 'listitem' : undefined);
+    const ariaSelected = computed(() => {
+      if (!isSelectable.value) return undefined;
+      return root.activatable.value ? isActivated.value : root.selectable.value ? isSelected.value : isActive.value;
+    });
+    const roundedProps = toRef(() => props.rounded || props.nav);
+    const color = toRef(() => props.color ?? props.activeColor);
+    const variantProps = toRef(() => ({
+      color: isActive.value ? color.value ?? props.baseColor : props.baseColor,
+      variant: props.variant
+    }));
+
+    // useNestedItem doesn't call register until beforeMount,
+    // so this can't be an immediate watcher as we don't know parent yet
+    watch(() => link.isActive?.value, val => {
+      if (!val) return;
+      handleActiveLink();
+    });
+    watch(isActivated, val => {
+      if (!val || !scrollToActive) return;
+      rootEl.value?.scrollIntoView({
+        block: 'nearest',
+        behavior: 'instant'
+      });
+    });
+    watch(isTracked, val => {
+      if (!val) return;
+      rootEl.value?.scrollIntoView({
+        block: 'nearest',
+        behavior: 'instant'
+      });
+    });
+    onBeforeMount(() => {
+      if (link.isActive?.value) {
+        nextTick(() => handleActiveLink());
+      }
+    });
+    function handleActiveLink() {
+      if (parent.value != null) {
+        root.open(parent.value, true);
+      }
+      openOnSelect(true);
+    }
+    const {
+      themeClasses
+    } = provideTheme(props);
+    const {
+      borderClasses
+    } = useBorder(props);
+    const {
+      colorClasses,
+      colorStyles,
+      variantClasses
+    } = useVariant(variantProps);
+    const {
+      densityClasses
+    } = useDensity(props);
+    const {
+      dimensionStyles
+    } = useDimension(props);
+    const {
+      elevationClasses
+    } = useElevation(props);
+    const {
+      roundedClasses
+    } = useRounded(roundedProps);
+    const lineClasses = toRef(() => props.lines ? `v-list-item--${props.lines}-line` : undefined);
+    const rippleOptions = toRef(() => props.ripple !== undefined && !!props.ripple && list?.filterable ? {
+      keys: ['Enter']
+    } : props.ripple);
+    const slotProps = computed(() => ({
+      isActive: isActive.value,
+      select,
+      isOpen: isOpen.value,
+      isSelected: isSelected.value,
+      isIndeterminate: isIndeterminate.value,
+      isDisabled: props.disabled
+    }));
+    function onClick(e) {
+      emit('click', e);
+      if (['INPUT', 'TEXTAREA'].includes(e.target?.tagName)) return;
+      if (!isClickable.value) return;
+      link.navigate.value?.(e);
+      if (isGroupActivator) return;
+      if (root.activatable.value) {
+        activate(!isActivated.value, e);
+      } else if (root.selectable.value) {
+        select(!isSelected.value, e);
+      } else if (props.value != null && !isLink.value) {
+        select(!isSelected.value, e);
+      }
+    }
+    function onKeyDown(e) {
+      const target = e.target;
+      if (['INPUT', 'TEXTAREA'].includes(target.tagName)) return;
+      if (e.key === 'Enter' || e.key === ' ' && !list?.filterable) {
+        e.preventDefault();
+        e.stopPropagation();
+        e.target.dispatchEvent(new MouseEvent('click', e));
+      }
+    }
+    useRender(() => {
+      const Tag = isLink.value ? 'a' : props.tag;
+      const hasTitle = slots.title || props.title != null;
+      const hasSubtitle = slots.subtitle || props.subtitle != null;
+      const hasAppendMedia = !!(props.appendAvatar || props.appendIcon);
+      const hasAppend = !!(hasAppendMedia || slots.append);
+      const hasPrependMedia = !!(props.prependAvatar || props.prependIcon);
+      const hasPrepend = !!(hasPrependMedia || slots.prepend);
+      list?.updateHasPrepend(hasPrepend);
+      if (props.activeColor) {
+        deprecate('active-color', ['color', 'base-color']);
+      }
+      return withDirectives(createVNode(Tag, mergeProps(link.linkProps, {
+        "ref": rootEl,
+        "id": props.index !== undefined && list ? `v-list-item-${list.uid}-${props.index}` : undefined,
+        "class": ['v-list-item', {
+          'v-list-item--active': isActive.value,
+          'v-list-item--disabled': props.disabled,
+          'v-list-item--link': isClickable.value,
+          'v-list-item--nav': props.nav,
+          'v-list-item--prepend': !hasPrepend && list?.hasPrepend.value,
+          'v-list-item--slim': props.slim,
+          'v-list-item--focus-visible': isTracked.value,
+          [`${props.activeClass}`]: props.activeClass && isActive.value
+        }, themeClasses.value, borderClasses.value, colorClasses.value, densityClasses.value, elevationClasses.value, lineClasses.value, roundedClasses.value, variantClasses.value, props.class],
+        "style": [{
+          '--v-list-prepend-gap': convertToUnit(props.prependGap)
+        }, colorStyles.value, dimensionStyles.value, props.style],
+        "tabindex": props.tabindex ?? (isClickable.value ? list ? -2 : 0 : undefined),
+        "aria-selected": ariaSelected.value,
+        "role": role.value,
+        "onClick": onClick,
+        "onKeydown": isClickable.value && !isLink.value && onKeyDown
+      }), {
+        default: () => [genOverlays(isClickable.value || isActive.value, 'v-list-item'), hasPrepend && createElementVNode("div", {
+          "key": "prepend",
+          "class": "v-list-item__prepend"
+        }, [!slots.prepend ? createElementVNode(Fragment, null, [props.prependAvatar && createVNode(VAvatar, {
+          "key": "prepend-avatar",
+          "density": props.density,
+          "image": props.prependAvatar
+        }, null), props.prependIcon && createVNode(VIcon, {
+          "key": "prepend-icon",
+          "density": props.density,
+          "icon": props.prependIcon
+        }, null)]) : createVNode(VDefaultsProvider, {
+          "key": "prepend-defaults",
+          "defaults": {
+            VAvatar: {
+              density: props.density,
+              image: props.prependAvatar
+            },
+            VIcon: {
+              density: props.density,
+              icon: props.prependIcon
+            },
+            VListItemAction: {
+              start: true
+            },
+            VCheckboxBtn: {
+              density: props.density
+            }
+          }
+        }, {
+          default: () => [slots.prepend?.(slotProps.value)]
+        }), createElementVNode("div", {
+          "class": "v-list-item__spacer"
+        }, null)]), createElementVNode("div", {
+          "class": "v-list-item__content",
+          "data-no-activator": ""
+        }, [hasTitle && createVNode(VListItemTitle, {
+          "key": "title"
+        }, {
+          default: () => [slots.title?.({
+            title: props.title
+          }) ?? toDisplayString(props.title)]
+        }), hasSubtitle && createVNode(VListItemSubtitle, {
+          "key": "subtitle"
+        }, {
+          default: () => [slots.subtitle?.({
+            subtitle: props.subtitle
+          }) ?? toDisplayString(props.subtitle)]
+        }), slots.default?.(slotProps.value)]), hasAppend && createElementVNode("div", {
+          "key": "append",
+          "class": "v-list-item__append"
+        }, [!slots.append ? createElementVNode(Fragment, null, [props.appendIcon && createVNode(VIcon, {
+          "key": "append-icon",
+          "density": props.density,
+          "icon": props.appendIcon
+        }, null), props.appendAvatar && createVNode(VAvatar, {
+          "key": "append-avatar",
+          "density": props.density,
+          "image": props.appendAvatar
+        }, null)]) : createVNode(VDefaultsProvider, {
+          "key": "append-defaults",
+          "defaults": {
+            VAvatar: {
+              density: props.density,
+              image: props.appendAvatar
+            },
+            VIcon: {
+              density: props.density,
+              icon: props.appendIcon
+            },
+            VListItemAction: {
+              end: true
+            },
+            VCheckboxBtn: {
+              density: props.density
+            }
+          }
+        }, {
+          default: () => [slots.append?.(slotProps.value)]
+        }), createElementVNode("div", {
+          "class": "v-list-item__spacer"
+        }, null)])]
+      }), [[Ripple, isClickable.value && rippleOptions.value]]);
+    });
+    return {
+      activate,
+      isActivated,
+      isGroupActivator,
+      isSelected,
+      list,
+      select,
+      root,
+      id: uid,
+      link
+    };
+  }
+});
+
+const makeVListSubheaderProps = propsFactory({
+  color: String,
+  inset: Boolean,
+  sticky: Boolean,
+  title: String,
+  ...makeComponentProps(),
+  ...makeTagProps()
+}, 'VListSubheader');
+const VListSubheader = genericComponent()({
+  name: 'VListSubheader',
+  props: makeVListSubheaderProps(),
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const {
+      textColorClasses,
+      textColorStyles
+    } = useTextColor(() => props.color);
+    useRender(() => {
+      const hasText = !!(slots.default || props.title);
+      return createVNode(props.tag, {
+        "class": normalizeClass(['v-list-subheader', {
+          'v-list-subheader--inset': props.inset,
+          'v-list-subheader--sticky': props.sticky
+        }, textColorClasses.value, props.class]),
+        "style": normalizeStyle([{
+          textColorStyles
+        }, props.style])
+      }, {
+        default: () => [hasText && createElementVNode("div", {
+          "class": "v-list-subheader__text"
+        }, [slots.default?.() ?? props.title])]
+      });
+    });
+    return {};
+  }
+});
+
+const makeVListChildrenProps = propsFactory({
+  items: Array,
+  returnObject: Boolean
+}, 'VListChildren');
+const VListChildren = genericComponent()({
+  name: 'VListChildren',
+  props: makeVListChildrenProps(),
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    createList();
+    return () => slots.default?.() ?? props.items?.map((_ref2, index) => {
+      let {
+        children,
+        props: itemProps,
+        type,
+        raw: item
+      } = _ref2;
+      if (type === 'divider') {
+        return slots.divider?.({
+          props: itemProps
+        }) ?? createVNode(VDivider, itemProps, null);
+      }
+      if (type === 'subheader') {
+        return slots.subheader?.({
+          props: itemProps
+        }) ?? createVNode(VListSubheader, itemProps, null);
+      }
+      const slotsWithItem = {
+        subtitle: slots.subtitle ? slotProps => slots.subtitle?.({
+          ...slotProps,
+          item
+        }) : undefined,
+        prepend: slots.prepend ? slotProps => slots.prepend?.({
+          ...slotProps,
+          item
+        }) : undefined,
+        append: slots.append ? slotProps => slots.append?.({
+          ...slotProps,
+          item
+        }) : undefined,
+        title: slots.title ? slotProps => slots.title?.({
+          ...slotProps,
+          item
+        }) : undefined
+      };
+      const listGroupProps = VListGroup.filterProps(itemProps);
+      return children ? createVNode(VListGroup, mergeProps(listGroupProps, {
+        "value": props.returnObject ? item : itemProps?.value,
+        "rawId": itemProps?.value
+      }), {
+        activator: _ref3 => {
+          let {
+            props: activatorProps
+          } = _ref3;
+          const listItemProps = mergeProps(itemProps, activatorProps, {
+            value: props.returnObject ? item : itemProps.value
+          });
+          return slots.header ? slots.header({
+            props: listItemProps
+          }) : createVNode(VListItem, mergeProps(listItemProps, {
+            "index": index
+          }), slotsWithItem);
+        },
+        default: () => createVNode(VListChildren, {
+          "items": children,
+          "returnObject": props.returnObject
+        }, slots)
+      }) : slots.item ? slots.item({
+        props: {
+          ...itemProps,
+          index
+        }
+      }) : createVNode(VListItem, mergeProps(itemProps, {
+        "index": index,
+        "value": props.returnObject ? item : itemProps.value
+      }), slotsWithItem);
+    });
+  }
+});
+
+// Utilities
+// Composables
+const makeItemsProps = propsFactory({
+  items: {
+    type: Array,
+    default: () => []
+  },
+  itemTitle: {
+    type: [String, Array, Function],
+    default: 'title'
+  },
+  itemValue: {
+    type: [String, Array, Function],
+    default: 'value'
+  },
+  itemChildren: {
+    type: [Boolean, String, Array, Function],
+    default: 'children'
+  },
+  itemProps: {
+    type: [Boolean, String, Array, Function],
+    default: 'props'
+  },
+  itemType: {
+    type: [Boolean, String, Array, Function],
+    default: 'type'
+  },
+  returnObject: Boolean,
+  valueComparator: Function
+}, 'list-items');
+
+const itemTypes = new Set(['item', 'divider', 'subheader']);
+function transformItem(props, item) {
+  const title = isPrimitive(item) ? item : getPropertyFromItem(item, props.itemTitle);
+  const value = isPrimitive(item) ? item : getPropertyFromItem(item, props.itemValue, undefined);
+  const children = getPropertyFromItem(item, props.itemChildren);
+  const itemProps = props.itemProps === true ? omit(item, ['children']) : getPropertyFromItem(item, props.itemProps);
+  let type = getPropertyFromItem(item, props.itemType, 'item');
+  if (!itemTypes.has(type)) {
+    type = 'item';
+  }
+  const _props = {
+    title,
+    value,
+    ...itemProps
+  };
+  return {
+    type,
+    title: _props.title,
+    value: _props.value,
+    props: _props,
+    children: type === 'item' && children ? transformItems(props, children) : undefined,
+    raw: item
+  };
+}
+function transformItems(props, items) {
+  const array = [];
+  for (const item of items) {
+    array.push(transformItem(props, item));
+  }
+  return array;
+}
+function useListItems(props) {
+  const items = computed(() => transformItems(props, props.items));
+  return {
+    items
+  };
+}
+const makeVListProps = propsFactory({
+  baseColor: String,
+  /* @deprecated */
+  activeColor: String,
+  activeClass: String,
+  bgColor: String,
+  disabled: Boolean,
+  filterable: Boolean,
+  expandIcon: IconValue,
+  collapseIcon: IconValue,
+  lines: {
+    type: [Boolean, String],
+    default: 'one'
+  },
+  slim: Boolean,
+  prependGap: [Number, String],
+  indent: [Number, String],
+  nav: Boolean,
+  navigationStrategy: {
+    type: String,
+    default: 'focus'
+  },
+  navigationIndex: Number,
+  'onClick:open': EventProp(),
+  'onClick:select': EventProp(),
+  'onUpdate:opened': EventProp(),
+  ...makeNestedProps({
+    selectStrategy: 'single-leaf',
+    openStrategy: 'list'
+  }),
+  ...makeBorderProps(),
+  ...makeComponentProps(),
+  ...makeDensityProps(),
+  ...makeDimensionProps(),
+  ...makeElevationProps(),
+  ...makeItemsProps(),
+  ...makeRoundedProps(),
+  ...makeTagProps(),
+  ...makeThemeProps(),
+  ...makeVariantProps({
+    variant: 'text'
+  })
+}, 'VList');
+const VList = genericComponent()({
+  name: 'VList',
+  props: makeVListProps(),
+  emits: {
+    'update:selected': value => true,
+    'update:activated': value => true,
+    'update:opened': value => true,
+    'update:navigationIndex': value => true,
+    'click:open': value => true,
+    'click:activate': value => true,
+    'click:select': value => true
+  },
+  setup(props, _ref) {
+    let {
+      attrs,
+      slots} = _ref;
+    const {
+      items
+    } = useListItems(props);
+    const {
+      themeClasses
+    } = provideTheme(props);
+    const {
+      backgroundColorClasses,
+      backgroundColorStyles
+    } = useBackgroundColor(() => props.bgColor);
+    const {
+      borderClasses
+    } = useBorder(props);
+    const {
+      densityClasses
+    } = useDensity(props);
+    const {
+      dimensionStyles
+    } = useDimension(props);
+    const {
+      elevationClasses
+    } = useElevation(props);
+    const {
+      roundedClasses
+    } = useRounded(props);
+    const {
+      children,
+      open,
+      parents,
+      select,
+      getPath
+    } = useNested(props, {
+      items,
+      returnObject: toRef(() => props.returnObject),
+      scrollToActive: toRef(() => props.navigationStrategy === 'track')
+    });
+    const lineClasses = toRef(() => props.lines ? `v-list--${props.lines}-line` : undefined);
+    const activeColor = toRef(() => props.activeColor);
+    const baseColor = toRef(() => props.baseColor);
+    const color = toRef(() => props.color);
+    const isSelectable = toRef(() => props.selectable || props.activatable);
+    const navigationIndex = useProxiedModel(props, 'navigationIndex', -1, v => v ?? -1);
+    const uid = useId();
+    createList({
+      filterable: props.filterable,
+      trackingIndex: navigationIndex,
+      navigationStrategy: toRef(() => props.navigationStrategy),
+      uid
+    });
+    watch(items, () => {
+      if (props.navigationStrategy === 'track') {
+        navigationIndex.value = -1;
+      }
+    });
+    provideDefaults({
+      VListGroup: {
+        activeColor,
+        baseColor,
+        color,
+        expandIcon: toRef(() => props.expandIcon),
+        collapseIcon: toRef(() => props.collapseIcon)
+      },
+      VListItem: {
+        activeClass: toRef(() => props.activeClass),
+        activeColor,
+        baseColor,
+        color,
+        density: toRef(() => props.density),
+        disabled: toRef(() => props.disabled),
+        lines: toRef(() => props.lines),
+        nav: toRef(() => props.nav),
+        slim: toRef(() => props.slim),
+        variant: toRef(() => props.variant),
+        tabindex: toRef(() => props.navigationStrategy === 'track' ? -1 : undefined)
+      }
+    });
+    const isFocused = shallowRef(false);
+    const contentRef = ref();
+    function onFocusin(e) {
+      isFocused.value = true;
+    }
+    function onFocusout(e) {
+      isFocused.value = false;
+    }
+    function onFocus(e) {
+      if (props.navigationStrategy === 'track') {
+        if (!~navigationIndex.value) {
+          navigationIndex.value = getNextIndex('first');
+        }
+      } else if (!isFocused.value && !(e.relatedTarget && contentRef.value?.contains(e.relatedTarget))) focus();
+    }
+    function onBlur() {
+      if (props.navigationStrategy === 'track') {
+        navigationIndex.value = -1;
+      }
+    }
+    function getNavigationDirection(key) {
+      switch (key) {
+        case 'ArrowDown':
+          return 'next';
+        case 'ArrowUp':
+          return 'prev';
+        case 'Home':
+          return 'first';
+        case 'End':
+          return 'last';
+        default:
+          return null;
+      }
+    }
+    function getNextIndex(direction) {
+      const itemCount = items.value.length;
+      if (itemCount === 0) return -1;
+      let nextIndex;
+      if (direction === 'first') {
+        nextIndex = 0;
+      } else if (direction === 'last') {
+        nextIndex = itemCount - 1;
+      } else {
+        nextIndex = navigationIndex.value + (direction === 'next' ? 1 : -1);
+        if (nextIndex < 0) nextIndex = itemCount - 1;
+        if (nextIndex >= itemCount) nextIndex = 0;
+      }
+      const startIndex = nextIndex;
+      let attempts = 0;
+      while (attempts < itemCount) {
+        const item = items.value[nextIndex];
+        if (item && item.type !== 'divider' && item.type !== 'subheader') {
+          return nextIndex;
+        }
+        nextIndex += direction === 'next' || direction === 'first' ? 1 : -1;
+        if (nextIndex < 0) nextIndex = itemCount - 1;
+        if (nextIndex >= itemCount) nextIndex = 0;
+        if (nextIndex === startIndex) return -1;
+        attempts++;
+      }
+      return -1;
+    }
+    function onKeydown(e) {
+      const target = e.target;
+      if (!contentRef.value || target.tagName === 'INPUT' && ['Home', 'End'].includes(e.key) || target.tagName === 'TEXTAREA') {
+        return;
+      }
+      const direction = getNavigationDirection(e.key);
+      if (direction !== null) {
+        e.preventDefault();
+        if (props.navigationStrategy === 'track') {
+          const nextIndex = getNextIndex(direction);
+          if (nextIndex !== -1) {
+            navigationIndex.value = nextIndex;
+          }
+        } else {
+          focus(direction);
+        }
+      }
+    }
+    function onMousedown(e) {
+      isFocused.value = true;
+    }
+    function focus(location, options) {
+      if (contentRef.value) {
+        return focusChild(contentRef.value, location, options);
+      }
+    }
+    useRender(() => {
+      const indent = props.indent ?? (props.prependGap ? Number(props.prependGap) + 24 : undefined);
+      const ariaMultiselectable = isSelectable.value ? attrs.ariaMultiselectable ?? !String(props.selectStrategy).startsWith('single-') : undefined;
+      return createVNode(props.tag, {
+        "ref": contentRef,
+        "class": normalizeClass(['v-list', {
+          'v-list--disabled': props.disabled,
+          'v-list--nav': props.nav,
+          'v-list--slim': props.slim
+        }, themeClasses.value, backgroundColorClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, lineClasses.value, roundedClasses.value, props.class]),
+        "style": normalizeStyle([{
+          '--v-list-indent': convertToUnit(indent),
+          '--v-list-group-prepend': indent ? '0px' : undefined,
+          '--v-list-prepend-gap': convertToUnit(props.prependGap)
+        }, backgroundColorStyles.value, dimensionStyles.value, props.style]),
+        "tabindex": props.disabled ? -1 : 0,
+        "role": isSelectable.value ? 'listbox' : 'list',
+        "aria-activedescendant": props.navigationStrategy === 'track' && navigationIndex.value >= 0 ? `v-list-item-${uid}-${navigationIndex.value}` : undefined,
+        "aria-multiselectable": ariaMultiselectable,
+        "onFocusin": onFocusin,
+        "onFocusout": onFocusout,
+        "onFocus": onFocus,
+        "onBlur": onBlur,
+        "onKeydown": onKeydown,
+        "onMousedown": onMousedown
+      }, {
+        default: () => [createVNode(VListChildren, {
+          "items": items.value,
+          "returnObject": props.returnObject
+        }, slots)]
+      });
+    });
+    return {
+      open,
+      select,
+      focus,
+      children,
+      parents,
+      getPath,
+      navigationIndex
+    };
+  }
+});
+
+const makeVMenuProps = propsFactory({
+  // TODO
+  // disableKeys: Boolean,
+  id: String,
+  submenu: Boolean,
+  ...omit(makeVOverlayProps({
+    captureFocus: true,
+    closeDelay: 250,
+    closeOnContentClick: true,
+    locationStrategy: 'connected',
+    location: undefined,
+    openDelay: 300,
+    scrim: false,
+    scrollStrategy: 'reposition',
+    transition: {
+      component: VDialogTransition
+    }
+  }), ['absolute'])
+}, 'VMenu');
+const VMenu = genericComponent()({
+  name: 'VMenu',
+  props: makeVMenuProps(),
+  emits: {
+    'update:modelValue': value => true
+  },
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const isActive = useProxiedModel(props, 'modelValue');
+    const {
+      scopeId
+    } = useScopeId();
+    const {
+      isRtl
+    } = useRtl();
+    const uid = useId();
+    const id = toRef(() => props.id || `v-menu-${uid}`);
+    const overlay = ref();
+    const parent = inject(VMenuSymbol, null);
+    const openChildren = shallowRef(new Set());
+    provide(VMenuSymbol, {
+      register() {
+        openChildren.value.add(uid);
+      },
+      unregister() {
+        openChildren.value.delete(uid);
+      },
+      closeParents(e) {
+        setTimeout(() => {
+          if (!openChildren.value.size && !props.persistent && (e == null || overlay.value?.contentEl && !isClickInsideElement(e, overlay.value.contentEl))) {
+            isActive.value = false;
+            parent?.closeParents();
+          }
+        }, 40);
+      }
+    });
+    onBeforeUnmount(() => parent?.unregister());
+    onDeactivated(() => isActive.value = false);
+    watch(isActive, val => {
+      val ? parent?.register() : parent?.unregister();
+    }, {
+      immediate: true
+    });
+    function onClickOutside(e) {
+      parent?.closeParents(e);
+    }
+    function onKeydown(e) {
+      if (props.disabled) return;
+      if (e.key === 'Tab' || e.key === 'Enter' && !props.closeOnContentClick) {
+        if (e.key === 'Enter' && (e.target instanceof HTMLTextAreaElement || e.target instanceof HTMLInputElement && !!e.target.closest('form'))) return;
+        if (e.key === 'Enter') e.preventDefault();
+        const nextElement = getNextElement(focusableChildren(overlay.value?.contentEl, false), e.shiftKey ? 'prev' : 'next', el => el.tabIndex >= 0);
+        if (!nextElement && !props.retainFocus) {
+          isActive.value = false;
+          overlay.value?.activatorEl?.focus();
+        }
+      } else if (props.submenu && e.key === (isRtl.value ? 'ArrowRight' : 'ArrowLeft')) {
+        isActive.value = false;
+        overlay.value?.activatorEl?.focus();
+      }
+    }
+    function onActivatorKeydown(e) {
+      if (props.disabled) return;
+      const el = overlay.value?.contentEl;
+      if (el && isActive.value) {
+        if (e.key === 'ArrowDown') {
+          e.preventDefault();
+          e.stopImmediatePropagation();
+          focusChild(el, 'next');
+        } else if (e.key === 'ArrowUp') {
+          e.preventDefault();
+          e.stopImmediatePropagation();
+          focusChild(el, 'prev');
+        } else if (props.submenu) {
+          if (e.key === (isRtl.value ? 'ArrowRight' : 'ArrowLeft')) {
+            isActive.value = false;
+          } else if (e.key === (isRtl.value ? 'ArrowLeft' : 'ArrowRight')) {
+            e.preventDefault();
+            focusChild(el, 'first');
+          }
+        }
+      } else if (props.submenu ? e.key === (isRtl.value ? 'ArrowLeft' : 'ArrowRight') : ['ArrowDown', 'ArrowUp'].includes(e.key)) {
+        isActive.value = true;
+        e.preventDefault();
+        setTimeout(() => setTimeout(() => onActivatorKeydown(e)));
+      }
+    }
+    const activatorProps = computed(() => mergeProps({
+      'aria-haspopup': 'menu',
+      'aria-expanded': String(isActive.value),
+      'aria-controls': id.value,
+      'aria-owns': id.value,
+      onKeydown: onActivatorKeydown
+    }, props.activatorProps));
+    useRender(() => {
+      const overlayProps = VOverlay.filterProps(props);
+      return createVNode(VOverlay, mergeProps({
+        "ref": overlay,
+        "id": id.value,
+        "class": ['v-menu', props.class],
+        "style": props.style
+      }, overlayProps, {
+        "modelValue": isActive.value,
+        "onUpdate:modelValue": $event => isActive.value = $event,
+        "absolute": true,
+        "activatorProps": activatorProps.value,
+        "location": props.location ?? (props.submenu ? 'end' : 'bottom'),
+        "onClick:outside": onClickOutside,
+        "onKeydown": onKeydown
+      }, scopeId), {
+        activator: slots.activator,
+        default: function () {
+          for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+            args[_key] = arguments[_key];
+          }
+          return createVNode(VDefaultsProvider, {
+            "root": "VMenu"
+          }, {
+            default: () => [slots.default?.(...args)]
+          });
+        }
+      });
+    });
+    return forwardRefs({
+      id,
+      ΨopenChildren: openChildren
+    }, overlay);
+  }
+});
+
+const _hoisted_1 = { class: "d-flex flex-column" };
+const _hoisted_2 = { class: "d-flex align-center" };
+const _hoisted_3 = [".imageProperty", ".subTitleProperty", ".filterProperties", ".items", "externalFilter"];
+const _hoisted_4 = {
+  slot: "filterstitle",
+  style: {"margin":"14px 8px"}
+};
+const _hoisted_5 = {
+  slot: "resultstitle",
+  style: {"margin":"14px 8px"}
+};
+
+const itemfilterStyleOverride = `
+  li.highlighted {
+    background-color: rgb(var(--v-theme-primary)) !important;
+    color: rgb(var(--v-theme-on-primary)) !important;
+  }
+  li.highlighted .subtitle {
+    opacity: 0.85;
+  }
+  .title-container.truncate,
+  .title.truncate,
+  .subtitle.truncate {
+    white-space: normal !important;
+    overflow: visible !important;
+    text-overflow: unset !important;
+  }
+  .title {
+    display: block;
+    line-height: 1.25;
+    overflow-wrap: anywhere;
+    word-break: break-word;
+  }
+  nav.responsive i.small {
+    width: 72px !important;
+    height: 72px !important;
+    min-width: 72px;
+    min-height: 72px;
+    flex: 0 0 72px;
+  }
+  nav.responsive i.small .image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 8px;
+    padding:4px;
+  }
+`;
+
+const _sfc_main = {
+  __name: 'index',
+  props: {
+  title: {
+    type: String,
+    default: "Explore Catalog",
+  },
+  hoverProperties: {
+    /** @type {import("vue").PropType<string[]>} */
+    type: Array,
+    default: () => ["datetime", "eo:cloud_cover"],
+  },
+  sortBy: {
+    /** @type {import("vue").PropType<{ property: string, label: string }[]>} */
+    type: Array,
+    default: () => [
+      { property: "datetime", label: "Date" },
+      { property: "eo:cloud_cover", label: "Cloud Cover" },
+    ],
+  },
+  layoutTarget: {
+    type: String,
+    default: "lite",
+  },
+  layoutIcon: {
+    type: String,
+    default: mdiViewDashboard,
+  },
+  filtersTitle: {
+    type: String,
+    default: "Filters:",
+  },
+  resultsTitle: {
+    type: String,
+    default: "Items:",
+  },
+  datetimeFilter: {
+    type: Boolean,
+    default: false,
+  },
+  bboxFilter: {
+    type: Boolean,
+    default: true,
+  },
+  imageProperty: {
+    type: String,
+    default: "assets.thumbnail.href",
+  },
+  showTitleBlock: {
+    type: Boolean,
+    default: true,
+  },
+  filters: {
+    /** @type {import("vue").PropType<import("./types").FiltersConfig>} */
+    type: Array,
+    default: () => [
+      {
+        property: "eo:cloud_cover",
+        type: "range",
+        title: "Cloud Cover (%)",
+        min: 0,
+        max: 100,
+        step: 1,
+        state: {
+          min: 0,
+          max: 30,
+        },
+        icon: `<svg style="height: 1rem; transform: translateY(-2px); fill: currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>weather-cloudy</title><path d="M6,19A5,5 0 0,1 1,14A5,5 0 0,1 6,9C7,6.65 9.3,5 12,5C15.43,5 18.24,7.66 18.5,11.03L19,11A4,4 0 0,1 23,15A4,4 0 0,1 19,19H6M19,13H17V12A5,5 0 0,0 12,7C9.5,7 7.45,8.82 7.06,11.19C6.73,11.07 6.37,11 6,11A3,3 0 0,0 3,14A3,3 0 0,0 6,17H19A2,2 0 0,0 21,15A2,2 0 0,0 19,13Z" /></svg>`,
+        unitLabel: "%",
+      },
+    ],
+  },
+  enableCompare: {
+    type: Boolean,
+    default: false,
+  },
+  useMosaic: {
+    type: Boolean,
+    default: false,
+  },
+  mosaicIndicators: {
+    /** @type {import("vue").PropType<string[]>} */
+    type: Array,
+    required: false,
+  },
+  stacEndpoint: {
+    type: String,
+    default: null,
+  },
+  searchLimit: {
+    type: Number,
+    default: 100,
+  },
+  stacItemsStyle: {
+    type: Object,
+    required: false,
+  },
+  stacItemsInteractionStyle: {
+    type: Object,
+    required: false,
+  },
+},
+  async setup(__props) {
+
+let __temp, __restore;
+
+if (!customElements.get("eox-itemfilter")) {
+  (
+  ([__temp,__restore] = withAsyncContext(() => import('@eox/itemfilter'))),
+  await __temp,
+  __restore()
+);
+}
+
+// Props definition
+const props = __props;
+
+const itemfilterEl = useTemplateRef("itemfilter");
+
+// Sorting states
+const sortMenu = ref(false);
+const sortOrder = ref("-");
+const selectedSort = ref(props.sortBy?.[0] ?? "");
+const sortByParam = ref("-datetime");
+
+function updateSortByParam() {
+  sortByParam.value = `${sortOrder.value === "+" ? "" : "-"}${
+    selectedSort.value.property
+  }`;
+}
+/**
+ * Handle sort option selection
+ * @param {{ property: string, label: string }} option
+ */
+function selectSort(option) {
+  if (selectedSort.value.property === option.property) {
+    // Flip order if same property
+    sortOrder.value = sortOrder.value === "-" ? "+" : "-";
+  } else {
+    selectedSort.value = option;
+    // default to descending when changing property
+    sortOrder.value = "-";
+  }
+  updateSortByParam();
+  sortMenu.value = false;
+  if (itemfilterEl.value) {
+    itemfilterEl.value.search();
+  }
+}
+
+const store = useSTAcStore();
+const { selectedItem, selectedCompareItem } = storeToRefs(store);
+
+const catalogEndpoint = computed(
+  () => props.stacEndpoint || store.stacEndpoint,
+);
+const {
+  isItemView,
+  latestLayer,
+  visibilityThreshold,
+  returnToOverview,
+  mosaicEndpoint,
+} = useMosaicState();
+
+const isMosaicEnabled = computed(
+  () => props.useMosaic && !!mosaicEndpoint.value,
+);
+
+const activeSelectedItem =
+  /** @type {import("vue").Ref<import("stac-ts").StacItem | null>} */ (
+    props.enableCompare ? selectedCompareItem : selectedItem
+  );
+
+if (props.useMosaic) {
+  const unsubscribeReturn = returnToOverview.on(() => {
+    activeSelectedItem.value = null;
+  });
+  onUnmounted(() => {
+    unsubscribeReturn();
+    isItemView.value = false;
+  });
+}
+
+onUnmounted(() => {
+  activeSelectedItem.value = null;
+});
+
+// Reactive state
+/** @type {import("vue").Ref<import("@/types").GeoJsonFeature[]>} */
+const currentItems = ref([]);
+
+const items = currentItems.value;
+
+// Initial data fetch
+
+if (catalogEndpoint.value) {
+  (
+  ([__temp,__restore] = withAsyncContext(() => axios
+    .get(catalogEndpoint.value + `/search?limit=${props.searchLimit}`)
+    .then((res) => (currentItems.value = res.data.features)))),
+  await __temp,
+  __restore()
+);
+}
+
+const filterProperties = createFilterProperties(
+  props.filters,
+  props.datetimeFilter,
+);
+
+const subTitleProperty = createSubtitleProperty(props.filters);
+
+const externalFilterHandler = createExternalFilter(
+  props.filters,
+  props.bboxFilter,
+  props.datetimeFilter,
+  currentItems,
+  sortByParam,
+  props.searchLimit,
+  activeSelectedItem,
+  catalogEndpoint,
+);
+
+watch(activeSelectedItem, (item) => {
+  if (itemfilterEl.value) {
+    itemfilterEl.value.selectedResult = item ?? null;
+  }
+
+  if (isMosaicEnabled.value) {
+    isItemView.value = !!item;
+  }
+
+  // restore mosaic when item is deselected
+  if (!isMosaicEnabled.value || item) return;
+  if (latestLayer.value) {
+    renderLatestMosaic();
+    renderItemsFeatures(
+      currentItems.value,
+      props.enableCompare ? mapCompareEl : mapEl,
+      props.hoverProperties,
+      props.stacItemsStyle,
+      props.stacItemsInteractionStyle,
+    );
+    nextTick(() => {
+      const z = mapPosition.value[2] ?? 0;
+      const layer = mapEl.value?.getLayerById(
+        /** @type {string} */ (latestLayer.value?.properties?.id),
+      );
+      layer?.setVisible(z >= visibilityThreshold.value);
+    });
+  }
+});
+
+// re-add items features after mosaic layer is rendered
+watch(
+  () => latestLayer.value,
+  (layer) => {
+    if (!isMosaicEnabled.value || !layer) return;
+    renderItemsFeatures(
+      currentItems.value,
+      props.enableCompare ? mapCompareEl : mapEl,
+      props.hoverProperties,
+      props.stacItemsStyle,
+      props.stacItemsInteractionStyle,
+    );
+  },
+);
+
+const scheduleMosaicUpdate = useScheduleMosaicUpdate();
+
+// Event handlers
+const onFilter = createOnFilterHandler({
+  currentItems,
+  mapElement: props.enableCompare ? mapCompareEl : mapEl,
+  hoverProperties: props.hoverProperties,
+  stacItemsStyle: props.stacItemsStyle,
+  stacItemsInteractionStyle: props.stacItemsInteractionStyle,
+  itemfilterEl,
+  selectedItemRef: activeSelectedItem,
+  mosaicOptions: isMosaicEnabled.value
+    ? {
+        isMosaicEnabled,
+        getMosaicEndpoint: () => mosaicEndpoint.value,
+        scheduleMosaicUpdate,
+      }
+    : null,
+});
+
+/**
+ * @param {CustomEvent} evt
+ */
+const onSelectItem = createOnSelectHandler(
+  store,
+  props.enableCompare,
+  props.enableCompare ? mapCompareEl : mapEl,
+);
+
+// composables
+
+// Render items features on the map
+useRenderItemsFeatures(
+  currentItems,
+  props.enableCompare ? mapCompareEl : mapEl,
+  props.hoverProperties,
+  props.stacItemsStyle,
+  props.stacItemsInteractionStyle,
+);
+// Search on map move logic
+useSearchOnMapMove(
+  itemfilterEl,
+  props.bboxFilter,
+  props.enableCompare ? mapCompareEl : mapEl,
+);
+// Render on feature click
+useRenderOnFeatureClick(
+  itemfilterEl,
+  store,
+  props.enableCompare ? mapCompareEl : mapEl,
+  props.enableCompare,
+);
+// initialize mosaic and keep in sync with map state
+useInitMosaic(
+  props.useMosaic ? mosaicEndpoint.value : null,
+  undefined,
+  props.mosaicIndicators,
+);
+
+// highlight on feature hover
+useHoverTooltip(props.hoverProperties);
+const onMouseEnterResult = createOnMouseEnterResult(
+  props.enableCompare ? mapCompareEl : mapEl,
+);
+const onMouseLeaveResult = createOnMouseLeaveResult(
+  props.enableCompare ? mapCompareEl : mapEl,
+);
+
+
+return (_ctx, _cache) => {
+                                                       
+                                                     
+                                                             
+                                                                             
+                                                                 
+                                                       
+                                                       
+                                                     
+
+  return (openBlock(), createElementBlock("div", _hoisted_1, [
+    (__props.showTitleBlock)
+      ? (openBlock(), createBlock(VRow, {
+          key: 0,
+          class: "title align-center justify-space-between flex-shrink-0"
+        }, {
+          default: withCtx(() => [
+            _cache[7] || (_cache[7] = createElementVNode("h4", null, "Catalog Items", -1 /* CACHED */)),
+            createElementVNode("div", _hoisted_2, [
+              (__props.sortBy?.length)
+                ? (openBlock(), createBlock(VMenu, {
+                    key: 0,
+                    modelValue: sortMenu.value,
+                    "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ((sortMenu).value = $event)),
+                    "offset-y": ""
+                  }, {
+                    activator: withCtx(({ props: menuProps }) => [
+                      createVNode(VTooltip, { location: "bottom" }, {
+                        activator: withCtx(({ props: tooltipProps }) => [
+                          createVNode(VBtn, mergeProps({ ...menuProps, ...tooltipProps }, {
+                            icon: "",
+                            size: "small",
+                            color: "primary",
+                            class: "mr-2",
+                            "aria-label": "Sort",
+                            variant: "text"
+                          }), {
+                            default: withCtx(() => [
+                              createVNode(VIcon, null, {
+                                default: withCtx(() => [...(_cache[5] || (_cache[5] = [
+                                  createTextVNode("mdi-sort", -1 /* CACHED */)
+                                ]))]),
+                                _: 1 /* STABLE */
+                              })
+                            ]),
+                            _: 1 /* STABLE */
+                          }, 16 /* FULL_PROPS */)
+                        ]),
+                        default: withCtx(() => [
+                          _cache[6] || (_cache[6] = createElementVNode("span", null, "Sort items", -1 /* CACHED */))
+                        ]),
+                        _: 2 /* DYNAMIC */
+                      }, 1024 /* DYNAMIC_SLOTS */)
+                    ]),
+                    default: withCtx(() => [
+                      createVNode(VList, {
+                        density: "compact",
+                        color: "primary"
+                      }, {
+                        default: withCtx(() => [
+                          (openBlock(true), createElementBlock(Fragment, null, renderList(props.sortBy, (option) => {
+                            return (openBlock(), createBlock(VListItem, {
+                              key: option.property,
+                              onClick: $event => (selectSort(option)),
+                              active: selectedSort.value.property === option.property
+                            }, {
+                              default: withCtx(() => [
+                                createVNode(VListItemTitle, null, {
+                                  default: withCtx(() => [
+                                    createTextVNode(toDisplayString(option.label) + " ", 1 /* TEXT */),
+                                    (selectedSort.value.property === option.property)
+                                      ? (openBlock(), createBlock(VIcon, {
+                                          key: 0,
+                                          size: "x-small",
+                                          class: "ml-1"
+                                        }, {
+                                          default: withCtx(() => [
+                                            createTextVNode(toDisplayString(sortOrder.value === "+" ? "mdi-arrow-up" : "mdi-arrow-down"), 1 /* TEXT */)
+                                          ]),
+                                          _: 1 /* STABLE */
+                                        }))
+                                      : createCommentVNode("v-if", true)
+                                  ]),
+                                  _: 2 /* DYNAMIC */
+                                }, 1024 /* DYNAMIC_SLOTS */)
+                              ]),
+                              _: 2 /* DYNAMIC */
+                            }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["onClick", "active"]))
+                          }), 128 /* KEYED_FRAGMENT */))
+                        ]),
+                        _: 1 /* STABLE */
+                      })
+                    ]),
+                    _: 1 /* STABLE */
+                  }, 8 /* PROPS */, ["modelValue"]))
+                : createCommentVNode("v-if", true),
+              (__props.layoutTarget && __props.layoutIcon)
+                ? (openBlock(), createBlock(_sfc_main$1, {
+                    key: 1,
+                    target: __props.layoutTarget,
+                    icon: __props.layoutIcon
+                  }, null, 8 /* PROPS */, ["target", "icon"]))
+                : createCommentVNode("v-if", true)
+            ])
+          ]),
+          _: 1 /* STABLE */
+        }))
+      : createCommentVNode("v-if", true),
+    createElementVNode("eox-itemfilter", {
+      class: "itemfilter-scroll",
+      ref: "itemfilter",
+      titleProperty: "id",
+      ".imageProperty": __props.imageProperty,
+      ".subTitleProperty": unref(subTitleProperty),
+      ".filterProperties": unref(filterProperties),
+      ".items": unref(items),
+      ".styleOverride": itemfilterStyleOverride,
+      onSelect: _cache[1] || (_cache[1] = (...args) => (unref(onSelectItem) && unref(onSelectItem)(...args))),
+      onFilter: _cache[2] || (_cache[2] = (...args) => (unref(onFilter) && unref(onFilter)(...args))),
+      "onMouseenter:result": _cache[3] || (_cache[3] = (...args) => (unref(onMouseEnterResult) && unref(onMouseEnterResult)(...args))),
+      "onMouseleave:result": _cache[4] || (_cache[4] = (...args) => (unref(onMouseLeaveResult) && unref(onMouseLeaveResult)(...args))),
+      externalFilter: unref(externalFilterHandler)
+    }, [
+      createElementVNode("h4", _hoisted_4, toDisplayString(__props.filtersTitle), 1 /* TEXT */),
+      createElementVNode("h4", _hoisted_5, toDisplayString(__props.resultsTitle), 1 /* TEXT */)
+    ], 40 /* PROPS, NEED_HYDRATION */, _hoisted_3)
+  ]))
+}
+}
+
+};
+const index = /*#__PURE__*/_export_sfc(_sfc_main, [['styles',[_style_0]],['__scopeId',"data-v-5a4d8ea3"]]);
+
+export { index as default };