From 2a7e7b9ca99484875e23d855d9df86190703e2ad Mon Sep 17 00:00:00 2001
From: Tommy <tomjleo@gmail.com>
Date: Thu, 5 Sep 2024 11:48:23 -0400
Subject: [PATCH 01/26] feat: wip

---
 es-ds-components/components/es-form-radio-card.vue  | 0
 es-ds-components/components/es-form-radio-cards.vue | 0
 2 files changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 es-ds-components/components/es-form-radio-card.vue
 create mode 100644 es-ds-components/components/es-form-radio-cards.vue

diff --git a/es-ds-components/components/es-form-radio-card.vue b/es-ds-components/components/es-form-radio-card.vue
new file mode 100644
index 000000000..e69de29bb
diff --git a/es-ds-components/components/es-form-radio-cards.vue b/es-ds-components/components/es-form-radio-cards.vue
new file mode 100644
index 000000000..e69de29bb

From bca817bb3d11dd5e03ef670a23304f9469d2222c Mon Sep 17 00:00:00 2001
From: Tommy <tomjleo@gmail.com>
Date: Fri, 6 Sep 2024 09:29:23 -0400
Subject: [PATCH 02/26] feat: wip

---
 .../components/es-form-radio-card.vue         | 28 ++++++
 .../components/es-form-radio-cards.vue        | 36 ++++++++
 es-ds-docs/components/ds-molecules-list.vue   | 91 ++++++++++++++-----
 es-ds-docs/pages/molecules/radio-cards.vue    | 72 +++++++++++++++
 4 files changed, 205 insertions(+), 22 deletions(-)
 create mode 100644 es-ds-docs/pages/molecules/radio-cards.vue

diff --git a/es-ds-components/components/es-form-radio-card.vue b/es-ds-components/components/es-form-radio-card.vue
index e69de29bb..15e677cb3 100644
--- a/es-ds-components/components/es-form-radio-card.vue
+++ b/es-ds-components/components/es-form-radio-card.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+interface IProps {
+    disabled?: boolean;
+    displayName: string; // TODO: make this optional if user opts for slot?
+    groupName?: string;
+    inline?: boolean;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    value: any;
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+    disabled: false,
+    displayName: '',
+    groupName: '',
+    inline: false,
+    value: null,
+});
+</script>
+
+<template>
+    <es-radio-button
+        class="es-form-radio-card es-card interactive w-100"
+        :disabled="props.disabled"
+        :display-name="props.displayName"
+        :group-name="props.groupName"
+        :inline="props.inline"
+        :value="props.value" />
+</template>
diff --git a/es-ds-components/components/es-form-radio-cards.vue b/es-ds-components/components/es-form-radio-cards.vue
index e69de29bb..d6f238c98 100644
--- a/es-ds-components/components/es-form-radio-cards.vue
+++ b/es-ds-components/components/es-form-radio-cards.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+interface IProps {
+    hasIcon?: boolean;
+    labelClass?: string,
+    labelSrOnly?: boolean,
+
+    // Radio Button Group Props
+    id: string,
+    label: string,
+}
+const props = withDefaults(defineProps<IProps>(), {
+    hasIcon: false,
+    labelClass: 'font-size-h1 font-weight-bolder mb-200 pb-0 text-dark',
+    labelSrOnly: false,
+    // value: '',
+});
+
+const slots = useSlots()
+console.log(slots);
+const attrs = useAttrs()
+console.log(attrs);
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const model = defineModel<any>();
+</script>
+
+<template>
+    <es-radio-button-group
+        :id="id"
+        v-model="model"
+        :label="label"
+        class="es-form-radio-cards d-flex justify-content-center"
+        :class="{ 'has-icon': props.hasIcon }">
+        <slot />
+    </es-radio-button-group>
+</template>
diff --git a/es-ds-docs/components/ds-molecules-list.vue b/es-ds-docs/components/ds-molecules-list.vue
index f4888a4f0..2804e9486 100644
--- a/es-ds-docs/components/ds-molecules-list.vue
+++ b/es-ds-docs/components/ds-molecules-list.vue
@@ -1,68 +1,115 @@
+<script setup></script>
 <template>
     <ul class="list-unstyled pl-100">
         <li>
-            <ds-link to="/molecules/accordion"> Accordion </ds-link>
+            <ds-link to="/molecules/accordion">
+                Accordion
+            </ds-link>
+        </li>
+        <li>
+            <ds-link to="/molecules/badge">
+                Badge
+            </ds-link>
         </li>
         <li>
-            <ds-link to="/molecules/badge"> Badge </ds-link>
+            <ds-link to="/molecules/breadcrumbs">
+                Breadcrumbs
+            </ds-link>
         </li>
         <li>
-            <ds-link to="/molecules/breadcrumbs"> Breadcrumbs </ds-link>
+            <ds-link to="/molecules/button">
+                Button
+            </ds-link>
         </li>
         <li>
-            <ds-link to="/molecules/button"> Button </ds-link>
+            <ds-link to="/molecules/card">
+                Card
+            </ds-link>
         </li>
         <li>
-            <ds-link to="/molecules/card"> Card </ds-link>
+            <ds-link to="/molecules/checkbox">
+                Checkbox
+            </ds-link>
         </li>
         <li>
-            <ds-link to="/molecules/checkbox"> Checkbox </ds-link>
+            <ds-link to="/molecules/collapse">
+                Collapse
+            </ds-link>
         </li>
         <li>
-            <ds-link to="/molecules/collapse"> Collapse </ds-link>
+            <ds-link to="/molecules/data-table">
+                Data table
+            </ds-link>
         </li>
         <li>
-            <ds-link to="/molecules/data-table"> Data table </ds-link>
+            <ds-link to="/molecules/data-table-simple">
+                Data table simple
+            </ds-link>
         </li>
         <li>
-            <ds-link to="/molecules/data-table-simple"> Data table simple </ds-link>
+            <ds-link to="/molecules/file-input">
+                File input
+            </ds-link>
         </li>
         <li>
-            <ds-link to="/molecules/file-input"> File input </ds-link>
+            <ds-link to="/molecules/form-message">
+                Form message
+            </ds-link>
         </li>
         <li>
-            <ds-link to="/molecules/form-message"> Form message </ds-link>
+            <ds-link to="/molecules/modal">
+                Modal
+            </ds-link>
         </li>
         <li>
-            <ds-link to="/molecules/modal"> Modal </ds-link>
+            <ds-link to="/molecules/pagination">
+                Pagination
+            </ds-link>
         </li>
         <li>
-            <ds-link to="/molecules/pagination"> Pagination </ds-link>
+            <ds-link to="/molecules/popover">
+                Popover
+            </ds-link>
         </li>
         <li>
-            <ds-link to="/molecules/popover"> Popover </ds-link>
+            <ds-link to="/molecules/progress">
+                Progress
+            </ds-link>
         </li>
         <li>
-            <ds-link to="/molecules/progress"> Progress </ds-link>
+            <ds-link to="/molecules/progress-circle">
+                Progress circle
+            </ds-link>
         </li>
         <li>
-            <ds-link to="/molecules/progress-circle"> Progress circle </ds-link>
+            <ds-link to="/molecules/radio-button">
+                Radio button
+            </ds-link>
         </li>
         <li>
-            <ds-link to="/molecules/radio-button"> Radio button </ds-link>
+            <ds-link to="/molecules/radio-cards">
+                Radio cards
+            </ds-link>
         </li>
         <li>
-            <ds-link to="/molecules/rating"> Rating </ds-link>
+            <ds-link to="/molecules/rating">
+                Rating
+            </ds-link>
         </li>
         <li>
-            <ds-link to="/molecules/support"> Support </ds-link>
+            <ds-link to="/molecules/support">
+                Support
+            </ds-link>
         </li>
         <li>
-            <ds-link to="/molecules/tabs"> Tabs </ds-link>
+            <ds-link to="/molecules/tabs">
+                Tabs
+            </ds-link>
         </li>
         <li>
-            <ds-link to="/molecules/form-input"> Text input </ds-link>
+            <ds-link to="/molecules/form-input">
+                Text input
+            </ds-link>
         </li>
     </ul>
 </template>
-<script setup></script>
diff --git a/es-ds-docs/pages/molecules/radio-cards.vue b/es-ds-docs/pages/molecules/radio-cards.vue
new file mode 100644
index 000000000..67cf87cda
--- /dev/null
+++ b/es-ds-docs/pages/molecules/radio-cards.vue
@@ -0,0 +1,72 @@
+
+<script setup lang="ts">
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function handleSubmit(e: any) {
+    console.log(e);
+}
+
+const form = ref({
+    installTimeline: '',
+    propertyType: '',
+    storageReason: '',
+});
+
+const propertyTypeOptions = [
+    { label: 'Home', value: 'residential' },
+    { label: 'Business', value: 'commercial' },
+    { label: 'Nonprofit', value: 'nonprofit' },
+];
+
+</script>
+
+<template>
+    <div>
+        <h1>
+            Radio cards
+        </h1>
+        <p class="mb-200 mb-lg-500">
+            Extended from <ds-link
+                to="https://v3.primevue.org/radiobutton/">
+                prime-vue form-radio
+            </ds-link>
+        </p>
+
+        <h2>
+            Radio Card
+        </h2>
+        <es-form-radio-card
+            display-name="test1"
+            :value="propertyTypeOptions[0].value" />
+
+        <h2>
+            Default
+        </h2>
+        <p>
+            Responsive font sizing is applied by default. This means the text will be smaller on
+            mobile and larger on desktop.
+        </p>
+        <es-card class="mb-200 mb-lg-500">
+            <form @submit="handleSubmit">
+                <es-form-radio-cards
+                    id="idRadioCards1"
+                    v-model="form.propertyType"
+                    label="What type of property do you want quotes for?">
+                    <es-form-radio-card
+                        v-for="option in propertyTypeOptions"
+                        :id="`id${option.value}`"
+                        :key="option.value"
+                        :display-name="option.label"
+                        group-name="radioCards1"
+                        :value="option.value">
+                        {{ option.label }}
+                    </es-form-radio-card>
+                </es-form-radio-cards>
+            </form>
+            <p class="mb-0">
+                <span class="font-weight-bold">Selection:</span>
+                {{ form.propertyType || '[none]' }}
+            </p>
+        </es-card>
+
+    </div>
+</template>

From 1a20c9368a8eafef3b2abf9a4516bd0a9dcc3990 Mon Sep 17 00:00:00 2001
From: Tommy <tomjleo@gmail.com>
Date: Tue, 10 Sep 2024 10:36:05 -0400
Subject: [PATCH 03/26] feat: explicit prop passing

---
 .../components/es-form-radio-card.vue         | 43 ++++++++++++++++++-
 .../components/es-radio-button.vue            | 16 ++++++-
 es-ds-docs/pages/molecules/radio-cards.vue    |  9 +++-
 3 files changed, 64 insertions(+), 4 deletions(-)

