From 2e3fff73f932078c1548a7cbfe50036452977c9f Mon Sep 17 00:00:00 2001
From: Tommy <tomjleo@gmail.com>
Date: Wed, 18 Sep 2024 11:31:10 -0400
Subject: [PATCH 01/12] fix: double events

---
 es-ds-components/components/es-rating.vue | 61 ++++++++++-------------
 es-ds-docs/pages/molecules/rating.vue     | 34 ++++++-------
 2 files changed, 44 insertions(+), 51 deletions(-)

diff --git a/es-ds-components/components/es-rating.vue b/es-ds-components/components/es-rating.vue
index 857a43e59..69dad97de 100644
--- a/es-ds-components/components/es-rating.vue
+++ b/es-ds-components/components/es-rating.vue
@@ -44,52 +44,45 @@ const props = defineProps({
     },
 });
 
-const localRating = ref(props.rating);
+const model = defineModel<number>()
+model.value = props.rating;
 
-const roundedRating = computed(() => {
-    if (!props.rounded) {
-        return localRating.value;
-    }
-    // Rounds to nearest .5
-    return Math.round(localRating.value * 2) / 2;
-});
-
-const update = (value: number) => {
-    localRating.value = value;
-};
+// Rounds to nearest .5
+const round = (value: number) => value ? Math.round(value * 2) / 2 : 0;
+const localRating = computed(() => props.rounded ? round(model.value as number) : model.value || 0);
 </script>
 
 <template>
     <div
-        v-if="readOnly"
-        :aria-label="`${roundedRating} out of 5 stars`"
+        v-if="props.readOnly"
+        :aria-label="`${localRating} out of 5 stars`"
         class="bg-transparent rounded-0 text-orange rating">
         <div
             v-for="i in 5"
             :key="i"
             aria-hidden="true">
-            <span v-if="i <= roundedRating">
+            <span v-if="i <= localRating">
                 <icon-star-full
-                    :width="width"
-                    :height="height" />
+                    :width="props.width"
+                    :height="props.height" />
             </span>
-            <span v-else-if="i - 0.5 === roundedRating">
+            <span v-else-if="i - 0.5 === localRating">
                 <icon-star-half
-                    :width="width"
-                    :height="height" />
+                    :width="props.width"
+                    :height="props.height" />
             </span>
             <span v-else>
                 <icon-star-empty
-                    :width="width"
-                    :height="height" />
+                    :width="props.width"
+                    :height="props.height" />
             </span>
         </div>
     </div>
     <rating
         v-else
-        :model-value="roundedRating"
+        v-model="model"
         :cancel="false"
-        :readonly="readOnly"
+        :readonly="props.readOnly"
         v-bind="$attrs"
         :pt="{
             root: {
@@ -98,17 +91,16 @@ const update = (value: number) => {
             item: {
                 class: 'reactiveStar',
             },
-        }"
-        @update:model-value="update">
+        }">
         <template #officon>
             <icon-star-empty
-                :width="width"
-                :height="height" />
+                :width="props.width"
+                :height="props.height" />
         </template>
         <template #onicon>
             <icon-star-full
-                :width="width"
-                :height="height" />
+                :width="props.width"
+                :height="props.height" />
         </template>
     </rating>
 </template>
@@ -130,9 +122,10 @@ const update = (value: number) => {
     cursor: pointer !important;
 }
 
