From 2a597d510dc5699ba3a7e7ef793bd10ff9037e2c Mon Sep 17 00:00:00 2001
From: Parker Lougheed <parlough@gmail.com>
Date: Tue, 16 Jun 2026 11:33:52 +0200
Subject: [PATCH 1/2] Use ID of operating sysems instead of name in selectors

---
 .../lib/src/components/common/client/os_selector.dart     | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/sites/docs/lib/src/components/common/client/os_selector.dart b/sites/docs/lib/src/components/common/client/os_selector.dart
index 2a82e6a8eb..8d2d37c9f5 100644
--- a/sites/docs/lib/src/components/common/client/os_selector.dart
+++ b/sites/docs/lib/src/components/common/client/os_selector.dart
@@ -47,9 +47,9 @@ class _OsSelectorState extends State<OsSelector> {
 
     final bodyClasses = web.document.body!.classList;
     for (final os in OperatingSystem.values) {
-      bodyClasses.remove('show-${os.name}');
+      bodyClasses.remove('show-${os.id}');
     }
-    bodyClasses.add('show-${os.name}');
+    bodyClasses.add('show-${os.id}');
   }
 
   @override
@@ -57,13 +57,13 @@ class _OsSelectorState extends State<OsSelector> {
     return div(classes: 'card-grid narrow os-selector', [
       for (final os in OperatingSystem.values)
         button(
-          id: 'install-${os.name}',
+          id: 'install-${os.id}',
           classes: [
             'card outlined-card install-card',
             if (selectedOs == os) 'selected-card',
           ].toClasses,
           attributes: {
-            'data-os': os.name,
+            'data-os': os.id,
             'aria-label': 'Update docs to cover ${os.label}',
           },
           events: {

From b481c67b33aac5f3253b0b68211605882b83c6c2 Mon Sep 17 00:00:00 2001
From: Parker Lougheed <parlough@gmail.com>
Date: Tue, 16 Jun 2026 11:37:12 +0200
Subject: [PATCH 2/2] Account for Gemini review suggestion

---
 .../components/common/client/os_selector.dart | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/sites/docs/lib/src/components/common/client/os_selector.dart b/sites/docs/lib/src/components/common/client/os_selector.dart
index 8d2d37c9f5..215715ab64 100644
--- a/sites/docs/lib/src/components/common/client/os_selector.dart
+++ b/sites/docs/lib/src/components/common/client/os_selector.dart
@@ -46,8 +46,8 @@ class _OsSelectorState extends State<OsSelector> {
     }
 
     final bodyClasses = web.document.body!.classList;
-    for (final os in OperatingSystem.values) {
-      bodyClasses.remove('show-${os.id}');
+    for (final supportedOS in OperatingSystem.values) {
+      bodyClasses.remove('show-${supportedOS.id}');
     }
     bodyClasses.add('show-${os.id}');
   }
@@ -55,27 +55,27 @@ class _OsSelectorState extends State<OsSelector> {
   @override
   Component build(BuildContext context) {
     return div(classes: 'card-grid narrow os-selector', [
-      for (final os in OperatingSystem.values)
+      for (final supportedOS in OperatingSystem.values)
         button(
-          id: 'install-${os.id}',
+          id: 'install-${supportedOS.id}',
           classes: [
             'card outlined-card install-card',
-            if (selectedOs == os) 'selected-card',
+            if (selectedOs == supportedOS) 'selected-card',
           ].toClasses,
           attributes: {
-            'data-os': os.id,
-            'aria-label': 'Update docs to cover ${os.label}',
+            'data-os': supportedOS.id,
+            'aria-label': 'Update docs to cover ${supportedOS.label}',
           },
           events: {
             'click': (event) {
-              setOS(os);
+              setOS(supportedOS);
             },
           },
           [
             div(classes: 'card-leading', [
               img(
-                src: '/assets/images/docs/brand-svg/${os.id}.svg',
-                alt: '${os.label} logo',
+                src: '/assets/images/docs/brand-svg/${supportedOS.id}.svg',
+                alt: '${supportedOS.label} logo',
                 attributes: {
                   'width': '72',
                   'height': '72',
@@ -85,7 +85,7 @@ class _OsSelectorState extends State<OsSelector> {
             ]),
             div(classes: 'card-header text-center', [
               span(classes: 'card-title', [
-                .text(os.label),
+                .text(supportedOS.label),
               ]),
             ]),
           ],