From 808003f3dfb06eabc0e1edfd32194a1a35efca3f Mon Sep 17 00:00:00 2001
From: Buni48 <37407974+Buni48@users.noreply.github.com>
Date: Fri, 14 Oct 2022 15:35:00 +0300
Subject: [PATCH] Added checked state part for radio & radio button (#933)

* added checked state part for radio & radio button

* updated changelog
---
 docs/resources/changelog.md                 | 1 +
 src/components/radio-button/radio-button.ts | 3 ++-
 src/components/radio/radio.ts               | 3 ++-
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index f91b73a3..1aef0fce 100644
--- a/docs/resources/changelog.md
+++ b/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
 
diff --git a/src/components/radio-button/radio-button.ts b/src/components/radio-button/radio-button.ts
index 9ef6ecc2..c432a72f 100644
--- a/src/components/radio-button/radio-button.ts
+++ b/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({
diff --git a/src/components/radio/radio.ts b/src/components/radio/radio.ts
index 504af332..83197804 100644
--- a/src/components/radio/radio.ts
+++ b/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">