Migrate site controls to Nebula design system

website/src/components/ToastPositionSwitch.jsx

@@ -4,16 +4,34 @@ import { Icon } from "./Icon.jsx";
 export function ToastPositionSwitch({ position, labels, onChange }) {
   const normalizedPosition = position === "left" ? "left" : "right";
   return (
-    <button
-      className="toast-position-switch"
-      type="button"
+    <div
+      className="toast-position-switch nds-radio-button-group"
+      data-size="xs"
+      role="radiogroup"
       data-position={normalizedPosition}
-      onClick={() => onChange(normalizedPosition === "left" ? "right" : "left")}
       aria-label={normalizedPosition === "left" ? labels.left : labels.right}
       title={labels.title}
     >
-      <span><Icon name="toast-left" /></span>
-      <span><Icon name="toast-right" /></span>
-    </button>
+      <button
+        className={normalizedPosition === "left" ? "active" : ""}
+        type="button"
+        role="radio"
+        aria-checked={normalizedPosition === "left"}
+        aria-label={labels.left}
+        onClick={() => onChange("left")}
+      >
+        <Icon name="toast-left" />
+      </button>
+      <button
+        className={normalizedPosition === "right" ? "active" : ""}
+        type="button"
+        role="radio"
+        aria-checked={normalizedPosition === "right"}
+        aria-label={labels.right}
+        onClick={() => onChange("right")}
+      >
+        <Icon name="toast-right" />
+      </button>
+    </div>
   );
 }