@energysage/es-ds-components 5.0.2 → 5.2.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## [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)
+
+
+### Features
+
+* added EsStickyBar ([#1718](https://github.com/EnergySage/es-ds/issues/1718)) ([9940605](https://github.com/EnergySage/es-ds/commit/994060525ea5c8a04ff3abfdd593e01b5c304176))
+
 ## [5.0.2](https://github.com/EnergySage/es-ds/compare/es-ds-components-v5.0.1...es-ds-components-v5.0.2) (2026-03-18)
 
 

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

@@ -0,0 +1,173 @@
+<script setup lang="ts">
+// minimum scroll distance in a single direction before showing/hiding
+const SCROLL_THRESHOLD = 20;
+
+// 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
+// - fixed-visible: bar is pinned to the top of the viewport, visible
+// - fixed-hidden:  bar is pinned but translated off screen above the viewport
+type BarState = 'static' | 'absolute' | 'fixed-visible' | 'fixed-hidden';
+const barState = ref<BarState>('static');
+
+// ref to the bar element, used to read its rendered height
+const bar = ref<HTMLElement | null>(null);
+// suppresses the transition for silent state swaps that shouldn't animate
+const suppressTransition = ref(false);
+// updated on mount and whenever the bar resizes
+const barHeight = ref(0);
+
+// scroll state — all plain vars since they don't need to be reactive
+let lastScrollY = 0;
+let scrollAnchor = 0; // position where the current scroll direction started
+let scrollDirection = 0; // positive = down, negative = up
+let ticking = false; // tracks whether a rAF is already queued
+
+// switches to fixed-hidden without triggering the CSS transition — used when the bar is already
+// off screen and we need to silently reposition it before the user scrolls back up
+function hideWithoutAnimation() {
+    suppressTransition.value = true;
+    barState.value = 'fixed-hidden';
+    // re-enable transition after the next paint so future show/hide animations still work
+    requestAnimationFrame(() => {
+        suppressTransition.value = false;
+    });
+}
+
+function updateVisibility() {
+    // clamp to the valid scroll range to prevent Safari's rubber-band momentum scrolling
+    // from triggering false direction changes at the top and bottom of the page
+    const maxScrollY = document.documentElement.scrollHeight - window.innerHeight;
+    const currentScrollY = Math.min(Math.max(window.scrollY, 0), maxScrollY);
+    const delta = currentScrollY - lastScrollY;
+
+    if (delta === 0) {
+        ticking = false;
+        return;
+    }
+
+    // reset the anchor whenever the scroll direction reverses
+    const newDirection = delta > 0 ? 1 : -1;
+    if (newDirection !== scrollDirection) {
+        scrollDirection = newDirection;
+        scrollAnchor = lastScrollY;
+    }
+
+    if (currentScrollY <= 0) {
+        // back at the very top: switch to absolute so bar scrolls away naturally on next scroll down
+        barState.value = 'absolute';
+    } else if (barState.value === 'absolute' && currentScrollY >= barHeight.value) {
+        // bar has scrolled fully off screen: reposition to fixed-hidden while invisible
+        hideWithoutAnimation();
+    } else if (
+        barState.value === 'fixed-hidden' &&
+        scrollDirection < 0 &&
+        scrollAnchor - currentScrollY >= SCROLL_THRESHOLD
+    ) {
+        // scrolling up far enough: slide bar into view
+        barState.value = 'fixed-visible';
+    } else if (
+        barState.value === 'fixed-visible' &&
+        scrollDirection > 0 &&
+        currentScrollY - scrollAnchor >= SCROLL_THRESHOLD
+    ) {
+        // scrolling down far enough: slide bar off screen
+        barState.value = 'fixed-hidden';
+    }
+
+    lastScrollY = currentScrollY;
+    ticking = false;
+}
+
+function onScroll() {
+    // batch rapid scroll events to one update per animation frame
+    if (!ticking) {
+        requestAnimationFrame(updateVisibility);
+        ticking = true;
+    }
+}
+
+onMounted(() => {
+    // measure height before switching position so the placeholder matches exactly
+    barHeight.value = bar.value?.offsetHeight ?? 0;
+
+    // switch from static to absolute — placeholder appears simultaneously to prevent layout shift
+    barState.value = 'absolute';
+    lastScrollY = window.scrollY;
+    window.addEventListener('scroll', onScroll, { passive: true });
+
+    // keep barHeight in sync as the bar's height changes across breakpoints
+    if (bar.value) {
+        const resizeObserver = new ResizeObserver(([entry]) => {
+            barHeight.value = entry?.contentRect.height || 0;
+        });
+        resizeObserver.observe(bar.value);
+        onUnmounted(() => resizeObserver.disconnect());
+    }
+});
+
+onUnmounted(() => {
+    window.removeEventListener('scroll', onScroll);
+});
+</script>
+
+<template>
+    <div
+        ref="bar"
+        class="es-sticky-bar bg-white"
+        :class="[`es-sticky-bar--${barState}`, { 'es-sticky-bar--no-transition': suppressTransition }]">
+        <slot />
+    </div>
+    <!-- holds the bar's space in normal flow when the bar is absolutely or fixed positioned -->
+    <div
+        v-if="barState !== 'static'"
+        :style="{ height: `${barHeight}px` }"
+        aria-hidden="true" />
+</template>
+
+<style lang="scss" scoped>
+@use '@energysage/es-ds-styles/scss/mixins/breakpoints' as breakpoints;
+
+$shadow: 0 0 6px 0 rgba(34, 38, 51, 0.2);
+
+.es-sticky-bar {
+    box-shadow: $shadow;
+    left: 0;
+    right: 0;
+    top: 0;
+    z-index: 1000;
+
+    @include breakpoints.media-breakpoint-up(lg) {
+        box-shadow: none;
+    }
+
+    @media not (prefers-reduced-motion) {
+        transition: box-shadow 0.2s ease-in-out;
+    }
+
+    &--absolute {
+        position: absolute;
+    }
+
+    &--fixed-visible,
+    &--fixed-hidden {
+        box-shadow: $shadow;
+        position: fixed;
+
+        @media not (prefers-reduced-motion) {
+            transition: transform 0.2s ease-in-out;
+        }
+    }
+
+    // translated off screen above the viewport
+    &--fixed-hidden {
+        box-shadow: none;
+        transform: translateY(-100%);
+    }
+
+    // suppresses animation for silent state swaps (e.g. absolute → fixed-hidden when off screen)
+    &--no-transition {
+        transition: none !important;
+    }
+}
+</style>

package/app/components/icon/arrow-clockwise.vue

@@ -1,51 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'IconArrowClockwise',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        orientation: {
-            type: String,
-            default: 'clockwise',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhArrowClockwise } from '@phosphor-icons/vue';
+
+interface Props {
+    height?: string;
+    width?: string;
+}
+withDefaults(defineProps<Props>(), {
+    height: '24px',
+    width: '24px',
+});
 </script>
+
 <template>
-    <svg
-        :class="{
-            'counter-clockwise': orientation === 'counter-clockwise',
-        }"
-        :style="{
-            height: height,
-            width: width,
-        }"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="currentColor">
-        <!-- eslint-disable-next-line max-len -->
-        <path
-            d="M3.246 7.123c.997-1.81 2.591-3.418 4.485-4.222 1.894-.905 4.087-1.106 6.08-.704 2.193.403 3.788 1.408 5.183 3.016.2.201.4.503.598.704l.4-2.513c.099-.603.597-.905 1.195-.905.499.1.897.704.798 1.206l-.897 5.127c0 .301-.2.502-.4.603-.198.1-.398.201-.597.201h-.2l-4.983-.905a1.042 1.042 0 0 1-.798-1.206c.1-.503.598-.905 1.197-.804l2.79.603c-.1-.302-.299-.503-.598-.804-1.096-1.307-2.492-2.111-4.086-2.413-1.595-.402-3.39-.2-4.884.503A7.896 7.896 0 0 0 4.94 8.028c-.797 1.507-1.096 3.216-.897 4.925.2 1.709.897 3.317 2.093 4.524 1.097 1.206 2.692 2.11 4.286 2.311 1.595.302 3.39 0 4.785-.703a8.444 8.444 0 0 0 3.488-3.518c.2-.503.798-.704 1.296-.503.498.201.698.804.498 1.307-.797 2.11-2.292 3.619-4.186 4.624-1.395.703-2.89 1.005-4.485 1.005-.598 0-1.096 0-1.695-.1-2.093-.403-3.987-1.408-5.382-2.916a10.256 10.256 0 0 1-2.691-5.629c-.2-2.211.2-4.322 1.196-6.232Z" />
-    </svg>
+    <ph-arrow-clockwise :size="width" />
 </template>
