@energysage/es-ds-components 5.2.0 → 5.3.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## [5.3.0](https://github.com/EnergySage/es-ds/compare/es-ds-components-v5.2.0...es-ds-components-v5.3.0) (2026-04-06)
+
+
+### Features
+
+* add EsMobileNav ([#1722](https://github.com/EnergySage/es-ds/issues/1722)) ([29fcfad](https://github.com/EnergySage/es-ds/commit/29fcfada66e6386df1f58d10f783b29be416ec2e))
+* added EsNavCtaCard for use in mobile/desktop navs ([#1723](https://github.com/EnergySage/es-ds/issues/1723)) ([74b3bbd](https://github.com/EnergySage/es-ds/commit/74b3bbd68c293b9606f9012b5d94ba1c06c60f59))
+* added the breakpoints composable ([#1724](https://github.com/EnergySage/es-ds/issues/1724)) ([de6aa05](https://github.com/EnergySage/es-ds/commit/de6aa058e0783b865930c668b729329333994d3c))
+
+
+### Dependencies
+
+* The following workspace dependencies were updated
+  * dependencies
+    * @energysage/es-ds-styles bumped from ^3.3.4 to ^3.4.0
+
 ## [5.2.0](https://github.com/EnergySage/es-ds/compare/es-ds-components-v5.1.0...es-ds-components-v5.2.0) (2026-03-27)
 
 

package/app/components/es-logo.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+// for dark background, set class="text-white" on this component
+interface IProps {
+    alt?: string;
+    height?: string;
+    width?: string;
+}
+withDefaults(defineProps<IProps>(), {
+    alt: 'EnergySage',
+    height: '45px',
+    width: '205px',
+});
+</script>
+
+<template>
+    <svg
+        class="es-logo"
+        :style="{
+            height: height,
+            width: width,
+        }"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 205 45"
+        width="205"
+        height="45"
+        fill="none">
+        <title v-if="alt">
+            {{ alt }}
+        </title>
+        <!-- eslint-disable -->
+        <path
+            d="M47.929 17.293c-4.967 0-8.435 3.573-8.435 8.694 0 5.12 3.533 8.533 8.593 8.533 3.42 0 5.972-1.308 6.895-2.524a.308.308 0 0 0 .029-.327l-.114-.214a.311.311 0 0 0-.466-.097 7.103 7.103 0 0 1-4.452 1.56c-2.536 0-4.866-1.33-6.077-3.47a5.229 5.229 0 0 1-.843-2.076c-.02-.129-.06-.355-.081-.605H55.22c.17 0 .308-.138.308-.307v-.832c0-4.152-2.35-8.344-7.596-8.344v.009h-.004Zm-4.78 6.534c.635-2.306 2.337-3.619 4.715-3.619 2.71 0 3.744 1.89 4.124 3.619h-8.844.004ZM83.472 17.293c-4.967 0-8.435 3.573-8.435 8.694 0 5.12 3.533 8.533 8.593 8.533 3.42 0 5.972-1.308 6.896-2.524a.309.309 0 0 0 .028-.327l-.113-.214a.311.311 0 0 0-.466-.097 7.103 7.103 0 0 1-4.453 1.56c-2.536 0-4.866-1.33-6.077-3.47a5.23 5.23 0 0 1-.843-2.076c-.02-.129-.06-.355-.08-.605h12.243c.17 0 .308-.138.308-.307v-.832c0-4.152-2.35-8.344-7.597-8.344v.009h-.004Zm-4.784 6.534c.636-2.306 2.337-3.619 4.715-3.619 2.71 0 3.744 1.89 4.125 3.619h-8.845.004ZM197.399 17.293c-4.967 0-8.435 3.573-8.435 8.694 0 5.12 3.533 8.533 8.593 8.533 3.42 0 5.972-1.308 6.896-2.524a.308.308 0 0 0 .028-.327l-.113-.214a.311.311 0 0 0-.466-.097 7.103 7.103 0 0 1-4.452 1.56c-2.537 0-4.866-1.33-6.078-3.47-.004-.008-.008-.016-.016-.024a5.219 5.219 0 0 1-.826-2.052c-.021-.129-.061-.355-.081-.605h12.243c.17 0 .308-.138.308-.307v-.832c0-4.152-2.35-8.344-7.596-8.344v.009h-.005Zm-.064 2.915c2.71 0 3.743 1.89 4.124 3.619h-8.844c.636-2.306 2.337-3.619 4.716-3.619h.004ZM27.96 29.287h-3.7a.154.154 0 0 0-.154.153v4.693c0 .084.07.153.154.153h3.7a.154.154 0 0 0 .153-.153V29.44a.154.154 0 0 0-.154-.154Z"
+            fill="currentColor" />
+        <path
+            d="M25.553 17.228h-9.61a.306.306 0 0 1-.304-.303V.303A.306.306 0 0 0 15.335 0H13.35a.454.454 0 0 0-.414.267L3.918 20.37l8.475-13.303v17.668l3.258-4.272h8.062L11.214 40.08V26.197H1.406L0 29.3h7.973V44.7c0 .166.134.299.3.299h3.484a.294.294 0 0 0 .256-.141l13.576-21.311 9.63 10.18-9.67-16.496.004-.004Z"
+            fill="#FF9133" />
+        <path
+            d="M120.195 19.182c-1.945-1.272-4.145-1.89-6.73-1.89-2.37 0-4.57.78-6.186 2.197-1.791 1.567-2.735 3.772-2.735 6.381 0 3.166 1.325 5.165 2.435 6.28 1.43 1.438 3.375 2.261 5.332 2.261 1.523 0 3.184-.634 4.391-1.635a.166.166 0 0 1 .272.129v1.963c0 3.17-1.471 4.777-4.376 4.777-2.256 0-4.29-.856-5.352-1.587-.056-.04-.129-.053-.194-.04a.25.25 0 0 0-.162.117l-1.293 2.18a.166.166 0 0 0 .049.223c1.053.714 3.415 1.974 6.952 1.974 1.455 0 3.537-.29 5.198-1.684 1.641-1.377 2.476-3.489 2.476-6.283V19.324a.171.171 0 0 0-.077-.142Zm-3.221 1.975v7.988a.19.19 0 0 1-.024.093c-.843 1.325-2.496 2.245-4.06 2.245-1.953 0-4.858-1.494-4.858-5.609 0-2.617 1.43-5.674 5.47-5.674 1.6 0 2.787.517 3.387.816a.162.162 0 0 1 .089.15v-.009h-.004ZM139.123 17.943a.249.249 0 0 0-.215-.117h-3.233a.166.166 0 0 0-.149.092l-4.996 10.347a.168.168 0 0 1-.304-.004l-4.55-10.286a.252.252 0 0 0-.226-.15h-3.148a.246.246 0 0 0-.227.351l6.466 13.966c.02.048.02.1-.004.15l-5.202 9.68a.251.251 0 0 0 .004.245.243.243 0 0 0 .214.122h3.084a.25.25 0 0 0 .222-.138l12.272-24.016a.244.244 0 0 0-.008-.242ZM145.796 24.279c-1.531-.743-2.856-1.39-2.856-2.577 0-.864.688-1.736 2.224-1.736 1.535 0 2.889 1.127 3.253 1.518a.251.251 0 0 0 .405-.044l1.155-2.04a.158.158 0 0 0-.024-.193c-.855-.885-2.743-1.947-5.142-1.947-3.034 0-5.323 1.995-5.323 4.636 0 2.504 2.289 3.691 4.307 4.741 1.6.832 2.985 1.551 2.985 2.718 0 2.177-2.021 2.346-2.641 2.346-2.236 0-3.768-1.457-4.185-1.906a.244.244 0 0 0-.207-.076.25.25 0 0 0-.186.117l-1.289 2.076a.17.17 0 0 0 .029.21c.899.831 2.909 2.29 5.972 2.29 3.549 0 5.935-2.056 5.935-5.117 0-2.876-2.342-4.01-4.404-5.016h-.008ZM167.475 19.251a11.564 11.564 0 0 0-6.409-1.954c-4.546 0-9.148 2.935-9.148 8.54 0 4.871 3.2 8.542 7.446 8.542 1.832 0 3.651-.787 4.741-1.97a.167.167 0 0 1 .291.1l.089 1.333a.162.162 0 0 0 .166.153h2.731a.164.164 0 0 0 .166-.165V19.392a.162.162 0 0 0-.073-.137v-.004Zm-3.285 1.914v7.576s0 .04-.013.06c-.474 1.281-2.272 2.678-4.173 2.678-3.16 0-4.602-2.79-4.602-5.387 0-3.4 2.326-5.868 5.534-5.868 1.268 0 2.464.384 3.173.8a.16.16 0 0 1 .081.141ZM186.1 19.182c-1.945-1.272-4.145-1.89-6.725-1.89-2.371 0-4.571.78-6.187 2.197-1.791 1.567-2.735 3.772-2.735 6.381 0 3.166 1.325 5.165 2.435 6.28 1.43 1.438 3.375 2.261 5.332 2.261 1.523 0 3.184-.634 4.392-1.635a.166.166 0 0 1 .271.129v1.963c0 3.17-1.471 4.777-4.376 4.777-2.256 0-4.29-.856-5.351-1.587-.057-.04-.126-.053-.195-.04a.25.25 0 0 0-.162.117l-1.292 2.18a.165.165 0 0 0 .048.223c1.054.714 3.416 1.974 6.952 1.974 1.455 0 3.537-.29 5.199-1.684 1.64-1.377 2.475-3.489 2.475-6.283V19.324a.169.169 0 0 0-.077-.142h-.004Zm-7.305 12.297c-1.953 0-4.858-1.494-4.858-5.609 0-2.617 1.431-5.674 5.47-5.674 1.6 0 2.787.517 3.387.816a.162.162 0 0 1 .089.15v7.983a.19.19 0 0 1-.024.093c-.843 1.325-2.496 2.245-4.06 2.245l-.004-.004ZM72.821 34.294h-3.08a.164.164 0 0 1-.165-.165l-.073-8.8v-.012a5.33 5.33 0 0 0-.584-2.16 4.783 4.783 0 0 0-1.73-1.866c-.753-.477-1.697-.715-2.8-.715-.712 0-1.251.028-1.6.084-.291.049-.579.118-.854.21a.456.456 0 0 0-.316.433V34.12a.168.168 0 0 1-.17.166c-1.102-.008-2.111-.012-3.075-.012a.164.164 0 0 1-.167-.166v-15.33c0-.072.045-.137.114-.157.636-.202 1.454-.4 2.435-.59a19.63 19.63 0 0 1 3.699-.327c1.738 0 3.261.364 4.533 1.075 1.268.71 2.265 1.688 2.954 2.895.672 1.175 1.02 2.504 1.041 3.954v8.492a.164.164 0 0 1-.166.166v.008h.004ZM104.524 18.936a.167.167 0 0 0-.069-.226c-2.95-1.623-7.48-1.006-10.53-.085a.161.161 0 0 0-.113.158v15.33c0 .092.073.165.166.165.964 0 1.977.008 3.075.012.093 0 .17-.073.17-.165V21.307c0-.198.126-.372.312-.432.875-.271 1.305-.283 2.455-.295 1.102 0 2.046.242 2.8.715.129.08.308.258.425.064l1.305-2.427h.004v.004Z"
+            fill="currentColor" />
+        <!-- eslint-enable -->
+    </svg>
+</template>
+
+<style lang="scss" scoped>
+@use '@energysage/es-ds-styles/scss/variables';
+
+.es-logo {
+    color: variables.$blue-900;
+}
+</style>

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

@@ -0,0 +1,308 @@
+<script setup lang="ts">
+import { NavigationMenuContent, NavigationMenuList } from 'reka-ui';
+import type { ShallowRef } from 'vue';
+
+const mobileNavParentElement = useTemplateRef('mobileNavParentElement');
+
+// reactive flags set by hidden sr-only buttons in submenus to simulate focus on visible header buttons
+const backButtonSimulatedFocus = ref(false);
+const closeButtonSimulatedFocus = ref(false);
+
+// injected variables provided from EsMobileNav
+const animationDuration = inject('animationDuration', 200);
+const closeMenu: (...args: any[]) => void = inject('closeMenu', () => {});
+const currentDepth = inject(
+    'currentDepth',
+    computed(() => 0),
+);
+const displayedName = inject('displayedName', '');
+const from = inject('from', ref<'left' | 'right'>('left'));
+const goBack = inject('goBack', () => {});
+const width = inject('width', ref(400));
+const widthPx = inject(
+    'widthPx',
+    computed(() => '400px'),
+);
+
+// derived values for CSS custom properties set directly on the element
+const animationDurationMs = `${animationDuration}ms`;
+const contentPaneTransformXs = computed(() => `translateX(${currentDepth.value * -100}vw)`);
+const contentPaneTransformSm = computed(() => `translateX(${currentDepth.value * -1 * width.value}px)`);
+const left = computed(() => (from.value === 'left' ? '0' : 'auto'));
+const menuClosedTranslateX = computed(() => (from.value === 'right' ? '100%' : '-100%'));
+const registerScrollableContentArea = inject<
+    (areaTemplateRef: Readonly<ShallowRef<InstanceType<typeof NavigationMenuContent> | null>>) => void
+>('registerScrollableContentArea', () => {});
+const right = computed(() => (from.value === 'right' ? '0' : 'auto'));
+
+// directional animation of the submenu titles as you're going down and back up
+const direction = ref(1);
+const transitionName = computed(() =>
+    direction.value > 0 ? 'es-mobile-nav-title-forward' : 'es-mobile-nav-title-back',
+);
+watch(
+    currentDepth,
+    (newVal, oldVal) => {
+        direction.value = newVal > oldVal ? 1 : -1;
+    },
+    { flush: 'sync' },
+);
+
+const focusOutside = (e: any) => {
+    // if focus is on something outside of the overall menu, close it
+    if (!isElementWithinMenu(e.target)) {
+        closeMenu();
+    }
+};
+
+const isElementWithinMenu = (element: any) => {
+    if (!mobileNavParentElement?.value?.$el) {
+        return false;
+    }
+
+    const parent: Node = mobileNavParentElement.value.$el;
+    return parent.contains(element);
+};
+
+onMounted(() => {
+    // give EsMobileNav a reference to the scrollable content area so it can set the scroll position
+    registerScrollableContentArea(mobileNavParentElement);
+});
+
+provide('backButtonSimulatedFocus', backButtonSimulatedFocus);
+provide('closeButtonSimulatedFocus', closeButtonSimulatedFocus);
+provide('isElementWithinMenu', isElementWithinMenu);
+</script>
+
+<template>
+    <!-- teleported to body to escape any ancestor stacking context (e.g. es-sticky-bar) -->
+    <teleport to="body">
+        <navigation-menu-content
+            v-bind="$attrs"
+            ref="mobileNavParentElement"
+            class="es-mobile-nav-content bg-white d-flex flex-column pb-50 position-fixed px-50"
+            :style="{
+                '--es-mobile-nav-animation-duration': animationDurationMs,
+                '--es-mobile-nav-closed-translate-x': menuClosedTranslateX,
+                '--es-mobile-nav-content-pane-transform-sm': contentPaneTransformSm,
+                '--es-mobile-nav-content-pane-transform-xs': contentPaneTransformXs,
+                '--es-mobile-nav-left': left,
+                '--es-mobile-nav-right': right,
+                '--es-mobile-nav-width': widthPx,
+            }"
+            @focus-outside.prevent.stop="focusOutside"
+            @interact-outside.prevent.stop
+            @pointer-down-outside.prevent.stop>
+            <div
+                class="es-mobile-nav-content-header align-items-center bg-white d-flex flex-shrink-0 justify-content-center position-sticky w-100">
+                <!-- back button -->
+                <transition name="es-mobile-nav-back">
+                    <es-button
+                        v-if="currentDepth > 0"
+                        class="es-mobile-nav-back-button p-50 position-absolute text-blue-900"
+                        :class="{ focus: backButtonSimulatedFocus }"
+                        inline
+                        variant="link"
+                        @click="goBack">
+                        <icon-arrow-left aria-hidden="true" />
+                        <span class="sr-only">back</span>
+                    </es-button>
+                </transition>
+
+                <!-- logo or subnav title, with smooth transition between them -->
+                <div class="es-mobile-nav-title-outer-container">
+                    <transition :name="transitionName">
+                        <div
+                            :key="displayedName || 'logo'"
+                            class="es-mobile-nav-title-inner-container align-items-center d-flex justify-content-center">
+                            <div
+                                v-if="displayedName"
+                                class="font-weight-bolder">
+                                {{ displayedName }}
+                            </div>
+                            <es-logo
+                                v-else
+                                alt=""
+                                aria-hidden="true"
+                                height="30px"
+                                width="135px" />
+                        </div>
+                    </transition>
+                </div>
+
+                <!-- close button -->
+                <es-button
+                    class="es-mobile-nav-close-button p-50 position-absolute text-blue-900"
+                    :class="{ focus: closeButtonSimulatedFocus }"
+                    inline
+                    variant="link"
+                    @click="closeMenu">
+                    <icon-x />
+                    <span class="sr-only">close</span>
+                </es-button>
+            </div>
+            <div
+                class="es-mobile-nav-content-pane d-flex flex-column flex-grow-1 justify-content-between position-relative">
+                <navigation-menu-list class="list-unstyled">
+                    <slot />
+                </navigation-menu-list>
+                <div class="es-mobile-nav-content-footer">
+                    <slot name="footer" />
+                </div>
+            </div>
+        </navigation-menu-content>
+    </teleport>
+</template>
+
+<!-- unscoped: targets Reka UI-rendered elements that don't receive Vue's scoped attribute -->
+<style lang="scss">
+@use '@energysage/es-ds-styles/scss/mixins/breakpoints' as breakpoints;
+@use '@energysage/es-ds-styles/scss/variables';
+
+@keyframes esMobileNavOpen {
+    from {
+        transform: translateX(var(--es-mobile-nav-closed-translate-x));
+    }
+    to {
+        transform: translateX(0);
+    }
+}
+
+@keyframes esMobileNavClose {
+    from {
+        transform: translateX(0);
+    }
+    to {
+        transform: translateX(var(--es-mobile-nav-closed-translate-x));
+    }
+}
+
+.es-mobile-nav-content {
+    --es-mobile-nav-header-height: 88px;
+
+    bottom: 0;
+    box-shadow: 0 0 6px 0 rgba(34, 38, 51, 0.2);
+    left: 0;
+    overflow-x: hidden;
+    position: fixed;
+    right: 0;
+    top: 0;
+    z-index: 1020;
+
+    @media not (prefers-reduced-motion) {
+        &[data-state='open'] {
+            animation: esMobileNavOpen var(--es-mobile-nav-animation-duration) ease-out;
+        }
+
+        &[data-state='closed'] {
+            animation: esMobileNavClose var(--es-mobile-nav-animation-duration) ease-in;
+        }
+    }
+
+    @include breakpoints.media-breakpoint-up(sm) {
+        left: var(--es-mobile-nav-left);
+        right: var(--es-mobile-nav-right);
+        width: var(--es-mobile-nav-width);
+    }
+}
+
+.es-mobile-nav-content-header {
+    border-bottom: 1px solid variables.$gray-100;
+    height: var(--es-mobile-nav-header-height);
+    left: 0;
+    right: 0;
+    top: 0;
+    z-index: 2;
+}
+
+.es-mobile-nav-back-button {
+    left: variables.$spacer * 0.5;
+    transform: translateY(-50%);
+    top: 50%;
+
+    svg {
+        height: 20px !important;
+        width: 20px !important;
+    }
+}
+
+.es-mobile-nav-close-button {
+    right: variables.$spacer;
+    transform: translateY(-50%);
+    top: 50%;
+
+    svg {
+        height: 20px !important;
+        width: 20px !important;
+    }
+}
+
+.es-mobile-nav-content-pane {
+    transform: var(--es-mobile-nav-content-pane-transform-xs);
+
+    @media not (prefers-reduced-motion) {
+        transition: transform var(--es-mobile-nav-animation-duration) ease-in-out;
+    }
+
+    @include breakpoints.media-breakpoint-up(sm) {
+        transform: var(--es-mobile-nav-content-pane-transform-sm);
+    }
+}
+</style>
+
+<!-- scoped: targets native elements directly in this component's template -->
+<style lang="scss" scoped>
+.es-mobile-nav-back-enter-from,
+.es-mobile-nav-back-leave-to {
+    opacity: 0;
+}
+
+@media not (prefers-reduced-motion) {
+    .es-mobile-nav-back-enter-active,
+    .es-mobile-nav-back-leave-active {
+        transition: opacity var(--es-mobile-nav-animation-duration) ease-in-out;
+    }
+}
+
+.es-mobile-nav-title-outer-container {
+    /* necessary to keep the logo/titles centered as they show/hide and animate */
+    display: grid;
+}
+
+.es-mobile-nav-title-inner-container {
+    /* necessary to keep the logo/titles centered as they show/hide and animate */
+    grid-area: 1 / 1;
+    height: 30px;
+}
+
+.es-mobile-nav-title-back-enter-from {
+    opacity: 0;
+    transform: translateX(-20px);
+}
+
+.es-mobile-nav-title-back-leave-to {
+    opacity: 0;
+    transform: translateX(20px);
+}
+
+.es-mobile-nav-title-forward-enter-from {
+    opacity: 0;
+    transform: translateX(20px);
+}
+
+.es-mobile-nav-title-forward-leave-to {
+    opacity: 0;
+    transform: translateX(-20px);
+}
+
+@media not (prefers-reduced-motion) {
+    .es-mobile-nav-title-forward-enter-active,
+    .es-mobile-nav-title-forward-leave-active,
+    .es-mobile-nav-title-back-enter-active,
+    .es-mobile-nav-title-back-leave-active {
+        transition:
+            opacity var(--es-mobile-nav-animation-duration) ease,
+            transform var(--es-mobile-nav-animation-duration) ease;
+    }
+}
+</style>

package/app/components/es-mobile-nav-custom-item.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { NavigationMenuItem } from 'reka-ui';
+</script>
+
+<template>
+    <navigation-menu-item class="my-150">
+        <slot />
+    </navigation-menu-item>
+</template>

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

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { NavigationMenuItem, NavigationMenuLink } from 'reka-ui';
+
+interface IProps {
+    href: string;
+    name: string;
+    target?: string;
+}
+withDefaults(defineProps<IProps>(), {
+    target: '_self',
+});
+</script>
+
+<template>
+    <navigation-menu-item>
+        <navigation-menu-link
+            as-child
+            @select.prevent.stop>
+            <a
+                class="es-mobile-nav-link d-block font-size-75 font-weight-bolder"
+                :href="href"
+                :target="target">
+                <span class="d-block p-100 rounded-sm">
+                    {{ name }}
+                </span>
+            </a>
+        </navigation-menu-link>
+    </navigation-menu-item>
+</template>
+
+<style lang="scss" scoped>
+@use '@energysage/es-ds-styles/scss/variables';
+
+$transition-duration: 100ms;
+
+.es-mobile-nav-link {
+    /* specify color here so it can be overridden in active state */
+    color: variables.$dark-blue;
+
+    &:hover {
+        text-decoration: none;
+    }
+
+    @media not (prefers-reduced-motion) {
+        transition:
+            background-color $transition-duration ease-in-out,
+            color $transition-duration ease-in-out;
+
+        & > span {
+            transition: background-color $transition-duration ease-in-out;
+        }
+    }
+
+    &:active {
+        color: variables.$white;
+
+        & > span {
+            background-color: variables.$dark-blue;
+        }
+    }
+}
+</style>

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

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { NavigationMenuTrigger } from 'reka-ui';
+
+interface IProps {
+    unstyled?: boolean;
+}
+withDefaults(defineProps<IProps>(), {
+    unstyled: false,
+});
+
+const triggerRef = useTemplateRef<InstanceType<typeof NavigationMenuTrigger>>('triggerRef');
+const registerNavTrigger = inject<(el: HTMLElement) => void>('registerNavTrigger');
+
+onMounted(() => {
+    if (registerNavTrigger && triggerRef.value) {
+        registerNavTrigger(triggerRef.value.$el);
+    }
+});
+</script>
+
+<template>
+    <!-- styles defined with :deep() in EsMobileNav due to Reka UI's rendering method -->
+    <navigation-menu-trigger
+        ref="triggerRef"
+        v-bind="$attrs"
+        :class="{ 'es-mobile-nav-trigger': !unstyled }">
+        <slot />
+    </navigation-menu-trigger>
+</template>

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

@@ -0,0 +1,219 @@
+<script setup lang="ts">
+import { useScrollLock } from '@vueuse/core';
+import { type NavigationMenuContent, NavigationMenuItem, NavigationMenuList, NavigationMenuRoot } from 'reka-ui';
+import type { ShallowRef } from 'vue';
+
+interface IProps {
+    from?: 'left' | 'right';
+    width?: number;
+}
+const props = withDefaults(defineProps<IProps>(), {
+    from: 'left',
+    width: 400,
+});
+
+const ANIMATION_DURATION = 200;
+const ANIMATION_DURATION_MS = `${ANIMATION_DURATION}ms`;
+
+const activeMenuId = ref('');
+const navTriggerElement = ref<HTMLElement | null>(null);
+const nameStack: Ref<string[]> = ref([]);
+const scrollableContentAreaTemplateRef: Ref<Readonly<
+    ShallowRef<InstanceType<typeof NavigationMenuContent> | null>
+> | null> = ref(null);
+const subNavCloseHandlers: Ref<Function[]> = ref([]);
+
+const displayedName = computed(() => nameStack.value.at(-1) ?? '');
+const isScrollLocked = useScrollLock(import.meta.client ? document.body : null);
+const widthPx = computed(() => `${props.width}px`);
+
+// closes the top-level menu
+const closeMenu = () => {
+    // focus the trigger before closing so assistive technologies (e.g. VoiceOver)
+    // don't lose focus when the menu content is removed from the DOM.
+    navTriggerElement.value?.focus();
+
+    // close the menu
+    activeMenuId.value = '';
+};
+
+// provides a read-only variable indicating the current depth
+const currentDepth = computed(() => nameStack.value.length);
+
+// closes the currently-visible menu
+const goBack = () => {
+    const closeCurrentMenu = subNavCloseHandlers.value.pop();
+    if (closeCurrentMenu) {
+        closeCurrentMenu();
+    }
+};
+
+// animates up/back one level
+const decreaseDepth = () => {
+    if (currentDepth.value > 0) {
+        nameStack.value = nameStack.value.slice(0, nameStack.value.length - 1);
+
+        // if we can, scroll to the top of the content area so the parent menu starts at the top
+        if (scrollableContentAreaTemplateRef.value?.value?.$el?.scrollTop) {
+            scrollableContentAreaTemplateRef.value.value.$el.scrollTop = 0;
+        }
+    }
+};
+
+// animates down/forward one level
+const increaseDepth = (name: string) => {
+    nameStack.value.push(name);
+
+    // if we can, scroll to the top of the content area so the submenu starts at the top
+    if (scrollableContentAreaTemplateRef.value?.value?.$el?.scrollTop) {
+        scrollableContentAreaTemplateRef.value.value.$el.scrollTop = 0;
+    }
+};
+
+// allows the nav trigger to register itself so closeMenu can return focus to it
+const registerNavTrigger = (el: HTMLElement) => {
+    navTriggerElement.value = el;
+};
+
+// allows us to scroll the content area up to the top when opening a submenu
+const registerScrollableContentArea = (
+    areaTemplateRef: Readonly<ShallowRef<InstanceType<typeof NavigationMenuContent> | null>>,
+) => {
+    scrollableContentAreaTemplateRef.value = areaTemplateRef;
+};
+
+// provides the back button with a function to call in order to close the active submenu
+// (this is called by submenus when they are opened)
+const registerSubNavCloseHandler = (callback: Function) => subNavCloseHandlers.value.push(callback);
+
+// provides a way to wait for animation to complete prior to doing something
+const waitForAnimationDuration = async () => {
+    return new Promise((resolve) => {
+        setTimeout(() => resolve(true), ANIMATION_DURATION);
+    });
+};
+
+provide('animationDuration', ANIMATION_DURATION);
+provide('closeMenu', closeMenu);
+provide('currentDepth', currentDepth);
+provide('decreaseDepth', decreaseDepth);
+provide('displayedName', displayedName);
+provide('from', toRef(props, 'from'));
+provide('goBack', goBack);
+provide('increaseDepth', increaseDepth);
+provide('registerNavTrigger', registerNavTrigger);
+provide('registerScrollableContentArea', registerScrollableContentArea);
+provide('registerSubNavCloseHandler', registerSubNavCloseHandler);
+provide('waitForAnimationDuration', waitForAnimationDuration);
+provide('width', toRef(props, 'width'));
+provide('widthPx', widthPx);
+
+watch(activeMenuId, async (newVal: string, oldVal: string) => {
+    isScrollLocked.value = !!newVal;
+
+    // if the menu is closing
+    if (!newVal && oldVal) {
+        // wait until the mobile nav closing animation is complete
+        await waitForAnimationDuration();
+
+        // reset the state of all submenus by closing all open ones (without animation)
+        subNavCloseHandlers.value.forEach((callback: Function) => {
+            callback(false);
+        });
+
+        // clear out all subnav close handlers since all of them are closed
+        subNavCloseHandlers.value = [];
+
+        // clear nameStack to set the animation "window" to first position
+        nameStack.value = [];
+    }
+});
+</script>
+
+<template>
+    <navigation-menu-root
+        v-model="activeMenuId"
+        v-bind="$attrs"
+        class="es-mobile-nav d-flex"
+        disable-hover-trigger
+        disable-pointer-leave-close>
+        <!-- overlay -->
+        <teleport to="body">
+            <div
+                class="es-mobile-nav-overlay position-fixed"
+                :class="{
+                    active: !!activeMenuId,
+                }"
+                @click="activeMenuId = ''" />
+        </teleport>
+
+        <!--
+            since the first level is a single item - the trigger to open the mobile nav -
+            prevent it from being a <ul> and <li>
+        -->
+        <navigation-menu-list
+            as="div"
+            class="es-mobile-nav-list d-flex">
+            <navigation-menu-item
+                as="div"
+                class="d-flex">
+                <slot />
+            </navigation-menu-item>
+        </navigation-menu-list>
+    </navigation-menu-root>
+</template>
+
+<style lang="scss" scoped>
+@use '@energysage/es-ds-styles/scss/mixins/breakpoints' as breakpoints;
+@use '@energysage/es-ds-styles/scss/variables';
+
+$animation-duration: v-bind(ANIMATION_DURATION_MS);
+
+.es-mobile-nav {
+    --mobile-nav-width: v-bind(widthPx);
+
+    &-overlay {
+        opacity: 0;
+        pointer-events: none;
+
+        &.active {
+            opacity: 0.3;
+            pointer-events: all;
+        }
+
+        @include breakpoints.media-breakpoint-up(sm) {
+            background-color: variables.$gray-900;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            top: 0;
+            z-index: 1010;
+
+            @media not (prefers-reduced-motion) {
+                transition: opacity $animation-duration ease-in-out;
+            }
+        }
+    }
+
+    :deep(> div) {
+        /* ensure the button is full-height with the rest of the nav bar items */
+        display: flex;
+    }
+
+    :deep(.es-mobile-nav-list) {
+        display: flex;
+    }
+
+    :deep(.es-mobile-nav-trigger) {
+        -webkit-appearance: none;
+        appearance: none;
+        background: transparent;
+        border: none;
+        color: variables.$dark-blue;
+        min-height: 40px;
+        margin: 0;
+        padding: 0 variables.$spacer;
+        position: relative;
+    }
+}
+</style>

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

@@ -0,0 +1,243 @@
+<script setup lang="ts">
+import {
+    NavigationMenuContent,
+    NavigationMenuItem,
+    NavigationMenuList,
+    NavigationMenuSub,
+    NavigationMenuTrigger,
+} from 'reka-ui';
+
+interface IProps {
+    name: string;
+}
+const props = defineProps<IProps>();
+
+const subNavParentElement = useTemplateRef('subNavParentElement');
+const subNavTrigger = useTemplateRef('subNavTrigger');
+
+const activeMenuId = ref('');
+
+const backButtonSimulatedFocus = inject('backButtonSimulatedFocus', ref(false));
+const closeButtonSimulatedFocus = inject('closeButtonSimulatedFocus', ref(false));
+const closeMenu: (...args: any[]) => void = inject('closeMenu', () => {});
+const decreaseDepth = inject('decreaseDepth', () => {});
+const goBack = inject('goBack', () => {});
+const increaseDepth: (...args: any[]) => void = inject('increaseDepth', () => {});
+const isElementWithinMenu: (...args: any[]) => boolean = inject('isElementWithinMenu', () => true);
+const registerSubNavCloseHandler: Function | undefined = inject('registerSubNavCloseHandler');
+const waitForAnimationDuration = inject('waitForAnimationDuration', () => Promise.resolve(true));
+const widthPx = inject(
+    'widthPx',
+    computed(() => '400px'),
+);
+
+const escapeKeyDown = (e: any) => {
+    // prevent the Esc key from immediately closing all submenus prior to the mobile nav animating closed
+    // (i.e. the visible submenu disappears, then the mobile nav animates closed, which is jarring)
+    e.preventDefault();
+
+    // close the mobile nav in a controlled way
+    closeMenu();
+};
+
+const handleTriggerClick = () => {
+    // if the menu was open and is being closed by clicking the trigger
+    // (which should only be possible via keyboard), close the menu
+    if (activeMenuId.value) {
+        decreaseDepth();
+    }
+};
+
+let focusOutsideHandled = false;
+
+const focusOutside = (e: any) => {
+    // some browsers can cycle focus through body when shifting focus, causing
+    // this handler to be fired twice. to prevent goBack() from being called
+    // more times than we want, we have this guard to prevent focusOutside
+    // from being called more than once within the same tick
+    if (focusOutsideHandled) return;
+    focusOutsideHandled = true;
+    nextTick(() => {
+        focusOutsideHandled = false;
+    });
+
+    // we only need to do anything with this submenu if it's actually open
+    if (activeMenuId.value) {
+        const classesOnTarget = [...e.target.classList];
+
+        if (classesOnTarget.includes('es-mobile-sub-nav-item-trigger')) {
+            // if the user has moved focus outside of the this submenu and onto
+            // another submenu trigger, close this submenu
+            const triggerSubNav = e.target.closest('.es-mobile-sub-nav');
+            if (triggerSubNav !== subNavParentElement?.value?.$el) {
+                goBack();
+            }
+        } else if (!isElementWithinMenu(e.target)) {
+            // if focus is on something outside of the overall menu, close it
+            closeMenu();
+        }
+    }
+};
+
+const handleSrBackClick = () => {
+    // explicitly focus the trigger before closing the submenu. without this,
+    // assistive technologies (e.g. VoiceOver) lose focus when the submenu content
+    // (which contains the sr-only button) is removed from the DOM.
+    (subNavTrigger.value as any)?.$el?.focus();
+    goBack();
+};
+
+const subNavCloseMenu = async (waitForAnimation: boolean = true) => {
+    // start animating up to the parent menu
+    decreaseDepth();
+
+    // wait for animation to complete
+    if (waitForAnimation) {
+        await waitForAnimationDuration();
+    }
+
+    // close the menu
+    activeMenuId.value = '';
+};
+
+watch(activeMenuId, (newVal: string, oldVal: string) => {
+    // if the menu is opening
+    if (newVal && !oldVal) {
+        increaseDepth(props.name);
+
+        if (registerSubNavCloseHandler) {
+            registerSubNavCloseHandler(subNavCloseMenu);
+        }
+    }
+});
+</script>
+
+<template>
+    <navigation-menu-item>
+        <navigation-menu-sub
+            ref="subNavParentElement"
+            v-bind="$attrs"
+            v-model="activeMenuId"
+            class="es-mobile-sub-nav"
+            orientation="vertical">
+            <navigation-menu-trigger
+                ref="subNavTrigger"
+                class="es-mobile-sub-nav-item-trigger d-block font-size-75 font-weight-bolder m-0 p-0 text-left w-100"
+                @click="handleTriggerClick">
+                <span class="d-flex justify-content-between p-100 rounded-sm w-100">
+                    {{ name }}
+                    <icon-chevron-right
+                        height="20px"
+                        width="20px" />
+                </span>
+            </navigation-menu-trigger>
+            <navigation-menu-content
+                v-bind="$attrs"
+                class="es-mobile-sub-nav-item-content bg-white"
+                @escape-key-down="escapeKeyDown"
+                @focus-outside.prevent.stop="focusOutside"
+                @interact-outside.prevent.stop
+                @pointer-down-outside.prevent.stop>
+                <navigation-menu-list class="es-mobile-sub-nav-list list-unstyled m-0 p-0">
+                    <slot />
+                </navigation-menu-list>
+
+                <!--
+                    back button for keyboard / screen readers only,
+                    so you can go back when in this subnav's focus trap.
+                    when given focus, the visible back button in the
+                    nav content header will get a visible focus outline.
+                -->
+                <es-button
+                    class="sr-only"
+                    inline
+                    variant="link"
+                    @blur="backButtonSimulatedFocus = false"
+                    @click="handleSrBackClick"
+                    @focus="backButtonSimulatedFocus = true">
+                    Back
+                </es-button>
+
+                <!--
+                    close button for keyboard / screen readers only,
+                    so you can go back when in this subnav's focus trap.
+                    when given focus, the visible close button in the
+                    nav content header will get a visible focus outline.
+                -->
+                <es-button
+                    class="sr-only"
+                    inline
+                    variant="link"
+                    @blur="closeButtonSimulatedFocus = false"
+                    @click="closeMenu"
+                    @focus="closeButtonSimulatedFocus = true">
+                    Close
+                </es-button>
+            </navigation-menu-content>
+        </navigation-menu-sub>
+    </navigation-menu-item>
+</template>
+
+<style lang="scss" scoped>
+@use '@energysage/es-ds-styles/scss/mixins/breakpoints' as breakpoints;
+@use '@energysage/es-ds-styles/scss/variables';
+
+$transition-duration: 100ms;
+
+.es-mobile-sub-nav {
+    :deep(.es-mobile-sub-nav-list) {
+        li {
+            margin: 0;
+        }
+    }
+
+    :deep(.es-mobile-sub-nav-item-trigger) {
+        -webkit-appearance: none;
+        appearance: none;
+        background: transparent;
+        border: none;
+        border-bottom: 1px solid variables.$gray-100;
+        /* specify color here so it can be overridden in active state */
+        color: variables.$dark-blue;
+
+        @media not (prefers-reduced-motion) {
+            transition:
+                border-color $transition-duration ease-in-out,
+                color $transition-duration ease-in-out;
+
+            & > span {
+                transition: background-color $transition-duration ease-in-out;
+
+                & > svg {
+                    transition: color $transition-duration ease-in-out;
+                }
+            }
+
+            &[data-state='open'] {
+                border-bottom-color: transparent;
+                color: variables.$white;
+
+                & > span {
+                    background-color: variables.$dark-blue;
+
+                    & > svg {
+                        color: variables.$white;
+                    }
+                }
+            }
+        }
+    }
+
+    :deep(.es-mobile-sub-nav-item-content[data-state='open']) {
+        bottom: 0;
+        left: 100vw;
+        position: absolute;
+        top: 0;
+        width: 100%;
+
+        @include breakpoints.media-breakpoint-up(sm) {
+            left: v-bind(widthPx);
+        }
+    }
+}
+</style>

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

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+interface Props {
+    heading: string;
+    href: string;
+    subtitle?: string;
+    target?: string;
+}
+withDefaults(defineProps<Props>(), {
+    subtitle: '',
+    target: '_self',
+});
+</script>
+
+<template>
+    <es-card
+        class="es-nav-cta-card d-flex p-100"
+        :class="{
+            'align-items-center': !subtitle,
+        }"
+        :href="href"
+        :target="target"
+        variant="interactive">
+        <div
+            v-if="$slots.icon"
+            class="mr-100">
+            <div class="es-nav-cta-card-icon bg-blue-50 p-50 position-relative rounded-xs text-blue-600">
+                <slot name="icon" />
+            </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>
+            <p
+                v-if="subtitle"
+                class="font-size-75 mb-0">
+                {{ subtitle }}
+            </p>
+        </div>
+    </es-card>
+</template>
+
+<style lang="scss" scoped>
+@use '@energysage/es-ds-styles/scss/variables' as variables;
+@use '@energysage/es-ds-styles/scss/mixins/breakpoints' as breakpoints;
+
+.es-nav-cta-card {
+    border-width: 1px;
+
+    /* only apply a hover state if the device supports mouse hover */
+    @media (hover) {
+        &:hover {
+            border-color: variables.$blue-600;
+
+            .es-nav-cta-card-icon {
+                color: variables.$white !important;
+
+                &::after {
+                    opacity: 1;
+                }
+            }
+
+            .es-nav-cta-card-arrow {
+                margin-left: 0.75rem !important;
+            }
+        }
+    }
+
+    &-icon {
+        /* you cannot animate radial gradient backgrounds, so apply it to a pseudo element and fade it in on hover */
+        &::after {
+            background: radial-gradient(
+                156.04% 117.56% at 0% 0%,
+                variables.$blue-500 0%,
+                #5a4386 53.85%,
+                #1c1767 100%
+            );
+            border-radius: 0.25rem;
+            bottom: 0;
+            content: '';
+            left: 0;
+            opacity: 0;
+            position: absolute;
+            right: 0;
+            top: 0;
+            z-index: 2;
+
+            @media not (prefers-reduced-motion) {
+                transition: variables.$transition-base;
+            }
+        }
+
+        /* ensure the icon appears above the gradient pseudo element */
+        :deep(svg) {
+            position: relative;
+            z-index: 3;
+        }
+
+        @media not (prefers-reduced-motion) {
+            transition: variables.$transition-base;
+        }
+    }
+
+    &-arrow {
+        @media not (prefers-reduced-motion) {
+            transition: variables.$transition-base;
+        }
+    }
+}
+</style>

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

@@ -115,7 +115,8 @@ onUnmounted(() => {
     <div
         ref="bar"
         class="es-sticky-bar bg-white"
-        :class="[`es-sticky-bar--${barState}`, { 'es-sticky-bar--no-transition': suppressTransition }]">
+        :class="[`es-sticky-bar--${barState}`, { 'es-sticky-bar--no-transition': suppressTransition }]"
+        v-bind="$attrs">
         <slot />
     </div>
     <!-- holds the bar's space in normal flow when the bar is absolutely or fixed positioned -->

package/app/components/icon/battery-charging-vertical.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { PhBatteryChargingVertical } from '@phosphor-icons/vue';
+
+interface Props {
+    height?: string;
+    width?: string;
+}
+withDefaults(defineProps<Props>(), {
+    height: '24px',
+    width: '24px',
+});
+</script>
+
+<template>
+    <ph-battery-charging-vertical :size="width" />
+</template>

package/app/components/icon/charging-station.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { PhChargingStation } from '@phosphor-icons/vue';
+
+interface Props {
+    height?: string;
+    width?: string;
+}
+withDefaults(defineProps<Props>(), {
+    height: '24px',
+    width: '24px',
+});
+</script>
+
+<template>
+    <ph-charging-station :size="width" />
+</template>

package/app/components/icon/house-line.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { PhHouseLine } from '@phosphor-icons/vue';
+
+interface Props {
+    height?: string;
+    width?: string;
+}
+withDefaults(defineProps<Props>(), {
+    height: '24px',
+    width: '24px',
+});
+</script>
+
+<template>
+    <ph-house-line :size="width" />
+</template>

package/app/composables/breakpoints.ts

@@ -0,0 +1,75 @@
+import type { Ref } from 'vue';
+import { ref, onMounted, onUnmounted, computed } from 'vue';
+import sassBreakpoints from '@energysage/es-ds-styles/scss/modules/breakpoints.module.scss';
+
+interface Breakpoints {
+    [key: string]: string;
+}
+
+const BREAKPOINTS: Breakpoints = {
+    xs: sassBreakpoints.xs!,
+    sm: sassBreakpoints.sm!,
+    md: sassBreakpoints.md!,
+    lg: sassBreakpoints.lg!,
+    xl: sassBreakpoints.xl!,
+    xxl: sassBreakpoints.xxl!,
+};
+
+/**
+ * This composable provides reactive properties for each breakpoint, as well as device categories.
+ * It should only be used for functional purposes, and not for styling or layout.
+ * Meaning, don't use it to show/hide elements, or to change the layout of elements.
+ */
+export function useBreakpointChecks() {
+    const breakpointMediaQueries: { [key in keyof Breakpoints]?: MediaQueryList } = {};
+    const breakpointChangeListeners: { [key: string]: () => void } = {};
+    const breakpointMatches: { [key: string]: Ref<boolean> } = {};
+
+    if (import.meta.client) {
+        // Set up media queries, reactive references and event listeners for each breakpoint
+        Object.entries(BREAKPOINTS).forEach(([key, value]) => {
+            const mediaQueryList = window.matchMedia(`(min-width: ${value})`) as MediaQueryList;
+            breakpointMediaQueries[key] = mediaQueryList;
+            breakpointMatches[key] = ref<boolean>(mediaQueryList?.matches || false);
+            breakpointChangeListeners[key] = () => {
+                breakpointMatches[key]!.value = mediaQueryList?.matches || false;
+            };
+        });
+    }
+
+    // On component mount, add change event listeners for each breakpoint
+    onMounted(() => {
+        Object.keys(breakpointMatches).forEach((key) => {
+            breakpointMediaQueries[key]?.addEventListener('change', breakpointChangeListeners[key]!);
+        });
+    });
+
+    // On component unmount, remove the event listeners
+    onUnmounted(() => {
+        Object.keys(breakpointMatches).forEach((key) => {
+            breakpointMediaQueries[key]?.removeEventListener('change', breakpointChangeListeners[key]!);
+        });
+    });
+
+    // Individual breakpoint computed properties
+    const isXS = computed(() => breakpointMatches.xs?.value || false);
+    const isSM = computed(() => breakpointMatches.sm?.value || false);
+    const isMD = computed(() => breakpointMatches.md?.value || false);
+    const isLG = computed(() => breakpointMatches.lg?.value || false);
+    const isXL = computed(() => breakpointMatches.xl?.value || false);
+    const isXXL = computed(() => breakpointMatches.xxl?.value || false);
+
+    // Compute values for device categories
+    const isDesktop = computed(() => breakpointMatches.lg?.value || false);
+    const isTablet = computed(() => (breakpointMatches.md?.value && !breakpointMatches.lg?.value) || false);
+    const isMobile = computed(
+        () =>
+            ((breakpointMatches.xs?.value || breakpointMatches.sm?.value) &&
+                !breakpointMatches.lg?.value &&
+                !breakpointMatches.md?.value) ||
+            false,
+    );
+
+    // TODO: Be nice to namespace this but it ends up being a cyclic dependency somehow
+    return { isXS, isSM, isMD, isLG, isXL, isXXL, isDesktop, isTablet, isMobile };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@energysage/es-ds-components",
-    "version": "5.2.0",
+    "version": "5.3.0",
     "private": false,
     "type": "module",
     "description": "An EnergySage Vue component library",
@@ -17,7 +17,7 @@
     "author": "EnergySage",
     "license": "MIT",
     "dependencies": {
-        "@energysage/es-ds-styles": "^3.3.4",
+        "@energysage/es-ds-styles": "^3.4.0",
         "@nuxtjs/google-fonts": "^3.2.0",
         "@phosphor-icons/vue": "^2.2.1",
         "@vuelidate/core": "^2.0.3",