-// TODO: Star should go back to normal size after click
-.reactiveStar:hover,
-.reactiveStar[data-p-focused='true'] {
-    transform: scale(1.5);
+.reactiveStar {
+    &:hover,
+    &[data-p-focused='true'] {
+        transform: scale(1.5);
+    }
 }
 </style>
diff --git a/es-ds-docs/pages/molecules/rating.vue b/es-ds-docs/pages/molecules/rating.vue
index 4abd053a5..db0033d6b 100644
--- a/es-ds-docs/pages/molecules/rating.vue
+++ b/es-ds-docs/pages/molecules/rating.vue
@@ -1,10 +1,4 @@
 <script setup lang="ts">
-// Event will trigger twice when using keyboard to focus due to PrimeVue bug
-const changeEvent = ($event) => {
-    // eslint-disable-next-line no-alert
-    alert($event.value);
-};
-
 const propTableRows = [
     ['rating', 'Number', '0', 'Starting rating value 0-5, with .5 values available in read only mode'],
     ['rounded', 'Boolean', 'true', 'Round rating to nearest .5'],
@@ -26,6 +20,8 @@ onMounted(async () => {
         $prism.highlight();
     }
 });
+
+const rating1Val = ref(0);
 </script>
 
 <template>
@@ -42,8 +38,8 @@ onMounted(async () => {
         <div class="my-500">
             <h2>Form Input</h2>
             <es-rating
-                :read-only="false"
-                @change="changeEvent" />
+                v-model="rating1Val"
+                :read-only="false" />
             <h2 class="mt-500">Static Display</h2>
             <div
                 v-for="i in 11"
@@ -51,15 +47,19 @@ onMounted(async () => {
                 <es-rating :rating="(i - 1) / 2" />
             </div>
         </div>
-        <div class="d-flex flex-column flex-md-row">
-            <div class="bg-gray-50 justify-content-center d-flex p-200 mb-200 mb-md-0 mr-md-200">
-                <es-rating :rating="4.5" />
-            </div>
-            <div class="bg-blue-50 justify-content-center d-flex p-200 mb-200 mb-md-0 mr-md-200">
-                <es-rating :rating="4.5" />
-            </div>
-            <div class="bg-blue-900 justify-content-center d-flex p-200 mb-200 mb-md-0 mr-md-200">
-                <es-rating :rating="4.5" />
+
+        <div class="my-500">
+            <h2>Background Variations</h2>
+            <div class="d-flex flex-column flex-md-row">
+                <div class="bg-gray-50 justify-content-center d-flex p-200 mb-200 mb-md-0 mr-md-200">
+                    <es-rating :rating="4.5" />
+                </div>
+                <div class="bg-blue-50 justify-content-center d-flex p-200 mb-200 mb-md-0 mr-md-200">
+                    <es-rating :rating="4.5" />
+                </div>
+                <div class="bg-blue-900 justify-content-center d-flex p-200 mb-200 mb-md-0 mr-md-200">
+                    <es-rating :rating="4.5" />
+                </div>
             </div>
         </div>
 

From c8e5d868b62e4817c726ed5a34b1597d93968d73 Mon Sep 17 00:00:00 2001
From: Tommy <tomjleo@gmail.com>
Date: Thu, 19 Sep 2024 09:28:54 -0400
Subject: [PATCH 02/12] feat: add local focus variable

---
 es-ds-components/components/es-rating.vue | 80 +++++++++++++++--------
 1 file changed, 53 insertions(+), 27 deletions(-)

diff --git a/es-ds-components/components/es-rating.vue b/es-ds-components/components/es-rating.vue
index 69dad97de..b3b12a7de 100644
--- a/es-ds-components/components/es-rating.vue
+++ b/es-ds-components/components/es-rating.vue
@@ -50,6 +50,8 @@ model.value = props.rating;
 // Rounds to nearest .5
 const round = (value: number) => value ? Math.round(value * 2) / 2 : 0;
 const localRating = computed(() => props.rounded ? round(model.value as number) : model.value || 0);
+
+const showFocus = ref(false);
 </script>
 
 <template>
@@ -78,31 +80,41 @@ const localRating = computed(() => props.rounded ? round(model.value as number)
             </span>
         </div>
     </div>
-    <rating
-        v-else
-        v-model="model"
-        :cancel="false"
-        :readonly="props.readOnly"
-        v-bind="$attrs"
-        :pt="{
-            root: {
-                class: 'bg-transparent rounded-0 text-orange rating reactive',
-            },
-            item: {
-                class: 'reactiveStar',
-            },
-        }">
-        <template #officon>
-            <icon-star-empty
-                :width="props.width"
-                :height="props.height" />
-        </template>
-        <template #onicon>
-            <icon-star-full
-                :width="props.width"
-                :height="props.height" />
-        </template>
-    </rating>
+    <div v-else>
+        <rating
+            v-model="model"
+            :cancel="false"
+            :readonly="props.readOnly"
+            v-bind="$attrs"
+            :pt="{
+                root: {
+                    class: 'bg-transparent rounded-0 text-orange rating reactive',
+                },
+                item: (options) => {
+                    return {
+                        class: [{
+                            'reactiveStar': true,
+                            'focused': options.context.focused,
+                            'fade-focus': options.context.active && options.context.focused,
+                        }]
+                    }
+                },
+            }"
+            @focus="showFocus = true"
+            @blur="showFocus = false">
+            <template #officon>
+                <icon-star-empty
+                    :width="props.width"
+                    :height="props.height" />
+            </template>
+            <template #onicon>
+                <icon-star-full
+                    :width="props.width"
+                    :height="props.height" />
+            </template>
+        </rating>
+        showFocus: {{ showFocus }}
+    </div>
 </template>
 
 <style lang="scss">
@@ -123,9 +135,23 @@ const localRating = computed(() => props.rounded ? round(model.value as number)
 }
 
 .reactiveStar {
-    &:hover,
-    &[data-p-focused='true'] {
+    transition: all 0.15s ease-in-out;
+
+    &:hover {
+        transform: scale(1.5);
+
+    }
+    &.focused {
         transform: scale(1.5);
     }
 }
+
+.rating {
+    .reactiveStar.focused,
+    .reactiveStar:hover {
+        .reactiveStar {
+            transform: scale(1.5);
+        }
+    }
+}
 </style>

From 7115e9f644cb80b52189ace6f124c8ebe84a2d4e Mon Sep 17 00:00:00 2001
From: Tommy <tomjleo@gmail.com>
Date: Thu, 26 Sep 2024 17:00:50 -0400
Subject: [PATCH 03/12] feat: wip

---
 es-ds-components/components/es-rating-new.vue | 77 +++++++++++++++++++
 es-ds-components/components/es-rating.vue     | 43 +----------
 2 files changed, 78 insertions(+), 42 deletions(-)
 create mode 100644 es-ds-components/components/es-rating-new.vue

diff --git a/es-ds-components/components/es-rating-new.vue b/es-ds-components/components/es-rating-new.vue
new file mode 100644
index 000000000..a1b0cd195
--- /dev/null
+++ b/es-ds-components/components/es-rating-new.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+interface IProps {
+    id: string;
+    rating?: number;
+    readOnly?: boolean;
+    width?: string;
+    height?: string;
+    rounded?: boolean;
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+    rating: 0,
+    readOnly: true,
+    width: '20px',
+    height: '20px',
+    rounded: true, // Round rating to nearest .5
+});
+
+const model = defineModel<number>()
+model.value = props.rating;
+
+// Rounds to nearest .5
+const round = (value: number) => value ? Math.round(value * 2) / 2 : 0;
+const localRating = computed(() => props.rounded ? round(model.value as number) : model.value || 0);
+
+// v-for index is non-deterministic, better to set it here
+const ratingStars = [0,0,0,0,0].map((star, index) => {
+    if (localRating.value >= index + 1) {
+        return {
+            fill: 1,
+            index: index + 1,
+        };
+    }
+    if (star >= 0) {
+        return {
+            fill: 0.5,
+            index: index + 1,
+        }
+    }
+    return {
+        fill: 0,
+        index: index + 1,
+    };
+});
+</script>
+
+<template>
+    <div
+        class="b-rating form-control align-items-center bg-transparent rounded-0 text-orange d-inline-flex border-0">
+        <span
+            v-for="star in ratingStars"
+            :key="star.index"
+            tabindex="-1"
+            class="b-rating-star flex-grow-1 focused"
+            :class="{
+                'b-rating-star-empty': star.fill === 0,
+                'b-rating-star-half': star.fill === .5,
+                'b-rating-star-full': star.fill === 1,
+            }">
+            <label :for="`star-input-${star.index}`">
+                <span class="b-rating-icon">
+                    <icon-star-full
+                        focusable="false"
+                        aria-hidden="true"
+                        :width="props.width"
+                        :height="props.height" />
+                    <span class="sr-only">{{ star.index }} Star</span>
+                </span>
+                <input
+                    id="`star-input-${star.index}`"
+                    class="sr-only"
+                    type="radio"
+                    value="{{ star.index }}" />
+            </label>
+        </span>
+    </div>
+</template>
diff --git a/es-ds-components/components/es-rating.vue b/es-ds-components/components/es-rating.vue
index b3b12a7de..b4e5862c0 100644
--- a/es-ds-components/components/es-rating.vue
+++ b/es-ds-components/components/es-rating.vue
@@ -1,48 +1,7 @@
 <script setup lang="ts">
 import Rating from 'primevue/rating';
 
-const props = defineProps({
-    /**
-     * Starting rating
-     * 0-5; Avg will show half icons rounded down in read only mode
-     */
-    rating: {
-        type: Number,
-        default: 0,
-        validator: (num: number) => num >= 0 && num <= 5,
-    },
-    /**
-     * Disable changing the rating
-     */
-    readOnly: {
-        type: Boolean,
-        default: true,
-    },
-    /**
-     * Icon width
-     */
-    width: {
-        type: String,
-        default: '20px',
-        required: false,
-    },
-    /**
-     * Icon height
-     */
-    height: {
-        type: String,
-        default: '20px',
-        required: false,
-    },
-    /**
-     * Round rating to nearest .5
-     */
-    rounded: {
-        type: Boolean,
-        default: true,
-        required: false,
-    },
-});
+
 
 const model = defineModel<number>()
 model.value = props.rating;

From cfd082e35a2d87e26158cc5539b8740ed9243950 Mon Sep 17 00:00:00 2001
From: Tommy <tomjleo@gmail.com>
Date: Tue, 1 Oct 2024 14:55:55 -0400
Subject: [PATCH 04/12] feat: remove non-primevue rating idea

---
 es-ds-components/components/es-rating-new.vue | 77 -------------------
 es-ds-components/components/es-rating.vue     | 14 ++++
 2 files changed, 14 insertions(+), 77 deletions(-)
 delete mode 100644 es-ds-components/components/es-rating-new.vue

diff --git a/es-ds-components/components/es-rating-new.vue b/es-ds-components/components/es-rating-new.vue
deleted file mode 100644
index a1b0cd195..000000000
--- a/es-ds-components/components/es-rating-new.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<script setup lang="ts">
-interface IProps {
-    id: string;
-    rating?: number;
-    readOnly?: boolean;
-    width?: string;
-    height?: string;
-    rounded?: boolean;
-}
-
-const props = withDefaults(defineProps<IProps>(), {
-    rating: 0,
-    readOnly: true,
-    width: '20px',
-    height: '20px',
-    rounded: true, // Round rating to nearest .5
-});
-
-const model = defineModel<number>()
-model.value = props.rating;
-
-// Rounds to nearest .5
-const round = (value: number) => value ? Math.round(value * 2) / 2 : 0;
-const localRating = computed(() => props.rounded ? round(model.value as number) : model.value || 0);
-
-// v-for index is non-deterministic, better to set it here
-const ratingStars = [0,0,0,0,0].map((star, index) => {
-    if (localRating.value >= index + 1) {
-        return {
-            fill: 1,
-            index: index + 1,
-        };
-    }
-    if (star >= 0) {
-        return {
-            fill: 0.5,
-            index: index + 1,
-        }
-    }
-    return {
-        fill: 0,
-        index: index + 1,
-    };
-});
-</script>
-
-<template>
-    <div
-        class="b-rating form-control align-items-center bg-transparent rounded-0 text-orange d-inline-flex border-0">
-        <span
-            v-for="star in ratingStars"
-            :key="star.index"
-            tabindex="-1"
-            class="b-rating-star flex-grow-1 focused"
-            :class="{
-                'b-rating-star-empty': star.fill === 0,
-                'b-rating-star-half': star.fill === .5,
-                'b-rating-star-full': star.fill === 1,
-            }">
-            <label :for="`star-input-${star.index}`">
-                <span class="b-rating-icon">
-                    <icon-star-full
-                        focusable="false"
-                        aria-hidden="true"
-                        :width="props.width"
-                        :height="props.height" />
-                    <span class="sr-only">{{ star.index }} Star</span>
-                </span>
-                <input
-                    id="`star-input-${star.index}`"
-                    class="sr-only"
-                    type="radio"
-                    value="{{ star.index }}" />
-            </label>
-        </span>
-    </div>
-</template>
diff --git a/es-ds-components/components/es-rating.vue b/es-ds-components/components/es-rating.vue
index b4e5862c0..8ce22a9d9 100644
--- a/es-ds-components/components/es-rating.vue
+++ b/es-ds-components/components/es-rating.vue
@@ -1,7 +1,21 @@
 <script setup lang="ts">
 import Rating from 'primevue/rating';
 
+interface IProps {
+    rating?: number;
+    readOnly?: boolean;
+    width?: string;
+    height?: string;
+    rounded?: boolean;
+}
 
+const props = withDefaults(defineProps<IProps>(), {
+    rating: 0,
+    readOnly: true,
+    width: '20px',
+    height: '20px',
+    rounded: true, // Round rating to nearest .5
+});
 
 const model = defineModel<number>()
 model.value = props.rating;

From b507f5b7d4972ae84c20bd4fd8b42c734fe9639b Mon Sep 17 00:00:00 2001
From: Tommy <tomjleo@gmail.com>
Date: Tue, 1 Oct 2024 14:57:53 -0400
Subject: [PATCH 05/12] chore: remove debug statement

---
 es-ds-components/components/es-rating.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/es-ds-components/components/es-rating.vue b/es-ds-components/components/es-rating.vue
index 8ce22a9d9..d0ff7f613 100644
--- a/es-ds-components/components/es-rating.vue
+++ b/es-ds-components/components/es-rating.vue
@@ -86,7 +86,6 @@ const showFocus = ref(false);
                     :height="props.height" />
             </template>
         </rating>
-        showFocus: {{ showFocus }}
     </div>
 </template>
 

From 715306082150afb3d71b55db99cd6899edafe5f2 Mon Sep 17 00:00:00 2001
From: Tommy <tomjleo@gmail.com>
Date: Tue, 1 Oct 2024 15:07:27 -0400
Subject: [PATCH 06/12] chore: apply formatting

---
 es-ds-components/components/es-rating.vue | 21 +++++++++++----------
 es-ds-docs/pages/molecules/rating.vue     |  6 +++---
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/es-ds-components/components/es-rating.vue b/es-ds-components/components/es-rating.vue
index d0ff7f613..186132d42 100644
--- a/es-ds-components/components/es-rating.vue
+++ b/es-ds-components/components/es-rating.vue
@@ -17,12 +17,12 @@ const props = withDefaults(defineProps<IProps>(), {
     rounded: true, // Round rating to nearest .5
 });
 
-const model = defineModel<number>()
+const model = defineModel<number>();
 model.value = props.rating;
 
 // Rounds to nearest .5
-const round = (value: number) => value ? Math.round(value * 2) / 2 : 0;
-const localRating = computed(() => props.rounded ? round(model.value as number) : model.value || 0);
+const round = (value: number) => (value ? Math.round(value * 2) / 2 : 0);
+const localRating = computed(() => (props.rounded ? round(model.value as number) : model.value || 0));
 
 const showFocus = ref(false);
 </script>
@@ -65,12 +65,14 @@ const showFocus = ref(false);
                 },
                 item: (options) => {
                     return {
-                        class: [{
-                            'reactiveStar': true,
-                            'focused': options.context.focused,
-                            'fade-focus': options.context.active && options.context.focused,
-                        }]
-                    }
+                        class: [
+                            {
+                                reactiveStar: true,
+                                focused: options.context.focused,
+                                'fade-focus': options.context.active && options.context.focused,
+                            },
+                        ],
+                    };
                 },
             }"
             @focus="showFocus = true"