-
-<style lang="scss" scoped>
-.counter-clockwise {
-    transform: scale(-1, 1);
-}
-</style>

package/app/components/icon/arrow-counter-clockwise.vue

@@ -1,37 +1,16 @@
-<script lang="ts">
-export default {
-    name: 'ArrowCounterClockwiseIcon',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhArrowCounterClockwise } from '@phosphor-icons/vue';
+
+interface Props {
+    height?: string;
+    width?: string;
+}
+withDefaults(defineProps<Props>(), {
+    height: '24px',
+    width: '24px',
+});
 </script>
+
 <template>
-    <svg
-        :style="{
-            height: height,
-            width: width,
-        }"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="currentColor">
-        <!-- eslint-disable-next-line max-len -->
-        <path
-            d="M20.754 7.123c-.997-1.81-2.591-3.418-4.485-4.222-1.894-.905-4.087-1.106-6.08-.704C7.996 2.6 6.4 3.605 5.006 5.213c-.2.201-.4.503-.598.704l-.4-2.513c-.099-.603-.597-.905-1.195-.905-.499.1-.897.704-.798 1.206l.897 5.127c0 .301.2.502.4.603.198.1.398.201.597.201h.2l4.983-.905c.499-.1.897-.603.798-1.206a1.034 1.034 0 0 0-1.196-.804l-2.791.603c.1-.302.299-.503.598-.804 1.096-1.307 2.492-2.111 4.086-2.413 1.595-.402 3.39-.2 4.884.503a7.896 7.896 0 0 1 3.589 3.418c.797 1.507 1.096 3.216.897 4.925-.2 1.709-.897 3.317-2.094 4.524-1.096 1.206-2.69 2.11-4.285 2.311-1.595.302-3.39 0-4.785-.703a8.444 8.444 0 0 1-3.488-3.518c-.2-.503-.798-.704-1.296-.503-.499.201-.698.804-.499 1.307.798 2.11 2.293 3.619 4.187 4.624 1.395.703 2.89 1.005 4.485 1.005.598 0 1.096 0 1.695-.1 2.093-.403 3.986-1.408 5.382-2.916a10.257 10.257 0 0 0 2.691-5.629c.2-2.211-.2-4.322-1.196-6.232Z" />
-    </svg>
+    <ph-arrow-counter-clockwise :size="width" />
 </template>

