refactor(radio-group): requested changes

Author: SisIvanova

src/components/radio-group/radio-group.ts

@@ -31,13 +31,7 @@ export default class IgcRadioGroupComponent extends LitElement {
   private _name!: string;
   private _value!: string;
 
-  @property({ type: Boolean, reflect: true })
-  private disabled = false;
-
-  @property({ type: Boolean, reflect: true })
-  private labelBefore = false;
-
-  @queryAssignedElements({ flatten: true })
+  @queryAssignedElements({ selector: 'igc-radio', flatten: true })
   private _radios!: NodeListOf<IgcRadioComponent>;
 
   /**
@@ -93,12 +87,20 @@ export default class IgcRadioGroupComponent extends LitElement {
   }
 
   private _observerCallback() {
-    const radios = Array.from(this._radios as unknown as Element[]).filter(
-      (el) => el.tagName.toLowerCase() === 'igc-radio'
-    ) as IgcRadioComponent[];
-    this.disabled = radios.every((radio) => radio.disabled);
-    this.labelBefore =
-      radios.some((radio) => radio.labelPosition === 'before') ?? false;
+    const radios = Array.from(this._radios);
+    const setState = (state: string, condition: boolean) =>
+      condition
+        ? this._internals.states.add(state)
+        : this._internals.states.delete(state);
+
+    setState(
+      'disabled',
+      radios.every((radio) => radio.disabled)
+    );
+    setState(
+      'labelBefore',
+      radios.some((radio) => radio.labelPosition === 'before')
+    );
   }
 
   constructor() {

src/components/radio-group/themes/radio-group.base.scss

@@ -12,9 +12,13 @@
     flex-direction: column;
     gap: rem(8px);
     width: max-content;
+
+    ::slotted(label) {
+        margin-block-end: rem(8px);
+    }
 }
 
-:host([alignment='vertical'][labelBefore]) {
+:host(:state(labelBefore)[alignment='vertical']) {
     ::slotted(*) {
         align-self: flex-end;
     }

src/components/radio-group/themes/shared/radio-group.common.scss

@@ -5,13 +5,12 @@ $theme: $material;
 
 :host {
     ::slotted(label) {
-        margin-block-end: rem(16px);
         color: var-get($theme, 'color');
     }
 }
 
-:host([disabled]) {
+:host(:state(disabled)) {
     ::slotted(label) {
         color: var-get($theme, 'disabled-color');
     }
-}
+}

src/components/radio-group/themes/shared/radio-group.material.scss

@@ -10,6 +10,10 @@
 
 :host([alignment='vertical']) {
     gap: 0;
+
+    ::slotted(label) {
+        margin-block-end: rem(16px);
+    }
 }
 
 :host([alignment='horizontal']) {