@energysage/es-ds-components 5.6.1 → 5.7.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [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)
+
+
+### Bug Fixes
+
+* add missing orange line below EsMenuBar desktop flyout column headers ([#1769](https://github.com/EnergySage/es-ds/issues/1769)) ([1c91cda](https://github.com/EnergySage/es-ds/commit/1c91cda4d4b9a441bedebe977ffbd3113a850999))
+
 ## [5.6.1](https://github.com/EnergySage/es-ds/compare/es-ds-components-v5.6.0...es-ds-components-v5.6.1) (2026-06-03)
 
 

package/app/components/es-menu-bar-flyout-column.vue

@@ -16,7 +16,7 @@ withDefaults(defineProps<IProps>(), {
         xl="3">
         <h2
             v-if="heading"
-            class="eyebrow">
+            class="es-menu-bar-flyout-column-heading eyebrow pb-50 position-relative">
             {{ heading }}
         </h2>
         <navigation-menu-list class="list-unstyled">
@@ -24,3 +24,19 @@ withDefaults(defineProps<IProps>(), {
         </navigation-menu-list>
     </es-col>
 </template>
+
+<style lang="scss" scoped>
+@use '@energysage/es-ds-styles/scss/variables';
+
+.es-menu-bar-flyout-column-heading {
+    &::after {
+        background-color: variables.$warm-orange;
+        bottom: 0;
+        content: '';
+        height: 1px;
+        left: 0;
+        position: absolute;
+        width: 64px;
+    }
+}
+</style>

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

@@ -7,9 +7,13 @@ import {
 } from '../utils/menu-bar';
 
 interface IProps {
+    initialState?: 'static' | 'absolute';
+    transparentColor?: string;
     transparentStartingAtBreakpoint?: 'lg' | 'xl' | 'xxl' | '';
 }
-withDefaults(defineProps<IProps>(), {
+const props = withDefaults(defineProps<IProps>(), {
+    initialState: 'static',
+    transparentColor: 'transparent',
     transparentStartingAtBreakpoint: '',
 });
 
@@ -24,7 +28,7 @@ const emitter = useEsdsEvents();
 // - fixed-visible: bar is pinned to the top of the viewport, visible
 // - fixed-hidden:  bar is pinned but translated off screen above the viewport
 type BarState = 'static' | 'absolute' | 'fixed-visible' | 'fixed-hidden';
-const barState = ref<BarState>('static');
+const barState = ref<BarState>(props.initialState);
 
 // ref to the bar element, used to read its rendered height
 const bar = ref<HTMLElement | null>(null);
@@ -199,6 +203,7 @@ onUnmounted(() => {
     <!-- holds the bar's space in normal flow when the bar is absolutely or fixed positioned -->
     <div
         v-if="barState !== 'static'"
+        :class="{ 'd-xl-none': initialState !== 'static' }"
         :style="{ height: `${barHeight}px` }"
         aria-hidden="true" />
 </template>
@@ -224,7 +229,7 @@ $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;
             }
         }

package/package.json

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