package/app/components/icon/arrow-cycle.vue

@@ -1,43 +1,16 @@
-<!-- eslint-disable max-len -->
-<script lang="ts">
-export default {
-    name: 'IconArrowCycle',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhArrowsClockwise } from '@phosphor-icons/vue';
+
+interface Props {
+    height?: string;
+    width?: string;
+}
+withDefaults(defineProps<Props>(), {
+    height: '24px',
+    width: '24px',
+});
 </script>
+
 <template>
-    <svg
-        :style="{
-            height: height,
-            width: width,
-        }"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="currentColor">
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M11.806 3C6.929 3 3 6.565 3 12a1 1 0 1 1-2 0C1 5.435 5.85 1 11.806 1c4.759 0 8.742 2.543 10.141 6.68a1 1 0 0 1-1.894.64C18.973 5.127 15.853 3 11.806 3ZM22 11a1 1 0 0 1 1 1c0 6.565-4.85 11-10.806 11-4.758 0-8.742-2.543-10.141-6.68a1 1 0 0 1 1.894-.64c1.08 3.193 4.2 5.32 8.247 5.32C17.071 21 21 17.435 21 12a1 1 0 0 1 1-1Z" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M22.242 3.03a1 1 0 0 1 .728 1.213l-1 4a1 1 0 0 1-1.212.727l-4-1a1 1 0 1 1 .485-1.94l3.03.757.757-3.03a1 1 0 0 1 1.212-.727ZM2.03 15.758a1 1 0 0 1 1.213-.728l4 1a1 1 0 1 1-.486 1.94l-3.03-.757-.757 3.03a1 1 0 1 1-1.94-.485l1-4Z" />
-    </svg>
+    <ph-arrows-clockwise :size="width" />
 </template>

package/app/components/icon/arrow-down.vue

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

package/app/components/icon/arrow-left.vue

@@ -1,39 +1,16 @@
-<!-- eslint-disable max-len -->
-<script lang="ts">
-export default {
-    name: 'ArrowLeftIcon',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhArrowLeft } from '@phosphor-icons/vue';
+
+interface Props {
+    height?: string;
+    width?: string;
+}
+withDefaults(defineProps<Props>(), {
+    height: '24px',
+    width: '24px',
+});
 </script>
+
 <template>
-    <svg
-        :style="{
-            height: height,
-            width: width,
-        }"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="currentColor">
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M11.707 4.293a1 1 0 0 1 0 1.414L6.414 11H20a1 1 0 1 1 0 2H6.414l5.293 5.293a1 1 0 0 1-1.414 1.414l-7-7a1 1 0 0 1 0-1.414l7-7a1 1 0 0 1 1.414 0Z" />
-    </svg>
+    <ph-arrow-left :size="width" />
 </template>

package/app/components/icon/arrow-right.vue

@@ -1,39 +1,16 @@
-<!-- eslint-disable max-len -->
-<script lang="ts">
-export default {
-    name: 'ArrowRightIcon',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhArrowRight } from '@phosphor-icons/vue';
+
+interface Props {
+    height?: string;
+    width?: string;
+}
+withDefaults(defineProps<Props>(), {
+    height: '24px',
+    width: '24px',
+});
 </script>
