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..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,36 +46,36 @@ class _OsSelectorState extends State<OsSelector> {
     }
 
     final bodyClasses = web.document.body!.classList;
-    for (final os in OperatingSystem.values) {
-      bodyClasses.remove('show-${os.name}');
+    for (final supportedOS in OperatingSystem.values) {
+      bodyClasses.remove('show-${supportedOS.id}');
     }
-    bodyClasses.add('show-${os.name}');
+    bodyClasses.add('show-${os.id}');
   }
 
   @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.name}',
+          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.name,
-            '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),
               ]),
             ]),
           ],