@@ -111,7 +113,6 @@ const showFocus = ref(false);
 
     &:hover {
         transform: scale(1.5);
-
     }
     &.focused {
         transform: scale(1.5);
diff --git a/es-ds-docs/pages/molecules/rating.vue b/es-ds-docs/pages/molecules/rating.vue
index db0033d6b..69e8db323 100644
--- a/es-ds-docs/pages/molecules/rating.vue
+++ b/es-ds-docs/pages/molecules/rating.vue
@@ -36,11 +36,11 @@ const rating1Val = ref(0);
             </nuxt-link>
         </p>
         <div class="my-500">
-            <h2>Form Input</h2>
+            <h2>Form input</h2>
             <es-rating
                 v-model="rating1Val"
                 :read-only="false" />
-            <h2 class="mt-500">Static Display</h2>
+            <h2 class="mt-500">Static display</h2>
             <div
                 v-for="i in 11"
                 :key="i">
@@ -49,7 +49,7 @@ const rating1Val = ref(0);
         </div>
 
         <div class="my-500">
-            <h2>Background Variations</h2>
+            <h2>Background variations</h2>
             <div class="d-flex flex-column flex-md-row">
                 <div class="bg-gray-50 justify-content-center d-flex p-200 mb-200 mb-md-0 mr-md-200">
                     <es-rating :rating="4.5" />

From 63f7e83d68e1ac5968bc1d7aca0bcf79e7acc312 Mon Sep 17 00:00:00 2001
From: Tommy <tomjleo@gmail.com>
Date: Tue, 1 Oct 2024 15:10:01 -0400
Subject: [PATCH 07/12] chore: remove props variable in template section

---
 es-ds-components/components/es-rating.vue | 24 +++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/es-ds-components/components/es-rating.vue b/es-ds-components/components/es-rating.vue
index 186132d42..56e59bf44 100644
--- a/es-ds-components/components/es-rating.vue
+++ b/es-ds-components/components/es-rating.vue
@@ -29,7 +29,7 @@ const showFocus = ref(false);
 
 <template>
     <div
-        v-if="props.readOnly"
+        v-if="readOnly"
         :aria-label="`${localRating} out of 5 stars`"
         class="bg-transparent rounded-0 text-orange rating">
         <div
@@ -38,18 +38,18 @@ const showFocus = ref(false);
             aria-hidden="true">
             <span v-if="i <= localRating">
                 <icon-star-full
-                    :width="props.width"
-                    :height="props.height" />
+                    :width="width"
+                    :height="height" />
             </span>
             <span v-else-if="i - 0.5 === localRating">
                 <icon-star-half
-                    :width="props.width"
-                    :height="props.height" />
+                    :width="width"
+                    :height="height" />
             </span>
             <span v-else>
                 <icon-star-empty
-                    :width="props.width"
-                    :height="props.height" />
+                    :width="width"
+                    :height="height" />
             </span>
         </div>
     </div>
@@ -57,7 +57,7 @@ const showFocus = ref(false);
         <rating
             v-model="model"
             :cancel="false"
-            :readonly="props.readOnly"
+            :readonly="readOnly"
             v-bind="$attrs"
             :pt="{
                 root: {
@@ -79,13 +79,13 @@ const showFocus = ref(false);
             @blur="showFocus = false">
             <template #officon>
                 <icon-star-empty
-                    :width="props.width"
-                    :height="props.height" />
+                    :width="width"
+                    :height="height" />
             </template>
             <template #onicon>
                 <icon-star-full
-                    :width="props.width"
-                    :height="props.height" />
+                    :width="width"
+                    :height="height" />
             </template>
         </rating>
     </div>

From 746a674ee7e0b64c6f9689bd163e40a875ac6964 Mon Sep 17 00:00:00 2001
From: Tommy <tomjleo@gmail.com>
Date: Tue, 1 Oct 2024 15:16:03 -0400
Subject: [PATCH 08/12] feat: add back alert in docs

---
 es-ds-docs/pages/molecules/rating.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/es-ds-docs/pages/molecules/rating.vue b/es-ds-docs/pages/molecules/rating.vue
index 69e8db323..46f1ea47a 100644
--- a/es-ds-docs/pages/molecules/rating.vue
+++ b/es-ds-docs/pages/molecules/rating.vue
@@ -22,6 +22,9 @@ onMounted(async () => {
 });
 
 const rating1Val = ref(0);
+watch(rating1Val, () => {
+    alert(rating1Val.value);
+})
 </script>
 
 <template>

From 638aace1466b31ed890c4c0da57e4c14960d6ad6 Mon Sep 17 00:00:00 2001
From: Tommy <tomjleo@gmail.com>
Date: Thu, 3 Oct 2024 12:49:32 -0400
Subject: [PATCH 09/12] fix: small tweaks

---
 es-ds-components/components/es-rating.vue | 1 -
 es-ds-docs/pages/molecules/rating.vue     | 1 +
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/es-ds-components/components/es-rating.vue b/es-ds-components/components/es-rating.vue
index 56e59bf44..1b22d6648 100644
--- a/es-ds-components/components/es-rating.vue
+++ b/es-ds-components/components/es-rating.vue
@@ -69,7 +69,6 @@ const showFocus = ref(false);
                             {
                                 reactiveStar: true,
                                 focused: options.context.focused,
-                                'fade-focus': options.context.active && options.context.focused,
                             },
                         ],
                     };