+
 <template>
-    <svg
-        :style="{
-            height: height,
-            width: width,
-        }"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="currentColor">
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M12.293 4.293a1 1 0 0 1 1.414 0l7 7a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414-1.414L17.586 13H4a1 1 0 1 1 0-2h13.586l-5.293-5.293a1 1 0 0 1 0-1.414Z" />
-    </svg>
+    <ph-arrow-right :size="width" />
 </template>

package/app/components/icon/arrow-up.vue

@@ -1,39 +1,16 @@
-<!-- eslint-disable max-len -->
-<script lang="ts">
-export default {
-    name: 'ArrowUpIcon',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhArrowUp } from '@phosphor-icons/vue';
+
+interface Props {
+    height?: string;
+    width?: string;
+}
+withDefaults(defineProps<Props>(), {
+    height: '24px',
+    width: '24px',
+});
 </script>
+
 <template>
-    <svg
-        :style="{
-            height: height,
-            width: width,
-        }"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="currentColor">
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M11.293 3.293a1 1 0 0 1 1.414 0l7 7a1 1 0 0 1-1.414 1.414L13 6.414V20a1 1 0 1 1-2 0V6.414l-5.293 5.293a1 1 0 0 1-1.414-1.414l7-7Z" />
-    </svg>
+    <ph-arrow-up :size="width" />
 </template>

package/app/components/icon/bell.vue

@@ -1,42 +1,16 @@
-<!-- eslint-disable max-len -->
-<script lang="ts">
-export default {
-    name: 'IconBell',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhBell } from '@phosphor-icons/vue';
+
+interface Props {
+    height?: string;
+    width?: string;
+}
+withDefaults(defineProps<Props>(), {
+    height: '24px',
+    width: '24px',
+});
 </script>
+
 <template>
-    <svg
-        :style="{
-            height: height,
-            width: width,
-        }"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="currentColor">
-        <path
-            d="M15 4v.375c2.818.934 4.978 3.525 5.015 6.614v3.8c0 .724.098 1.259.368 1.671l.286.437c.857 1.305-.045 3.103-1.654 3.103h-3.142a3.999 3.999 0 0 1-7.746 0H4.985c-1.606 0-2.513-1.796-1.654-3.103h.001l.286-.438c.27-.411.367-.944.367-1.669v-3.797C4.007 7.897 6.17 5.284 9 4.359V4a3 3 0 1 1 6 0Z"
-            fill="none" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M12 3a1 1 0 0 0-1 1h2a1 1 0 0 0-1-1Zm3 1.375V4a3 3 0 0 0-6 0v.359c-2.83.925-4.993 3.538-5.015 6.634v3.797c0 .725-.097 1.258-.367 1.67l-.286.436v.001C2.471 18.204 3.378 20 4.984 20h3.142a4 4 0 0 0 7.746 0h3.142c1.61 0 2.511-1.798 1.654-3.103l-.286-.437c-.27-.412-.368-.947-.368-1.671v-3.8c-.037-3.09-2.197-5.68-5.015-6.614ZM11.223 6h.038l1.458.003c2.84.007 5.26 2.305 5.296 5.004v3.782c0 .856.104 1.865.695 2.767l.287.438A.15.15 0 0 1 19 18H5l.003-.004v-.002l.287-.438c.592-.902.695-1.911.695-2.766v-3.786C6.006 8.313 8.404 6.01 11.223 6Zm2.51 14h-3.465A1.997 1.997 0 0 0 12 21a2 2 0 0 0 1.732-1Z" />
-    </svg>
+    <ph-bell :size="width" />
 </template>

package/app/components/icon/block.vue

@@ -1,46 +1,16 @@
-<!-- eslint-disable max-len -->
-<script lang="ts">
-export default {
-    name: 'IconBlock',
-    props: {
-        /**
-         * Width
-         */
-        width: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-        /**
-         * Height
-         */
-        height: {
-            type: String,
-            default: '24px',
-            required: false,
-        },
-    },
-};
+<script setup lang="ts">
+import { PhProhibit } from '@phosphor-icons/vue';
+
+interface Props {
+    height?: string;
+    width?: string;
+}
+withDefaults(defineProps<Props>(), {
+    height: '24px',
+    width: '24px',
+});
 </script>
+
 <template>
-    <svg
-        :style="{
-            height: height,
-            width: width,
-        }"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-        fill="currentColor">
-        <path
-            d="M23 12c0 6.075-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1s11 4.925 11 11Z"
-            fill="none" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18ZM1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12Z" />
-        <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="m19.707 5.707-14 14-1.414-1.414 14-14 1.414 1.414Z" />
-    </svg>
+    <ph-prohibit :size="width" />
 </template>