@energysage/es-ds-components 5.5.6 → 5.6.1

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Changelog
 
+## [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)
+
+
+### Bug Fixes
+
+* arrow and hover fixes for EsNavCtaCard ([#1766](https://github.com/EnergySage/es-ds/issues/1766)) ([bd65830](https://github.com/EnergySage/es-ds/commit/bd658300c5404520d838545efaa377268ce8e6f2))
+* EsMobileNav highlighted item color and back/close button feedback ([#1767](https://github.com/EnergySage/es-ds/issues/1767)) ([291c334](https://github.com/EnergySage/es-ds/commit/291c3348bcffd10f0757f6858490badcdc1d1429))
+
+
+### Dependencies
+
+* The following workspace dependencies were updated
+  * devDependencies
+    * @energysage/es-ds-styles bumped from ^3.5.7 to ^3.5.8
+
+## [5.6.0](https://github.com/EnergySage/es-ds/compare/es-ds-components-v5.5.6...es-ds-components-v5.6.0) (2026-06-01)
+
+
+### Features
+
+* sticky bar now coordinates with other fixed position elements ([#1764](https://github.com/EnergySage/es-ds/issues/1764)) ([3d250de](https://github.com/EnergySage/es-ds/commit/3d250de895097cce81ca1c624ef0306229ebcf97))
+
 ## [5.5.6](https://github.com/EnergySage/es-ds/compare/es-ds-components-v5.5.5...es-ds-components-v5.5.6) (2026-05-29)
 
 

package/app/components/es-mobile-nav-content.vue

@@ -239,6 +239,11 @@ provide('isElementWithinMenu', isElementWithinMenu);
     transform: translateY(-50%);
     top: 50%;
 
+    /* give feedback on tap/click press down */
+    &:active {
+        transform: translateY(calc(-50% + 1px));
+    }
+
     svg {
         height: 20px !important;
         width: 20px !important;
@@ -250,6 +255,11 @@ provide('isElementWithinMenu', isElementWithinMenu);
     transform: translateY(-50%);
     top: 50%;
 
+    /* give feedback on tap/click press down */
+    &:active {
+        transform: translateY(calc(-50% + 1px));
+    }
+
     svg {
         height: 20px !important;
         width: 20px !important;

package/app/components/es-mobile-nav-link.vue

@@ -53,10 +53,8 @@ $transition-duration: 100ms;
     }
 
     &:active {
-        color: variables.$white;
-
         & > span {
-            background-color: variables.$dark-blue;
+            background-color: variables.$blue-100;
         }
     }
 }

package/app/components/es-mobile-sub-nav.vue

@@ -215,14 +215,9 @@ $transition-duration: 100ms;
 
             &[data-state='open'] {
                 border-bottom-color: transparent;
-                color: variables.$white;
 
                 & > span {
-                    background-color: variables.$dark-blue;
-
-                    & > svg {
-                        color: variables.$white;
-                    }
+                    background-color: variables.$blue-100;
                 }
             }
         }

package/app/components/es-nav-cta-card.vue

@@ -5,10 +5,17 @@ interface Props {
     subtitle?: string;
     target?: string;
 }
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
     subtitle: '',
     target: '_self',
 });
+
+const headingPartOne = computed(() => {
+    const arr = props.heading.split(' ');
+    arr.pop();
+    return arr.join(' ');
+});
+const headingPartTwo = computed(() => props.heading.split(' ').pop());
 </script>
 
 <template>
@@ -28,11 +35,14 @@ withDefaults(defineProps<Props>(), {
             </div>
         </div>
         <div>
-            <p class="align-items-center d-flex font-weight-bold mb-0 text-blue-600">
-                {{ heading }}
-                <icon-arrow-right
-                    aria-hidden="true"
-                    class="es-nav-cta-card-arrow flex-shrink-0 ml-25" />
+            <p class="font-weight-bold mb-0 text-blue-600">
+                {{ headingPartOne }}
+                <span class="text-nowrap">
+                    {{ headingPartTwo }}
+                    <icon-arrow-right
+                        aria-hidden="true"
+                        class="es-nav-cta-card-arrow flex-shrink-0 position-relative" />
+                </span>
             </p>
             <p
                 v-if="subtitle"
@@ -50,6 +60,12 @@ withDefaults(defineProps<Props>(), {
 .es-nav-cta-card {
     border-width: 1px;
 
+    /* override EsCard active state */
+    &:active {
+        border-color: variables.$blue-600;
+        box-shadow: 0 0 0 1px variables.$blue-600;
+    }
+
     /* only apply a hover state if the device supports mouse hover */
     @media (hover) {
         &:hover {
@@ -63,12 +79,22 @@ withDefaults(defineProps<Props>(), {
                 }
             }
 
+            /* move the arrow slightly to the right on hover */
             .es-nav-cta-card-arrow {
-                margin-left: 0.75rem !important;
+                transform: translateX(0.25rem);
             }
         }
     }
 
+    &-arrow {
+        /* vertically center the icon relative to the text */
+        top: -2px;
+
+        @media not (prefers-reduced-motion) {
+            transition: variables.$transition-base;
+        }
+    }
+
     &-icon {
         /* you cannot animate radial gradient backgrounds, so apply it to a pseudo element and fade it in on hover */
         &::after {
@@ -103,11 +129,5 @@ withDefaults(defineProps<Props>(), {
             transition: variables.$transition-base;
         }
     }
-
-    &-arrow {
-        @media not (prefers-reduced-motion) {
-            transition: variables.$transition-base;
-        }
-    }
 }
 </style>

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

@@ -77,9 +77,15 @@ function updateVisibility() {
     if (currentScrollY <= 0) {
         // back at the very top: switch to absolute so bar scrolls away naturally on next scroll down
         barState.value = 'absolute';
+
+        // emit event notifying other fixed position elements of the change
+        emitter.emit(ES_STICKY_BAR_FIXED_HIDE_EVENT_NAME);
     } else if (barState.value === 'absolute' && currentScrollY >= barHeight.value) {
         // bar has scrolled fully off screen: reposition to fixed-hidden while invisible
         hideWithoutAnimation();
+
+        // emit event notifying other fixed position elements of the change
+        emitter.emit(ES_STICKY_BAR_FIXED_HIDE_EVENT_NAME);
     } else if (
         barState.value === 'fixed-hidden' &&
         scrollDirection < 0 &&
@@ -87,6 +93,9 @@ function updateVisibility() {
     ) {
         // scrolling up far enough: slide bar into view
         barState.value = 'fixed-visible';
+
+        // emit event notifying other fixed position elements of the change
+        emitter.emit(ES_STICKY_BAR_FIXED_SHOW_EVENT_NAME);
     } else if (
         barState.value === 'fixed-visible' &&
         scrollDirection > 0 &&
@@ -94,6 +103,9 @@ function updateVisibility() {
     ) {
         // scrolling down far enough: slide bar off screen
         barState.value = 'fixed-hidden';
+
+        // emit event notifying other fixed position elements of the change
+        emitter.emit(ES_STICKY_BAR_FIXED_HIDE_EVENT_NAME);
     }
 
     lastScrollY = currentScrollY;
@@ -129,6 +141,12 @@ const onMenuBarClose = () => {
     }
 };
 
+// expose barHeight to other fixed position elements via a CSS variable on <html> so they can
+// position themselves relative to the bar
+watch(barHeight, (height) => {
+    document.documentElement.style.setProperty('--es-sticky-bar-height', `${height}px`);
+});
+
 onMounted(() => {
     // measure height before switching position so the placeholder matches exactly
     barHeight.value = bar.value?.offsetHeight ?? 0;
@@ -154,6 +172,8 @@ onMounted(() => {
 onUnmounted(() => {
     window.removeEventListener('scroll', onScroll);
 
+    document.documentElement.style.removeProperty('--es-sticky-bar-height');
+
     emitter.off(ES_MENU_BAR_OPEN_EVENT_NAME, onMenuBarOpen);
     emitter.off(ES_MENU_BAR_CLOSE_EVENT_NAME, onMenuBarClose);
 });

package/app/utils/sticky-bar.ts

@@ -0,0 +1,2 @@
+export const ES_STICKY_BAR_FIXED_HIDE_EVENT_NAME = 'es-sticky-bar-fixed-hide';
+export const ES_STICKY_BAR_FIXED_SHOW_EVENT_NAME = 'es-sticky-bar-fixed-show';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@energysage/es-ds-components",
-    "version": "5.5.6",
+    "version": "5.6.1",
     "private": false,
     "type": "module",
     "description": "An EnergySage Vue component library",
@@ -29,7 +29,7 @@
     },
     "license": "MIT",
     "devDependencies": {
-        "@energysage/es-ds-styles": "^3.5.7",
+        "@energysage/es-ds-styles": "^3.5.8",
         "@nuxt/eslint": "^1.14.0",
         "@nuxtjs/google-fonts": "^3.2.0",
         "@phosphor-icons/vue": "^2.2.1",