@energysage/es-ds-components 5.6.0 → 5.6.1

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # 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)
 
 

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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@energysage/es-ds-components",
-    "version": "5.6.0",
+    "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",