diff --git a/es-ds-docs/pages/molecules/rating.vue b/es-ds-docs/pages/molecules/rating.vue
index 46f1ea47a..a4444e269 100644
--- a/es-ds-docs/pages/molecules/rating.vue
+++ b/es-ds-docs/pages/molecules/rating.vue
@@ -23,6 +23,7 @@ onMounted(async () => {
 
 const rating1Val = ref(0);
 watch(rating1Val, () => {
+    // eslint-disable-next-line no-alert
     alert(rating1Val.value);
 })
 </script>

From 0d3384440fa995b25f7083e5dea866b8fbe25a1b Mon Sep 17 00:00:00 2001
From: Tommy <tomjleo@gmail.com>
Date: Thu, 3 Oct 2024 12:50:35 -0400
Subject: [PATCH 10/12] chore: apply formatting

---
 es-ds-docs/pages/molecules/rating.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/es-ds-docs/pages/molecules/rating.vue b/es-ds-docs/pages/molecules/rating.vue
index a4444e269..9cec679bf 100644
--- a/es-ds-docs/pages/molecules/rating.vue
+++ b/es-ds-docs/pages/molecules/rating.vue
@@ -25,7 +25,7 @@ const rating1Val = ref(0);
 watch(rating1Val, () => {
     // eslint-disable-next-line no-alert
     alert(rating1Val.value);
-})
+});
 </script>
 
 <template>

