refactor(list): move radio button template from list folder to radio-button-group folder

Move radio button template and styles from `list/radio-button/`
to `radio-button-group/` to better organize radio button related code
in a single location.
Also added a comprehensive documentation to radio button template
and marked it as `@internal` since it's not for direct consumer use.

Author: Kiarokh

src/components/list/list-renderer.tsx

@@ -4,7 +4,7 @@ import { MenuItem } from '../menu/menu.types';
 import { h } from '@stencil/core';
 import { CheckboxTemplate } from '../checkbox/checkbox.template';
 import { ListRendererConfig } from './list-renderer-config';
-import { RadioButtonTemplate } from './radio-button/radio-button.template';
+import { RadioButtonTemplate } from '../radio-button-group/radio-button.template';
 import {
     getIconColor,
     getIconName,

src/components/list/list.scss

@@ -310,7 +310,7 @@ img {
 
 @import '../checkbox/checkbox.scss';
 
-@import './radio-button/radio-button.scss';
+@import '../radio-button-group/radio-button.scss';
 
 @import './partial-styles/custom-styles.scss';
 @import './partial-styles/enable-multiline-text.scss';

src/components/list/radio-button/radio-button.template.tsx

@@ -20,7 +20,7 @@ import { LimelListCustomEvent } from '@limetech/lime-elements';
  */
 @Component({
     tag: 'limel-radio-button-group',
-    shadow: true,
+    shadow: false,
 })
 export class RadioButtonGroup {
     /**

src/components/radio-button-group/radio-button-group.tsx

@@ -0,0 +1,64 @@
+import { FunctionalComponent, h } from '@stencil/core';
+
+/**
+ * Radio Button Template
+ *
+ * This is a low-level template component that renders individual radio button elements
+ * using Material Design Components (MDC) styling and structure. It's used internally
+ * by the list component to render radio buttons when `type="radio"` is specified.
+ *
+ * ## Usage in the Library
+ *
+ * This template is primarily used by:
+ * - `limel-list` component when `type="radio"`
+ * - `limel-radio-button-group` component (which wraps `limel-list`)
+ *
+ * ## Why This Exists
+ *
+ * While we have `limel-radio-button-group` for most use cases, this template provides
+ * the actual radio button HTML structure with proper MDC classes and accessibility
+ * attributes. It ensures consistent styling and behavior across all radio button
+ * implementations in the library.
+ *
+ * ## Design Philosophy
+ *
+ * This follows the principle that individual radio buttons should not be standalone
+ * components, as a single radio button is never useful in a UI. Instead, this template
+ * is used to build groups of radio buttons through higher-level components.
+ *
+ * @internal
+ */
+interface RadioButtonTemplateProps {
+    disabled?: boolean;
+    id: string;
+    checked?: boolean;
+    onChange?: (event: Event) => void;
+    label?: string;
+}
+
+export const RadioButtonTemplate: FunctionalComponent<
+    RadioButtonTemplateProps
+> = (props) => {
+    return (
+        <div
+            class={{
+                'boolean-input': true,
+                'radio-button': true,
+                checked: props.checked,
+                disabled: props.disabled,
+            }}
+        >
+            <input
+                type="radio"
+                id={props.id}
+                checked={props.checked}
+                disabled={props.disabled}
+                onChange={props.onChange}
+            />
+            <div class="box" />
+            <label class="boolean-input-label" htmlFor={props.id}>
+                {props.label}
+            </label>
+        </div>
+    );
+};