docs(switch): update color context demo

elements/rh-switch/demo/color-context.html

@@ -41,6 +41,44 @@
         </rh-switch>
       </div>
     </fieldset>
+
+    <fieldset disabled>
+      <legend>Disabled</legend>
+      <div>
+        <rh-switch id="switch-e" accessible-label="Switch E" aria-describedby="messages-e" checked>
+          <div id="messages-e">
+            <span data-state="on">Message when on</span>
+            <span data-state="off" hidden>Message when off</span>
+          </div>
+        </rh-switch>
+      </div>
+      <div>
+        <rh-switch id="switch-f" accessible-label="Switch F" aria-describedby="messages-f" checked show-check-icon>
+          <div id="messages-f">
+            <span data-state="on">Message when on</span>
+            <span data-state="off" hidden>Message when off</span>
+          </div>
+        </rh-switch>
+      </div>
+      <div>
+        <label for="switch-g">Switch G</label>
+        <rh-switch id="switch-g" aria-describedby="messages-g" checked>
+          <div id="messages-g">
+            <span data-state="on">Message when on</span>
+            <span data-state="off" hidden>Message when off</span>
+          </div>
+        </rh-switch>
+      </div>
+      <div>
+        <label for="switch-h">Switch H</label>
+        <rh-switch id="switch-h" aria-describedby="messages-h" checked show-check-icon>
+          <div id="messages-h">
+            <span data-state="on">Message when on</span>
+            <span data-state="off" hidden>Message when off</span>
+          </div>
+        </rh-switch>
+      </div>
+    </fieldset>
   </form>
 </rh-context-demo>
 
@@ -83,6 +121,5 @@
     display: flex;
     gap: 1rem;
   }
-
 </style>