From 74a8d16434fb4a49d2a3405a3cbd00371a2ac7cb Mon Sep 17 00:00:00 2001
From: Tom Carter <tommyjr@gmail.com>
Date: Sun, 5 Jul 2026 10:19:25 -0500
Subject: [PATCH 1/2] Improve UI when invalid version combo is selected

---
 app/components/ember-versions-form.gjs | 10 +++++-----
 app/styles/app.css                     |  9 +++++++++
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/app/components/ember-versions-form.gjs b/app/components/ember-versions-form.gjs
index 8a8ed3f..2dbb9e8 100644
--- a/app/components/ember-versions-form.gjs
+++ b/app/components/ember-versions-form.gjs
@@ -119,11 +119,11 @@ export default class EmberVersionsFormComponent extends Component {
         class="mt-2"
       />
 
-      <div role="alert">
-        {{#unless this.areVersionsValid}}
-          <p class="mt-2">To version should be higher than From version</p>
-        {{/unless}}
-      </div>
+      {{#unless this.areVersionsValid}}
+        <div role="alert" class="well mt-2 p-2">
+          To version should be higher than From version
+        </div>
+      {{/unless}}
     </form>
   </template>
 }
diff --git a/app/styles/app.css b/app/styles/app.css
index ff175ad..2f12aeb 100644
--- a/app/styles/app.css
+++ b/app/styles/app.css
@@ -18,5 +18,14 @@ footer.es-footer {
 main > section.container > form {
   button.es-button {
     background-color: #db3122;
+
+    /* NOTE: The styleguide doesn't have a disabled button color, so we are
+       using a AAA-compliant gray/gray scheme */
+    &:disabled {
+      background-color: var(--color-gray-300);
+      color: var(--color-gray-700);
+      opacity: 0.65;
+      cursor: not-allowed;
+    }
   }
 }

From 419c1bd56dd033b49a5c3f1bb79042ba1a50093c Mon Sep 17 00:00:00 2001
From: Tom Carter <tommyjr@gmail.com>
Date: Sun, 5 Jul 2026 11:08:48 -0500
Subject: [PATCH 2/2] Show invalid version options with different colors

---
 app/components/ember-versions-form.gjs        | 16 +++++++++++
 app/styles/ember-versions-form.css            | 12 +++++++++
 .../components/ember-versions-form-test.gjs   | 27 +++++++++++++++++++
 3 files changed, 55 insertions(+)

diff --git a/app/components/ember-versions-form.gjs b/app/components/ember-versions-form.gjs
index 2dbb9e8..ac5d112 100644
--- a/app/components/ember-versions-form.gjs
+++ b/app/components/ember-versions-form.gjs
@@ -21,6 +21,14 @@ const GROUPED_VERSIONS = VERSIONS.reduce((acc, version) => {
   return acc;
 }, []);
 
+const isFromVersionInvalid = (version, toVersion) => {
+  return compare(version, toVersion, '>=');
+};
+
+const isToVersionInvalid = (version, fromVersion) => {
+  return compare(version, fromVersion, '<=');
+};
+
 export default class EmberVersionsFormComponent extends Component {
   versions = VERSIONS;
   groupedVersions = GROUPED_VERSIONS;
@@ -78,6 +86,10 @@ export default class EmberVersionsFormComponent extends Component {
                 <option
                   selected={{eq version this.fromVersion}}
                   value={{version}}
+                  class={{if
+                    (isFromVersionInvalid version this.toVersion)
+                    "is-invalid"
+                  }}
                 >
                   {{version}}
                 </option>
@@ -102,6 +114,10 @@ export default class EmberVersionsFormComponent extends Component {
                 <option
                   selected={{eq version this.toVersion}}
                   value={{version}}
+                  class={{if
+                    (isToVersionInvalid version this.fromVersion)
+                    "is-invalid"
+                  }}
                 >
                   {{version}}
                 </option>
diff --git a/app/styles/ember-versions-form.css b/app/styles/ember-versions-form.css
index 19d28f2..b55b659 100644
--- a/app/styles/ember-versions-form.css
+++ b/app/styles/ember-versions-form.css
@@ -48,6 +48,18 @@
         color: var(--color-button-secondary-text-hover);
       }
 
+      &.is-invalid {
+        background-color: var(--color-gray-300);
+        color: var(--color-gray-700);
+        opacity: 0.65;
+        text-decoration: line-through;
+
+        &:hover {
+          background-color: var(--color-gray-300);
+          color: var(--color-gray-700);
+        }
+      }
+
       display: inline-block;
       padding: 0.25rem;
       border-radius: 0.25rem;
diff --git a/tests/integration/components/ember-versions-form-test.gjs b/tests/integration/components/ember-versions-form-test.gjs
index 09bcb60..ed26ab0 100644
--- a/tests/integration/components/ember-versions-form-test.gjs
+++ b/tests/integration/components/ember-versions-form-test.gjs
@@ -91,4 +91,31 @@ module('Integration | Component | ember-versions-form', function (hooks) {
     await fillIn('[data-test-select="To Version"]', '3.15');
     assert.dom('[data-test-button="Find Changes"]').isDisabled();
   });
+
+  test('adds is-invalid class to invalid version options', async function (assert) {
+    await render(<template><EmberVersionsForm /></template>);
+
+    await fillIn('[data-test-select="From Version"]', '3.15');
+    await fillIn('[data-test-select="To Version"]', '3.18');
+
+    assert
+      .dom('[data-test-select="From Version"] option[value="3.15"]')
+      .doesNotHaveClass('is-invalid');
+
+    assert
+      .dom('[data-test-select="From Version"] option[value="3.18"]')
+      .hasClass('is-invalid');
+
+    assert
+      .dom('[data-test-select="To Version"] option[value="3.15"]')
+      .hasClass('is-invalid');
+
+    assert
+      .dom('[data-test-select="To Version"] option[value="3.12"]')
+      .hasClass('is-invalid');
+
+    assert
+      .dom('[data-test-select="To Version"] option[value="3.18"]')
+      .doesNotHaveClass('is-invalid');
+  });
 });