From 1912f970a9ea043b3d783b99728c83fec641b22d Mon Sep 17 00:00:00 2001
From: Tommy <tomjleo@gmail.com>
Date: Thu, 3 Oct 2024 14:03:54 -0400
Subject: [PATCH 11/12] feat: remove alert

---
 es-ds-components/components/es-rating.vue | 9 ---------
 es-ds-docs/pages/molecules/rating.vue     | 5 +----
 2 files changed, 1 insertion(+), 13 deletions(-)

diff --git a/es-ds-components/components/es-rating.vue b/es-ds-components/components/es-rating.vue
index 1b22d6648..a68f24441 100644
--- a/es-ds-components/components/es-rating.vue
+++ b/es-ds-components/components/es-rating.vue
@@ -117,13 +117,4 @@ const showFocus = ref(false);
         transform: scale(1.5);
     }
 }
-
-.rating {
-    .reactiveStar.focused,
-    .reactiveStar:hover {
-        .reactiveStar {
-            transform: scale(1.5);
-        }
-    }
-}
 </style>
diff --git a/es-ds-docs/pages/molecules/rating.vue b/es-ds-docs/pages/molecules/rating.vue
index 9cec679bf..896b56602 100644
--- a/es-ds-docs/pages/molecules/rating.vue
+++ b/es-ds-docs/pages/molecules/rating.vue
@@ -22,10 +22,6 @@ onMounted(async () => {
 });
 
 const rating1Val = ref(0);
