@energysage/es-ds-components 5.1.0 → 5.3.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # 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)
+
+
+### Features
+
+* update to Phosphor icon library ([#1689](https://github.com/EnergySage/es-ds/issues/1689)) ([78bd39b](https://github.com/EnergySage/es-ds/commit/78bd39b2e3325722bfa71e660961cba0de2766ed))
+
+
+### Bug Fixes
+
+* ensure shadow is not visible when sticky bar is hidden ([#1720](https://github.com/EnergySage/es-ds/issues/1720)) ([68a7396](https://github.com/EnergySage/es-ds/commit/68a73966dba1eabb170eb0e0cb8ae5a22b6057f7))
+
 ## [5.1.0](https://github.com/EnergySage/es-ds/compare/es-ds-components-v5.0.2...es-ds-components-v5.1.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>