Added checked state part for radio & radio button (#933)

* added checked state part for radio & radio button

* updated changelog

docs/resources/changelog.md

@@ -11,6 +11,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 ## Next
 
 - Improved `<sl-badge>` so it renders relative to the current font size and improved padding
+- Added `button--checked` to `<sl-radio-button>` and `control--checked` to `<sl-radio>` to style just the checked state [#933](https://github.com/shoelace-style/shoelace/pull/933)
 
 ## 2.0.0-beta.83
 

src/components/radio-button/radio-button.ts

@@ -21,6 +21,7 @@ import type { CSSResultGroup } from 'lit';
  *
  * @csspart base - The component's internal wrapper.
  * @csspart button - The internal button element.
+ * @csspart button--checked - The internal button element if checked
  * @csspart prefix - The prefix slot's container.
  * @csspart label - The button's label.
  * @csspart suffix - The suffix slot's container.
@@ -83,7 +84,7 @@ export default class SlRadioButton extends ShoelaceElement {
     return html`
       <div part="base" role="presentation">
         <button
-          part="button"
+          part="${`button${this.checked ? ' button--checked' : ''}`}"
           role="radio"
           aria-checked="${this.checked}"
           class=${classMap({

src/components/radio/radio.ts

@@ -17,6 +17,7 @@ import type { CSSResultGroup } from 'lit';
  *
  * @csspart base - The component's internal wrapper.
  * @csspart control - The radio control.
+ * @csspart control--checked - The radio control if radio is checked.
  * @csspart checked-icon - The container the wraps the checked icon.
  * @csspart label - The radio label.
  */
@@ -89,7 +90,7 @@ export default class SlRadio extends ShoelaceElement {
           'radio--focused': this.hasFocus
         })}
       >
-        <span part="control" class="radio__control">
+        <span part="${`control${this.checked ? ' control--checked' : ''}`}" class="radio__control">
           <svg part="checked-icon" class="radio__icon" viewBox="0 0 16 16">
             <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
               <g fill="currentColor">