@energysage/es-ds-components 5.6.2 → 5.7.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [5.7.1](https://github.com/EnergySage/es-ds/compare/es-ds-components-v5.7.0...es-ds-components-v5.7.1) (2026-06-12)
+
+
+### Bug Fixes
+
+* floating sticky bar no longer causes mobile layout shift ([#1773](https://github.com/EnergySage/es-ds/issues/1773)) ([077eb77](https://github.com/EnergySage/es-ds/commit/077eb77f062df07a2e8714e8146c842e11c1b2db))
+
+## [5.7.0](https://github.com/EnergySage/es-ds/compare/es-ds-components-v5.6.2...es-ds-components-v5.7.0) (2026-06-11)
+
+
+### Features
+
+* enable EsStickyBar to float above page content ([#1771](https://github.com/EnergySage/es-ds/issues/1771)) ([08a420c](https://github.com/EnergySage/es-ds/commit/08a420c2d95ed52328c991346217b2955fe88995))
+
 ## [5.6.2](https://github.com/EnergySage/es-ds/compare/es-ds-components-v5.6.1...es-ds-components-v5.6.2) (2026-06-03)
 
 

package/app/components/es-sticky-bar.vue

@@ -7,9 +7,13 @@ import {
 } from '../utils/menu-bar';
 
 interface IProps {
+    floatStartingAtBreakpoint?: 'lg' | 'xl' | 'xxl' | '';
+    transparentColor?: string;
     transparentStartingAtBreakpoint?: 'lg' | 'xl' | 'xxl' | '';
 }
 withDefaults(defineProps<IProps>(), {
+    floatStartingAtBreakpoint: '',
+    transparentColor: 'transparent',
     transparentStartingAtBreakpoint: '',
 });
 
@@ -185,6 +189,7 @@ onUnmounted(() => {
         class="es-sticky-bar"
         :class="[
             `es-sticky-bar--${barState}`,
+            floatStartingAtBreakpoint && `es-sticky-bar--float-from-${floatStartingAtBreakpoint}`,
             transparentStartingAtBreakpoint && `es-sticky-bar--transparent-from-${transparentStartingAtBreakpoint}`,
             {
                 'es-sticky-bar--no-transition': suppressTransition,
@@ -196,9 +201,11 @@ onUnmounted(() => {
         @mouseout="isHovered = false">
         <slot />
     </div>
-    <!-- holds the bar's space in normal flow when the bar is absolutely or fixed positioned -->
+    <!-- holds the bar's space in normal flow when the bar is absolutely or fixed positioned;
+         hidden at/above the float breakpoint, where the bar overlaps page content instead -->
     <div
         v-if="barState !== 'static'"
+        :class="floatStartingAtBreakpoint && `d-${floatStartingAtBreakpoint}-none`"
         :style="{ height: `${barHeight}px` }"
         aria-hidden="true" />
 </template>
@@ -224,12 +231,23 @@ $shadow: 0 0 6px 0 rgba(34, 38, 51, 0.2);
     @each $bp in (lg, xl, xxl) {
         &--transparent-from-#{$bp} {
             @include breakpoints.media-breakpoint-up($bp) {
-                background-color: transparent;
+                background-color: v-bind(transparentColor);
                 box-shadow: none;
             }
         }
     }
 
+    // while still in the pre-mount static state, take the bar out of flow at/above the float
+    // breakpoint so it overlaps page content from the first paint; below the breakpoint the
+    // bar stays in flow until mount (when the spacer appears), avoiding a layout shift
+    @each $bp in (lg, xl, xxl) {
+        &--float-from-#{$bp}.es-sticky-bar--static {
+            @include breakpoints.media-breakpoint-up($bp) {
+                position: absolute;
+            }
+        }
+    }
+
     @media not (prefers-reduced-motion) {
         transition:
             background 0.2s ease-in-out,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@energysage/es-ds-components",
-    "version": "5.6.2",
+    "version": "5.7.1",
     "private": false,
     "type": "module",
     "description": "An EnergySage Vue component library",