Fix bug where contained checkbox & radio have hover state when disabled

docs/pages/components/radio.md

@@ -172,7 +172,7 @@ Add the `contained` attribute to the [Radio Group](/components/radio-group) to d
 
 ```html:preview
 <sl-radio-group label="What would you like to do?" name="a" value="issue_shares" contained>
-  <sl-radio value="issue_shares" description="Awards company shares to an employee" >Issue shares</sl-radio>
+  <sl-radio value="issue_shares" description="Awards company shares to an employee">Issue shares</sl-radio>
   <sl-radio value="employee_buyback" description="Buys back vested shares from departing employee owners">Employee buyback</sl-radio>
   <sl-radio value="cancel_certificate" disabled>Cancel a certificate
     <div slot="description">Declares certificate to be <em>null and void</em></div>

src/components/checkbox/checkbox.styles.ts

@@ -169,8 +169,8 @@ export default css`
     height: 100%;
   }
 
-  .checkbox--contained:hover,
-  .checkbox--contained.checkbox--checked:hover {
+  :not(.checkbox--disabled).checkbox--contained:hover,
+  :not(.checkbox--disabled).checkbox--contained.checkbox--checked:hover {
     background-color: var(--sl-color-blue-50);
     transition: var(--sl-transition-medium) all;
   }

src/components/radio/radio.styles.ts

@@ -134,8 +134,8 @@ export default css`
     height: 100%;
   }
 
-  .radio--contained:hover,
-  .radio--contained.radio--checked:hover {
+  :not(.radio--disabled).radio--contained:hover,
+  :not(.radio--disabled).radio--contained.radio--checked:hover {
     background-color: var(--sl-color-blue-50);
     transition: var(--sl-transition-medium) all;
   }