refactor(radio-button): replace RadioButtonTemplate with a private component instead

Author: Kiarokh

etc/lime-elements.api.md

@@ -685,6 +685,13 @@ export namespace Components {
         "ui": EditorUiType;
         "value": string;
     }
+    export interface LimelRadioButton {
+        "checked"?: boolean;
+        "disabled"?: boolean;
+        "id": string;
+        "label"?: string;
+        "onChange"?: (event: Event) => void;
+    }
     // @beta
     export interface LimelRadioButtonGroup {
         "badgeIcons": boolean;
@@ -1258,6 +1265,8 @@ export namespace JSX {
         //
         // (undocumented)
         "limel-prosemirror-adapter": LimelProsemirrorAdapter;
+        // (undocumented)
+        "limel-radio-button": LimelRadioButton;
         // Warning: (ae-incompatible-release-tags) The symbol ""limel-radio-button-group"" is marked as @public, but its signature references "JSX" which is marked as @beta
         //
         // (undocumented)
@@ -1886,6 +1895,13 @@ export namespace JSX {
         "ui"?: EditorUiType;
         "value"?: string;
     }
+    export interface LimelRadioButton {
+        "checked"?: boolean;
+        "disabled"?: boolean;
+        "id": string;
+        "label"?: string;
+        "onChange"?: (event: Event) => void;
+    }
     // @beta
     export interface LimelRadioButtonGroup {
         "badgeIcons"?: boolean;

src/components/list-item/list-item.scss

@@ -6,7 +6,6 @@
 
 @use '../../style/mixins';
 @forward '../checkbox/checkbox.scss';
-@forward '../radio-button-group/radio-button.scss';
 
 *,
 *:before,
@@ -169,9 +168,13 @@ limel-list-item {
 
 // ====================
 // Checkbox and radios
+.boolean-input,
+limel-radio-button {
+    width: var(--limel-boolean-input-box-size) !important;
+    margin-left: -0.25rem !important;
+}
+
 .boolean-input {
-    width: var(--limel-boolean-input-box-size);
-    margin-left: -0.25rem;
     &.checkbox {
         margin-right: 0.25rem;
     }
@@ -182,11 +185,11 @@ limel-list-item {
         margin-left: 0;
         order: 2;
     }
-}
 
-.boolean-input-label {
-    @include mixins.truncate-text();
-    opacity: 0;
-    width: var(--limel-boolean-input-box-size);
+    .boolean-input-label {
+        @include mixins.truncate-text();
+        opacity: 0;
+        width: var(--limel-boolean-input-box-size);
+    }
 }
 // ====================

src/components/list-item/list-item.tsx

@@ -6,7 +6,6 @@ import { ListItem } from './list-item.types';
 import { MenuItem } from '../menu/menu.types';
 import { ListSeparator } from '../../global/shared-types/separator.types';
 import { CheckboxTemplate } from '../checkbox/checkbox.template';
-import { RadioButtonTemplate } from '../radio-button-group/radio-button.template';
 import translate from '../../global/translations';
 import { Languages } from '../date-picker/date.types';
 
@@ -309,7 +308,7 @@ export class ListItemComponent implements ListItem {
         }
 
         return (
-            <RadioButtonTemplate
+            <limel-radio-button
                 id={`radio_${this.labelId}`}
                 checked={this.selected}
                 disabled={this.disabled}

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

@@ -1,13 +1,13 @@
 /**
 * :::important
-* The `RadioButtonTemplate` can be imported and used in the HTML of
-* other components, to render a non-functional and decorative radio button in
+* The `limel-radio-button` component can be used inside the HTML of
+* other components to render a decorative radio button in
 * their UI. An example of this is the list component.
-* This means the content of `RadioButtonTemplate` will become a part of the
+* This means the content of `limel-radio-button` will become a part of the
 * consumer's DOM structure.
 *
-* Additionally, the consumer components' also need to import the current `.scss`
-* file into their own styles file, for the radio button to be rendered correctly!
+* Additionally, the consumer components also need to import the current `.scss`
+* file into their own styles file for the radio button to be rendered correctly!
 * This means, if the styles in this file are not "specific" enough,
 * there is a risk that the consumer component's styles are affected by
 * our styles here.

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

@@ -0,0 +1,93 @@
+import { Component, Host, Prop, h } from '@stencil/core';
+
+/**
+ * This is a low-level private component that renders individual radio button elements.
+ * It's used internally by the list-item 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.
+ *
+ * However, since this is a private component, consumers who need to use a radio button
+ * outside of the context of a list or group, can still use the `limel-radio-button`
+ * component directly according to in their UI needs.
+ *
+ * @private
+ */
+@Component({
+    tag: 'limel-radio-button',
+    shadow: false,
+    styleUrl: 'radio-button.scss',
+})
+export class RadioButtonComponent {
+    /**
+     * Indicates whether the radio button is checked.
+     */
+    @Prop({ reflect: true })
+    public checked?: boolean;
+
+    /**
+     * Disables the radio button when set to `true`.
+     */
+    @Prop({ reflect: true })
+    public disabled?: boolean;
+
+    /**
+     * Associates the internal input with an external label.
+     */
+    @Prop()
+    public id!: string;
+
+    /**
+     * Visual label shown next to the radio button.
+     */
+    @Prop()
+    public label?: string;
+
+    /**
+     * Change handler forwarded to the underlying input element.
+     */
+    @Prop()
+    public onChange?: (event: Event) => void;
+
+    public render() {
+        return (
+            <Host
+                class={{
+                    'boolean-input': true,
+                    'radio-button': true,
+                    checked: this.checked,
+                    disabled: this.disabled,
+                }}
+            >
+                <input
+                    type="radio"
+                    id={this.id}
+                    checked={this.checked}
+                    disabled={this.disabled}
+                    onChange={this.onChange}
+                />
+                <div class="box" />
+                <label class="boolean-input-label" htmlFor={this.id}>
+                    {this.label}
+                </label>
+            </Host>
+        );
+    }
+}