-watch(rating1Val, () => {
-    // eslint-disable-next-line no-alert
-    alert(rating1Val.value);
-});
 </script>
 
 <template>
@@ -44,6 +40,7 @@ watch(rating1Val, () => {
             <es-rating
                 v-model="rating1Val"
                 :read-only="false" />
+            <pre>Value: {{ rating1Val }}</pre>
             <h2 class="mt-500">Static display</h2>
             <div
                 v-for="i in 11"

From c4f17b8204082698d55df8185cebf0c9b4f667c9 Mon Sep 17 00:00:00 2001
From: Tommy <tomjleo@gmail.com>
Date: Fri, 4 Oct 2024 09:30:39 -0400
Subject: [PATCH 12/12] chore: tweak padding

---
 es-ds-docs/pages/molecules/rating.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/es-ds-docs/pages/molecules/rating.vue b/es-ds-docs/pages/molecules/rating.vue
index 896b56602..0470b3b29 100644
--- a/es-ds-docs/pages/molecules/rating.vue
+++ b/es-ds-docs/pages/molecules/rating.vue
@@ -40,7 +40,7 @@ const rating1Val = ref(0);
             <es-rating
                 v-model="rating1Val"
                 :read-only="false" />
-            <pre>Value: {{ rating1Val }}</pre>
+            <pre class="pt-100">Value: {{ rating1Val }}</pre>
             <h2 class="mt-500">Static display</h2>
             <div
                 v-for="i in 11"