@eodash/eodash 5.4.0 → 5.5.1

package/dist/client/{EodashStacInfo-BZbmT8vT.js → EodashStacInfo-Cb28jVEr.js}

@@ -1,9 +1,9 @@
 import { createElementBlock, openBlock, createElementVNode, unref } from 'vue';
 import '@eox/stacinfo';
-import { B as currentUrl } from './helpers-CsjKHAcK.js';
+import { B as currentUrl } from './helpers-Bi-qmnbZ.js';
 
 const _hoisted_1 = { class: "flex-grow-1" };
-const _hoisted_2 = [".for", ".allowHtml", ".body", ".featured", ".footer", ".styleOverride", ".header", ".subheader", ".tags"];
+const _hoisted_2 = [".for", ".allowHtml", ".body", ".featured", ".footer", ".header", ".tags"];
 
 
 const _sfc_main = {
@@ -14,10 +14,6 @@ const _sfc_main = {
     default: true,
   },
 
-  styleOverride: {
-    type: String,
-    default: "",
-  },
   header: {
     /** @type {import("vue").PropType<string[]>}  */
     type: Array,
@@ -28,15 +24,17 @@ const _sfc_main = {
     type: Array,
     default: () => ["themes"],
   },
-  subheader: {
-    /** @type {import("vue").PropType<string[]>}  */
-    type: Array,
-    default: () => [],
-  },
   body: {
     /** @type {import("vue").PropType<string[]>}  */
     type: Array,
-    default: () => ["satellite", "sensor", "agency", "extent"],
+    default: () => [
+      "satellite",
+      "sensor",
+      "insituSources",
+      "otherSources",
+      "agency",
+      "extent",
+    ],
   },
   featured: {
     /** @type {import("vue").PropType<string[]>}  */
@@ -46,7 +44,7 @@ const _sfc_main = {
   footer: {
     /** @type {import("vue").PropType<string[]>}  */
     type: Array,
-    default: () => ["sci:citation"],
+    default: () => ["sci:citation", "sci:doi", "sci:publication"],
   },
 },
   setup(__props) {
@@ -61,9 +59,7 @@ return (_ctx, _cache) => {
       ".body": __props.body,
       ".featured": __props.featured,
       ".footer": __props.footer,
-      ".styleOverride": __props.styleOverride,
       ".header": __props.header,
-      ".subheader": __props.subheader,
       ".tags": __props.tags,
       style: {"--color-primary-lighter":"none"}
     }, null, 40 /* PROPS, NEED_HYDRATION */, _hoisted_2)

package/dist/client/{EodashTimeSlider-DIcAJr6D.js → EodashTimeSlider-B5boxpCK.js}

@@ -1,6 +1,6 @@
 import { computed, createElementBlock, createCommentVNode, openBlock, unref } from 'vue';
-import { j as mapEl, C as datetime } from './helpers-CsjKHAcK.js';
-import { I as eodashCollections } from './asWebComponent-Bw03Jutr.js';
+import { j as mapEl, C as datetime } from './helpers-Bi-qmnbZ.js';
+import { I as eodashCollections } from './asWebComponent-C5YMrXyg.js';
 import '@eox/timeslider';
 
 const _hoisted_1 = [".filters"];

package/dist/client/{EodashTools-Cz6X6hsF.js → EodashTools-RwiXxELa.js}

@@ -1,9 +1,9 @@
 import { ref, computed, createElementBlock, openBlock, createElementVNode, createVNode, createBlock, createCommentVNode, unref, withCtx, mergeProps } from 'vue';
-import _sfc_main$2 from './PopUp-DwI8V2gW.js';
-import EodashItemFilter from './EodashItemFilter-CmZkk7GK.js';
-import _sfc_main$1 from './EodashLayoutSwitcher-BCP3FvDb.js';
+import _sfc_main$2 from './PopUp-C6x6Rpv0.js';
+import EodashItemFilter from './EodashItemFilter-CgdrG-pX.js';
+import _sfc_main$1 from './EodashLayoutSwitcher-B4oI5PAx.js';
 import { mdiViewDashboard, mdiPlusCircleOutline } from '@mdi/js';
-import { _ as _export_sfc, D as useDisplay, F as useTransparentPanel, G as VBtn } from './asWebComponent-Bw03Jutr.js';
+import { _ as _export_sfc, D as useDisplay, F as useTransparentPanel, G as VBtn } from './asWebComponent-C5YMrXyg.js';
 
 const _style_0 = ".v-btn--size-default[data-v-73449028]{--v-btn-height: 30px}";
 

package/dist/client/{ExportState-DFVFAgKz.js → ExportState-Cp4ftu4f.js}

@@ -1,14 +1,15 @@
-import { createVNode, normalizeStyle, normalizeClass, createElementVNode, Fragment, toDisplayString, withDirectives, mergeProps, computed, mergeModels, useModel, ref, createBlock, openBlock, withCtx, createElementBlock, createCommentVNode, renderList, unref, createTextVNode, vShow } from 'vue';
+import { createVNode, normalizeStyle, normalizeClass, createElementVNode, Fragment, toDisplayString, shallowRef, watch, withDirectives, mergeProps, computed, toRef, mergeModels, useModel, ref, createBlock, openBlock, withCtx, createElementBlock, createCommentVNode, renderList, unref, createTextVNode, vShow } from 'vue';
 import { mdiContentCopy, mdiClipboardCheckOutline } from '@mdi/js';
-import _sfc_main$1 from './PopUp-DwI8V2gW.js';
-import { $ as createSimpleFunctional, g as genericComponent, p as propsFactory, n as provideDefaults, c as useRender, m as makeTagProps, e as makeComponentProps, k as provideTheme, h as useBorder, a0 as useVariant, U as useDensity, j as useRounded, a1 as useSize, a2 as genOverlays, H as VIcon, V as VDefaultsProvider, a3 as makeVariantProps, q as makeThemeProps, a4 as makeSizeProps, r as makeRoundedProps, W as makeDensityProps, t as makeBorderProps, a5 as IconValue, a6 as Ripple, b as useDimension, i as useElevation, a7 as useLoader, a8 as useLocation, a9 as usePosition, aa as useLink, ab as makeRouterProps, ac as makePositionProps, ad as makeLocationProps, ae as makeLoaderProps, s as makeElevationProps, d as makeDimensionProps, af as LoaderSlot, ag as useTextColor, o as convertToUnit, _ as _export_sfc, ah as copyToClipBoard, G as VBtn } from './asWebComponent-Bw03Jutr.js';
-import { Y as removeUnneededProperties, Z as getChartSpec, q as getLayers, F as mapPosition, R as availableMapProjection } from './helpers-CsjKHAcK.js';
-import { V as VImg, a as VExpandTransition } from './VImg-COXTnCWE.js';
+import _sfc_main$1 from './PopUp-C6x6Rpv0.js';
+import { a0 as createSimpleFunctional, g as genericComponent, p as propsFactory, n as provideDefaults, c as useRender, m as makeTagProps, e as makeComponentProps, k as provideTheme, h as useBorder, a1 as useVariant, W as useDensity, j as useRounded, a2 as useSize, a3 as genOverlays, H as VIcon, V as VDefaultsProvider, a4 as makeVariantProps, q as makeThemeProps, a5 as makeSizeProps, r as makeRoundedProps, X as makeDensityProps, t as makeBorderProps, a6 as IconValue, a7 as Ripple, b as useDimension, i as useElevation, a8 as useLoader, a9 as useLocation, aa as usePosition, ab as useLink, ac as makeRouterProps, ad as makePositionProps, ae as makeLocationProps, af as makeLoaderProps, s as makeElevationProps, d as makeDimensionProps, ag as LoaderSlot, ah as useTextColor, o as convertToUnit, _ as _export_sfc, ai as copyToClipBoard, G as VBtn } from './asWebComponent-C5YMrXyg.js';
+import { N as chartSpec, a1 as removeUnneededProperties, w as getLayers, F as mapPosition, X as availableMapProjection } from './helpers-Bi-qmnbZ.js';
+import { base64EncodeSpec } from '@eox/chart';
+import { V as VImg, a as VExpandTransition } from './VImg-DN23k6uX.js';
 
 // Styles
 const VSpacer = createSimpleFunctional('v-spacer', 'div', 'VSpacer');
 
-const _style_0 = ".code-block[data-v-86a0e649]{background-color:#ddd;font-family:monospace;font-size:small;max-height:200px;overflow-y:auto}";
+const _style_0 = ".code-block[data-v-b7d44f9a]{background-color:#ddd;font-family:monospace;font-size:small;max-height:200px;overflow-y:auto}";
 
 const makeVCardActionsProps = propsFactory({
   ...makeComponentProps(),
@@ -350,6 +351,12 @@ const VCard = genericComponent()({
       roundedClasses
     } = useRounded(props);
     const link = useLink(props, attrs);
+    const loadingColor = shallowRef(undefined);
+    watch(() => props.loading, (val, old) => {
+      loadingColor.value = !val && typeof old === 'string' ? old : typeof val === 'boolean' ? undefined : val;
+    }, {
+      immediate: true
+    });
     useRender(() => {
       const isLink = props.link !== false && link.isLink.value;
       const isClickable = !props.disabled && props.link !== false && (props.link || link.isClickable.value);
@@ -392,7 +399,7 @@ const VCard = genericComponent()({
         }, slots.image)]), createVNode(LoaderSlot, {
           "name": "v-card",
           "active": !!props.loading,
-          "color": typeof props.loading === 'boolean' ? undefined : props.loading
+          "color": loadingColor.value
         }, {
           default: slots.loader
         }), hasCardItem && createVNode(VCardItem, {
@@ -422,13 +429,21 @@ const VCard = genericComponent()({
   }
 });
 
+const allowedVariants = ['dotted', 'dashed', 'solid', 'double'];
 const makeVDividerProps = propsFactory({
   color: String,
+  contentOffset: [Number, String, Array],
+  gradient: Boolean,
   inset: Boolean,
   length: [Number, String],
   opacity: [Number, String],
   thickness: [Number, String],
   vertical: Boolean,
+  variant: {
+    type: String,
+    default: 'solid',
+    validator: v => allowedVariants.includes(v)
+  },
   ...makeComponentProps(),
   ...makeThemeProps()
 }, 'VDivider');
@@ -457,15 +472,27 @@ const VDivider = genericComponent()({
       }
       return styles;
     });
+    const contentStyles = toRef(() => {
+      const margin = Array.isArray(props.contentOffset) ? props.contentOffset[0] : props.contentOffset;
+      const shift = Array.isArray(props.contentOffset) ? props.contentOffset[1] : 0;
+      return {
+        marginBlock: props.vertical && margin ? convertToUnit(margin) : undefined,
+        marginInline: !props.vertical && margin ? convertToUnit(margin) : undefined,
+        transform: shift ? `translate${props.vertical ? 'X' : 'Y'}(${convertToUnit(shift)})` : undefined
+      };
+    });
     useRender(() => {
       const divider = createElementVNode("hr", {
         "class": normalizeClass([{
           'v-divider': true,
+          'v-divider--gradient': props.gradient && !slots.default,
           'v-divider--inset': props.inset,
           'v-divider--vertical': props.vertical
         }, themeClasses.value, textColorClasses.value, props.class]),
         "style": normalizeStyle([dividerStyles.value, textColorStyles.value, {
           '--v-border-opacity': props.opacity
+        }, {
+          'border-style': props.variant
         }, props.style]),
         "aria-orientation": !attrs.role || attrs.role === 'separator' ? props.vertical ? 'vertical' : 'horizontal' : undefined,
         "role": `${attrs.role || 'separator'}`
@@ -473,11 +500,13 @@ const VDivider = genericComponent()({
       if (!slots.default) return divider;
       return createElementVNode("div", {
         "class": normalizeClass(['v-divider__wrapper', {
-          'v-divider__wrapper--vertical': props.vertical,
-          'v-divider__wrapper--inset': props.inset
+          'v-divider__wrapper--gradient': props.gradient,
+          'v-divider__wrapper--inset': props.inset,
+          'v-divider__wrapper--vertical': props.vertical
         }])
       }, [divider, createElementVNode("div", {
-        "class": "v-divider__content"
+        "class": "v-divider__content",
+        "style": normalizeStyle(contentStyles.value)
       }, [slots.default()]), divider]);
     });
     return {};
@@ -505,10 +534,6 @@ const _sfc_main = {
     type: Function,
     default: getLayers,
   },
-  getChartSpec: {
-    type: Function,
-    default: getChartSpec,
-  },
 }, {
     "modelValue": { type: Boolean, required: true, default: false },
     "modelModifiers": {},
@@ -544,7 +569,7 @@ const copyBtns = [
     copyFn: async () =>
       await copyToClipBoard(getChartExportCode(), copySuccess),
     copyAs: "chart",
-    showIf: () => !!props.getChartSpec?.(),
+    showIf: () => chartSpec.value,
   },
 ];
 
@@ -567,12 +592,12 @@ const getMapEntryCode = () => {
 };
 
 const getChartExportCode = () => {
-  const chartSpec = props.getChartSpec?.();
-  if (!chartSpec) return "";
+  if (!chartSpec.value) return "";
   const preTag =
-    "## Chart Example <!" + '--{as="eox-chart" style="height: 300px;" spec=';
+    "## Chart Example <!" + '--{as="eox-chart" style="height: 400px;" spec=';
   const endTag = " }-->";
-  return `${preTag}'${JSON.stringify(chartSpec)}'${endTag}`;
+  const escapedSpec = base64EncodeSpec(chartSpec.value);
+  return `${preTag}'${escapedSpec}'${endTag}`;
 };
 
 return (_ctx, _cache) => {
@@ -647,7 +672,7 @@ return (_ctx, _cache) => {
                 createElementVNode("strong", null, "Map Layers Configuration")
               ], -1 /* CACHED */)),
               createElementVNode("div", _hoisted_4, toDisplayString(unref(removeUnneededProperties)(__props.getLayers())), 1 /* TEXT */),
-              (props.getChartSpec?.())
+              (unref(chartSpec))
                 ? (openBlock(), createElementBlock("div", _hoisted_5, [
                     _cache[4] || (_cache[4] = createElementVNode("p", { class: "text-body-2 mb-2" }, [
                       createElementVNode("strong", null, "Chart Spec (for export)")
@@ -684,6 +709,6 @@ return (_ctx, _cache) => {
 }
 
 };
-const ExportState = /*#__PURE__*/_export_sfc(_sfc_main, [['styles',[_style_0]],['__scopeId',"data-v-86a0e649"]]);
+const ExportState = /*#__PURE__*/_export_sfc(_sfc_main, [['styles',[_style_0]],['__scopeId',"data-v-b7d44f9a"]]);
 
 export { ExportState as default };

package/dist/client/{Footer-DLzQcjkI.js → Footer-xGfh2LUv.js}

@@ -1,5 +1,5 @@
 import { ref, shallowRef, computed, toRef, watchEffect, createVNode, normalizeStyle, normalizeClass, inject, createBlock, openBlock, unref, withCtx, createElementVNode, toDisplayString } from 'vue';
-import { g as genericComponent, p as propsFactory, k as provideTheme, f as useBackgroundColor, h as useBorder, i as useElevation, j as useRounded, C as useResizeObserver, y as useToggleScope, z as useLayoutItem, c as useRender, o as convertToUnit, q as makeThemeProps, m as makeTagProps, r as makeRoundedProps, A as makeLayoutItemProps, s as makeElevationProps, e as makeComponentProps, t as makeBorderProps, _ as _export_sfc, B as eodashKey, D as useDisplay } from './asWebComponent-Bw03Jutr.js';
+import { g as genericComponent, p as propsFactory, k as provideTheme, f as useBackgroundColor, h as useBorder, i as useElevation, j as useRounded, C as useResizeObserver, y as useToggleScope, z as useLayoutItem, c as useRender, o as convertToUnit, q as makeThemeProps, m as makeTagProps, r as makeRoundedProps, A as makeLayoutItemProps, s as makeElevationProps, e as makeComponentProps, t as makeBorderProps, _ as _export_sfc, B as eodashKey, D as useDisplay } from './asWebComponent-C5YMrXyg.js';
 
 const _style_0 = ".footer-text[data-v-f0fd061e]{font-size:.8rem}";
 

package/dist/client/{Header-_D9Z-zFJ.js → Header-BggV8BVC.js}

@@ -1,6 +1,6 @@
 import { createVNode, normalizeStyle, normalizeClass, createElementVNode, shallowRef, computed, ref, watch, onMounted, onBeforeUnmount, toRef, watchEffect, mergeProps, inject, createBlock, openBlock, withCtx, createTextVNode, toDisplayString, unref } from 'vue';
-import { p as propsFactory, g as genericComponent, m as makeTagProps, e as makeComponentProps, c as useRender, f as useBackgroundColor, h as useBorder, i as useElevation, j as useRounded, k as provideTheme, l as useRtl, n as provideDefaults, V as VDefaultsProvider, o as convertToUnit, q as makeThemeProps, r as makeRoundedProps, s as makeElevationProps, t as makeBorderProps, v as clamp, w as consoleWarn, x as useProxiedModel, y as useToggleScope, z as useLayoutItem, A as makeLayoutItemProps, _ as _export_sfc, B as eodashKey } from './asWebComponent-Bw03Jutr.js';
-import { V as VImg, a as VExpandTransition } from './VImg-COXTnCWE.js';
+import { p as propsFactory, g as genericComponent, m as makeTagProps, e as makeComponentProps, c as useRender, f as useBackgroundColor, h as useBorder, i as useElevation, j as useRounded, k as provideTheme, l as useRtl, n as provideDefaults, V as VDefaultsProvider, o as convertToUnit, q as makeThemeProps, r as makeRoundedProps, s as makeElevationProps, t as makeBorderProps, v as clamp, w as consoleWarn, x as useProxiedModel, y as useToggleScope, z as useLayoutItem, A as makeLayoutItemProps, _ as _export_sfc, B as eodashKey } from './asWebComponent-C5YMrXyg.js';
+import { V as VImg, a as VExpandTransition } from './VImg-DN23k6uX.js';
 import { u as useSsrBoot } from './ssrBoot-Zgc_Ttvi.js';
 
 const _style_0 = ".logo[data-v-86c95219]{max-width:140px}";
@@ -36,6 +36,10 @@ const allowedDensities = [null, 'prominent', 'default', 'comfortable', 'compact'
 const makeVToolbarProps = propsFactory({
   absolute: Boolean,
   collapse: Boolean,
+  collapsePosition: {
+    type: String,
+    default: 'start'
+  },
   color: String,
   density: {
     type: String,
@@ -107,7 +111,7 @@ const VToolbar = genericComponent()({
       const extension = slots.extension?.();
       isExtended.value = props.extended === null ? !!extension : props.extended;
       return createVNode(props.tag, {
-        "class": normalizeClass(['v-toolbar', {
+        "class": normalizeClass(['v-toolbar', `v-toolbar--collapse-${props.collapsePosition}`, {
           'v-toolbar--absolute': props.absolute,
           'v-toolbar--collapse': props.collapse,
           'v-toolbar--flat': props.flat,
@@ -193,7 +197,8 @@ const makeScrollProps = propsFactory({
 function useScroll(props) {
   let args = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   const {
-    canScroll
+    canScroll,
+    layoutSize
   } = args;
   let previousScroll = 0;
   let previousScrollHeight = 0;
@@ -203,6 +208,9 @@ function useScroll(props) {
   const currentThreshold = shallowRef(0);
   const isScrollActive = shallowRef(false);
   const isScrollingUp = shallowRef(false);
+  const isAtBottom = shallowRef(false);
+  const reachedBottomWhileScrollingDown = shallowRef(false);
+  const hasEnoughScrollableSpace = shallowRef(true);
   const scrollThreshold = computed(() => {
     return Number(props.scrollThreshold);
   });
@@ -214,19 +222,82 @@ function useScroll(props) {
   const scrollRatio = computed(() => {
     return clamp((scrollThreshold.value - currentScroll.value) / scrollThreshold.value || 0);
   });
-  const onScroll = () => {
+  function getScrollMetrics(targetEl) {
+    const clientHeight = 'window' in targetEl ? window.innerHeight : targetEl.clientHeight;
+    const scrollHeight = 'window' in targetEl ? document.documentElement.scrollHeight : targetEl.scrollHeight;
+    return {
+      clientHeight,
+      scrollHeight
+    };
+  }
+  function checkScrollableSpace() {
+    const targetEl = target.value;
+    if (!targetEl) return;
+    const {
+      clientHeight,
+      scrollHeight
+    } = getScrollMetrics(targetEl);
+    const maxScrollableDistance = scrollHeight - clientHeight;
+
+    // When the scroll-hide element (like AppBar) hides, it causes the page to grow
+    // We need extra scrollable space beyond the threshold to prevent bouncing
+    // Add the element's height to the required minimum distance
+    const elementHeight = layoutSize?.value || 0;
+    const minRequiredDistance = scrollThreshold.value + elementHeight;
+
+    // Only enable scroll-hide if there's enough scrollable space
+    hasEnoughScrollableSpace.value = maxScrollableDistance > minRequiredDistance;
+  }
+  function onResize() {
+    checkScrollableSpace();
+  }
+  function onScroll() {
     const targetEl = target.value;
     if (!targetEl || canScroll && !canScroll.value) return;
     previousScroll = currentScroll.value;
     currentScroll.value = 'window' in targetEl ? targetEl.pageYOffset : targetEl.scrollTop;
     const currentScrollHeight = targetEl instanceof Window ? document.documentElement.scrollHeight : targetEl.scrollHeight;
     if (previousScrollHeight !== currentScrollHeight) {
+      // If page is growing (content loading), recalculate scrollable space
+      // If page is shrinking (likely due to navbar animation), don't recalculate
+      if (currentScrollHeight > previousScrollHeight) {
+        checkScrollableSpace();
+      }
       previousScrollHeight = currentScrollHeight;
-      return;
     }
     isScrollingUp.value = currentScroll.value < previousScroll;
     currentThreshold.value = Math.abs(currentScroll.value - scrollThreshold.value);
-  };
+
+    // Detect if at bottom of page
+    const {
+      clientHeight,
+      scrollHeight
+    } = getScrollMetrics(targetEl);
+    const atBottom = currentScroll.value + clientHeight >= scrollHeight - 5;
+
+    // Track when bottom is reached during downward scroll
+    // Only set flag if ALL conditions are met:
+    // 1. Scrolled past threshold (navbar is hiding)
+    // 2. Page has enough scrollable space for scroll-hide
+    // This prevents activation on short pages or edge cases
+    if (!isScrollingUp.value && atBottom && currentScroll.value >= scrollThreshold.value && hasEnoughScrollableSpace.value) {
+      reachedBottomWhileScrollingDown.value = true;
+    }
+
+    // Reset the flag when:
+    // 1. Scrolling up away from bottom (with small tolerance for touchpad/momentum scrolling)
+    // 2. Scroll position jumped significantly (e.g., navigation, scroll restoration)
+    // 3. Scroll is at the very top (page navigation resets to top)
+    const scrollJumped = Math.abs(currentScroll.value - previousScroll) > 100;
+    const atTop = currentScroll.value <= 5;
+    const scrolledUpSignificantly = isScrollingUp.value && previousScroll - currentScroll.value > 1;
+    if (scrolledUpSignificantly && !atBottom || scrollJumped && currentScroll.value < scrollThreshold.value || atTop) {
+      reachedBottomWhileScrollingDown.value = false;
+    }
+
+    // Update state
+    isAtBottom.value = atBottom;
+  }
   watch(isScrollingUp, () => {
     savedScroll.value = savedScroll.value || currentScroll.value;
   });
@@ -246,12 +317,23 @@ function useScroll(props) {
       target.value.addEventListener('scroll', onScroll, {
         passive: true
       });
+
+      // Check scrollable space when target is set
+      Promise.resolve().then(() => {
+        checkScrollableSpace();
+      });
     }, {
       immediate: true
     });
+
+    // Listen to window resize to recalculate scrollable space
+    window.addEventListener('resize', onResize, {
+      passive: true
+    });
   });
   onBeforeUnmount(() => {
     target.value?.removeEventListener('scroll', onScroll);
+    window.removeEventListener('resize', onResize);
   });
 
   // Do we need this? If yes - seems that
@@ -269,7 +351,10 @@ function useScroll(props) {
     // probably can be removed
     // later (2 chars chlng)
     isScrollingUp,
-    savedScroll
+    savedScroll,
+    isAtBottom,
+    reachedBottomWhileScrollingDown,
+    hasEnoughScrollableSpace
   };
 }
 
@@ -322,13 +407,22 @@ const VAppBar = genericComponent()({
       // behavior.shrink ||
       !isActive.value;
     });
+    const appBarHeight = computed(() => {
+      const height = vToolbarRef.value?.contentHeight ?? 0;
+      const extensionHeight = vToolbarRef.value?.extensionHeight ?? 0;
+      return height + extensionHeight;
+    });
     const {
       currentScroll,
       scrollThreshold,
       isScrollingUp,
-      scrollRatio
+      scrollRatio,
+      isAtBottom,
+      reachedBottomWhileScrollingDown,
+      hasEnoughScrollableSpace
     } = useScroll(props, {
-      canScroll
+      canScroll,
+      layoutSize: appBarHeight
     });
     const canHide = toRef(() => scrollBehavior.value.hide || scrollBehavior.value.fullyHide);
     const isCollapsed = computed(() => props.collapse || scrollBehavior.value.collapse && (scrollBehavior.value.inverted ? scrollRatio.value > 0 : scrollRatio.value === 0));
@@ -343,15 +437,31 @@ const VAppBar = genericComponent()({
     });
     useToggleScope(() => !!props.scrollBehavior, () => {
       watchEffect(() => {
-        if (canHide.value) {
-          if (scrollBehavior.value.inverted) {
-            isActive.value = currentScroll.value > scrollThreshold.value;
-          } else {
-            isActive.value = isScrollingUp.value || currentScroll.value < scrollThreshold.value;
-          }
-        } else {
+        if (!canHide.value) {
           isActive.value = true;
+          return;
+        }
+        if (scrollBehavior.value.inverted) {
+          isActive.value = currentScroll.value > scrollThreshold.value;
+          return;
         }
+
+        // If there's not enough scrollable space, don't apply scroll-hide behavior at all
+        // This prevents flickering/bouncing animations on short pages
+        if (!hasEnoughScrollableSpace.value) {
+          isActive.value = true;
+          return;
+        }
+
+        // Prevent navbar from showing when we reached bottom while scrolling down
+        // This handles the case where scroll momentum causes to hit bottom during hide transition
+        if (reachedBottomWhileScrollingDown.value) {
+          isActive.value = false;
+          return;
+        }
+
+        // Normal behavior: show when scrolling up (and not at bottom) or above threshold
+        isActive.value = isScrollingUp.value && !isAtBottom.value || currentScroll.value < scrollThreshold.value;
       });
     });
     const {