diff --git a/es-ds-components/components/es-form-radio-card.vue b/es-ds-components/components/es-form-radio-card.vue
index 15e677cb3..54bd459f4 100644
--- a/es-ds-components/components/es-form-radio-card.vue
+++ b/es-ds-components/components/es-form-radio-card.vue
@@ -6,6 +6,8 @@ interface IProps {
     inline?: boolean;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     value: any;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    modelValue: any;
 }
 
 const props = withDefaults(defineProps<IProps>(), {
@@ -15,14 +17,53 @@ const props = withDefaults(defineProps<IProps>(), {
     inline: false,
     value: null,
 });
+
+const emit = defineEmits([
+    'radio-card:change',
+    'radio-card:blur',
+    'radio-card:focus',
+    'radio-card:update',
+])
+
+
+
+function handleClick() {
+    if (props.value !== props.modelValue) {
+        emit('radio-card:update', props.value);
+    }
+}
+
+const isSelected = computed(() => props.modelValue === props.value)
+
+const isFocused = ref(false);
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function handleFocus(e: any) {
+    console.log('form-radio-card:handleFocus ', e);
+    // eslint-disable-next-line no-debugger
+    // debugger;
+    emit('radio-card:focus', e);
+    if (isSelected.value) {
+        isFocused.value = true;
+    } else {
+        isFocused.value = false;
+    }
+}
 </script>
 
 <template>
     <es-radio-button
         class="es-form-radio-card es-card interactive w-100"
+        :class="{ 'active': isSelected, 'focus': isFocused }"
         :disabled="props.disabled"
         :display-name="props.displayName"
         :group-name="props.groupName"
         :inline="props.inline"
-        :value="props.value" />
+        :value="props.value"
+        :model-value="props.modelValue"
+        @radio-button:change="$emit('radio-card:change', (evt: any) => evt)"
+        @radio-button:blur="$emit('radio-card:blur', (evt: any) => evt)"
+        @radio-button:focus="handleFocus"
+        @radio-button:update="$emit('radio-card:update', props.value)"
+        @click="handleClick"
+    />
 </template>
diff --git a/es-ds-components/components/es-radio-button.vue b/es-ds-components/components/es-radio-button.vue
index b171a7aa4..c14e01ec6 100644
--- a/es-ds-components/components/es-radio-button.vue
+++ b/es-ds-components/components/es-radio-button.vue
@@ -8,6 +8,8 @@ interface IProps {
     inline?: boolean;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     value: any;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    modelValue: any;
 }
 
 const props = withDefaults(defineProps<IProps>(), {
@@ -17,6 +19,13 @@ const props = withDefaults(defineProps<IProps>(), {
     inline: false,
     value: null,
 });
+
+defineEmits([
+    'radio-button:change',
+    'radio-button:focus',
+    'radio-button:blur',
+    'radio-button:update',
+])
 </script>
 
 <template>
@@ -28,7 +37,12 @@ const props = withDefaults(defineProps<IProps>(), {
             :disabled="disabled"
             :input-id="`${props.value}-${props.groupName}`"
             :name="props.groupName"
-            :value="props.value" />
+            :model-value="modelValue"
+            :value="props.value"
+            @change="$emit('radio-button:change', (evt: any) => evt)"
+            @focus="$emit('radio-button:focus', (evt: any) => evt)"
+            @blur="$emit('radio-button:blur', (evt: any) => evt)"
+            @update:model-value="$emit('radio-button:update', props.value)" />
         <slot>
             <label
                 :for="`${props.value}-${props.groupName}`"
diff --git a/es-ds-docs/pages/molecules/radio-cards.vue b/es-ds-docs/pages/molecules/radio-cards.vue
index 67cf87cda..d48839837 100644
--- a/es-ds-docs/pages/molecules/radio-cards.vue
+++ b/es-ds-docs/pages/molecules/radio-cards.vue
@@ -36,7 +36,10 @@ const propertyTypeOptions = [
         </h2>
         <es-form-radio-card
             display-name="test1"
-            :value="propertyTypeOptions[0].value" />
+            :model-value="form.propertyType"
+            :value="propertyTypeOptions[0].value"
+            @radio-card:update="(val) => form.propertyType = val"
+        />
 
         <h2>
             Default
@@ -57,7 +60,9 @@ const propertyTypeOptions = [
                         :key="option.value"
                         :display-name="option.label"
                         group-name="radioCards1"
-                        :value="option.value">
+                        :model-value="form.propertyType"
+                        :value="option.value"
+                        @radio-card:update="(val) => form.propertyType = val">
                         {{ option.label }}
                     </es-form-radio-card>
                 </es-form-radio-cards>

From 8d02e2b25e4545f9a7b9fca6a3ba4ed634487ed9 Mon Sep 17 00:00:00 2001
From: Tommy <tomjleo@gmail.com>
Date: Tue, 10 Sep 2024 16:25:51 -0400
Subject: [PATCH 04/26] feat: rewrite of radio-button with native element

---
 .../components/es-radio-button-group-new.vue  | 61 ++++++++++++
 .../components/es-radio-button-new.vue        | 57 ++++++++++++
 .../components/es-radio-button.vue            | 12 +--
 .../pages/molecules/radio-button-new.vue      | 93 +++++++++++++++++++
 es-ds-styles/scss/_custom-forms.scss          |  8 +-
 5 files changed, 220 insertions(+), 11 deletions(-)
 create mode 100644 es-ds-components/components/es-radio-button-group-new.vue
 create mode 100644 es-ds-components/components/es-radio-button-new.vue
 create mode 100644 es-ds-docs/pages/molecules/radio-button-new.vue

diff --git a/es-ds-components/components/es-radio-button-group-new.vue b/es-ds-components/components/es-radio-button-group-new.vue
new file mode 100644
index 000000000..b7b5ff710
--- /dev/null
+++ b/es-ds-components/components/es-radio-button-group-new.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+interface IOptions {
+    id: string;
+    text: string;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    value: any;
+    disabled?: boolean;
+    inline?: boolean;
+}
+
+interface IProps {
+    id: string;
+    label: string;
+    name?: string;
+    options?: IOptions[];
+    inline?: boolean;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    modelValue?: any;
+}
+const props = withDefaults(defineProps<IProps>(), {
+    inline: false,
+    name: '',
+    options: undefined,
+});
+
+defineEmits([
+    'update:model-value',
+])
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any, no-unused-vars
+// function handleModelUpdate(e: any) {
+//     emit('update:model-value', e);
+// }
+
+</script>
+
+<template>
+    <fieldset
+        :id="id"
+        class="form-group">
+        <legend
+            :id="`legend-${id}`"
+            class="font-size-100"
+            tabindex="-1">
+            {{ label }}
+        </legend>
+        <slot :options="options">
+            <es-radio-button-new
+                v-for="option in options"
+                :id="option.id"
+                :key="option.value"
+                :disabled="option?.disabled || false"
+                :name="name"
+                :value="option.value"
+                :model-value="props.modelValue"
+                :inline="option.inline || false"
+                :display-name="option.text"
+                @update:model-value="$emit('update:model-value', option.value)" />
+        </slot>
+    </fieldset>
+</template>
diff --git a/es-ds-components/components/es-radio-button-new.vue b/es-ds-components/components/es-radio-button-new.vue
new file mode 100644
index 000000000..4d58f1824
--- /dev/null
+++ b/es-ds-components/components/es-radio-button-new.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+/* eslint-disable @typescript-eslint/no-explicit-any */
+interface IProps {
+    name: string;
+    value: any;
+    id: string;
+    disabled?: boolean;
+    inline?: boolean;
+    displayName?: string;
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+    disabled: false,
+    inline: false,
+    displayName: '',
+});
+
+// Need to define the implicit emit from v-model, so that it can also get fired
+// from the label clicks
+const emit = defineEmits([
+    'update:modelValue',
+])
+function handleRadioButtonClick() {
+    emit('update:modelValue', props.value);
+}
+
+// The existing API allows "any" value
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const model = defineModel<any>();
+const isChecked = computed(() => props.value === model.value);
+</script>
+
+<template>
+    <div
+        class="custom-control custom-radio"
+        :class="{'custom-control-inline': props.inline }">
+        <input
+            :id="id"
+            v-model="model"
+            :disabled="props.disabled"
+            type="radio"
+            :name="props.name"
+            class="custom-control-input"
+            :value="props.value"
+            :checked="isChecked"
+            @click="handleRadioButtonClick"
+        />
+        <label
+            class="custom-control-label"
+            for="id"
+            @click="handleRadioButtonClick">
+            <slot>
+                {{ displayName }}
+            </slot>
+        </label>
+    </div>
+</template>
diff --git a/es-ds-components/components/es-radio-button.vue b/es-ds-components/components/es-radio-button.vue
index c14e01ec6..ccd86b354 100644
--- a/es-ds-components/components/es-radio-button.vue
+++ b/es-ds-components/components/es-radio-button.vue
@@ -43,12 +43,10 @@ defineEmits([
             @focus="$emit('radio-button:focus', (evt: any) => evt)"
             @blur="$emit('radio-button:blur', (evt: any) => evt)"
             @update:model-value="$emit('radio-button:update', props.value)" />
-        <slot>
-            <label
-                :for="`${props.value}-${props.groupName}`"
-                class="custom-control-label">
-                {{ props.displayName }}
-            </label>
-        </slot>
+        <label
+            :for="`${props.value}-${props.groupName}`"
+            class="custom-control-label">
+            {{ props.displayName }}
+        </label>
     </div>
 </template>
diff --git a/es-ds-docs/pages/molecules/radio-button-new.vue b/es-ds-docs/pages/molecules/radio-button-new.vue
new file mode 100644
index 000000000..22cc6628f
--- /dev/null
+++ b/es-ds-docs/pages/molecules/radio-button-new.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+const selectedFruit = ref('banana');
+const fruits = ref([
+    { name: 'Apple', key: 'apple', id: 'id_apple' },
+    { name: 'Banana', key: 'banana', id: 'id_banana' },
+    { name: 'Cherry', key: 'cherry', id: 'id_cherry' },
+]);
+const test2Options = ref([
+    { text: 'Toggle this custom radio', value: 'first', id: 'idFirst' },
+    { text: 'Or toggle this other custom radio', value: 'second', id: 'idSecond' },
+    { text: 'This one is Disabled', value: 'third', disabled: true, id: 'idThird' },
+    { text: 'This is the 4th radio', value: { fourth: 4 }, id: 'idFourth' },
+]);
+const test2Selected = ref('first');
+</script>
+
+<template>
+    <div>
+        <div class="my-500">
+            <h2>Basic Radio Button</h2>
+            <es-radio-button-new
+                v-for="fruit in fruits"
+                :id="`id_${fruit.key}1`"
+                :key="fruit.key"
+                v-model="selectedFruit"
+                name="basic"
+                :value="fruit.key"
+            >{{ fruit.name }}</es-radio-button-new>
+        </div>
+
+        <div class="my-500">
+            <h2>Inline</h2>
+            <es-radio-button-group-new
+                id="idFruitsInline"
+                label="Please choose your favorite fruit.">
+                <es-radio-button-new
+                    v-for="fruit in fruits"
+                    :id="`id_${fruit.key}2`"
+                    :key="fruit.key"
+                    v-model="selectedFruit"
+                    :display-name="fruit.name"
+                    name="inline"
+                    :value="fruit.key"
+                    inline />
+            </es-radio-button-group-new>
+        </div>
+
+        <div class="my-500">
+            <h2>Stacked</h2>
+            <es-radio-button-group-new
+                id="idFruitsStacked"
+                label="Please choose your favorite fruit.">
+                <es-radio-button-new
+                    v-for="fruit in fruits"
+                    :id="`id_${fruit.key}3`"
+                    :key="fruit.key"
+                    v-model="selectedFruit"
+                    :display-name="fruit.name"
+                    name="stacked"
+                    :value="fruit.key" />
+            </es-radio-button-group-new>
+        </div>
+
+        <div class="my-500">
+            <h2>Disabled</h2>
+            <es-radio-button-group-new
+                id="idFruitsDisabled"
+                label="Please choose your favorite fruit.">
+                <es-radio-button-new
+                    v-for="fruit in fruits"
+                    :id="`id_${fruit.key}4`"
+                    :key="fruit.key"
+                    v-model="selectedFruit"
+                    :display-name="fruit.name"
+                    name="disabled"
+                    :value="fruit.key"
+                    disabled />
+            </es-radio-button-group-new>
+        </div>
+
+        <div class="my-500">
+            <h2>Using options prop</h2>
+            <es-radio-button-group-new
+                id="idRadioGroupUsingOptionsProp"
+                v-model="test2Selected"
+                :options="test2Options"
+                label="Radios using options"
+                name="radioGroupUsingOptionsProp" />
+            <div>selected: {{ test2Selected }}</div>
+        </div>
+
+    </div>
+</template>
diff --git a/es-ds-styles/scss/_custom-forms.scss b/es-ds-styles/scss/_custom-forms.scss
index 8b795a825..72b1a0ac6 100644
--- a/es-ds-styles/scss/_custom-forms.scss
+++ b/es-ds-styles/scss/_custom-forms.scss
@@ -181,21 +181,21 @@
     border-radius: variables.$custom-radio-indicator-border-radius;
   }
 
-  .custom-control-input:has(.custom-radio-input:checked) ~ .custom-control-label {
+  .custom-control-input:checked ~ .custom-control-label {
     &::before {
       background-color: variables.$custom-control-indicator-bg;
     }
     &::after {
-      background-image: functions.escape-svg(variables.$custom-radio-indicator-icon-checked) !important;
+      background-image: functions.escape-svg(variables.$custom-radio-indicator-icon-checked);
     }
   }
 
-  .custom-control-input:has(.custom-radio-input:disabled:checked) ~ .custom-control-label {
+  .custom-control-input:disabled:checked ~ .custom-control-label {
     &::before {
       @include gradients.gradient-bg(variables.$custom-control-indicator-checked-disabled-bg);
     }
     &::after {
-      background-image: functions.escape-svg(variables.$custom-radio-indicator-icon-checked-disabled) !important;
+      background-image: functions.escape-svg(variables.$custom-radio-indicator-icon-checked-disabled);
     }
   }
 }

From 2bb4eb671528dda721ea5e7ecc74f83ada7fb126 Mon Sep 17 00:00:00 2001
From: Tommy <tomjleo@gmail.com>
Date: Tue, 10 Sep 2024 17:17:37 -0400
Subject: [PATCH 05/26] feat: rewrite without prime button

---
 .../components/es-radio-button-group-new.vue  | 61 -----------------
 .../components/es-radio-button-group.vue      | 41 +++++------
 .../components/es-radio-button-new.vue        | 57 ----------------
 .../components/es-radio-button.vue            | 68 ++++++++++---------
 es-ds-docs/pages/molecules/radio-button.vue   | 61 ++++++++---------
 5 files changed, 83 insertions(+), 205 deletions(-)
 delete mode 100644 es-ds-components/components/es-radio-button-group-new.vue
 delete mode 100644 es-ds-components/components/es-radio-button-new.vue

diff --git a/es-ds-components/components/es-radio-button-group-new.vue b/es-ds-components/components/es-radio-button-group-new.vue
deleted file mode 100644
index b7b5ff710..000000000
--- a/es-ds-components/components/es-radio-button-group-new.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<script setup lang="ts">
-interface IOptions {
-    id: string;
-    text: string;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    value: any;
-    disabled?: boolean;
-    inline?: boolean;
-}
-
-interface IProps {
-    id: string;
-    label: string;
-    name?: string;
-    options?: IOptions[];
-    inline?: boolean;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    modelValue?: any;
-}
-const props = withDefaults(defineProps<IProps>(), {
-    inline: false,
-    name: '',
-    options: undefined,
-});
-
-defineEmits([
-    'update:model-value',
-])
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any, no-unused-vars
-// function handleModelUpdate(e: any) {
-//     emit('update:model-value', e);
-// }
-
-</script>
-
-<template>
-    <fieldset
-        :id="id"
-        class="form-group">
-        <legend
-            :id="`legend-${id}`"
-            class="font-size-100"
-            tabindex="-1">
-            {{ label }}
-        </legend>
-        <slot :options="options">
-            <es-radio-button-new
-                v-for="option in options"
-                :id="option.id"
-                :key="option.value"
-                :disabled="option?.disabled || false"
-                :name="name"
-                :value="option.value"
-                :model-value="props.modelValue"
-                :inline="option.inline || false"
-                :display-name="option.text"
-                @update:model-value="$emit('update:model-value', option.value)" />
-        </slot>
-    </fieldset>
-</template>
diff --git a/es-ds-components/components/es-radio-button-group.vue b/es-ds-components/components/es-radio-button-group.vue
index 80ce3aa85..d9f37753e 100644
--- a/es-ds-components/components/es-radio-button-group.vue
+++ b/es-ds-components/components/es-radio-button-group.vue
@@ -1,18 +1,11 @@
 <script setup lang="ts">
-/*
-Similar API to https://bootstrap-vue.org/docs/components/form-radio#component-reference
-
-Only more restrained, and based on historical usage. Things like configurable
-value field aren't supported as they weren't used downstream.
-
-Similarly things like size are not implemented
-*/
-
 interface IOptions {
+    id: string;
     text: string;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     value: any;
     disabled?: boolean;
+    inline?: boolean;
 }
 
 interface IProps {
@@ -21,16 +14,19 @@ interface IProps {
     name?: string;
     options?: IOptions[];
     inline?: boolean;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    modelValue?: any;
 }
-
-withDefaults(defineProps<IProps>(), {
+const props = withDefaults(defineProps<IProps>(), {
     inline: false,
     name: '',
     options: undefined,
+    modelValue: undefined,
 });
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const model = defineModel<any>();
+defineEmits([
+    'update:model-value',
+])
 </script>
 
 <template>
@@ -43,19 +39,18 @@ const model = defineModel<any>();
             tabindex="-1">
             {{ label }}
         </legend>
-        <template v-if="$slots.default">
-            <slot />
-        </template>
-        <template v-else>
+        <slot :options="options">
             <es-radio-button
                 v-for="option in options"
+                :id="option.id"
                 :key="option.value"
-                v-model="model"
                 :disabled="option?.disabled || false"
-                :display-name="option?.text"
-                :group-name="name"
-                :inline="inline"
-                :value="option.value" />
-        </template>
+                :name="name"
+                :value="option.value"
+                :model-value="props.modelValue"
+                :inline="option.inline || false"
+                :display-name="option.text"
+                @update:model-value="$emit('update:model-value', option.value)" />
+        </slot>
     </fieldset>
 </template>
diff --git a/es-ds-components/components/es-radio-button-new.vue b/es-ds-components/components/es-radio-button-new.vue
deleted file mode 100644
index 4d58f1824..000000000
--- a/es-ds-components/components/es-radio-button-new.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<script setup lang="ts">
-/* eslint-disable @typescript-eslint/no-explicit-any */
-interface IProps {
-    name: string;
-    value: any;
-    id: string;
-    disabled?: boolean;
-    inline?: boolean;
-    displayName?: string;
-}
-
-const props = withDefaults(defineProps<IProps>(), {
-    disabled: false,
-    inline: false,
-    displayName: '',
-});
-
-// Need to define the implicit emit from v-model, so that it can also get fired
-// from the label clicks
-const emit = defineEmits([
-    'update:modelValue',
-])
-function handleRadioButtonClick() {
-    emit('update:modelValue', props.value);
-}
-
-// The existing API allows "any" value
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const model = defineModel<any>();
-const isChecked = computed(() => props.value === model.value);
-</script>
-
-<template>
-    <div
-        class="custom-control custom-radio"
-        :class="{'custom-control-inline': props.inline }">
-        <input
-            :id="id"
-            v-model="model"
-            :disabled="props.disabled"
-            type="radio"
-            :name="props.name"
-            class="custom-control-input"
-            :value="props.value"
-            :checked="isChecked"
-            @click="handleRadioButtonClick"
-        />
-        <label
-            class="custom-control-label"
-            for="id"
-            @click="handleRadioButtonClick">
-            <slot>
-                {{ displayName }}
-            </slot>
-        </label>
-    </div>
-</template>
diff --git a/es-ds-components/components/es-radio-button.vue b/es-ds-components/components/es-radio-button.vue
index ccd86b354..d60d86345 100644
--- a/es-ds-components/components/es-radio-button.vue
+++ b/es-ds-components/components/es-radio-button.vue
@@ -1,52 +1,58 @@
 <script setup lang="ts">
-import RadioButton from 'primevue/radiobutton';
-
+/* eslint-disable @typescript-eslint/no-explicit-any */
 interface IProps {
+    name: string;
+    value: any;
+    id: string;
     disabled?: boolean;
-    displayName: string;
-    groupName?: string;
     inline?: boolean;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    value: any;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    modelValue: any;
+    displayName?: string;
 }
 
 const props = withDefaults(defineProps<IProps>(), {
     disabled: false,
-    displayName: '',
-    groupName: '',
     inline: false,
-    value: null,
+    displayName: '',
 });
 
-defineEmits([
-    'radio-button:change',
-    'radio-button:focus',
-    'radio-button:blur',
-    'radio-button:update',
+// Need to define the implicit emit from v-model, so that it can also get fired
+// from the label clicks
+const emit = defineEmits([
+    'update:modelValue',
 ])
+function handleRadioButtonClick() {
+    if (!props.disabled) {
+        emit('update:modelValue', props.value);
+    }
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const model = defineModel<any>();
+const isChecked = computed(() => props.value === model.value);
 </script>
 
 <template>
-    <div :class="`custom-control custom-radio custom-control${inline ? '-inline' : ''}`">
-        <radio-button
+    <div
+        class="custom-control custom-radio"
+        :class="{'custom-control-inline': props.inline }">
+        <input
+            :id="id"
+            v-model="model"
+            :disabled="props.disabled"
+            type="radio"
+            :name="props.name"
             class="custom-control-input"
-            input-class="custom-radio-input"
-            v-bind="$attrs"
-            :disabled="disabled"
-            :input-id="`${props.value}-${props.groupName}`"
-            :name="props.groupName"
-            :model-value="modelValue"
             :value="props.value"
-            @change="$emit('radio-button:change', (evt: any) => evt)"
-            @focus="$emit('radio-button:focus', (evt: any) => evt)"
-            @blur="$emit('radio-button:blur', (evt: any) => evt)"
-            @update:model-value="$emit('radio-button:update', props.value)" />
+            :checked="isChecked"
+            @click="handleRadioButtonClick"
+        />
         <label
-            :for="`${props.value}-${props.groupName}`"
-            class="custom-control-label">
-            {{ props.displayName }}
+            class="custom-control-label"
+            :for="id"
+            @click="handleRadioButtonClick">
+            <slot>
+                {{ displayName }}
+            </slot>
         </label>
     </div>
 </template>
diff --git a/es-ds-docs/pages/molecules/radio-button.vue b/es-ds-docs/pages/molecules/radio-button.vue
index fe3c41b45..9275c127d 100644
--- a/es-ds-docs/pages/molecules/radio-button.vue
+++ b/es-ds-docs/pages/molecules/radio-button.vue
@@ -1,41 +1,34 @@
 <script setup lang="ts">
-import { ref } from 'vue';
-
 const selectedFruit = ref('banana');
 const fruits = ref([
-    { name: 'Apple', key: 'apple' },
-    { name: 'Banana', key: 'banana' },
-    { name: 'Cherry', key: 'cherry' },
+    { name: 'Apple', key: 'apple', id: 'id_apple' },
+    { name: 'Banana', key: 'banana', id: 'id_banana' },
+    { name: 'Cherry', key: 'cherry', id: 'id_cherry' },
+]);
+const test2Options = ref([
+    { text: 'Toggle this custom radio', value: 'first', id: 'idFirst' },
+    { text: 'Or toggle this other custom radio', value: 'second', id: 'idSecond' },
+    { text: 'This one is Disabled', value: 'third', disabled: true, id: 'idThird' },
+    { text: 'This is the 4th radio', value: { fourth: 4 }, id: 'idFourth' },
 ]);
-const test2Options = [
-    { text: 'Toggle this custom radio', value: 'first' },
-    { text: 'Or toggle this other custom radio', value: 'second' },
-    { text: 'This one is Disabled', value: 'third', disabled: true },
-    { text: 'This is the 4th radio', value: { fourth: 4 } },
-];
 const test2Selected = ref('first');
 
 // Name, Type, Default, Description
 const radioButtonPropTableRows = [
+    ['name',  'String', 'n/a', 'Required. Name of radio group'],
+    ['value', 'Any',    'n/a', 'Required. Value of radio button'],
+    ['id', 'String', 'n/a', 'Required.'],
     ['disabled', 'Boolean', 'false', 'When present, it specifies that the radio button should be disabled.'],
     ['inline', 'Boolean', 'false', 'When present, it specifies that the radio buttons should be displayed inline.'],
-    ['v-model', 'Any', 'n/a', 'Required. The v-model directive binds the radio button to a data property.'],
-    ['display-name', 'String', 'n/a', 'Required. The text to display next to the radio button.'],
-    ['value', 'Any', 'n/a', 'Required. The value to be used by v-model.'],
-    [
-        'group-name',
-        'String',
-        "''",
-        'Descriptive name of the radio button group. Optional but should be used if multiple groups ' +
-            'use the same v-model.',
-    ],
+    ['displayName', 'String', '', 'Required, if not using the default slot. The text to display next to the radio button.'],
+    ['v-model', 'Any', 'n/a', 'Optional. The v-model directive binds the radio button to a data property.'],
 ];
 
 // Name, Type, Default, Description
 const radioButtonGroupPropTableRows = [
     ['id', 'String', 'n/a', 'Required.'],
     ['label', 'String', 'n/a', 'Required. Corresponds to the legend value describing the group'],
-    ['name', 'String', `''`, 'Optional. Maps to the group name for each radio input'],
+    ['name', 'String', `''`, 'Required, if using the default slot. Maps to the name for each radio input'],
     [
         'options',
         'Array',
@@ -80,14 +73,15 @@ if ($prism) {
         <div class="my-500">
             <h2>Inline</h2>
             <es-radio-button-group
-                id="idFruits"
+                id="idFruitsInline"
                 label="Please choose your favorite fruit.">
                 <es-radio-button
                     v-for="fruit in fruits"
+                    :id="`id_${fruit.key}2`"
                     :key="fruit.key"
                     v-model="selectedFruit"
                     :display-name="fruit.name"
-                    group-name="inline"
+                    name="inline"
                     :value="fruit.key"
                     inline />
             </es-radio-button-group>
@@ -96,29 +90,31 @@ if ($prism) {
         <div class="my-500">
             <h2>Stacked</h2>
             <es-radio-button-group
-                id="idFruits2"
+                id="idFruitsStacked"
                 label="Please choose your favorite fruit.">
                 <es-radio-button
                     v-for="fruit in fruits"
+                    :id="`id_${fruit.key}3`"
                     :key="fruit.key"
                     v-model="selectedFruit"
                     :display-name="fruit.name"
-                    group-name="stacked"
+                    name="stacked"
                     :value="fruit.key" />
             </es-radio-button-group>
         </div>
 
-        <div class="my-500">
+         <div class="my-500">
             <h2>Disabled</h2>
             <es-radio-button-group
-                id="idFruits3"
+                id="idFruitsDisabled"
                 label="Please choose your favorite fruit.">
                 <es-radio-button
                     v-for="fruit in fruits"
+                    :id="`id_${fruit.key}4`"
                     :key="fruit.key"
                     v-model="selectedFruit"
                     :display-name="fruit.name"
-                    group-name="disabled"
+                    name="disabled"
                     :value="fruit.key"
                     disabled />
             </es-radio-button-group>
@@ -127,12 +123,11 @@ if ($prism) {
         <div class="my-500">
             <h2>Using options prop</h2>
             <es-radio-button-group
-                id="test2RadioGroup"
+                id="idRadioGroupUsingOptionsProp"
                 v-model="test2Selected"
-                label="Radios using options"
                 :options="test2Options"
-                name="test2" />
-
+                label="Radios using options"
+                name="radioGroupUsingOptionsProp" />
             <div>selected: {{ test2Selected }}</div>
         </div>
 

From 636c48c5a536eb74b9377433f32d1ecd3855983a Mon Sep 17 00:00:00 2001
From: Tommy <tomjleo@gmail.com>
Date: Wed, 11 Sep 2024 09:17:14 -0400
Subject: [PATCH 06/26] feat: begin wiring up radio-cards

---
 .../components/es-form-radio-card.vue         | 81 ++++++++-----------
 .../components/es-form-radio-cards.vue        | 75 +++++++++++++----
 .../components/es-radio-button-group.vue      |  6 +-
 es-ds-docs/pages/molecules/radio-cards.vue    | 28 +++----
 4 files changed, 108 insertions(+), 82 deletions(-)

diff --git a/es-ds-components/components/es-form-radio-card.vue b/es-ds-components/components/es-form-radio-card.vue
index 54bd459f4..7daef3e5c 100644
--- a/es-ds-components/components/es-form-radio-card.vue
+++ b/es-ds-components/components/es-form-radio-card.vue
@@ -1,69 +1,54 @@
 <script setup lang="ts">
+/* eslint-disable @typescript-eslint/no-explicit-any */
 interface IProps {
+    id: string;
+    name: string;
+    value: any;
     disabled?: boolean;
-    displayName: string; // TODO: make this optional if user opts for slot?
-    groupName?: string;
     inline?: boolean;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    value: any;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    modelValue: any;
+    displayName?: string;
 }
 
 const props = withDefaults(defineProps<IProps>(), {
     disabled: false,
-    displayName: '',
-    groupName: '',
     inline: false,
-    value: null,
+    displayName: '',
 });
 
+// Need to define the implicit emit from v-model, so that it can also get fired
+// from the label clicks
 const emit = defineEmits([
-    'radio-card:change',
-    'radio-card:blur',
-    'radio-card:focus',
-    'radio-card:update',
+    'update:modelValue',
 ])
 
-
-
-function handleClick() {
-    if (props.value !== props.modelValue) {
-        emit('radio-card:update', props.value);
+function handleRadioButtonClick() {
+    if (!props.disabled) {
+        emit('update:modelValue', props.value);
     }
 }
-
-const isSelected = computed(() => props.modelValue === props.value)
-
-const isFocused = ref(false);
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-function handleFocus(e: any) {
-    console.log('form-radio-card:handleFocus ', e);
-    // eslint-disable-next-line no-debugger
-    // debugger;
-    emit('radio-card:focus', e);
-    if (isSelected.value) {
-        isFocused.value = true;
-    } else {
-        isFocused.value = false;
-    }
-}
+const model = defineModel<any>();
+const isChecked = computed(() => props.value === model.value);
 </script>
 
 <template>
-    <es-radio-button
-        class="es-form-radio-card es-card interactive w-100"
-        :class="{ 'active': isSelected, 'focus': isFocused }"
-        :disabled="props.disabled"
-        :display-name="props.displayName"
-        :group-name="props.groupName"
-        :inline="props.inline"
-        :value="props.value"
-        :model-value="props.modelValue"
-        @radio-button:change="$emit('radio-card:change', (evt: any) => evt)"
-        @radio-button:blur="$emit('radio-card:blur', (evt: any) => evt)"
-        @radio-button:focus="handleFocus"
-        @radio-button:update="$emit('radio-card:update', props.value)"
-        @click="handleClick"
-    />
+    <label
+        class="es-form-radio-card es-card interactive w-100 btn btn-outline-primary"
+        :class="{ 'active': isChecked }"
+        @click="handleRadioButtonClick"
+    >
+        <input
+            :id="id"
+            v-model="model"
+            :disabled="props.disabled"
+            type="radio"
+            name="props.name"
+            :value="props.value"
+            :checked="isChecked"
+            @click="handleRadioButtonClick"
+        />
+        <slot>
+            {{ displayName }}
+        </slot>
+    </label>
 </template>
diff --git a/es-ds-components/components/es-form-radio-cards.vue b/es-ds-components/components/es-form-radio-cards.vue
index d6f238c98..72b1350f4 100644
--- a/es-ds-components/components/es-form-radio-cards.vue
+++ b/es-ds-components/components/es-form-radio-cards.vue
@@ -1,36 +1,81 @@
 <script setup lang="ts">
+interface IOptions {
+    id: string;
+    text: string;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    value: any;
+    disabled?: boolean;
+    inline?: boolean;
+}
+
 interface IProps {
+    id: string;
+    label: string;
+    name?: string;
+    options?: IOptions[];
+    inline?: boolean;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    modelValue?: any;
+
+    // TODO
     hasIcon?: boolean;
     labelClass?: string,
     labelSrOnly?: boolean,
-
-    // Radio Button Group Props
-    id: string,
-    label: string,
 }
 const props = withDefaults(defineProps<IProps>(), {
+    name: '',
+    options: undefined,
+    inline: false,
+    modelValue: undefined,
     hasIcon: false,
     labelClass: 'font-size-h1 font-weight-bolder mb-200 pb-0 text-dark',
     labelSrOnly: false,
-    // value: '',
 });
 
-const slots = useSlots()
-console.log(slots);
-const attrs = useAttrs()
-console.log(attrs);
+const emit = defineEmits([
+    'update:model-value',
+])
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const model = defineModel<any>();
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function handleUpdate(value: any) {
+    console.log("radio-cards got value: ", value);
+    emit('update:model-value', value);
+}
+// @update:model-value="$emit('update:model-value', option.value)"
 </script>
 
 <template>
     <es-radio-button-group
-        :id="id"
-        v-model="model"
-        :label="label"
+        :id="props.id"
+        :label="props.label"
+        :name="props.name"
+        :options="props.options"
+        :inline="props.inline"
+        :model-value="props.modelValue"
         class="es-form-radio-cards d-flex justify-content-center"
         :class="{ 'has-icon': props.hasIcon }">
-        <slot />
+        <template #default>
+            <slot :options="props.options">
+                <es-form-radio-card
+                    v-for="option in options"
+                    :id="option.id"
+                    :key="option.value"
+                    :disabled="option?.disabled || false"
+                    :name="props.name"
+                    :value="option.value"
+                    :model-value="props.modelValue"
+                    :inline="props.inline || false"
+                    @update:model-value="handleUpdate">
+                    <span
+                        :class="{
+                            [props.labelClass]: props.labelClass,
+                            'sr-only': props.labelSrOnly,
+                        }"
+                    >
+                        {{ option.text }}
+                    </span>
+                </es-form-radio-card>
+            </slot>
+        </template>
     </es-radio-button-group>
 </template>
diff --git a/es-ds-components/components/es-radio-button-group.vue b/es-ds-components/components/es-radio-button-group.vue
index d9f37753e..810e61a67 100644
--- a/es-ds-components/components/es-radio-button-group.vue
+++ b/es-ds-components/components/es-radio-button-group.vue
@@ -5,7 +5,7 @@ interface IOptions {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     value: any;
     disabled?: boolean;
-    inline?: boolean;
+    // inline?: boolean;
 }
 
 interface IProps {
@@ -45,10 +45,10 @@ defineEmits([
                 :id="option.id"
                 :key="option.value"
                 :disabled="option?.disabled || false"
-                :name="name"
+                :name="props.name"
                 :value="option.value"
                 :model-value="props.modelValue"
-                :inline="option.inline || false"
+                :inline="props.inline || false"
                 :display-name="option.text"
                 @update:model-value="$emit('update:model-value', option.value)" />
         </slot>
diff --git a/es-ds-docs/pages/molecules/radio-cards.vue b/es-ds-docs/pages/molecules/radio-cards.vue
index d48839837..aaf7c7ae8 100644
--- a/es-ds-docs/pages/molecules/radio-cards.vue
+++ b/es-ds-docs/pages/molecules/radio-cards.vue
@@ -1,10 +1,5 @@
 
 <script setup lang="ts">
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function handleSubmit(e: any) {
-    console.log(e);
-}
-
 const form = ref({
     installTimeline: '',
     propertyType: '',
@@ -17,6 +12,10 @@ const propertyTypeOptions = [
     { label: 'Nonprofit', value: 'nonprofit' },
 ];
 
+function handleSubmit() {
+    console.log('handleSubmit');
+}
+
 </script>
 
 <template>
@@ -35,11 +34,11 @@ const propertyTypeOptions = [
             Radio Card
         </h2>
         <es-form-radio-card
-            display-name="test1"
-            :model-value="form.propertyType"
+            id="idRadioCard1"
+            v-model="form.propertyType"
+            name="radioCard1"
             :value="propertyTypeOptions[0].value"
-            @radio-card:update="(val) => form.propertyType = val"
-        />
+        >{{ propertyTypeOptions[0].label }}</es-form-radio-card>
 
         <h2>
             Default
@@ -52,19 +51,16 @@ const propertyTypeOptions = [
             <form @submit="handleSubmit">
                 <es-form-radio-cards
                     id="idRadioCards1"
-                    v-model="form.propertyType"
+                    name="radioCards1"
                     label="What type of property do you want quotes for?">
                     <es-form-radio-card
                         v-for="option in propertyTypeOptions"
                         :id="`id${option.value}`"
                         :key="option.value"
-                        :display-name="option.label"
-                        group-name="radioCards1"
-                        :model-value="form.propertyType"
+                        v-model="form.propertyType"
+                        name="radioCards1"
                         :value="option.value"
-                        @radio-card:update="(val) => form.propertyType = val">
-                        {{ option.label }}
-                    </es-form-radio-card>
+                        :display-name="option.label" />
                 </es-form-radio-cards>
             </form>
             <p class="mb-0">

From 90f46ae7a9c9fa2d7a13e4cfc4a2bd9d6dbdc812 Mon Sep 17 00:00:00 2001
From: Tommy <tomjleo@gmail.com>
Date: Wed, 11 Sep 2024 13:33:03 -0400
Subject: [PATCH 07/26] feat: rewrite radio cards

---
 .../components/es-form-radio-cards.vue        | 74 ++++++++++---------
 .../components/es-radio-button-group.vue      |  4 +-
 2 files changed, 43 insertions(+), 35 deletions(-)

diff --git a/es-ds-components/components/es-form-radio-cards.vue b/es-ds-components/components/es-form-radio-cards.vue
index 72b1350f4..b5e4f262c 100644
--- a/es-ds-components/components/es-form-radio-cards.vue
+++ b/es-ds-components/components/es-form-radio-cards.vue
@@ -45,37 +45,45 @@ function handleUpdate(value: any) {
 </script>
 
 <template>
-    <es-radio-button-group
-        :id="props.id"
-        :label="props.label"
-        :name="props.name"
-        :options="props.options"
-        :inline="props.inline"
-        :model-value="props.modelValue"
-        class="es-form-radio-cards d-flex justify-content-center"
-        :class="{ 'has-icon': props.hasIcon }">
-        <template #default>
-            <slot :options="props.options">
-                <es-form-radio-card
-                    v-for="option in options"
-                    :id="option.id"
-                    :key="option.value"
-                    :disabled="option?.disabled || false"
-                    :name="props.name"
-                    :value="option.value"
-                    :model-value="props.modelValue"
-                    :inline="props.inline || false"
-                    @update:model-value="handleUpdate">
-                    <span
-                        :class="{
-                            [props.labelClass]: props.labelClass,
-                            'sr-only': props.labelSrOnly,
-                        }"
-                    >
-                        {{ option.text }}
-                    </span>
-                </es-form-radio-card>
-            </slot>
-        </template>
-    </es-radio-button-group>
+    <fieldset
+        :id="`${props.id}-fieldset`"
+        class="form-group">
+        <legend
+            :id="`${props.id}-legend`"
+            class="font-size-h1 font-weight-bolder mb-200 pb-0 text-dark"
+            tabindex="-1">
+            <!-- How are these classes getting added?: bv-no-focus-ring col-form-label pt-0 -->
+            {{ props.label }}
+        </legend>
+        <div>
+            <div
+                :id="`${props.id}-radiogroup`"
+                role="radiogroup"
+                tabindex="-1"
+                class="es-form-radio-cards d-flex justify-content-center ">
+                <!-- How are these classes getting added?: btn-group-toggle btn-group-vertical bv-no-focus-ring -->
+                <slot :options="options">
+                    <es-form-radio-card
+                        v-for="option in options"
+                        :id="option.id"
+                        :key="option.value"
+                        :disabled="option?.disabled || false"
+                        :name="props.name"
+                        :value="option.value"
+                        :model-value="props.modelValue"
+                        :inline="props.inline || false"
+                        @update:model-value="handleUpdate">
+                        <span
+                            :class="{
+                                [props.labelClass]: props.labelClass,
+                                'sr-only': props.labelSrOnly,
+                            }"
+                        >
+                            {{ option.text }}
+                        </span>
+                    </es-form-radio-card>
+                </slot>
+            </div>
+        </div>
+    </fieldset>
 </template>
diff --git a/es-ds-components/components/es-radio-button-group.vue b/es-ds-components/components/es-radio-button-group.vue
index 810e61a67..f8e275e5a 100644
--- a/es-ds-components/components/es-radio-button-group.vue
+++ b/es-ds-components/components/es-radio-button-group.vue
@@ -34,10 +34,10 @@ defineEmits([
         :id="id"
         class="form-group">
         <legend
-            :id="`legend-${id}`"
+            :id="`${props.id}-legend`"
             class="font-size-100"
             tabindex="-1">
-            {{ label }}
+            {{ props.label }}
         </legend>
         <slot :options="options">
             <es-radio-button

From 316a8e3d55d14621847d08a3644db537c2fa79cc Mon Sep 17 00:00:00 2001
From: Tommy <tomjleo@gmail.com>
Date: Wed, 11 Sep 2024 17:01:26 -0400
Subject: [PATCH 08/26] feat: fleshing out radio card docs

---
 .../components/es-form-radio-cards.vue        |  4 +-
 es-ds-docs/pages/molecules/radio-cards.vue    | 76 +++++++++++++++++++
 2 files changed, 79 insertions(+), 1 deletion(-)

diff --git a/es-ds-components/components/es-form-radio-cards.vue b/es-ds-components/components/es-form-radio-cards.vue
index b5e4f262c..89ed34895 100644
--- a/es-ds-components/components/es-form-radio-cards.vue
+++ b/es-ds-components/components/es-form-radio-cards.vue
@@ -60,7 +60,9 @@ function handleUpdate(value: any) {
                 :id="`${props.id}-radiogroup`"
                 role="radiogroup"
                 tabindex="-1"
-                class="es-form-radio-cards d-flex justify-content-center ">
+                class="es-form-radio-cards d-flex justify-content-center"
+                :class="{ 'has-icon': props.hasIcon }"
+            >
                 <!-- How are these classes getting added?: btn-group-toggle btn-group-vertical bv-no-focus-ring -->
                 <slot :options="options">
                     <es-form-radio-card
diff --git a/es-ds-docs/pages/molecules/radio-cards.vue b/es-ds-docs/pages/molecules/radio-cards.vue
index aaf7c7ae8..2db9ad67b 100644
--- a/es-ds-docs/pages/molecules/radio-cards.vue
+++ b/es-ds-docs/pages/molecules/radio-cards.vue
@@ -12,6 +12,31 @@ const propertyTypeOptions = [
     { label: 'Nonprofit', value: 'nonprofit' },
 ];
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const storageReasonOptions: { [key:string]: any }[] = [
+    {
+        title: 'Back up power',
+        description: 'Run appliances during a power outage',
+        icon: 'IconSettingsVertical',
+        component: resolveComponent('icon-settings-vertical'),
+        value: 'Back up power',
+    },
+    {
+        title: 'Maximize savings',
+        description: 'Avoid paying for energy during peak hours',
+        icon: 'IconShoppingBag',
+        component: resolveComponent('icon-shopping-bag'),
+        value: 'Maximize savings',
+    },
+    {
+        title: 'Self supply',
+        description: 'Limit how much energy you pull from the grid',
+        icon: 'IconPersonCheck',
+        component: resolveComponent('icon-person-check'),
+        value: 'Self supply',
+    },
+]
+
 function handleSubmit() {
     console.log('handleSubmit');
 }
@@ -69,5 +94,56 @@ function handleSubmit() {
             </p>
         </es-card>
 
+        <h2>
+            Custom card styling
+        </h2>
+        <p>
+            This example demonstrates customizing the content, spacing, and typography of the cards,
+            as well as changing the layout based on the breakpoint.
+        </p>
+        <es-card class="mb-200 mb-lg-500">
+            <form @submit="handleSubmit">
+                <es-form-radio-cards
+                    id="idCustomCardStyling"
+                    label="What’s the main reason you want a battery?"
+                    model-value="form.storageReason"
+                    has-icon>
+                    <b-row>
+                        <b-col
+                            v-for="option in storageReasonOptions"
+                            :key="option.value"
+                            cols="12"
+                            lg="4">
+                            <es-form-radio-card
+                                :id="option.value"
+                                v-model="form.storageReason"
+                                class="align-items-center d-block d-lg-flex flex-column font-size-base font-weight-normal line-height-base pt-lg-200 px-lg-200 text-lg-center"
+                                name="customCardStyling"
+                                :value="option.value">
+                                <component
+                                    :is="option.component"
+                                    class="d-none d-lg-block mb-50"
+                                    height="48px"
+                                    width="48px" />
+                                <span class="font-weight-bolder mb-lg-100">
+                                    {{ option.title }}
+                                </span>
+                                <span class="d-lg-none">
+                                    {{ ' - ' }}
+                                </span>
+                                <span>
+                                    {{ option.description }}
+                                </span>
+                            </es-form-radio-card>
+                        </b-col>
+                    </b-row>
+                </es-form-radio-cards>
+            </form>
+            <p class="mb-0">
+                <span class="font-weight-bold">Selection:</span>
+                {{ form.storageReason || '[none]' }}
+            </p>
+        </es-card>
+
     </div>
 </template>

From cfc529ed940feb9afc9aa7c4752ba23e7c806800 Mon Sep 17 00:00:00 2001
From: Tommy <tomjleo@gmail.com>
Date: Thu, 12 Sep 2024 11:13:15 -0400
Subject: [PATCH 09/26] feat: add detach label example

---
 .../components/es-form-radio-cards.vue        |  2 +-
 es-ds-docs/pages/molecules/radio-cards.vue    | 54 +++++++++++++++++++
 2 files changed, 55 insertions(+), 1 deletion(-)

diff --git a/es-ds-components/components/es-form-radio-cards.vue b/es-ds-components/components/es-form-radio-cards.vue
index 89ed34895..402488908 100644
--- a/es-ds-components/components/es-form-radio-cards.vue
+++ b/es-ds-components/components/es-form-radio-cards.vue
@@ -60,7 +60,7 @@ function handleUpdate(value: any) {
                 :id="`${props.id}-radiogroup`"
                 role="radiogroup"
                 tabindex="-1"
-                class="es-form-radio-cards d-flex justify-content-center"
+                class="es-form-radio-cards d-flex justify-content-center btn-group-vertical"
                 :class="{ 'has-icon': props.hasIcon }"
             >
                 <!-- How are these classes getting added?: btn-group-toggle btn-group-vertical bv-no-focus-ring -->
diff --git a/es-ds-docs/pages/molecules/radio-cards.vue b/es-ds-docs/pages/molecules/radio-cards.vue
index 2db9ad67b..384299a6d 100644
--- a/es-ds-docs/pages/molecules/radio-cards.vue
+++ b/es-ds-docs/pages/molecules/radio-cards.vue
@@ -37,6 +37,14 @@ const storageReasonOptions: { [key:string]: any }[] = [
     },
 ]
 
+const installTimelineLabel = 'What’s your timeline for installing heat pumps?';
+const installTimelineOptions = [
+    { label: 'ASAP', value: 'ASAP' },
+    { label: 'Within the next 2-4 weeks', value: '2-4 weeks' },
+    { label: 'Within the next 2-4 months', value: '2-4 months' },
+    { label: '5+ months', value: '5+ months' },
+];
+
 function handleSubmit() {
     console.log('handleSubmit');
 }
@@ -145,5 +153,51 @@ function handleSubmit() {
             </p>
         </es-card>
 
+        <h2>
+            Detached label
+        </h2>
+        <p>
+            This example demonstrates a case where more control is needed over the position of the field
+            label on the desktop breakpoint, so it is rendered separately of the radio cards component.
+            We do still need to pass the label text into the radio cards component for accessibility
+            purposes, but hide it visually by passing in a prop.
+        </p>
+        <div class="border mb-500 p-100 p-lg-200 rounded">
+            <form @submit="handleSubmit">
+                <b-row>
+                    <b-col
+                        cols="12"
+                        lg="4">
+                        <h1 aria-hidden>
+                            {{ installTimelineLabel }}
+                        </h1>
+                    </b-col>
+                    <b-col
+                        cols="12"
+                        lg="8">
+                        <es-form-radio-cards
+                            id="idDetachedLabel"
+                            :label="installTimelineLabel"
+                            name="detachedLabel"
+                            label-sr-only>
+                            <es-form-radio-card
+                                v-for="option in installTimelineOptions"
+                                :id="option.value"
+                                :key="option.value"
+                                v-model="form.installTimeline"
+                                name="detachedLabel"
+                                :value="option.value">
+                                {{ option.label }}
+                            </es-form-radio-card>
+                        </es-form-radio-cards>
+                    </b-col>
+                </b-row>
+            </form>
+            <p class="mb-0">
+                <span class="font-weight-bold">Selection:</span>
+                {{ form.installTimeline || '[none]' }}
+            </p>
+        </div>
+
     </div>
 </template>

From 5e025002412c7fe626a407a82b23da5606688c92 Mon Sep 17 00:00:00 2001
From: Tommy <tomjleo@gmail.com>
Date: Thu, 12 Sep 2024 13:26:02 -0400
Subject: [PATCH 10/26] feat: add disabled styling

---
 .../components/es-form-radio-card.vue         |   2 +-
 .../components/es-form-radio-cards.vue        |   2 +-
 es-ds-docs/pages/molecules/radio-cards.vue    | 108 ++++++++++++++++--
 .../scss/vue/components/_radio-cards.scss     |  10 ++
 4 files changed, 113 insertions(+), 9 deletions(-)

diff --git a/es-ds-components/components/es-form-radio-card.vue b/es-ds-components/components/es-form-radio-card.vue
index 7daef3e5c..0ab0df824 100644
--- a/es-ds-components/components/es-form-radio-card.vue
+++ b/es-ds-components/components/es-form-radio-card.vue
@@ -34,7 +34,7 @@ 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 }"
+        :class="{ 'active': isChecked, 'disabled': props.disabled }"
         @click="handleRadioButtonClick"
     >
         <input
diff --git a/es-ds-components/components/es-form-radio-cards.vue b/es-ds-components/components/es-form-radio-cards.vue
index 402488908..6388e0025 100644
--- a/es-ds-components/components/es-form-radio-cards.vue
+++ b/es-ds-components/components/es-form-radio-cards.vue
@@ -28,7 +28,7 @@ const props = withDefaults(defineProps<IProps>(), {
     inline: false,
     modelValue: undefined,
     hasIcon: false,
-    labelClass: 'font-size-h1 font-weight-bolder mb-200 pb-0 text-dark',
+    labelClass: 'font-size-h3',
     labelSrOnly: false,
 });
 
diff --git a/es-ds-docs/pages/molecules/radio-cards.vue b/es-ds-docs/pages/molecules/radio-cards.vue
index 384299a6d..8b921ab07 100644
--- a/es-ds-docs/pages/molecules/radio-cards.vue
+++ b/es-ds-docs/pages/molecules/radio-cards.vue
@@ -16,7 +16,7 @@ const propertyTypeOptions = [
 const storageReasonOptions: { [key:string]: any }[] = [
     {
         title: 'Back up power',
-        description: 'Run appliances during a power outage',
+        description: 'Run appliances during a power outage, with backup power',
         icon: 'IconSettingsVertical',
         component: resolveComponent('icon-settings-vertical'),
         value: 'Back up power',
@@ -45,10 +45,58 @@ const installTimelineOptions = [
     { label: '5+ months', value: '5+ months' },
 ];
 
+const test2Options = ref([
+    { text: 'Toggle this custom radio', value: 'first', id: 'idFirst' },
+    { text: 'Or toggle this other custom radio', value: 'second', id: 'idSecond' },
+    { text: 'This one is Disabled', value: 'third', disabled: true, id: 'idThird' },
+    { text: 'This is the 4th radio', value: { fourth: 4 }, id: 'idFourth' },
+]);
+const test2Selected = ref('first');
+
+const { $prism } = useNuxtApp();
+const componentCodeRadioCard = ref('');
+const componentCodeRadioCards = ref('');
+const docCode = ref('');
+if ($prism) {
+    /* eslint-disable import/no-webpack-loader-syntax, import/no-self-import */
+    const componentCodeRadioCardSource = await import('@energysage/es-ds-components/components/es-form-radio-card.vue?raw');
+    const componentCodeRadioCardsSource = await import ('@energysage/es-ds-components/components/es-form-radio-cards.vue?raw');
+    const docSource = await import('./radio-cards.vue?raw');
+    /* eslint-enable import/no-webpack-loader-syntax, import/no-self-import */
+
+    componentCodeRadioCard.value = $prism.normalizeCode(componentCodeRadioCardSource.default);
+    componentCodeRadioCards.value = $prism.normalizeCode(componentCodeRadioCardsSource.default);
+    docCode.value = $prism.normalizeCode(docSource.default);
+    $prism.highlight();
+}
+
 function handleSubmit() {
     console.log('handleSubmit');
 }
 
+// Name, Type, Default, Description
+const propTableRowsRadioCard = [
+    ['id', 'String', 'n/a', 'Required.'],
+    ['name',  'String', 'n/a', 'Required. Name of radio group'],
+    ['value', 'Any',    'n/a', 'Required. Value of radio button'],
+    ['disabled', 'Boolean', 'false', 'Optional. When present, it specifies that the radio button should be disabled.'],
+    ['inline', 'Boolean', 'false', 'Optional. When present, it specifies that the radio buttons should be displayed inline.'],
+    ['displayName', 'String', '', 'Optional. Required, if not using the default slot. The text to display next to the radio button.'],
+    ['v-model', 'Any', 'n/a', 'Required.'],
+];
+
+const propTableRowsRadioCards = [
+    ['id', 'String', 'n/a', 'Required.'],
+    ['label', 'String', 'n/a', 'Required.'],
+    ['name', 'String', `''`, 'Optional.'], // TODO: should this be required?
+    ['options', 'Array', 'undefined', 'Optional. Alternative to creating an es-form-radio-card in the default slot.'],
+    ['inline', 'Boolean', 'false', 'Optional.'], // TODO: example of this?
+    ['modelValue', 'Any', 'undefined', 'Optional. Required, if using the options prop'],
+    ['hasIcon', 'Boolean', 'false', 'Optional. Adds a "has-icon" class to the radiogroup'],
+    ['labelClass', 'String', `''`, 'Optional. Apply class to the input label. Defaults to "font-size-h3"'],
+    ['labelSrOnly', 'Boolean', 'false', 'Optional. Applies an `sr-only` class to the label'],
+]
+
 </script>
 
 <template>
@@ -66,12 +114,14 @@ function handleSubmit() {
         <h2>
             Radio Card
         </h2>
-        <es-form-radio-card
-            id="idRadioCard1"
-            v-model="form.propertyType"
-            name="radioCard1"
-            :value="propertyTypeOptions[0].value"
-        >{{ propertyTypeOptions[0].label }}</es-form-radio-card>
+        <div class="mb-200 mb-lg-500">
+            <es-form-radio-card
+                id="idRadioCard1"
+                v-model="form.propertyType"
+                name="radioCard1"
+                :value="propertyTypeOptions[0].value"
+            >{{ propertyTypeOptions[0].label }}</es-form-radio-card>
+        </div>
 
         <h2>
             Default
@@ -199,5 +249,49 @@ function handleSubmit() {
             </p>
         </div>
 
+        <h2>
+            Passing options
+        </h2>
+        <div class="border mb-500 p-100 p-lg-200 rounded">
+            <form @submit="handleSubmit">
+                <es-form-radio-cards
+                    id="idPassingOptions"
+                    v-model="test2Selected"
+                    label="Passing Options"
+                    name="passingOptions"
+                    :options="test2Options"
+                />
+            </form>
+            <p class="mb-0">
+                <span class="font-weight-bold">Selection:</span>
+                {{ test2Selected || '[none]' }}
+            </p>
+        </div>
+
+        <div class="mb-500">
+            <h2>EsFormRadioCard props</h2>
+            <ds-prop-table :rows="propTableRowsRadioCard" />
+        </div>
+
+        <div class="mb-500">
+            <h2>EsFormRadioCards props</h2>
+            <ds-prop-table :rows="propTableRowsRadioCards" />
+        </div>
+
+        <ds-doc-source
+            comp-title="Radio card component"
+            :comp-code="componentCodeRadioCard"
+            comp-source="es-ds-components/src/lib-components/es-form-radio-card.vue" />
+
+        <ds-doc-source
+            comp-title="Radio cards component"
+            :comp-code="componentCodeRadioCards"
+            comp-source="es-ds-components/src/lib-components/es-form-radio-cards.vue" />
+
+        <ds-doc-source
+            doc-title="Radio card & radio cards documentation"
+            :doc-code="docCode"
+            doc-source="es-ds-docs/pages/molecules/radio-cards.vue" />
+
     </div>
 </template>
diff --git a/es-ds-styles/scss/vue/components/_radio-cards.scss b/es-ds-styles/scss/vue/components/_radio-cards.scss
index c1147a314..47e43dfa3 100644
--- a/es-ds-styles/scss/vue/components/_radio-cards.scss
+++ b/es-ds-styles/scss/vue/components/_radio-cards.scss
@@ -148,6 +148,16 @@ $inner-circle-translate-y-from-top-desktop: $inner-circle-translate-x-from-left-
     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.

From b8d694d0aebbe3493619a335a07db12d1abd8516 Mon Sep 17 00:00:00 2001
From: Tommy <tomjleo@gmail.com>
Date: Thu, 12 Sep 2024 13:53:22 -0400
Subject: [PATCH 11/26] chore: apply formatting

---
 .../components/es-form-radio-card.vue         | 12 +--
 .../components/es-form-radio-cards.vue        | 18 ++--
 .../components/es-radio-button-group.vue      |  4 +-
 .../components/es-radio-button.vue            |  9 +-
 es-ds-docs/components/ds-molecules-list.vue   | 88 +++++--------------
 es-ds-docs/pages/molecules/radio-button.vue   | 17 ++--
 es-ds-docs/pages/molecules/radio-cards.vue    | 87 +++++++++---------
 7 files changed, 88 insertions(+), 147 deletions(-)

diff --git a/es-ds-components/components/es-form-radio-card.vue b/es-ds-components/components/es-form-radio-card.vue
index 0ab0df824..2c0cae733 100644
--- a/es-ds-components/components/es-form-radio-card.vue
+++ b/es-ds-components/components/es-form-radio-card.vue
@@ -17,9 +17,7 @@ const props = withDefaults(defineProps<IProps>(), {
 
 // Need to define the implicit emit from v-model, so that it can also get fired
 // from the label clicks
-const emit = defineEmits([
-    'update:modelValue',
-])
+const emit = defineEmits(['update:modelValue']);
 
 function handleRadioButtonClick() {
     if (!props.disabled) {
@@ -34,9 +32,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 }"
-        @click="handleRadioButtonClick"
-    >
+        :class="{ active: isChecked, disabled: props.disabled }"
+        @click="handleRadioButtonClick">
         <input
             :id="id"
             v-model="model"
@@ -45,8 +42,7 @@ const isChecked = computed(() => props.value === model.value);
             name="props.name"
             :value="props.value"
             :checked="isChecked"
-            @click="handleRadioButtonClick"
-        />
+            @click="handleRadioButtonClick" />
         <slot>
             {{ displayName }}
         </slot>
diff --git a/es-ds-components/components/es-form-radio-cards.vue b/es-ds-components/components/es-form-radio-cards.vue
index 6388e0025..abedbdcb6 100644
--- a/es-ds-components/components/es-form-radio-cards.vue
+++ b/es-ds-components/components/es-form-radio-cards.vue
@@ -16,11 +16,9 @@ interface IProps {
     inline?: boolean;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     modelValue?: any;
-
-    // TODO
     hasIcon?: boolean;
-    labelClass?: string,
-    labelSrOnly?: boolean,
+    labelClass?: string;
+    labelSrOnly?: boolean;
 }
 const props = withDefaults(defineProps<IProps>(), {
     name: '',
@@ -32,16 +30,12 @@ const props = withDefaults(defineProps<IProps>(), {
     labelSrOnly: false,
 });
 
-const emit = defineEmits([
-    'update:model-value',
-])
+const emit = defineEmits(['update:model-value']);
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 function handleUpdate(value: any) {
-    console.log("radio-cards got value: ", value);
     emit('update:model-value', value);
 }
-// @update:model-value="$emit('update:model-value', option.value)"
 </script>
 
 <template>
@@ -61,8 +55,7 @@ function handleUpdate(value: any) {
                 role="radiogroup"
                 tabindex="-1"
                 class="es-form-radio-cards d-flex justify-content-center btn-group-vertical"
-                :class="{ 'has-icon': props.hasIcon }"
-            >
+                :class="{ 'has-icon': props.hasIcon }">
                 <!-- How are these classes getting added?: btn-group-toggle btn-group-vertical bv-no-focus-ring -->
                 <slot :options="options">
                     <es-form-radio-card
@@ -79,8 +72,7 @@ function handleUpdate(value: any) {
                             :class="{
                                 [props.labelClass]: props.labelClass,
                                 'sr-only': props.labelSrOnly,
-                            }"
-                        >
+                            }">
                             {{ option.text }}
                         </span>
                     </es-form-radio-card>
diff --git a/es-ds-components/components/es-radio-button-group.vue b/es-ds-components/components/es-radio-button-group.vue
index f8e275e5a..247a672c4 100644
--- a/es-ds-components/components/es-radio-button-group.vue
+++ b/es-ds-components/components/es-radio-button-group.vue
@@ -24,9 +24,7 @@ const props = withDefaults(defineProps<IProps>(), {
     modelValue: undefined,
 });
 
-defineEmits([
-    'update:model-value',
-])
+defineEmits(['update:model-value']);
 </script>
 
 <template>
diff --git a/es-ds-components/components/es-radio-button.vue b/es-ds-components/components/es-radio-button.vue
index d60d86345..ebac52a23 100644
--- a/es-ds-components/components/es-radio-button.vue
+++ b/es-ds-components/components/es-radio-button.vue
@@ -17,9 +17,7 @@ const props = withDefaults(defineProps<IProps>(), {
 
 // Need to define the implicit emit from v-model, so that it can also get fired
 // from the label clicks
-const emit = defineEmits([
-    'update:modelValue',
-])
+const emit = defineEmits(['update:modelValue']);
 function handleRadioButtonClick() {
     if (!props.disabled) {
         emit('update:modelValue', props.value);
@@ -34,7 +32,7 @@ const isChecked = computed(() => props.value === model.value);
 <template>
     <div
         class="custom-control custom-radio"
-        :class="{'custom-control-inline': props.inline }">
+        :class="{ 'custom-control-inline': props.inline }">
         <input
             :id="id"
             v-model="model"
@@ -44,8 +42,7 @@ const isChecked = computed(() => props.value === model.value);
             class="custom-control-input"
             :value="props.value"
             :checked="isChecked"
-            @click="handleRadioButtonClick"
-        />
+            @click="handleRadioButtonClick" />
         <label
             class="custom-control-label"
             :for="id"
diff --git a/es-ds-docs/components/ds-molecules-list.vue b/es-ds-docs/components/ds-molecules-list.vue
index 9a1db36f4..6166f0895 100644
--- a/es-ds-docs/components/ds-molecules-list.vue
+++ b/es-ds-docs/components/ds-molecules-list.vue
@@ -2,114 +2,70 @@
 <template>
     <ul class="list-unstyled pl-100">
         <li>
-            <ds-link to="/molecules/accordion">
-                Accordion
-            </ds-link>
+            <ds-link to="/molecules/accordion"> Accordion </ds-link>
         </li>
         <li>
-            <ds-link to="/molecules/badge">
-                Badge
-            </ds-link>
+            <ds-link to="/molecules/badge"> Badge </ds-link>
         </li>
         <li>
-            <ds-link to="/molecules/breadcrumbs">
-                Breadcrumbs
-            </ds-link>
+            <ds-link to="/molecules/breadcrumbs"> Breadcrumbs </ds-link>
         </li>
         <li>
-            <ds-link to="/molecules/button">
-                Button
-            </ds-link>
+            <ds-link to="/molecules/button"> Button </ds-link>
         </li>
         <li>
-            <ds-link to="/molecules/card">
-                Card
-            </ds-link>
+            <ds-link to="/molecules/card"> Card </ds-link>
         </li>
         <li>
-            <ds-link to="/molecules/checkbox">
-                Checkbox
-            </ds-link>
+            <ds-link to="/molecules/checkbox"> Checkbox </ds-link>
         </li>
         <li>
-            <ds-link to="/molecules/collapse">
-                Collapse
-            </ds-link>
+            <ds-link to="/molecules/collapse"> Collapse </ds-link>
         </li>
         <li>
-            <ds-link to="/molecules/data-table">
-                Data table
-            </ds-link>
+            <ds-link to="/molecules/data-table"> Data table </ds-link>
         </li>
         <li>
-            <ds-link to="/molecules/data-table-simple">
-                Data table simple
-            </ds-link>
+            <ds-link to="/molecules/data-table-simple"> Data table simple </ds-link>
         </li>
         <li>
-            <ds-link to="/molecules/file-input">
-                File input
-            </ds-link>
+            <ds-link to="/molecules/file-input"> File input </ds-link>
         </li>
         <li>
-            <ds-link to="/molecules/form-message">
-                Form message
-            </ds-link>
+            <ds-link to="/molecules/form-message"> Form message </ds-link>
         </li>
         <li>
-            <ds-link to="/molecules/modal">
-                Modal
-            </ds-link>
+            <ds-link to="/molecules/modal"> Modal </ds-link>
         </li>
         <li>
-            <ds-link to="/molecules/pagination">
-                Pagination
-            </ds-link>
+            <ds-link to="/molecules/pagination"> Pagination </ds-link>
         </li>
         <li>
-            <ds-link to="/molecules/popover">
-                Popover
-            </ds-link>
+            <ds-link to="/molecules/popover"> Popover </ds-link>
         </li>
         <li>
-            <ds-link to="/molecules/progress">
-                Progress
-            </ds-link>
+            <ds-link to="/molecules/progress"> Progress </ds-link>
         </li>
         <li>
-            <ds-link to="/molecules/progress-circle">
-                Progress circle
-            </ds-link>
+            <ds-link to="/molecules/progress-circle"> Progress circle </ds-link>
         </li>
         <li>
-            <ds-link to="/molecules/radio-button">
-                Radio button
-            </ds-link>
+            <ds-link to="/molecules/radio-button"> Radio button </ds-link>
         </li>
         <li>
-            <ds-link to="/molecules/radio-cards">
-                Radio cards
-            </ds-link>
+            <ds-link to="/molecules/radio-cards"> Radio cards </ds-link>
         </li>
         <li>
-            <ds-link to="/molecules/rating">
-                Rating
-            </ds-link>
+            <ds-link to="/molecules/rating"> Rating </ds-link>
         </li>
         <li>
-            <ds-link to="/molecules/support">
-                Support
-            </ds-link>
+            <ds-link to="/molecules/support"> Support </ds-link>
         </li>
         <li>
-            <ds-link to="/molecules/tabs">
-                Tabs
-            </ds-link>
+            <ds-link to="/molecules/tabs"> Tabs </ds-link>
         </li>
         <li>
-            <ds-link to="/molecules/text-input">
-                Text input
-            </ds-link>
+            <ds-link to="/molecules/text-input"> Text input </ds-link>
         </li>
         <li>
             <ds-link to="/molecules/view-more"> View more </ds-link>
diff --git a/es-ds-docs/pages/molecules/radio-button.vue b/es-ds-docs/pages/molecules/radio-button.vue
index 9275c127d..cc61b1704 100644
--- a/es-ds-docs/pages/molecules/radio-button.vue
+++ b/es-ds-docs/pages/molecules/radio-button.vue
@@ -15,12 +15,17 @@ const test2Selected = ref('first');
 
 // Name, Type, Default, Description
 const radioButtonPropTableRows = [
-    ['name',  'String', 'n/a', 'Required. Name of radio group'],
-    ['value', 'Any',    'n/a', 'Required. Value of radio button'],
+    ['name', 'String', 'n/a', 'Required. Name of radio group'],
+    ['value', 'Any', 'n/a', 'Required. Value of radio button'],
     ['id', 'String', 'n/a', 'Required.'],
     ['disabled', 'Boolean', 'false', 'When present, it specifies that the radio button should be disabled.'],
     ['inline', 'Boolean', 'false', 'When present, it specifies that the radio buttons should be displayed inline.'],
-    ['displayName', 'String', '', 'Required, if not using the default slot. The text to display next to the radio button.'],
+    [
+        'displayName',
+        'String',
+        '',
+        'Required, if not using the default slot. The text to display next to the radio button.',
+    ],
     ['v-model', 'Any', 'n/a', 'Optional. The v-model directive binds the radio button to a data property.'],
 ];
 
@@ -43,14 +48,14 @@ const radioButtonComponentCode = ref('');
 const radioButtonGroupComponentCode = ref('');
 const docCode = ref('');
 if ($prism) {
-    /* eslint-disable import/no-webpack-loader-syntax, import/no-self-import */
+    /* eslint-disable import/no-webpack-loader-syntax, import/no-self-import, import/no-unresolved */
     const radioButtonComponentSource = await import('@energysage/es-ds-components/components/es-radio-button.vue?raw');
     // eslint-disable-next-line max-len
     const radioButtonGroupComponentSource = await import(
         '@energysage/es-ds-components/components/es-radio-button-group.vue?raw'
     );
     const docSource = await import('./radio-button.vue?raw');
-    /* eslint-enable import/no-webpack-loader-syntax, import/no-self-import */
+    /* eslint-enable import/no-webpack-loader-syntax, import/no-self-import, import/no-unresolved */
 
     radioButtonComponentCode.value = $prism.normalizeCode(radioButtonComponentSource.default);
     radioButtonGroupComponentCode.value = $prism.normalizeCode(radioButtonGroupComponentSource.default);
@@ -103,7 +108,7 @@ if ($prism) {
             </es-radio-button-group>
         </div>
 
-         <div class="my-500">
+        <div class="my-500">
             <h2>Disabled</h2>
             <es-radio-button-group
                 id="idFruitsDisabled"
diff --git a/es-ds-docs/pages/molecules/radio-cards.vue b/es-ds-docs/pages/molecules/radio-cards.vue
index 8b921ab07..c26c953f5 100644
--- a/es-ds-docs/pages/molecules/radio-cards.vue
+++ b/es-ds-docs/pages/molecules/radio-cards.vue
@@ -1,4 +1,3 @@
-
 <script setup lang="ts">
 const form = ref({
     installTimeline: '',
@@ -13,7 +12,7 @@ const propertyTypeOptions = [
 ];
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const storageReasonOptions: { [key:string]: any }[] = [
+const storageReasonOptions: { [key: string]: any }[] = [
     {
         title: 'Back up power',
         description: 'Run appliances during a power outage, with backup power',
@@ -35,7 +34,7 @@ const storageReasonOptions: { [key:string]: any }[] = [
         component: resolveComponent('icon-person-check'),
         value: 'Self supply',
     },
-]
+];
 
 const installTimelineLabel = 'What’s your timeline for installing heat pumps?';
 const installTimelineOptions = [
@@ -59,8 +58,12 @@ const componentCodeRadioCards = ref('');
 const docCode = ref('');
 if ($prism) {
     /* eslint-disable import/no-webpack-loader-syntax, import/no-self-import */
-    const componentCodeRadioCardSource = await import('@energysage/es-ds-components/components/es-form-radio-card.vue?raw');
-    const componentCodeRadioCardsSource = await import ('@energysage/es-ds-components/components/es-form-radio-cards.vue?raw');
+    const componentCodeRadioCardSource = await import(
+        '@energysage/es-ds-components/components/es-form-radio-card.vue?raw'
+    );
+    const componentCodeRadioCardsSource = await import(
+        '@energysage/es-ds-components/components/es-form-radio-cards.vue?raw'
+    );
     const docSource = await import('./radio-cards.vue?raw');
     /* eslint-enable import/no-webpack-loader-syntax, import/no-self-import */
 
@@ -71,17 +74,28 @@ if ($prism) {
 }
 
 function handleSubmit() {
+    // eslint-disable-next-line no-console
     console.log('handleSubmit');
 }
 
 // Name, Type, Default, Description
 const propTableRowsRadioCard = [
     ['id', 'String', 'n/a', 'Required.'],
-    ['name',  'String', 'n/a', 'Required. Name of radio group'],
-    ['value', 'Any',    'n/a', 'Required. Value of radio button'],
+    ['name', 'String', 'n/a', 'Required. Name of radio group'],
+    ['value', 'Any', 'n/a', 'Required. Value of radio button'],
     ['disabled', 'Boolean', 'false', 'Optional. When present, it specifies that the radio button should be disabled.'],
-    ['inline', 'Boolean', 'false', 'Optional. When present, it specifies that the radio buttons should be displayed inline.'],
-    ['displayName', 'String', '', 'Optional. Required, if not using the default slot. The text to display next to the radio button.'],
+    [
+        'inline',
+        'Boolean',
+        'false',
+        'Optional. When present, it specifies that the radio buttons should be displayed inline.',
+    ],
+    [
+        'displayName',
+        'String',
+        '',
+        'Optional. Required, if not using the default slot. The text to display next to the radio button.',
+    ],
     ['v-model', 'Any', 'n/a', 'Required.'],
 ];
 
@@ -95,40 +109,31 @@ const propTableRowsRadioCards = [
     ['hasIcon', 'Boolean', 'false', 'Optional. Adds a "has-icon" class to the radiogroup'],
     ['labelClass', 'String', `''`, 'Optional. Apply class to the input label. Defaults to "font-size-h3"'],
     ['labelSrOnly', 'Boolean', 'false', 'Optional. Applies an `sr-only` class to the label'],
-]
-
+];
 </script>
 
 <template>
     <div>
-        <h1>
-            Radio cards
-        </h1>
+        <h1>Radio cards</h1>
         <p class="mb-200 mb-lg-500">
-            Extended from <ds-link
-                to="https://v3.primevue.org/radiobutton/">
-                prime-vue form-radio
-            </ds-link>
+            Extended from <ds-link to="https://v3.primevue.org/radiobutton/"> prime-vue form-radio </ds-link>
         </p>
 
-        <h2>
-            Radio Card
-        </h2>
+        <h2>Radio Card</h2>
         <div class="mb-200 mb-lg-500">
             <es-form-radio-card
                 id="idRadioCard1"
                 v-model="form.propertyType"
                 name="radioCard1"
                 :value="propertyTypeOptions[0].value"
-            >{{ propertyTypeOptions[0].label }}</es-form-radio-card>
+                >{{ propertyTypeOptions[0].label }}</es-form-radio-card
+            >
         </div>
 
-        <h2>
-            Default
-        </h2>
+        <h2>Default</h2>
         <p>
-            Responsive font sizing is applied by default. This means the text will be smaller on
-            mobile and larger on desktop.
+            Responsive font sizing is applied by default. This means the text will be smaller on mobile and larger on
+            desktop.
         </p>
         <es-card class="mb-200 mb-lg-500">
             <form @submit="handleSubmit">
@@ -152,12 +157,10 @@ const propTableRowsRadioCards = [
             </p>
         </es-card>
 
-        <h2>
-            Custom card styling
-        </h2>
+        <h2>Custom card styling</h2>
         <p>
-            This example demonstrates customizing the content, spacing, and typography of the cards,
-            as well as changing the layout based on the breakpoint.
+            This example demonstrates customizing the content, spacing, and typography of the cards, as well as
+            changing the layout based on the breakpoint.
         </p>
         <es-card class="mb-200 mb-lg-500">
             <form @submit="handleSubmit">
@@ -203,14 +206,12 @@ const propTableRowsRadioCards = [
             </p>
         </es-card>
 
-        <h2>
-            Detached label
-        </h2>
+        <h2>Detached label</h2>
         <p>
-            This example demonstrates a case where more control is needed over the position of the field
-            label on the desktop breakpoint, so it is rendered separately of the radio cards component.
-            We do still need to pass the label text into the radio cards component for accessibility
-            purposes, but hide it visually by passing in a prop.
+            This example demonstrates a case where more control is needed over the position of the field label on the
+            desktop breakpoint, so it is rendered separately of the radio cards component. We do still need to pass the
+            label text into the radio cards component for accessibility purposes, but hide it visually by passing in a
+            prop.
         </p>
         <div class="border mb-500 p-100 p-lg-200 rounded">
             <form @submit="handleSubmit">
@@ -249,9 +250,7 @@ const propTableRowsRadioCards = [
             </p>
         </div>
 
-        <h2>
-            Passing options
-        </h2>
+        <h2>Passing options</h2>
         <div class="border mb-500 p-100 p-lg-200 rounded">
             <form @submit="handleSubmit">
                 <es-form-radio-cards
@@ -259,8 +258,7 @@ const propTableRowsRadioCards = [
                     v-model="test2Selected"
                     label="Passing Options"
                     name="passingOptions"
-                    :options="test2Options"
-                />
+                    :options="test2Options" />
             </form>
             <p class="mb-0">
                 <span class="font-weight-bold">Selection:</span>
@@ -292,6 +290,5 @@ const propTableRowsRadioCards = [
             doc-title="Radio card & radio cards documentation"
             :doc-code="docCode"
             doc-source="es-ds-docs/pages/molecules/radio-cards.vue" />
-
     </div>
 </template>

From abaceeefb3536f2c27293ce1d80c4a070db2cb3a Mon Sep 17 00:00:00 2001
From: Tommy <tomjleo@gmail.com>
Date: Thu, 12 Sep 2024 13:58:47 -0400
Subject: [PATCH 12/26] chore: apply formatting

---
 es-ds-components/components/es-form-radio-cards.vue | 2 +-
 es-ds-docs/pages/molecules/radio-button-new.vue     | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/es-ds-components/components/es-form-radio-cards.vue b/es-ds-components/components/es-form-radio-cards.vue
index abedbdcb6..79e899d1a 100644
--- a/es-ds-components/components/es-form-radio-cards.vue
+++ b/es-ds-components/components/es-form-radio-cards.vue
@@ -32,7 +32,7 @@ const props = withDefaults(defineProps<IProps>(), {
 
 const emit = defineEmits(['update:model-value']);
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function handleUpdate(value: any) {
     emit('update:model-value', value);
 }
diff --git a/es-ds-docs/pages/molecules/radio-button-new.vue b/es-ds-docs/pages/molecules/radio-button-new.vue
index 22cc6628f..e0c44c316 100644
--- a/es-ds-docs/pages/molecules/radio-button-new.vue
+++ b/es-ds-docs/pages/molecules/radio-button-new.vue
@@ -25,7 +25,8 @@ const test2Selected = ref('first');
                 v-model="selectedFruit"
                 name="basic"
                 :value="fruit.key"
-            >{{ fruit.name }}</es-radio-button-new>
+                >{{ fruit.name }}</es-radio-button-new
+            >
         </div>
 
         <div class="my-500">
@@ -88,6 +89,5 @@ const test2Selected = ref('first');
                 name="radioGroupUsingOptionsProp" />
             <div>selected: {{ test2Selected }}</div>
         </div>
-
     </div>
 </template>

From ae7a6f7d55d364220fcbb21f83c9a0d7c889c23e Mon Sep 17 00:00:00 2001
From: Tommy <tomjleo@gmail.com>
Date: Fri, 13 Sep 2024 16:27:37 -0400
Subject: [PATCH 13/26] chore: tweaks after merge

---
 es-ds-docs/pages/molecules/radio-button.vue | 20 +++++++++++---------
 es-ds-docs/pages/molecules/radio-cards.vue  |  2 +-
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/es-ds-docs/pages/molecules/radio-button.vue b/es-ds-docs/pages/molecules/radio-button.vue
index 4bddc5cee..b984c3a6f 100644
--- a/es-ds-docs/pages/molecules/radio-button.vue
+++ b/es-ds-docs/pages/molecules/radio-button.vue
@@ -47,15 +47,17 @@ const { $prism } = useNuxtApp();
 const radioButtonComponentCode = ref('');
 const radioButtonGroupComponentCode = ref('');
 const docCode = ref('');
-if ($prism) {
-    /* eslint-disable import/no-webpack-loader-syntax, import/no-self-import, import/no-unresolved */
-    const radioButtonComponentSource = await import('@energysage/es-ds-components/components/es-radio-button.vue?raw');
-    // eslint-disable-next-line max-len
-    const radioButtonGroupComponentSource = await import(
-        '@energysage/es-ds-components/components/es-radio-button-group.vue?raw'
-    );
-    const docSource = await import('./radio-button.vue?raw');
-    /* eslint-enable import/no-webpack-loader-syntax, import/no-self-import, import/no-unresolved */
+
+onMounted(async () => {
+    if ($prism) {
+        /* eslint-disable import/no-webpack-loader-syntax, import/no-self-import, import/no-unresolved */
+        const radioButtonComponentSource = await import('@energysage/es-ds-components/components/es-radio-button.vue?raw');
+        // eslint-disable-next-line max-len
+        const radioButtonGroupComponentSource = await import(
+            '@energysage/es-ds-components/components/es-radio-button-group.vue?raw'
+        );
+        const docSource = await import('./radio-button.vue?raw');
+        /* eslint-enable import/no-webpack-loader-syntax, import/no-self-import, import/no-unresolved */
 
         radioButtonComponentCode.value = $prism.normalizeCode(radioButtonComponentSource.default);
         radioButtonGroupComponentCode.value = $prism.normalizeCode(radioButtonGroupComponentSource.default);
diff --git a/es-ds-docs/pages/molecules/radio-cards.vue b/es-ds-docs/pages/molecules/radio-cards.vue
index c26c953f5..fdb5d1941 100644
--- a/es-ds-docs/pages/molecules/radio-cards.vue
+++ b/es-ds-docs/pages/molecules/radio-cards.vue
@@ -93,7 +93,7 @@ const propTableRowsRadioCard = [
     [
         'displayName',
         'String',
-        '',
+        `''`,
         'Optional. Required, if not using the default slot. The text to display next to the radio button.',
     ],
     ['v-model', 'Any', 'n/a', 'Required.'],

From 16436725bcf41bb7474a314438134c67da44c0d7 Mon Sep 17 00:00:00 2001
From: Tommy <tomjleo@gmail.com>
Date: Fri, 13 Sep 2024 16:29:56 -0400
Subject: [PATCH 14/26] chore: formatting

---
 es-ds-docs/pages/molecules/radio-button.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/es-ds-docs/pages/molecules/radio-button.vue b/es-ds-docs/pages/molecules/radio-button.vue
index b984c3a6f..148738543 100644
--- a/es-ds-docs/pages/molecules/radio-button.vue
+++ b/es-ds-docs/pages/molecules/radio-button.vue
@@ -51,7 +51,9 @@ const docCode = ref('');
 onMounted(async () => {
     if ($prism) {
         /* eslint-disable import/no-webpack-loader-syntax, import/no-self-import, import/no-unresolved */
-        const radioButtonComponentSource = await import('@energysage/es-ds-components/components/es-radio-button.vue?raw');
+        const radioButtonComponentSource = await import(
+            '@energysage/es-ds-components/components/es-radio-button.vue?raw'
+        );
         // eslint-disable-next-line max-len
         const radioButtonGroupComponentSource = await import(
             '@energysage/es-ds-components/components/es-radio-button-group.vue?raw'

From f02d866ef296a27d695bf435299cb83cc5593d17 Mon Sep 17 00:00:00 2001
From: Tommy <tomjleo@gmail.com>
Date: Mon, 16 Sep 2024 21:32:55 -0400
Subject: [PATCH 15/26] chore: interface tweak

---
 es-ds-components/components/es-form-radio-cards.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/es-ds-components/components/es-form-radio-cards.vue b/es-ds-components/components/es-form-radio-cards.vue
index 79e899d1a..185e3c367 100644
--- a/es-ds-components/components/es-form-radio-cards.vue
+++ b/es-ds-components/components/es-form-radio-cards.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-interface IOptions {
+interface Option {
     id: string;
     text: string;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -8,11 +8,11 @@ interface IOptions {
     inline?: boolean;
 }
 
-interface IProps {
+interface Props {
     id: string;
     label: string;
     name?: string;
-    options?: IOptions[];
+    options?: Option[];
     inline?: boolean;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     modelValue?: any;
@@ -20,7 +20,7 @@ interface IProps {
     labelClass?: string;
     labelSrOnly?: boolean;
 }
-const props = withDefaults(defineProps<IProps>(), {
+const props = withDefaults(defineProps<Props>(), {
     name: '',
     options: undefined,
     inline: false,

From 6978e8523951fce01b53b633f8353eed135cc0aa Mon Sep 17 00:00:00 2001
From: Tommy <tomjleo@gmail.com>
Date: Mon, 16 Sep 2024 21:40:32 -0400
Subject: [PATCH 16/26] chore: clean-up comments and test files

---
 .../components/es-radio-button-group.vue      |  1 -
 es-ds-docs/components/ds-molecules-list.vue   |  1 -
 .../pages/molecules/radio-button-new.vue      | 93 -------------------
 es-ds-docs/pages/molecules/radio-button.vue   | 13 +--
 es-ds-docs/pages/molecules/radio-cards.vue    | 39 ++++----
 5 files changed, 23 insertions(+), 124 deletions(-)
 delete mode 100644 es-ds-docs/pages/molecules/radio-button-new.vue

diff --git a/es-ds-components/components/es-radio-button-group.vue b/es-ds-components/components/es-radio-button-group.vue
index 247a672c4..e7a0ffb1d 100644
--- a/es-ds-components/components/es-radio-button-group.vue
+++ b/es-ds-components/components/es-radio-button-group.vue
@@ -5,7 +5,6 @@ interface IOptions {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     value: any;
     disabled?: boolean;
-    // inline?: boolean;
 }
 
 interface IProps {
diff --git a/es-ds-docs/components/ds-molecules-list.vue b/es-ds-docs/components/ds-molecules-list.vue
index 749d1af34..3cbaad1d2 100644
--- a/es-ds-docs/components/ds-molecules-list.vue
+++ b/es-ds-docs/components/ds-molecules-list.vue
@@ -1,4 +1,3 @@
-<script setup></script>
 <template>
     <ul class="list-unstyled pl-100">
         <li>
diff --git a/es-ds-docs/pages/molecules/radio-button-new.vue b/es-ds-docs/pages/molecules/radio-button-new.vue
deleted file mode 100644
index e0c44c316..000000000
--- a/es-ds-docs/pages/molecules/radio-button-new.vue
+++ /dev/null
@@ -1,93 +0,0 @@
-<script setup lang="ts">
-const selectedFruit = ref('banana');
-const fruits = ref([
-    { name: 'Apple', key: 'apple', id: 'id_apple' },
-    { name: 'Banana', key: 'banana', id: 'id_banana' },
-    { name: 'Cherry', key: 'cherry', id: 'id_cherry' },
-]);
-const test2Options = ref([
-    { text: 'Toggle this custom radio', value: 'first', id: 'idFirst' },
-    { text: 'Or toggle this other custom radio', value: 'second', id: 'idSecond' },
-    { text: 'This one is Disabled', value: 'third', disabled: true, id: 'idThird' },
-    { text: 'This is the 4th radio', value: { fourth: 4 }, id: 'idFourth' },
-]);
-const test2Selected = ref('first');
-</script>
-
-<template>
-    <div>
-        <div class="my-500">
-            <h2>Basic Radio Button</h2>
-            <es-radio-button-new
-                v-for="fruit in fruits"
-                :id="`id_${fruit.key}1`"
-                :key="fruit.key"
-                v-model="selectedFruit"
-                name="basic"
-                :value="fruit.key"
-                >{{ fruit.name }}</es-radio-button-new
-            >
-        </div>
-
-        <div class="my-500">
-            <h2>Inline</h2>
-            <es-radio-button-group-new
-                id="idFruitsInline"
-                label="Please choose your favorite fruit.">
-                <es-radio-button-new
-                    v-for="fruit in fruits"
-                    :id="`id_${fruit.key}2`"
-                    :key="fruit.key"
-                    v-model="selectedFruit"
-                    :display-name="fruit.name"
-                    name="inline"
-                    :value="fruit.key"
-                    inline />
-            </es-radio-button-group-new>
-        </div>
-
-        <div class="my-500">
-            <h2>Stacked</h2>
-            <es-radio-button-group-new
-                id="idFruitsStacked"
-                label="Please choose your favorite fruit.">
-                <es-radio-button-new
-                    v-for="fruit in fruits"
-                    :id="`id_${fruit.key}3`"
-                    :key="fruit.key"
-                    v-model="selectedFruit"
-                    :display-name="fruit.name"
-                    name="stacked"
-                    :value="fruit.key" />
-            </es-radio-button-group-new>
-        </div>
-
-        <div class="my-500">
-            <h2>Disabled</h2>
-            <es-radio-button-group-new
-                id="idFruitsDisabled"
-                label="Please choose your favorite fruit.">
-                <es-radio-button-new
-                    v-for="fruit in fruits"
-                    :id="`id_${fruit.key}4`"
-                    :key="fruit.key"
-                    v-model="selectedFruit"
-                    :display-name="fruit.name"
-                    name="disabled"
-                    :value="fruit.key"
-                    disabled />
-            </es-radio-button-group-new>
-        </div>
-
-        <div class="my-500">
-            <h2>Using options prop</h2>
-            <es-radio-button-group-new
-                id="idRadioGroupUsingOptionsProp"
-                v-model="test2Selected"
-                :options="test2Options"
-                label="Radios using options"
-                name="radioGroupUsingOptionsProp" />
-            <div>selected: {{ test2Selected }}</div>
-        </div>
-    </div>
-</template>
diff --git a/es-ds-docs/pages/molecules/radio-button.vue b/es-ds-docs/pages/molecules/radio-button.vue
index 148738543..8d39ae52f 100644
--- a/es-ds-docs/pages/molecules/radio-button.vue
+++ b/es-ds-docs/pages/molecules/radio-button.vue
@@ -50,7 +50,7 @@ const docCode = ref('');
 
 onMounted(async () => {
     if ($prism) {
-        /* eslint-disable import/no-webpack-loader-syntax, import/no-self-import, import/no-unresolved */
+        /* eslint-disable import/no-self-import */
         const radioButtonComponentSource = await import(
             '@energysage/es-ds-components/components/es-radio-button.vue?raw'
         );
@@ -59,7 +59,7 @@ onMounted(async () => {
             '@energysage/es-ds-components/components/es-radio-button-group.vue?raw'
         );
         const docSource = await import('./radio-button.vue?raw');
-        /* eslint-enable import/no-webpack-loader-syntax, import/no-self-import, import/no-unresolved */
+        /* eslint-enable import/no-self-import */
 
         radioButtonComponentCode.value = $prism.normalizeCode(radioButtonComponentSource.default);
         radioButtonGroupComponentCode.value = $prism.normalizeCode(radioButtonGroupComponentSource.default);
@@ -71,14 +71,7 @@ onMounted(async () => {
 
 <template>
     <div>
-        <p class="mb-500">
-            Uses
-            <a
-                href="https://v3.primevue.org/radiobutton/"
-                target="_blank">
-                PrimeVue RadioButton
-            </a>
-        </p>
+        <h1>Radio button</h1>
 
         <div class="my-500">
             <h2>Inline</h2>
diff --git a/es-ds-docs/pages/molecules/radio-cards.vue b/es-ds-docs/pages/molecules/radio-cards.vue
index fdb5d1941..9fbd76329 100644
--- a/es-ds-docs/pages/molecules/radio-cards.vue
+++ b/es-ds-docs/pages/molecules/radio-cards.vue
@@ -56,22 +56,25 @@ const { $prism } = useNuxtApp();
 const componentCodeRadioCard = ref('');
 const componentCodeRadioCards = ref('');
 const docCode = ref('');
-if ($prism) {
-    /* eslint-disable import/no-webpack-loader-syntax, import/no-self-import */
-    const componentCodeRadioCardSource = await import(
-        '@energysage/es-ds-components/components/es-form-radio-card.vue?raw'
-    );
-    const componentCodeRadioCardsSource = await import(
-        '@energysage/es-ds-components/components/es-form-radio-cards.vue?raw'
-    );
-    const docSource = await import('./radio-cards.vue?raw');
-    /* eslint-enable import/no-webpack-loader-syntax, import/no-self-import */
 
-    componentCodeRadioCard.value = $prism.normalizeCode(componentCodeRadioCardSource.default);
-    componentCodeRadioCards.value = $prism.normalizeCode(componentCodeRadioCardsSource.default);
-    docCode.value = $prism.normalizeCode(docSource.default);
-    $prism.highlight();
-}
+onMounted(async () => {
+    if ($prism) {
+        /* eslint-disable import/no-self-import */
+        const componentCodeRadioCardSource = await import(
+            '@energysage/es-ds-components/components/es-form-radio-card.vue?raw'
+        );
+        const componentCodeRadioCardsSource = await import(
+            '@energysage/es-ds-components/components/es-form-radio-cards.vue?raw'
+        );
+        const docSource = await import('./radio-cards.vue?raw');
+        /* eslint-enable import/no-self-import */
+
+        componentCodeRadioCard.value = $prism.normalizeCode(componentCodeRadioCardSource.default);
+        componentCodeRadioCards.value = $prism.normalizeCode(componentCodeRadioCardsSource.default);
+        docCode.value = $prism.normalizeCode(docSource.default);
+        $prism.highlight();
+    }
+})
 
 function handleSubmit() {
     // eslint-disable-next-line no-console
@@ -115,11 +118,9 @@ const propTableRowsRadioCards = [
 <template>
     <div>
         <h1>Radio cards</h1>
-        <p class="mb-200 mb-lg-500">
-            Extended from <ds-link to="https://v3.primevue.org/radiobutton/"> prime-vue form-radio </ds-link>
-        </p>
 
-        <h2>Radio Card</h2>
+        <h2>Radio card</h2>
+
         <div class="mb-200 mb-lg-500">
             <es-form-radio-card
                 id="idRadioCard1"

From eab7832f19b55ba8b33e681dfca21dbc4935bc8d Mon Sep 17 00:00:00 2001
From: Tommy <tomjleo@gmail.com>
Date: Mon, 16 Sep 2024 22:07:47 -0400
Subject: [PATCH 17/26] feat: add migration docs

---
 es-ds-docs/pages/molecules/radio-cards.vue | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/es-ds-docs/pages/molecules/radio-cards.vue b/es-ds-docs/pages/molecules/radio-cards.vue
index 9fbd76329..61be309a7 100644
--- a/es-ds-docs/pages/molecules/radio-cards.vue
+++ b/es-ds-docs/pages/molecules/radio-cards.vue
@@ -277,6 +277,27 @@ const propTableRowsRadioCards = [
             <ds-prop-table :rows="propTableRowsRadioCards" />
         </div>
 
+        <h2>
+            Migrating from ESDS 2.0 form radio cards
+        </h2>
+        <p>
+            The previous
+            <a href="https://github.com/EnergySage/es-ds-legacy/blob/main/es-vue-base/src/lib-components/EsFormRadioCard.vue">
+                radio card
+            </a> and <a href="https://github.com/EnergySage/es-ds-legacy/blob/main/es-vue-base/src/lib-components/EsFormRadioCards.vue">radio card group</a> components were based on
+            <a href="https://bootstrap-vue.org/docs/components/form-radio">
+            bootstrap-vue
+            </a>'s implementation.
+        </p>
+        <p>
+            Going forward the <code>v-model</code> should be on the <strong>radio card group</strong>
+            component when passing in the <code>options</code> prop.
+        </p>
+        <p>
+            When using the radio card group's default slot
+            the <code>v-model</code> should be on the <strong>radio card</strong> components within that slot.
+        </p>
+
         <ds-doc-source
             comp-title="Radio card component"
             :comp-code="componentCodeRadioCard"

From bdfd56a799f675f86e9d3184f286954ca737bf32 Mon Sep 17 00:00:00 2001
From: Tommy <tomjleo@gmail.com>
Date: Mon, 16 Sep 2024 22:11:24 -0400
Subject: [PATCH 18/26] chore: re-order props

---
 es-ds-docs/pages/molecules/radio-button.vue | 18 +++++++++---------
 es-ds-docs/pages/molecules/radio-cards.vue  | 18 +++++++++---------
 2 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/es-ds-docs/pages/molecules/radio-button.vue b/es-ds-docs/pages/molecules/radio-button.vue
index 8d39ae52f..94cc77959 100644
--- a/es-ds-docs/pages/molecules/radio-button.vue
+++ b/es-ds-docs/pages/molecules/radio-button.vue
@@ -134,26 +134,26 @@ onMounted(async () => {
             <div>selected: {{ test2Selected }}</div>
         </div>
 
-        <div class="mb-500">
-            <h2>EsRadioButton props</h2>
-            <ds-prop-table :rows="radioButtonPropTableRows" />
-        </div>
-
         <div class="mb-500">
             <h2>EsRadioButtonGroup props</h2>
             <ds-prop-table :rows="radioButtonGroupPropTableRows" />
         </div>
 
-        <ds-doc-source
-            comp-title="Radio button component"
-            :comp-code="radioButtonComponentCode"
-            comp-source="es-ds-components/components/es-radio-button.vue" />
+        <div class="mb-500">
+            <h2>EsRadioButton props</h2>
+            <ds-prop-table :rows="radioButtonPropTableRows" />
+        </div>
 
         <ds-doc-source
             comp-title="Radio button group component"
             :comp-code="radioButtonGroupComponentCode"
             comp-source="es-ds-components/components/es-radio-button-group.vue" />
 
+        <ds-doc-source
+            comp-title="Radio button component"
+            :comp-code="radioButtonComponentCode"
+            comp-source="es-ds-components/components/es-radio-button.vue" />
+
         <ds-doc-source
             doc-title="Radio button & radio button group documentation"
             :doc-code="docCode"
diff --git a/es-ds-docs/pages/molecules/radio-cards.vue b/es-ds-docs/pages/molecules/radio-cards.vue
index 61be309a7..5ac92304c 100644
--- a/es-ds-docs/pages/molecules/radio-cards.vue
+++ b/es-ds-docs/pages/molecules/radio-cards.vue
@@ -268,13 +268,13 @@ const propTableRowsRadioCards = [
         </div>
 
         <div class="mb-500">
-            <h2>EsFormRadioCard props</h2>
-            <ds-prop-table :rows="propTableRowsRadioCard" />
+            <h2>EsFormRadioCards props</h2>
+            <ds-prop-table :rows="propTableRowsRadioCards" />
         </div>
 
         <div class="mb-500">
-            <h2>EsFormRadioCards props</h2>
-            <ds-prop-table :rows="propTableRowsRadioCards" />
+            <h2>EsFormRadioCard props</h2>
+            <ds-prop-table :rows="propTableRowsRadioCard" />
         </div>
 
         <h2>
@@ -298,16 +298,16 @@ const propTableRowsRadioCards = [
             the <code>v-model</code> should be on the <strong>radio card</strong> components within that slot.
         </p>
 
-        <ds-doc-source
-            comp-title="Radio card component"
-            :comp-code="componentCodeRadioCard"
-            comp-source="es-ds-components/src/lib-components/es-form-radio-card.vue" />
-
         <ds-doc-source
             comp-title="Radio cards component"
             :comp-code="componentCodeRadioCards"
             comp-source="es-ds-components/src/lib-components/es-form-radio-cards.vue" />
 
+        <ds-doc-source
+            comp-title="Radio card component"
+            :comp-code="componentCodeRadioCard"
+            comp-source="es-ds-components/src/lib-components/es-form-radio-card.vue" />
+
         <ds-doc-source
             doc-title="Radio card & radio cards documentation"
             :doc-code="docCode"

From 5c207ed5475ed5f87599bd20a4449f3fa6acdb76 Mon Sep 17 00:00:00 2001
From: Tommy <tomjleo@gmail.com>
Date: Mon, 16 Sep 2024 22:21:32 -0400
Subject: [PATCH 19/26] feat: remove unused prop from example

---
 es-ds-docs/pages/molecules/radio-cards.vue | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/es-ds-docs/pages/molecules/radio-cards.vue b/es-ds-docs/pages/molecules/radio-cards.vue
index 5ac92304c..634ca9d58 100644
--- a/es-ds-docs/pages/molecules/radio-cards.vue
+++ b/es-ds-docs/pages/molecules/radio-cards.vue
@@ -105,10 +105,10 @@ const propTableRowsRadioCard = [
 const propTableRowsRadioCards = [
     ['id', 'String', 'n/a', 'Required.'],
     ['label', 'String', 'n/a', 'Required.'],
-    ['name', 'String', `''`, 'Optional.'], // TODO: should this be required?
+    ['name', 'String', `''`, 'Optional.'],
     ['options', 'Array', 'undefined', 'Optional. Alternative to creating an es-form-radio-card in the default slot.'],
-    ['inline', 'Boolean', 'false', 'Optional.'], // TODO: example of this?
-    ['modelValue', 'Any', 'undefined', 'Optional. Required, if using the options prop'],
+    ['inline', 'Boolean', 'false', 'Optional.'],
+    ['v-model', 'Any', 'undefined', 'Optional. Required, only if passing the options prop'],
     ['hasIcon', 'Boolean', 'false', 'Optional. Adds a "has-icon" class to the radiogroup'],
     ['labelClass', 'String', `''`, 'Optional. Apply class to the input label. Defaults to "font-size-h3"'],
     ['labelSrOnly', 'Boolean', 'false', 'Optional. Applies an `sr-only` class to the label'],
@@ -168,7 +168,6 @@ const propTableRowsRadioCards = [
                 <es-form-radio-cards
                     id="idCustomCardStyling"
                     label="What’s the main reason you want a battery?"
-                    model-value="form.storageReason"
                     has-icon>
                     <b-row>
                         <b-col

From 77033d6c37c9c1fe8d03e8d684e2f89d354de35f Mon Sep 17 00:00:00 2001
From: Tommy <tomjleo@gmail.com>
Date: Mon, 16 Sep 2024 22:36:36 -0400
Subject: [PATCH 20/26] fix: sr-only prop behavior

---
 es-ds-components/components/es-form-radio-cards.vue | 8 ++------
 es-ds-docs/pages/molecules/radio-cards.vue          | 2 +-
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/es-ds-components/components/es-form-radio-cards.vue b/es-ds-components/components/es-form-radio-cards.vue
index 185e3c367..fbea19b85 100644
--- a/es-ds-components/components/es-form-radio-cards.vue
+++ b/es-ds-components/components/es-form-radio-cards.vue
@@ -45,8 +45,8 @@ function handleUpdate(value: any) {
         <legend
             :id="`${props.id}-legend`"
             class="font-size-h1 font-weight-bolder mb-200 pb-0 text-dark"
+            :class="{'sr-only': props.labelSrOnly}"
             tabindex="-1">
-            <!-- How are these classes getting added?: bv-no-focus-ring col-form-label pt-0 -->
             {{ props.label }}
         </legend>
         <div>
@@ -56,7 +56,6 @@ function handleUpdate(value: any) {
                 tabindex="-1"
                 class="es-form-radio-cards d-flex justify-content-center btn-group-vertical"
                 :class="{ 'has-icon': props.hasIcon }">
-                <!-- How are these classes getting added?: btn-group-toggle btn-group-vertical bv-no-focus-ring -->
                 <slot :options="options">
                     <es-form-radio-card
                         v-for="option in options"
@@ -69,10 +68,7 @@ function handleUpdate(value: any) {
                         :inline="props.inline || false"
                         @update:model-value="handleUpdate">
                         <span
-                            :class="{
-                                [props.labelClass]: props.labelClass,
-                                'sr-only': props.labelSrOnly,
-                            }">
+                            :class="props.labelClass">
                             {{ option.text }}
                         </span>
                     </es-form-radio-card>
diff --git a/es-ds-docs/pages/molecules/radio-cards.vue b/es-ds-docs/pages/molecules/radio-cards.vue
index 634ca9d58..8a3d05c16 100644
--- a/es-ds-docs/pages/molecules/radio-cards.vue
+++ b/es-ds-docs/pages/molecules/radio-cards.vue
@@ -219,7 +219,7 @@ const propTableRowsRadioCards = [
                     <b-col
                         cols="12"
                         lg="4">
-                        <h1 aria-hidden>
+                        <h1 aria-hidden="true">
                             {{ installTimelineLabel }}
                         </h1>
                     </b-col>

From 5caf66391f155812c3c8e104cfafbbc531573a84 Mon Sep 17 00:00:00 2001
From: Tommy <tomjleo@gmail.com>
Date: Mon, 16 Sep 2024 22:37:39 -0400
Subject: [PATCH 21/26] fix: header level

---
 es-ds-docs/pages/molecules/radio-cards.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/es-ds-docs/pages/molecules/radio-cards.vue b/es-ds-docs/pages/molecules/radio-cards.vue
index 8a3d05c16..8815e2cb0 100644
--- a/es-ds-docs/pages/molecules/radio-cards.vue
+++ b/es-ds-docs/pages/molecules/radio-cards.vue
@@ -219,9 +219,11 @@ const propTableRowsRadioCards = [
                     <b-col
                         cols="12"
                         lg="4">
-                        <h1 aria-hidden="true">
+                        <h3
+                            class="h1"
+                            aria-hidden="true">
                             {{ installTimelineLabel }}
-                        </h1>
+                        </h3>
                     </b-col>
                     <b-col
                         cols="12"

From 26471cdca4b1bf57a7575d0191762738403cc79e Mon Sep 17 00:00:00 2001
From: Tommy <tomjleo@gmail.com>
Date: Mon, 16 Sep 2024 22:40:53 -0400
Subject: [PATCH 22/26] chore: add inline comment for clarity

---
 es-ds-components/components/es-radio-button.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/es-ds-components/components/es-radio-button.vue b/es-ds-components/components/es-radio-button.vue
index ebac52a23..355d3a2c5 100644
--- a/es-ds-components/components/es-radio-button.vue
+++ b/es-ds-components/components/es-radio-button.vue
@@ -24,6 +24,8 @@ function handleRadioButtonClick() {
     }
 }
 
+// Similar to the API of https://bootstrap-vue.org/docs/components/form-radio#changing-the-option-field-names
+// the value can be a string, number, or simple object. Avoid using complex types in values.
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const model = defineModel<any>();
 const isChecked = computed(() => props.value === model.value);

From d00f497fa537adae124547250da5112ceb30dee0 Mon Sep 17 00:00:00 2001
From: Tommy <tomjleo@gmail.com>
Date: Mon, 16 Sep 2024 22:42:48 -0400
Subject: [PATCH 23/26] chore: apply formatting

---
 .../components/es-form-radio-cards.vue        |  5 ++--
 es-ds-docs/pages/molecules/radio-cards.vue    | 29 ++++++++++---------
 2 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/es-ds-components/components/es-form-radio-cards.vue b/es-ds-components/components/es-form-radio-cards.vue
index fbea19b85..3e0922fed 100644
--- a/es-ds-components/components/es-form-radio-cards.vue
+++ b/es-ds-components/components/es-form-radio-cards.vue
@@ -45,7 +45,7 @@ function handleUpdate(value: any) {
         <legend
             :id="`${props.id}-legend`"
             class="font-size-h1 font-weight-bolder mb-200 pb-0 text-dark"
-            :class="{'sr-only': props.labelSrOnly}"
+            :class="{ 'sr-only': props.labelSrOnly }"
             tabindex="-1">
             {{ props.label }}
         </legend>
@@ -67,8 +67,7 @@ function handleUpdate(value: any) {
                         :model-value="props.modelValue"
                         :inline="props.inline || false"
                         @update:model-value="handleUpdate">
-                        <span
-                            :class="props.labelClass">
+                        <span :class="props.labelClass">
                             {{ option.text }}
                         </span>
                     </es-form-radio-card>
diff --git a/es-ds-docs/pages/molecules/radio-cards.vue b/es-ds-docs/pages/molecules/radio-cards.vue
index 8815e2cb0..444b06f8e 100644
--- a/es-ds-docs/pages/molecules/radio-cards.vue
+++ b/es-ds-docs/pages/molecules/radio-cards.vue
@@ -74,7 +74,7 @@ onMounted(async () => {
         docCode.value = $prism.normalizeCode(docSource.default);
         $prism.highlight();
     }
-})
+});
 
 function handleSubmit() {
     // eslint-disable-next-line no-console
@@ -278,25 +278,28 @@ const propTableRowsRadioCards = [
             <ds-prop-table :rows="propTableRowsRadioCard" />
         </div>
 
-        <h2>
-            Migrating from ESDS 2.0 form radio cards
-        </h2>
+        <h2>Migrating from ESDS 2.0 form radio cards</h2>
         <p>
             The previous
-            <a href="https://github.com/EnergySage/es-ds-legacy/blob/main/es-vue-base/src/lib-components/EsFormRadioCard.vue">
+            <a
+                href="https://github.com/EnergySage/es-ds-legacy/blob/main/es-vue-base/src/lib-components/EsFormRadioCard.vue">
                 radio card
-            </a> and <a href="https://github.com/EnergySage/es-ds-legacy/blob/main/es-vue-base/src/lib-components/EsFormRadioCards.vue">radio card group</a> components were based on
-            <a href="https://bootstrap-vue.org/docs/components/form-radio">
-            bootstrap-vue
-            </a>'s implementation.
+            </a>
+            and
+            <a
+                href="https://github.com/EnergySage/es-ds-legacy/blob/main/es-vue-base/src/lib-components/EsFormRadioCards.vue"
+                >radio card group</a
+            >
+            components were based on
+            <a href="https://bootstrap-vue.org/docs/components/form-radio"> bootstrap-vue </a>'s implementation.
         </p>
         <p>
-            Going forward the <code>v-model</code> should be on the <strong>radio card group</strong>
-            component when passing in the <code>options</code> prop.
+            Going forward the <code>v-model</code> should be on the <strong>radio card group</strong> component when
+            passing in the <code>options</code> prop.
         </p>
         <p>
-            When using the radio card group's default slot
-            the <code>v-model</code> should be on the <strong>radio card</strong> components within that slot.
+            When using the radio card group's default slot the <code>v-model</code> should be on the
+            <strong>radio card</strong> components within that slot.
         </p>
 
         <ds-doc-source

From cb9ac9ccf7c5b7fda489d637f3fa0279fdc561e8 Mon Sep 17 00:00:00 2001
From: Tommy <tomjleo@gmail.com>
Date: Tue, 17 Sep 2024 23:16:11 -0400
Subject: [PATCH 24/26] fix: doc-source references

---
 es-ds-docs/pages/molecules/radio-cards.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/es-ds-docs/pages/molecules/radio-cards.vue b/es-ds-docs/pages/molecules/radio-cards.vue
index 444b06f8e..f21384640 100644
--- a/es-ds-docs/pages/molecules/radio-cards.vue
+++ b/es-ds-docs/pages/molecules/radio-cards.vue
@@ -305,12 +305,12 @@ const propTableRowsRadioCards = [
         <ds-doc-source
             comp-title="Radio cards component"
             :comp-code="componentCodeRadioCards"
-            comp-source="es-ds-components/src/lib-components/es-form-radio-cards.vue" />
+            comp-source="es-ds-components/components/es-form-radio-cards.vue" />
 
         <ds-doc-source
             comp-title="Radio card component"
             :comp-code="componentCodeRadioCard"
-            comp-source="es-ds-components/src/lib-components/es-form-radio-card.vue" />
+            comp-source="es-ds-components/components/es-form-radio-card.vue" />
 
         <ds-doc-source
             doc-title="Radio card & radio cards documentation"

From 1c3d6729222998c0fdf2e72f47e2077ffde4a975 Mon Sep 17 00:00:00 2001
From: Tommy <tomjleo@gmail.com>
Date: Tue, 17 Sep 2024 23:56:38 -0400
Subject: [PATCH 25/26] feat: add focus state logic

---
 .../components/es-form-radio-card.vue         |  9 +-
 es-ds-components/nuxt.config.ts               |  1 +
 es-ds-components/package-lock.json            | 89 +++++++++++++++++++
 es-ds-components/package.json                 |  7 +-
 es-ds-docs/package-lock.json                  | 89 +++++++++++++++++++
 es-ds-docs/package.json                       |  5 +-
 6 files changed, 194 insertions(+), 6 deletions(-)

diff --git a/es-ds-components/components/es-form-radio-card.vue b/es-ds-components/components/es-form-radio-card.vue
index 2c0cae733..ab25d5454 100644
--- a/es-ds-components/components/es-form-radio-card.vue
+++ b/es-ds-components/components/es-form-radio-card.vue
@@ -1,4 +1,9 @@
 <script setup lang="ts">
+import { useFocus } from '@vueuse/core'
+
+const inputElem = useTemplateRef('input-elem')
+const { focused: inputFocused } = useFocus(inputElem)
+
 /* eslint-disable @typescript-eslint/no-explicit-any */
 interface IProps {
     id: string;
@@ -24,6 +29,7 @@ function handleRadioButtonClick() {
         emit('update:modelValue', props.value);
     }
 }
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const model = defineModel<any>();
 const isChecked = computed(() => props.value === model.value);
@@ -32,10 +38,11 @@ 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 }"
+        :class="{ active: isChecked, disabled: props.disabled, focus: isChecked || inputFocused }"
         @click="handleRadioButtonClick">
         <input
             :id="id"
+            ref="input-elem"
             v-model="model"
             :disabled="props.disabled"
             type="radio"
diff --git a/es-ds-components/nuxt.config.ts b/es-ds-components/nuxt.config.ts
index 3129776df..074e32957 100644
--- a/es-ds-components/nuxt.config.ts
+++ b/es-ds-components/nuxt.config.ts
@@ -48,6 +48,7 @@ export default defineNuxtConfig({
                 '@vuelidate/core',
                 '@vuelidate/validators',
                 'html-truncate',
+                '@vueuse/core',
                 'primevue/accordion',
                 'primevue/accordiontab',
                 'primevue/breadcrumb',
diff --git a/es-ds-components/package-lock.json b/es-ds-components/package-lock.json
index 9db216507..880ebb049 100644
--- a/es-ds-components/package-lock.json
+++ b/es-ds-components/package-lock.json
@@ -12,6 +12,7 @@
                 "@nuxtjs/google-fonts": "^3.2.0",
                 "@vuelidate/core": "^2.0.3",
                 "@vuelidate/validators": "^2.0.4",
+                "@vueuse/core": "^11.1.0",
                 "html-truncate": "^1.2.2",
                 "nuxt": "^3.13.1",
                 "nuxt-primevue": "^3.0.0",
@@ -2336,6 +2337,11 @@
             "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
             "integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q=="
         },
+        "node_modules/@types/web-bluetooth": {
+            "version": "0.0.20",
+            "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
+            "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow=="
+        },
         "node_modules/@typescript-eslint/eslint-plugin": {
             "version": "8.4.0",
             "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.4.0.tgz",
@@ -3499,6 +3505,89 @@
                 }
             }
         },
+        "node_modules/@vueuse/core": {
+            "version": "11.1.0",
+            "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-11.1.0.tgz",
+            "integrity": "sha512-P6dk79QYA6sKQnghrUz/1tHi0n9mrb/iO1WTMk/ElLmTyNqgDeSZ3wcDf6fRBGzRJbeG1dxzEOvLENMjr+E3fg==",
+            "dependencies": {
+                "@types/web-bluetooth": "^0.0.20",
+                "@vueuse/metadata": "11.1.0",
+                "@vueuse/shared": "11.1.0",
+                "vue-demi": ">=0.14.10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            }
+        },
+        "node_modules/@vueuse/core/node_modules/vue-demi": {
+            "version": "0.14.10",
+            "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+            "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+            "hasInstallScript": true,
+            "bin": {
+                "vue-demi-fix": "bin/vue-demi-fix.js",
+                "vue-demi-switch": "bin/vue-demi-switch.js"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            },
+            "peerDependencies": {
+                "@vue/composition-api": "^1.0.0-rc.1",
+                "vue": "^3.0.0-0 || ^2.6.0"
+            },
+            "peerDependenciesMeta": {
+                "@vue/composition-api": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@vueuse/metadata": {
+            "version": "11.1.0",
+            "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-11.1.0.tgz",
+            "integrity": "sha512-l9Q502TBTaPYGanl1G+hPgd3QX5s4CGnpXriVBR5fEZ/goI6fvDaVmIl3Td8oKFurOxTmbXvBPSsgrd6eu6HYg==",
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            }
+        },
+        "node_modules/@vueuse/shared": {
+            "version": "11.1.0",
+            "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-11.1.0.tgz",
+            "integrity": "sha512-YUtIpY122q7osj+zsNMFAfMTubGz0sn5QzE5gPzAIiCmtt2ha3uQUY1+JPyL4gRCTsLPX82Y9brNbo/aqlA91w==",
+            "dependencies": {
+                "vue-demi": ">=0.14.10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            }
+        },
+        "node_modules/@vueuse/shared/node_modules/vue-demi": {
+            "version": "0.14.10",
+            "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+            "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+            "hasInstallScript": true,
+            "bin": {
+                "vue-demi-fix": "bin/vue-demi-fix.js",
+                "vue-demi-switch": "bin/vue-demi-switch.js"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            },
+            "peerDependencies": {
+                "@vue/composition-api": "^1.0.0-rc.1",
+                "vue": "^3.0.0-0 || ^2.6.0"
+            },
+            "peerDependenciesMeta": {
+                "@vue/composition-api": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/abbrev": {
             "version": "1.1.1",
             "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
diff --git a/es-ds-components/package.json b/es-ds-components/package.json
index a3571e2f8..d448d3446 100644
--- a/es-ds-components/package.json
+++ b/es-ds-components/package.json
@@ -20,12 +20,13 @@
         "@nuxtjs/google-fonts": "^3.2.0",
         "@vuelidate/core": "^2.0.3",
         "@vuelidate/validators": "^2.0.4",
+        "@vueuse/core": "^11.1.0",
+        "html-truncate": "^1.2.2",
         "nuxt": "^3.13.1",
-        "primevue": "^3.53.0",
         "nuxt-primevue": "^3.0.0",
+        "primevue": "^3.53.0",
         "prismjs": "^1.29.0",
-        "vue": "^3.5.4",
-        "html-truncate": "^1.2.2"
+        "vue": "^3.5.4"
     },
     "devDependencies": {
         "@eslint/js": "^9.9.0",
diff --git a/es-ds-docs/package-lock.json b/es-ds-docs/package-lock.json
index 904325e6e..29b8c8e9c 100644
--- a/es-ds-docs/package-lock.json
+++ b/es-ds-docs/package-lock.json
@@ -14,6 +14,7 @@
                 "@nuxtjs/google-fonts": "^3.2.0",
                 "@vuelidate/core": "^2.0.3",
                 "@vuelidate/validators": "^2.0.4",
+                "@vueuse/core": "^11.1.0",
                 "clipboard": "^2.0.11",
                 "html-truncate": "^1.2.2",
                 "nuxt": "^3.13.1",
@@ -2393,6 +2394,11 @@
             "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
             "integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q=="
         },
+        "node_modules/@types/web-bluetooth": {
+            "version": "0.0.20",
+            "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
+            "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow=="
+        },
         "node_modules/@typescript-eslint/eslint-plugin": {
             "version": "8.4.0",
             "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.4.0.tgz",
@@ -3556,6 +3562,89 @@
                 }
             }
         },
+        "node_modules/@vueuse/core": {
+            "version": "11.1.0",
+            "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-11.1.0.tgz",
+            "integrity": "sha512-P6dk79QYA6sKQnghrUz/1tHi0n9mrb/iO1WTMk/ElLmTyNqgDeSZ3wcDf6fRBGzRJbeG1dxzEOvLENMjr+E3fg==",
+            "dependencies": {
+                "@types/web-bluetooth": "^0.0.20",
+                "@vueuse/metadata": "11.1.0",
+                "@vueuse/shared": "11.1.0",
+                "vue-demi": ">=0.14.10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            }
+        },
+        "node_modules/@vueuse/core/node_modules/vue-demi": {
+            "version": "0.14.10",
+            "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+            "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+            "hasInstallScript": true,
+            "bin": {
+                "vue-demi-fix": "bin/vue-demi-fix.js",
+                "vue-demi-switch": "bin/vue-demi-switch.js"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            },
+            "peerDependencies": {
+                "@vue/composition-api": "^1.0.0-rc.1",
+                "vue": "^3.0.0-0 || ^2.6.0"
+            },
+            "peerDependenciesMeta": {
+                "@vue/composition-api": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@vueuse/metadata": {
+            "version": "11.1.0",
+            "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-11.1.0.tgz",
+            "integrity": "sha512-l9Q502TBTaPYGanl1G+hPgd3QX5s4CGnpXriVBR5fEZ/goI6fvDaVmIl3Td8oKFurOxTmbXvBPSsgrd6eu6HYg==",
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            }
+        },
+        "node_modules/@vueuse/shared": {
+            "version": "11.1.0",
+            "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-11.1.0.tgz",
+            "integrity": "sha512-YUtIpY122q7osj+zsNMFAfMTubGz0sn5QzE5gPzAIiCmtt2ha3uQUY1+JPyL4gRCTsLPX82Y9brNbo/aqlA91w==",
+            "dependencies": {
+                "vue-demi": ">=0.14.10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            }
+        },
+        "node_modules/@vueuse/shared/node_modules/vue-demi": {
+            "version": "0.14.10",
+            "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+            "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+            "hasInstallScript": true,
+            "bin": {
+                "vue-demi-fix": "bin/vue-demi-fix.js",
+                "vue-demi-switch": "bin/vue-demi-switch.js"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            },
+            "peerDependencies": {
+                "@vue/composition-api": "^1.0.0-rc.1",
+                "vue": "^3.0.0-0 || ^2.6.0"
+            },
+            "peerDependenciesMeta": {
+                "@vue/composition-api": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/@yarnpkg/lockfile": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz",
diff --git a/es-ds-docs/package.json b/es-ds-docs/package.json
index 0436b2433..578c37b7a 100644
--- a/es-ds-docs/package.json
+++ b/es-ds-docs/package.json
@@ -23,13 +23,14 @@
         "@nuxtjs/google-fonts": "^3.2.0",
         "@vuelidate/core": "^2.0.3",
         "@vuelidate/validators": "^2.0.4",
+        "@vueuse/core": "^11.1.0",
         "clipboard": "^2.0.11",
+        "html-truncate": "^1.2.2",
         "nuxt": "^3.13.1",
         "nuxt-primevue": "^3.0.0",
         "primevue": "^3.53.0",
         "prismjs": "^1.29.0",
-        "vue": "^3.5.4",
-        "html-truncate": "^1.2.2"
+        "vue": "^3.5.4"
     },
     "devDependencies": {
         "@eslint/js": "^9.9.0",

From 32c01d89d8fe836e6bd7b95535a156c26dc4aadb Mon Sep 17 00:00:00 2001
From: Tommy <tomjleo@gmail.com>
Date: Wed, 18 Sep 2024 09:02:40 -0400
Subject: [PATCH 26/26] chore: apply formatting

---
 es-ds-components/components/es-form-radio-card.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/es-ds-components/components/es-form-radio-card.vue b/es-ds-components/components/es-form-radio-card.vue
index ab25d5454..1fac66c65 100644
--- a/es-ds-components/components/es-form-radio-card.vue
+++ b/es-ds-components/components/es-form-radio-card.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { useFocus } from '@vueuse/core'
+import { useFocus } from '@vueuse/core';
 
-const inputElem = useTemplateRef('input-elem')
-const { focused: inputFocused } = useFocus(inputElem)
+const inputElem = useTemplateRef('input-elem');
+const { focused: inputFocused } = useFocus(inputElem);
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 interface IProps {