@energysage/es-ds-components 5.4.3 → 5.5.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # Changelog
 
+## [5.5.0](https://github.com/EnergySage/es-ds/compare/es-ds-components-v5.4.4...es-ds-components-v5.5.0) (2026-05-18)
+
+
+### Features
+
+* add EsMenuBar, EsSkipToContentLink, EsColorBand ([#1746](https://github.com/EnergySage/es-ds/issues/1746)) ([3654c21](https://github.com/EnergySage/es-ds/commit/3654c218bac408b2d93568a788d285b323e460db))
+
+
+### Bug Fixes
+
+* fresh es-ds-docs package-lock to maybe solve vite-plugin-checker issue ([#1743](https://github.com/EnergySage/es-ds/issues/1743)) ([0f3fed4](https://github.com/EnergySage/es-ds/commit/0f3fed490880a61cfe5c9ce8920e5ec522720a3c))
+
+## [5.4.4](https://github.com/EnergySage/es-ds/compare/es-ds-components-v5.4.3...es-ds-components-v5.4.4) (2026-04-28)
+
+
+### Bug Fixes
+
+* another release fix ([#1741](https://github.com/EnergySage/es-ds/issues/1741)) ([d7401f6](https://github.com/EnergySage/es-ds/commit/d7401f6749d98a47cddaa2e33b121941126c56fb))
+
+
+### Dependencies
+
+* The following workspace dependencies were updated
+  * devDependencies
+    * @energysage/es-ds-styles bumped from ^3.5.3 to ^3.5.4
+
 ## [5.4.3](https://github.com/EnergySage/es-ds/compare/es-ds-components-v5.4.2...es-ds-components-v5.4.3) (2026-04-28)
 
 

package/README.md

@@ -1,6 +1,6 @@
 # es-ds-components
 
-This is an EnergySage Nuxt layer with components for our design system.
+An EnergySage Nuxt layer with components for our design system
 
 ## Usage
 

package/app/components/es-color-band.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+interface IProps {
+    height?: number;
+}
+const props = withDefaults(defineProps<IProps>(), {
+    height: 4,
+});
+
+const heightPx = computed(() => `${props.height}px`);
+</script>
+
+<template>
+    <div class="d-flex w-100">
+        <div class="es-color-band-item primary bg-dark-blue flex-grow-1"></div>
+        <div class="es-color-band-item primary bg-warm-orange flex-grow-1"></div>
+        <div class="es-color-band-item bg-blue-300 flex-grow-1"></div>
+        <div class="es-color-band-item bg-blue-100 flex-grow-1"></div>
+        <div class="es-color-band-item bg-success-900 flex-grow-1"></div>
+        <div class="es-color-band-item bg-warning-900 flex-grow-1"></div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.es-color-band-item {
+    height: v-bind(heightPx);
+    width: 12.5%;
+
+    &.primary {
+        width: 25%;
+    }
+}
+</style>

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

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { NavigationMenuList } from 'reka-ui';
+
+interface IProps {
+    heading?: string;
+}
+withDefaults(defineProps<IProps>(), {
+    heading: '',
+});
+</script>
+
+<template>
+    <es-col
+        md="6"
+        lg="4"
+        xl="3">
+        <h2
+            v-if="heading"
+            class="eyebrow">
+            {{ heading }}
+        </h2>
+        <navigation-menu-list class="list-unstyled">
+            <slot />
+        </navigation-menu-list>
+    </es-col>
+</template>

package/app/components/es-menu-bar-flyout-custom-item.vue

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

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

@@ -0,0 +1,29 @@
+<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="d-block font-size-75 font-weight-normal text-dark-blue"
+                :href="href"
+                :target="target">
+                <span class="d-block py-50 rounded-sm">
+                    {{ name }}
+                </span>
+            </a>
+        </navigation-menu-link>
+    </navigation-menu-item>
+</template>

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

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { injectNavigationMenuItemContext, NavigationMenuContent, NavigationMenuList } from 'reka-ui';
+import { ES_MENU_BAR_ALIGNMENT_REGISTRY_KEY, type EsMenuBarFlyoutAlign } from '../utils/menu-bar';
+
+interface IProps {
+    align?: EsMenuBarFlyoutAlign;
+}
+const props = withDefaults(defineProps<IProps>(), {
+    align: 'center',
+});
+
+const fullWidth = inject('fullWidth', false);
+
+// register this flyout's align preference with the parent EsMenuBar so the shared
+// Reka viewport can switch align values as the active menu changes
+const itemContext = injectNavigationMenuItemContext();
+const registry = inject(ES_MENU_BAR_ALIGNMENT_REGISTRY_KEY, null);
+
+watch(
+    () => props.align,
+    (align) => {
+        registry?.register(itemContext.value, align);
+    },
+    { immediate: true },
+);
+
+onBeforeUnmount(() => {
+    registry?.unregister(itemContext.value);
+});
+</script>
+
+<template>
+    <!-- classes on Reka UI elements defined with :deep() in EsMenuBar due to rendering method -->
+    <navigation-menu-content
+        v-bind="$attrs"
+        class="es-menu-bar-flyout">
+        <div class="es-menu-bar-flyout-pane">
+            <template v-if="fullWidth">
+                <div class="px-md-150 px-xxl-0 py-200">
+                    <es-row class="justify-content-end">
+                        <slot />
+                    </es-row>
+                </div>
+            </template>
+            <template v-else>
+                <navigation-menu-list class="list-unstyled mb-0">
+                    <slot />
+                </navigation-menu-list>
+            </template>
+        </div>
+        <es-color-band
+            v-if="fullWidth"
+            class="es-menu-bar-color-band"
+            :height="8" />
+    </navigation-menu-content>
+</template>

package/app/components/es-menu-bar-item.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { NavigationMenuItem } from 'reka-ui';
+</script>
+
+<template>
+    <!-- classes on Reka UI elements defined with :deep() in EsMenuBar due to rendering method -->
+    <navigation-menu-item
+        v-bind="$attrs"
+        class="es-menu-bar-item">
+        <slot />
+    </navigation-menu-item>
+</template>

package/app/components/es-menu-bar-link.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { NavigationMenuLink } from 'reka-ui';
+
+interface IProps {
+    href: string;
+    target?: string;
+}
+withDefaults(defineProps<IProps>(), {
+    target: '_self',
+});
+</script>
+
+<template>
+    <navigation-menu-link
+        as-child
+        @select.prevent.stop>
+        <a
+            class="es-menu-bar-link align-items-center d-flex font-weight-bolder text-dark-blue"
+            :href="href"
+            :target="target">
+            <slot />
+        </a>
+    </navigation-menu-link>
+</template>

package/app/components/es-menu-bar-trigger.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { NavigationMenuTrigger } from 'reka-ui';
+</script>
+
+<template>
+    <!-- classes on Reka UI elements defined with :deep() in EsMenuBar due to rendering method -->
+    <navigation-menu-trigger
+        v-bind="$attrs"
+        class="es-menu-bar-item-trigger align-items-center d-flex font-weight-bolder">
+        <slot />
+    </navigation-menu-trigger>
+</template>

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

@@ -0,0 +1,514 @@
+<script setup lang="ts">
+import { useScrollLock } from '@vueuse/core';
+import { NavigationMenuList, NavigationMenuRoot, NavigationMenuViewport } from 'reka-ui';
+import {
+    ES_MENU_BAR_ALIGNMENT_REGISTRY_KEY,
+    ES_MENU_BAR_CLOSE_EVENT_NAME,
+    ES_MENU_BAR_OPEN_CLOSE_DURATION_MS,
+    ES_MENU_BAR_OPEN_EVENT_NAME,
+    type EsMenuBarFlyoutAlign,
+} from '../utils/menu-bar';
+import { omit } from '../utils/omit';
+import { useEsdsEvents } from '../composables/events';
+
+interface IProps {
+    class?: string;
+    fullWidth?: boolean;
+    height?: number;
+    showOverlayWhenOpen?: boolean;
+}
+const props = withDefaults(defineProps<IProps>(), {
+    class: '',
+    fullWidth: false,
+    height: 40,
+    showOverlayWhenOpen: true,
+});
+
+// used to ensure we don't close our menu when emitting our own menu open event
+let isOpening = false;
+
+const emitter = useEsdsEvents();
+const isScrollLocked = useScrollLock(import.meta.client ? document.body : null);
+
+const activeMenuId = ref('');
+
+const heightPx = computed(() => `${props.height}px`);
+
+provide('fullWidth', props.fullWidth);
+
+// each EsMenuBarFlyout registers its align preference here, keyed by its Reka item id;
+// the viewport's align is reactively driven by whichever menu is currently active
+const flyoutAlignments = reactive(new Map<string, EsMenuBarFlyoutAlign>());
+provide(ES_MENU_BAR_ALIGNMENT_REGISTRY_KEY, {
+    register: (id, align) => {
+        flyoutAlignments.set(id, align);
+    },
+    unregister: (id) => {
+        flyoutAlignments.delete(id);
+    },
+});
+const activeAlign = computed<EsMenuBarFlyoutAlign>(() => flyoutAlignments.get(activeMenuId.value) ?? 'center');
+
+watch(activeMenuId, async (newVal: string, oldVal: string) => {
+    // lock page scrolling when menu is open, unless we're not showing the overlay
+    isScrollLocked.value = props.showOverlayWhenOpen && !!newVal;
+
+    if (!oldVal && newVal) {
+        // if the menu is opening, emit event so:
+        //  - any other EsMenuBars on the page can close (only an issue during keyboard navigation between menus)
+        //  - EsStickyBar can change from transparent to white background
+        isOpening = true;
+        emitter.emit(ES_MENU_BAR_OPEN_EVENT_NAME);
+    } else if (oldVal && !newVal) {
+        // if the menu is closing, emit event so:
+        //  - EsStickyBar can change from white background back to transparent
+        emitter.emit(ES_MENU_BAR_CLOSE_EVENT_NAME);
+    }
+});
+
+// keep a reference to the handler so unmount can remove only this instance's listener —
+// emitter.off(type) without a handler wipes EVERY listener for that event, which would
+// break other components (e.g. EsStickyBar) that are also subscribed
+const handleMenuOpen = () => {
+    if (isOpening) {
+        // if we're opening our own menu, ignore the event
+        isOpening = false;
+    } else {
+        // if another menu just opened, close ours
+        // (this is only an issue during keyboard navigation between menus)
+        activeMenuId.value = '';
+    }
+};
+
+onMounted(() => {
+    emitter.on(ES_MENU_BAR_OPEN_EVENT_NAME, handleMenuOpen);
+});
+
+onUnmounted(() => {
+    emitter.off(ES_MENU_BAR_OPEN_EVENT_NAME, handleMenuOpen);
+});
+</script>
+
+<template>
+    <div
+        class="es-menu-bar"
+        :class="[props.class]"
+        :style="{ '--es-menu-bar-open-close-duration': `${ES_MENU_BAR_OPEN_CLOSE_DURATION_MS}ms` }">
+        <navigation-menu-root
+            v-model="activeMenuId"
+            v-bind="omit('class', $attrs)"
+            class="es-menu-bar-root my-0"
+            :class="{ 'position-relative': !fullWidth }"
+            disable-hover-trigger
+            disable-pointer-leave-close>
+            <navigation-menu-list class="es-menu-bar-list">
+                <slot />
+            </navigation-menu-list>
+            <navigation-menu-viewport
+                :align="activeAlign"
+                class="es-menu-bar-viewport"
+                :class="{
+                    'full-width': fullWidth,
+                }" />
+        </navigation-menu-root>
+        <teleport
+            v-if="showOverlayWhenOpen"
+            to="body">
+            <transition name="es-menu-bar-overlay">
+                <div
+                    v-if="activeMenuId"
+                    class="es-menu-bar-overlay"
+                    :style="{
+                        '--es-menu-bar-height': heightPx,
+                        '--es-menu-bar-open-close-duration': `${ES_MENU_BAR_OPEN_CLOSE_DURATION_MS}ms`,
+                    }"></div>
+            </transition>
+        </teleport>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+@use '@energysage/es-ds-styles/scss/mixins/breakpoints' as breakpoints;
+@use '@energysage/es-ds-styles/scss/variables';
+@use 'sass:map';
+
+$open-close-timing-function: ease-in-out;
+
+$switch-menus-duration: 400ms;
+$switch-menus-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+
+@keyframes enterFromLeft {
+    from {
+        opacity: 0;
+        transform: translateX(calc(-1 * var(--es-menu-bar-flyout-translate)));
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+@keyframes enterFromRight {
+    from {
+        opacity: 0;
+        transform: translateX(var(--es-menu-bar-flyout-translate));
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+/* no-op animation needed so Reka UI persists the exiting menu, allowing the actual exit animation to show */
+@keyframes presenceExitAnimationForContent {
+    0% {
+        border-color: #fff;
+    }
+    50% {
+        border-color: #fefefe;
+    }
+    100% {
+        border-color: #fff;
+    }
+}
+
+@keyframes exitToLeft {
+    from {
+        opacity: 1;
+        transform: translateX(0);
+    }
+    to {
+        opacity: 0;
+        transform: translateX(calc(-1 * var(--es-menu-bar-flyout-translate)));
+    }
+}
+
+@keyframes exitToRight {
+    from {
+        opacity: 1;
+        transform: translateX(0);
+    }
+    to {
+        opacity: 0;
+        transform: translateX(var(--es-menu-bar-flyout-translate));
+    }
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes fadeOut {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
+}
+
+@keyframes menuOpen {
+    from {
+        height: 0;
+    }
+    to {
+        height: var(--reka-navigation-menu-viewport-height);
+    }
+}
+
+@keyframes menuClose {
+    from {
+        height: var(--reka-navigation-menu-viewport-height);
+    }
+    to {
+        height: 0;
+    }
+}
+
+@keyframes menuOpenWithShadow {
+    from {
+        box-shadow: 0 12px 12px 0 rgba(0, 0, 0, 0);
+        height: 0;
+    }
+    to {
+        box-shadow: 0 12px 12px 0 rgba(0, 0, 0, 0.25);
+        height: var(--reka-navigation-menu-viewport-height);
+    }
+}
+
+@keyframes menuCloseWithShadow {
+    from {
+        box-shadow: 0 12px 12px 0 rgba(0, 0, 0, 0.25);
+        height: var(--reka-navigation-menu-viewport-height);
+    }
+    to {
+        box-shadow: 0 12px 12px 0 rgba(0, 0, 0, 0);
+        height: 0;
+    }
+}
+
+.es-menu-bar {
+    :deep(.es-menu-bar-list) {
+        align-items: center;
+        display: flex;
+        gap: variables.$spacer * 0.25;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        position: relative;
+        z-index: 999;
+
+        @include breakpoints.media-breakpoint-up(xl) {
+            gap: variables.$spacer;
+        }
+
+        li {
+            margin: 0;
+        }
+    }
+
+    :deep(.es-menu-bar-link),
+    :deep(.es-menu-bar-item-trigger) {
+        color: variables.$dark-blue;
+        height: v-bind(heightPx);
+        padding: 0 variables.$spacer * 0.5;
+        position: relative;
+        white-space: nowrap;
+
+        &::after {
+            border-bottom: 4px solid variables.$warm-orange;
+            bottom: 0;
+            content: '';
+            left: 0;
+            opacity: 0;
+            position: absolute;
+            right: 0;
+
+            @media not (prefers-reduced-motion) {
+                transition: opacity var(--es-menu-bar-open-close-duration) ease-in-out;
+            }
+        }
+
+        @media (hover: hover) {
+            text-decoration: none;
+
+            &:hover {
+                &::after {
+                    opacity: 1;
+                }
+            }
+        }
+    }
+
+    :deep(.es-menu-bar-item-trigger) {
+        -webkit-appearance: none;
+        appearance: none;
+        background: transparent;
+        border: none;
+        margin: 0;
+
+        &[data-state='open']::after {
+            opacity: 1;
+        }
+    }
+
+    :deep(.es-menu-bar-viewport) {
+        height: var(--reka-navigation-menu-viewport-height);
+        overflow: hidden;
+        position: absolute;
+        z-index: 1000;
+
+        @media not (prefers-reduced-motion) {
+            transition: height $switch-menus-duration $switch-menus-timing-function;
+
+            &[data-state='open'] {
+                animation: menuOpen var(--es-menu-bar-open-close-duration) $open-close-timing-function;
+            }
+
+            &[data-state='closed'] {
+                animation: menuClose var(--es-menu-bar-open-close-duration) $open-close-timing-function;
+            }
+        }
+
+        /* menu pane background */
+        &::before {
+            background: radial-gradient(
+                199.54% 139.89% at 0% 2.18%,
+                rgba(255, 255, 255, 0.95) 0%,
+                variables.$white 31.73%,
+                rgba(255, 255, 255, 0.9) 100%
+            );
+            bottom: 0;
+            content: '';
+            left: 0;
+            position: absolute;
+            right: 0;
+            top: 0;
+            z-index: 2;
+        }
+
+        &.full-width {
+            left: 0;
+            right: 0;
+
+            .es-menu-bar-flyout {
+                width: 100%;
+                /* row's content box = pane − 2·wrapper-padding + grid-gutter (row's negative margins). matches <es-col md="6" lg="4" xl="3"> in es-menu-bar-flyout-column so column text stays aligned during the cross-slide */
+                --es-menu-bar-flyout-row-width: calc(
+                    min(100%, #{map.get(variables.$container-max-widths, xxl)}) - 2 *
+                        #{map.get(variables.$spacers, 150)} + #{variables.$grid-gutter-width}
+                );
+                --es-menu-bar-flyout-translate: calc(var(--es-menu-bar-flyout-row-width) * 6 / 12);
+
+                @include breakpoints.media-breakpoint-up(lg) {
+                    --es-menu-bar-flyout-translate: calc(var(--es-menu-bar-flyout-row-width) * 4 / 12);
+                }
+
+                @include breakpoints.media-breakpoint-up(xl) {
+                    --es-menu-bar-flyout-translate: calc(var(--es-menu-bar-flyout-row-width) * 3 / 12);
+                }
+
+                @include breakpoints.media-breakpoint-up(xxl) {
+                    /* wrapper padding becomes 0 and pane's half-gutter padding cancels the row's negative margin → row width = pane */
+                    --es-menu-bar-flyout-row-width: min(100%, #{map.get(variables.$container-max-widths, xxl)});
+                }
+
+                /* in full width mode when switching menus, the flyout (and its sibling color band) stays in place — only the pane slides. the no-op on the flyout itself keeps Reka UI from unmounting the exiting menu before the pane's exit animation finishes */
+                @media not (prefers-reduced-motion) {
+                    &[data-motion='from-start'] .es-menu-bar-flyout-pane {
+                        animation: enterFromLeft $switch-menus-duration $switch-menus-timing-function;
+                    }
+
+                    &[data-motion='from-end'] .es-menu-bar-flyout-pane {
+                        animation: enterFromRight $switch-menus-duration $switch-menus-timing-function;
+                    }
+
+                    &[data-motion='to-start'] {
+                        animation: presenceExitAnimationForContent $switch-menus-duration $switch-menus-timing-function;
+
+                        .es-menu-bar-flyout-pane {
+                            animation: exitToLeft $switch-menus-duration $switch-menus-timing-function;
+                        }
+                    }
+
+                    &[data-motion='to-end'] {
+                        animation: presenceExitAnimationForContent $switch-menus-duration $switch-menus-timing-function;
+
+                        .es-menu-bar-flyout-pane {
+                            animation: exitToRight $switch-menus-duration $switch-menus-timing-function;
+                        }
+                    }
+                }
+
+                .es-menu-bar-flyout-pane {
+                    margin: 0 auto;
+                    max-width: map.get(variables.$container-max-widths, xxl);
+
+                    /* at xxl breakpoint only, match es-container padding */
+                    @include breakpoints.media-breakpoint-up(xxl) {
+                        padding-left: variables.$grid-gutter-width * 0.5 !important;
+                        padding-right: variables.$grid-gutter-width * 0.5 !important;
+                    }
+                }
+            }
+        }
+
+        &:not(.full-width) {
+            border: 1px solid variables.$gray-50;
+            border-radius: 0 0 variables.$spacer variables.$spacer;
+            box-shadow: 0 12px 12px 0 rgba(0, 0, 0, 0.25);
+            left: var(--reka-navigation-menu-viewport-left);
+            width: var(--reka-navigation-menu-viewport-width);
+
+            @media not (prefers-reduced-motion) {
+                transition:
+                    height $switch-menus-duration $switch-menus-timing-function,
+                    left $switch-menus-duration $switch-menus-timing-function;
+
+                &[data-state='open'] {
+                    animation: menuOpenWithShadow var(--es-menu-bar-open-close-duration) $open-close-timing-function;
+                }
+
+                &[data-state='closed'] {
+                    animation: menuCloseWithShadow var(--es-menu-bar-open-close-duration) $open-close-timing-function;
+                }
+            }
+
+            .es-menu-bar-flyout {
+                padding: variables.$spacer * 1.5;
+                width: 300px;
+
+                @media not (prefers-reduced-motion) {
+                    &[data-motion='from-start'],
+                    &[data-motion='from-end'] {
+                        .es-menu-bar-flyout-pane {
+                            animation: fadeIn $switch-menus-duration $switch-menus-timing-function;
+                        }
+                    }
+
+                    &[data-motion='to-start'],
+                    &[data-motion='to-end'] {
+                        /* no-op animation needed so Reka UI persists the exiting menu, allowing the actual exit animation to show */
+                        animation: presenceExitAnimationForContent $switch-menus-duration $switch-menus-timing-function;
+
+                        /**
+                         * animation needs to be on the child to enable a smooth cross-fade, otherwise
+                         * both parents are visible simultaneously next to each other
+                         */
+                        .es-menu-bar-flyout-pane {
+                            animation: fadeOut $switch-menus-duration $switch-menus-timing-function;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    :deep(.es-menu-bar-flyout) {
+        left: 0;
+        position: absolute;
+        top: 0;
+        z-index: 3;
+    }
+
+    /* this could be in EsMenuBarContent but needs to be here to share SASS variables */
+    :deep(.es-menu-bar-color-band) {
+        left: 0;
+        position: absolute;
+        right: 0;
+        top: calc(var(--reka-navigation-menu-viewport-height) - 8px);
+
+        @media not (prefers-reduced-motion) {
+            transition: top $switch-menus-duration $switch-menus-timing-function;
+        }
+    }
+}
+
+.es-menu-bar-overlay {
+    background-color: variables.$black;
+    height: 2 * 100vh;
+    left: 0;
+    opacity: 0.25;
+    position: fixed;
+    top: var(--es-menu-bar-height);
+    width: 100vw;
+    z-index: 999;
+
+    @media not (prefers-reduced-motion) {
+        &-enter-active,
+        &-leave-active {
+            transition: opacity var(--es-menu-bar-open-close-duration) $open-close-timing-function;
+        }
+
+        &-enter-from,
+        &-leave-to {
+            opacity: 0;
+        }
+    }
+}
+</style>

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

@@ -36,7 +36,7 @@ withDefaults(defineProps<Props>(), {
             </p>
             <p
                 v-if="subtitle"
-                class="font-size-75 mb-0">
+                class="font-size-75 mb-0 mt-25">
                 {{ subtitle }}
             </p>
         </div>

package/app/components/es-skip-to-content-link.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+interface IProps {
+    href?: string;
+}
+withDefaults(defineProps<IProps>(), {
+    href: '#main-content',
+});
+</script>
+
+<template>
+    <a
+        :href="href"
+        class="es-skip-to-content-link font-size-75 font-weight-semibold sr-only"
+        >Skip to main content</a
+    >
+</template>
+
+<style lang="scss" scoped>
+@use '@energysage/es-ds-styles/scss/variables';
+
+.es-skip-to-content-link:focus-visible {
+    /* increase contrast for the times when it appears above the logo */
+    background-color: variables.$white;
+    /* undo all the sr-only class styles */
+    clip: auto;
+    height: auto;
+    left: 0.5rem;
+    margin: 0;
+    position: absolute;
+    top: 0.5rem;
+    width: auto;
+    /* bring it above the nav so it's actually visible */
+    z-index: 1001;
+}
+</style>

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

@@ -1,7 +1,23 @@
 <script setup lang="ts">
+import { useEsdsEvents } from '../composables/events';
+import {
+    ES_MENU_BAR_CLOSE_EVENT_NAME,
+    ES_MENU_BAR_OPEN_CLOSE_DURATION_MS,
+    ES_MENU_BAR_OPEN_EVENT_NAME,
+} from '../utils/menu-bar';
+
+interface IProps {
+    transparentStartingAtBreakpoint?: 'lg' | 'xl' | 'xxl' | '';
+}
+withDefaults(defineProps<IProps>(), {
+    transparentStartingAtBreakpoint: '',
+});
+
 // minimum scroll distance in a single direction before showing/hiding
 const SCROLL_THRESHOLD = 20;
 
+const emitter = useEsdsEvents();
+
 // bar states:
 // - static:        initial SSR state; bar is in normal document flow
 // - absolute:      after mount; bar is out of flow but scrolls away naturally with the page
@@ -16,6 +32,11 @@ const bar = ref<HTMLElement | null>(null);
 const suppressTransition = ref(false);
 // updated on mount and whenever the bar resizes
 const barHeight = ref(0);
+// keep track of when the mouse is over the sticky bar (to change bg to white)
+const isHovered = ref(false);
+// number of EsMenuBars currently open inside this sticky bar; counting (rather than
+// a boolean) makes the state order-independent when one menu closes as another opens
+const openMenuCount = ref(0);
 
 // scroll state — all plain vars since they don't need to be reactive
 let lastScrollY = 0;
@@ -87,6 +108,27 @@ function onScroll() {
     }
 }
 
+// defined at script scope so the same references can be passed to emitter.off() —
+// calling emitter.off(type) without a handler removes EVERY listener for that event,
+// including ones registered by other components
+const onMenuBarOpen = () => {
+    openMenuCount.value += 1;
+};
+
+const onMenuBarClose = () => {
+    const decrement = () => {
+        openMenuCount.value = Math.max(0, openMenuCount.value - 1);
+    };
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+        // close animation is disabled — turn off active state immediately
+        decrement();
+    } else {
+        // delay so the menu can roll up into the bar before the bar fades to transparent
+        // (rather than rolling up into nothingness due to the bar already having faded out)
+        setTimeout(decrement, ES_MENU_BAR_OPEN_CLOSE_DURATION_MS);
+    }
+};
+
 onMounted(() => {
     // measure height before switching position so the placeholder matches exactly
     barHeight.value = bar.value?.offsetHeight ?? 0;
@@ -104,19 +146,34 @@ onMounted(() => {
         resizeObserver.observe(bar.value);
         onUnmounted(() => resizeObserver.disconnect());
     }
+
+    emitter.on(ES_MENU_BAR_OPEN_EVENT_NAME, onMenuBarOpen);
+    emitter.on(ES_MENU_BAR_CLOSE_EVENT_NAME, onMenuBarClose);
 });
 
 onUnmounted(() => {
     window.removeEventListener('scroll', onScroll);
+
+    emitter.off(ES_MENU_BAR_OPEN_EVENT_NAME, onMenuBarOpen);
+    emitter.off(ES_MENU_BAR_CLOSE_EVENT_NAME, onMenuBarClose);
 });
 </script>
 
 <template>
     <div
         ref="bar"
-        class="es-sticky-bar bg-white"
-        :class="[`es-sticky-bar--${barState}`, { 'es-sticky-bar--no-transition': suppressTransition }]"
-        v-bind="$attrs">
+        class="es-sticky-bar"
+        :class="[
+            `es-sticky-bar--${barState}`,
+            transparentStartingAtBreakpoint && `es-sticky-bar--transparent-from-${transparentStartingAtBreakpoint}`,
+            {
+                'es-sticky-bar--no-transition': suppressTransition,
+                'es-sticky-bar--active': isHovered || openMenuCount > 0,
+            },
+        ]"
+        v-bind="$attrs"
+        @mouseover="isHovered = true"
+        @mouseout="isHovered = false">
         <slot />
     </div>
     <!-- holds the bar's space in normal flow when the bar is absolutely or fixed positioned -->
@@ -128,22 +185,31 @@ onUnmounted(() => {
 
 <style lang="scss" scoped>
 @use '@energysage/es-ds-styles/scss/mixins/breakpoints' as breakpoints;
+@use '@energysage/es-ds-styles/scss/variables' as variables;
 
 $shadow: 0 0 6px 0 rgba(34, 38, 51, 0.2);
 
 .es-sticky-bar {
+    background-color: variables.$white;
     box-shadow: $shadow;
     left: 0;
     right: 0;
     top: 0;
     z-index: 1000;
 
-    @include breakpoints.media-breakpoint-up(lg) {
-        box-shadow: none;
+    @each $bp in (lg, xl, xxl) {
+        &--transparent-from-#{$bp} {
+            @include breakpoints.media-breakpoint-up($bp) {
+                background-color: transparent;
+                box-shadow: none;
+            }
+        }
     }
 
     @media not (prefers-reduced-motion) {
-        transition: box-shadow 0.2s ease-in-out;
+        transition:
+            background 0.2s ease-in-out,
+            box-shadow 0.2s ease-in-out;
     }
 
     &--absolute {
@@ -152,6 +218,7 @@ $shadow: 0 0 6px 0 rgba(34, 38, 51, 0.2);
 
     &--fixed-visible,
     &--fixed-hidden {
+        background-color: variables.$white;
         box-shadow: $shadow;
         position: fixed;
 
@@ -170,5 +237,10 @@ $shadow: 0 0 6px 0 rgba(34, 38, 51, 0.2);
     &--no-transition {
         transition: none !important;
     }
+
+    &--active {
+        background-color: variables.$white;
+        box-shadow: $shadow;
+    }
 }
 </style>

package/app/components/icon/fan.vue

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

package/app/components/icon/person-circle.vue

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

package/app/composables/events.ts

@@ -0,0 +1,9 @@
+import mitt from 'mitt';
+
+// create a singleton global event bus
+const emitter = mitt();
+
+// expose the singleton via a composable
+export function useEsdsEvents() {
+    return emitter;
+}

package/app/utils/menu-bar.ts

@@ -0,0 +1,25 @@
+import type { InjectionKey } from 'vue';
+
+// these constants are used by both EsMenuBar and EsStickyBar
+export const ES_MENU_BAR_CLOSE_EVENT_NAME = 'es-menu-bar-close';
+export const ES_MENU_BAR_OPEN_CLOSE_DURATION_MS = 200;
+export const ES_MENU_BAR_OPEN_EVENT_NAME = 'es-menu-bar-open';
+
+export type EsMenuBarFlyoutAlign = 'start' | 'center' | 'end';
+
+// lets EsMenuBarFlyout register a per-menu align value with its parent EsMenuBar,
+// so the single shared Reka Viewport can re-align as the active menu changes
+export const ES_MENU_BAR_ALIGNMENT_REGISTRY_KEY: InjectionKey<{
+    register: (id: string, align: EsMenuBarFlyoutAlign) => void;
+    unregister: (id: string) => void;
+}> = Symbol('esMenuBarAlignmentRegistry');
+
+/**
+ * Useful when rendering a non-full-width EsMenuBar with a v-for.
+ * Pass the result into the 'align' prop on EsMenuBarFlyout to achieve this behavior:
+ *  - the first menu flyout will be aligned to the left edge of the trigger
+ *  - the middle flyouts will be center aligned
+ *  - the last menu flyout will be aligned to the right edge of the trigger
+ */
+export const esMenuBarFlyoutDefaultAlign = (index: number, arr: any[] | undefined): EsMenuBarFlyoutAlign =>
+    !arr ? 'center' : index === arr.length - 1 ? 'end' : index === 0 ? 'start' : 'center';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@energysage/es-ds-components",
-    "version": "5.4.3",
+    "version": "5.5.0",
     "private": false,
     "type": "module",
     "description": "An EnergySage Vue component library",
@@ -17,7 +17,7 @@
     "author": "EnergySage",
     "license": "MIT",
     "devDependencies": {
-        "@energysage/es-ds-styles": "^3.5.3",
+        "@energysage/es-ds-styles": "^3.5.4",
         "@nuxt/eslint": "^1.14.0",
         "@nuxtjs/google-fonts": "^3.2.0",
         "@phosphor-icons/vue": "^2.2.1",
@@ -28,6 +28,7 @@
         "eslint-config-prettier": "^10.0.1",
         "html-truncate": "^1.2.2",
         "maska": "^3.2.0",
+        "mitt": "^3.0.1",
         "nuxt": "^4.3.1",
         "nuxt-primevue": "^3.0.0",
         "prettier": "^3.3.3",