@energysage/es-ds-components 5.0.0 → 5.0.1

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## [5.0.1](https://github.com/EnergySage/es-ds/compare/es-ds-components-v5.0.0...es-ds-components-v5.0.1) (2026-03-04)
+
+
+### Bug Fixes
+
+* EsFormRadioCards focus state is no longer applied on select/click ([#1711](https://github.com/EnergySage/es-ds/issues/1711)) ([c1ff4eb](https://github.com/EnergySage/es-ds/commit/c1ff4eb951d06d5de38ad35127adf4e7b8ca47c7))
+* security vulnerabilities in serialize-javascript and minimatch ([#1713](https://github.com/EnergySage/es-ds/issues/1713)) ([3a5e859](https://github.com/EnergySage/es-ds/commit/3a5e85954ca208a7e3a7f510ec04eca6a71ba92f))
+
+
+### Dependencies
+
+* The following workspace dependencies were updated
+  * dependencies
+    * @energysage/es-ds-styles bumped from ^3.3.2 to ^3.3.3
+
 ## [5.0.0](https://github.com/EnergySage/es-ds/compare/es-ds-components-v4.2.0...es-ds-components-v5.0.0) (2026-02-23)
 
 

package/app/components/es-form-radio-card.vue

@@ -1,9 +1,4 @@
 <script setup lang="ts">
-import { useFocus } from '@vueuse/core';
-
-const inputElem = useTemplateRef('input-elem');
-const { focused: inputFocused } = useFocus(inputElem);
-
 interface IProps {
     id: string;
     name: string;
@@ -35,8 +30,8 @@ const isChecked = computed(() => props.value === model.value);
 
 <template>
     <label
-        class="es-form-radio-card es-card interactive w-100 btn btn-outline-primary"
-        :class="{ active: isChecked, disabled: props.disabled, focus: isChecked || inputFocused }"
+        class="es-form-radio-card user-select-none w-100"
+        :class="{ active: isChecked, disabled: props.disabled }"
         @click="handleRadioButtonClick">
         <input
             :id="id"
@@ -53,3 +48,196 @@ const isChecked = computed(() => props.value === model.value);
         </slot>
     </label>
 </template>
+
+<style lang="scss" scoped>
+@use '@energysage/es-ds-styles/scss/mixins/breakpoints' as breakpoints;
+@use '@energysage/es-ds-styles/scss/variables' as variables;
+@use 'sass:math';
+
+/* padding */
+
+$padding-x-mobile: 1rem;
+$padding-y-mobile: 1.5rem;
+$padding-for-radio-mobile: 3rem;
+
+$padding-x-desktop: 1.5rem;
+$padding-y-desktop: 1.5rem;
+$padding-for-radio-desktop: 4.5rem;
+
+/* sizing */
+
+$inner-circle-size-mobile: 11px;
+$outer-circle-size-mobile: 22px;
+
+$inner-circle-size-desktop: 15px;
+$outer-circle-size-desktop: 28px;
+
+/* calculated positioning */
+
+$additional-translate-y-for-vertical-centering: 2px;
+
+$inner-circle-translate-x-from-left-mobile: math.div($outer-circle-size-mobile, 2) - math.div(
+        $inner-circle-size-mobile,
+        2
+    );
+$inner-circle-translate-y-from-top-mobile: $inner-circle-translate-x-from-left-mobile +
+    $additional-translate-y-for-vertical-centering;
+
+$inner-circle-half-of-dimension-desktop: math.div($inner-circle-size-desktop, 2);
+$outer-circle-half-of-dimension-desktop: math.div($outer-circle-size-desktop, 2);
+
+$inner-circle-translate-x-from-left-desktop: $outer-circle-half-of-dimension-desktop -
+    $inner-circle-half-of-dimension-desktop;
+$inner-circle-translate-y-from-top-desktop: $inner-circle-translate-x-from-left-desktop +
+    $additional-translate-y-for-vertical-centering;
+
+.es-form-radio-card {
+    /* keep these styles here instead of applying via utility classes so they can be easily overridden by utility classes downstream */
+    align-items: center;
+    background-color: variables.$white;
+    border: 2px solid variables.$gray-200;
+    border-radius: 1rem;
+    box-shadow:
+        0 0 0 1px transparent,
+        0 4px 12px variables.$gray-50;
+    color: variables.$gray-800;
+    cursor: pointer;
+    font-size: variables.$font-size-300;
+    font-weight: variables.$font-weight-bold;
+    line-height: 1.2;
+    margin-bottom: 1rem;
+    padding: $padding-y-mobile $padding-x-mobile $padding-y-mobile $padding-for-radio-mobile;
+    position: relative;
+    text-align: left;
+    transform: translateZ(0);
+    transition:
+        color 0.15s ease-in-out,
+        background-color 0.15s ease-in-out,
+        border-color 0.15s ease-in-out,
+        box-shadow 0.15s ease-in-out,
+        outline 0.15s ease-in-out;
+
+    @include breakpoints.media-breakpoint-up(lg) {
+        font-size: variables.$font-size-400;
+        padding: $padding-y-desktop $padding-x-desktop $padding-y-desktop $padding-for-radio-desktop;
+    }
+
+    &::before,
+    &::after {
+        border-radius: 50%;
+        content: '';
+        left: $padding-x-mobile;
+        position: absolute;
+        top: $padding-y-mobile;
+
+        @include breakpoints.media-breakpoint-up(lg) {
+            left: $padding-x-desktop;
+        }
+    }
+
+    /* outer circle of radio button */
+    &::before {
+        border: 2.5px solid variables.$blue-900;
+        height: $outer-circle-size-mobile;
+        transform: translateY($additional-translate-y-for-vertical-centering);
+        width: $outer-circle-size-mobile;
+
+        @include breakpoints.media-breakpoint-up(lg) {
+            height: $outer-circle-size-desktop;
+            width: $outer-circle-size-desktop;
+        }
+    }
+
+    /* selected state */
+    &:not(:disabled):not(.disabled).active {
+        border-color: variables.$warm-orange;
+        box-shadow:
+            0 0 0 1px transparent,
+            variables.$card-interactive-selected-shadow;
+        transform: none;
+
+        /* inner circle of radio button */
+        &::after {
+            background-color: variables.$blue-900;
+            height: $inner-circle-size-mobile;
+            transform: translateX($inner-circle-translate-x-from-left-mobile)
+                translateY($inner-circle-translate-y-from-top-mobile);
+            width: $inner-circle-size-mobile;
+
+            @include breakpoints.media-breakpoint-up(lg) {
+                height: $inner-circle-size-desktop;
+                transform: translateX($inner-circle-translate-x-from-left-desktop)
+                    translateY($inner-circle-translate-y-from-top-desktop);
+                width: $inner-circle-size-desktop;
+            }
+        }
+    }
+
+    &:has(input:focus-visible) {
+        outline: 2px solid variables.$blue-600;
+        outline-offset: 2px;
+    }
+
+    /* mousedown/touchstart state */
+    &:not(:disabled):not(.disabled):active,
+    &:not(:disabled):not(.disabled).active:active {
+        border-color: variables.$card-interactive-active-border-color;
+        box-shadow:
+            0 0 0 1px variables.$card-interactive-active-border-color,
+            variables.$card-interactive-selected-active-shadow;
+        transform: variables.$btn-active-transform;
+    }
+
+    &.disabled {
+        background: variables.$gray-50;
+        border-color: variables.$gray-200;
+        color: variables.$gray-500;
+
+        &::before {
+            border: 2.5px solid variables.$gray-500;
+        }
+    }
+
+    input {
+        /**
+        * hide the radio button input elements the same way bootstrap vue does.
+        * bootstrap vue's styles only work on items directly nested under b-form-radio-group, and we want
+        * to enable users to put any elements (e.g. <es-col> and <es-row>) between the EsFormRadioCards and
+        * EsFormRadioCard elements.
+        */
+        clip: rect(0, 0, 0, 0);
+        pointer-events: none;
+        position: absolute;
+    }
+}
+
+/* desktop has-icon styling (move radio button to bottom center) */
+@include breakpoints.media-breakpoint-up(lg) {
+    .es-form-radio-cards.has-icon {
+        .es-form-radio-card {
+            padding: $padding-y-desktop $padding-x-desktop $padding-for-radio-desktop $padding-x-desktop;
+
+            &::before,
+            &::after {
+                bottom: $padding-y-desktop;
+                left: 50%;
+                top: auto;
+            }
+
+            /* outer circle of radio button */
+            &::before {
+                transform: translateX(-$outer-circle-half-of-dimension-desktop);
+            }
+
+            /* selected state */
+            &:not(:disabled):not(.disabled).active {
+                /* inner circle of radio button */
+                &::after {
+                    transform: translateX(-$inner-circle-half-of-dimension-desktop)
+                        translateY(-$inner-circle-translate-x-from-left-desktop);
+                }
+            }
+        }
+    }
+}
+</style>

package/app/components/es-form-radio-cards.vue

@@ -1,33 +1,31 @@
 <script setup lang="ts">
 interface Option {
+    disabled?: boolean;
     id: string;
+    inline?: boolean;
     text: string;
-
     value: any;
-    disabled?: boolean;
-    inline?: boolean;
 }
 
 interface Props {
+    hasIcon?: boolean;
     id: string;
     label: string;
+    labelClass?: string;
+    labelSrOnly?: boolean;
+    modelValue?: any;
     name?: string;
     options?: Option[];
     inline?: boolean;
-
-    modelValue?: any;
-    hasIcon?: boolean;
-    labelClass?: string;
-    labelSrOnly?: boolean;
 }
 const props = withDefaults(defineProps<Props>(), {
-    name: '',
-    options: undefined,
-    inline: false,
-    modelValue: undefined,
     hasIcon: false,
+    inline: false,
     labelClass: 'font-size-h3',
     labelSrOnly: false,
+    modelValue: undefined,
+    name: '',
+    options: undefined,
 });
 
 const emit = defineEmits(['update:model-value']);
@@ -40,7 +38,7 @@ function handleUpdate(value: any) {
 <template>
     <fieldset
         :id="`${props.id}-fieldset`"
-        class="form-group">
+        class="mb-100">
         <legend
             :id="`${props.id}-legend`"
             class="font-size-h1 font-weight-bolder mb-200 pb-0 text-dark"
@@ -53,7 +51,7 @@ function handleUpdate(value: any) {
                 :id="`${props.id}-radiogroup`"
                 role="radiogroup"
                 tabindex="-1"
-                class="es-form-radio-cards d-flex justify-content-center btn-group-vertical"
+                class="es-form-radio-cards align-items-stretch d-flex flex-column justify-content-center position-relative"
                 :class="{ 'has-icon': props.hasIcon }">
                 <slot :options="options">
                     <es-form-radio-card

package/app/components/icon/money.vue

@@ -24,8 +24,10 @@ export default {
 
 <template>
     <svg
-        width="32"
-        height="32"
+        :style="{
+            height: height,
+            width: width,
+        }"
         viewBox="0 0 32 32"
         fill="currentColor"
         xmlns="http://www.w3.org/2000/svg">

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@energysage/es-ds-components",
-    "version": "5.0.0",
+    "version": "5.0.1",
     "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.2",
+        "@energysage/es-ds-styles": "^3.3.3",
         "@nuxtjs/google-fonts": "^3.2.0",
         "@vuelidate/core": "^2.0.3",
         "@vuelidate/validators": "^2.0.4",
@@ -43,6 +43,7 @@
     },
     "overrides": {
         "chokidar": "==3.6.0",
-        "minimatch": "==10.2.1"
+        "minimatch": "==10.2.3",
+        "serialize-javascript": "==7.0.3"
     }
 }