fix: move documentation from readme to mdx

packages/checkbox-group/README.md

@@ -35,23 +35,3 @@ import '@lion/checkbox-group/lion-checkbox-group.js';
   <lion-checkbox label="Marie Curie" .choiceValue=${'Marie Curie'}></lion-checkbox>
 </lion-checkbox-group>
 ```
-
-### Model value
-
-The `modelValue` of a `lion-checkbox-group` is an array containing the `choiceValues` of the `lion-checkbox` elements that have been checked.
-
-Given the scientists example above, say that we were to select the first and last options (Archimedes & Marie Curie).
-
-Then the `modelValue` of the `lion-checkbox-group` will look as follows:
-
-```js
-const groupElement = [parent].querySelector('lion-checkbox-group');
-groupElement.modelValue;
-  => ["Archimedes", "Marie Curie"];
-```
-
-### The `name` attribute
-
-The `name` attribute of a `lion-checkbox-group` automatically gets assigned to its `lion-checkbox` children. You can also specify names for the `lion-checkbox` elements, but if this name is different from the name assigned to `lion-checkbox-group`, then an exception will be thrown.
-
-Our recommendation would be to set the `name` attribute only on the `lion-checkbox-group` and not on the `lion-checkbox` elements.

packages/checkbox-group/src/LionCheckboxGroup.js

@@ -1,6 +1,11 @@
 import { ChoiceGroupMixin } from '@lion/choice-input';
 import { LionFieldset } from '@lion/fieldset';
 
+/**
+ * A wrapper around multiple checkboxes
+ *
+ * @extends {LionFieldset}
+ */
 export class LionCheckboxGroup extends ChoiceGroupMixin(LionFieldset) {
   constructor() {
     super();

packages/checkbox-group/stories/index.stories.mdx

@@ -56,7 +56,29 @@ import '@lion/checkbox/lion-checkbox.js';
 import '@lion/checkbox-group/lion-checkbox-group.js';
 ```
 
-## Pre-select
+### Model value
+
+The `modelValue` of a `lion-checkbox-group` is an array containing the `choiceValues` of the `lion-checkbox` elements that have been checked.
+
+Given the scientists example above, say that we were to select the first and last options (Archimedes & Marie Curie).
+
+Then the `modelValue` of the `lion-checkbox-group` will look as follows:
+
+```js
+const groupElement = [parent].querySelector('lion-checkbox-group');
+groupElement.modelValue;
+  => ["Archimedes", "Marie Curie"];
+```
+
+### The `name` attribute
+
+The `name` attribute of a `lion-checkbox-group` automatically gets assigned to its `lion-checkbox` children. You can also specify names for the `lion-checkbox` elements, but if this name is different from the name assigned to `lion-checkbox-group`, then an exception will be thrown.
+
+Our recommendation would be to set the `name` attribute only on the `lion-checkbox-group` and not on the `lion-checkbox` elements.
+
+## Examples
+
+### Pre-select
 
 You can pre-select options by targeting the `modelValue` object of the option and setting the `checked` property to `true`.
 
@@ -98,7 +120,7 @@ You can pre-select options by targeting the `modelValue` object of the option an
 </lion-checkbox-group>
 ```
 
-## Disabled
+### Disabled
 
 You can disable the entire group by setting the `disabled` attribute on the `<lion-checkbox-group>`.
 
@@ -138,7 +160,7 @@ You can disable the entire group by setting the `disabled` attribute on the `<li
 </lion-checkbox-group>
 ```
 
-## Validation
+### Validation
 
 You can apply validation to the `<lion-checkbox-group>`, similar to how you would do so in any fieldset.
 The interaction states of the `<lion-checkbox-group>` are evaluated in order to hide or show feedback messages.
@@ -207,8 +229,7 @@ const validate = () => {
 <button @click="${() => validate()}">Validate</button>
 ```
 
-
+### Validation advanced
-## Validation advanced
 
 Below is a more advanced validator on the group that evaluates the children checkboxes' checked states.
 

packages/radio-group/README.md

@@ -35,23 +35,3 @@ import '@lion/radio-group/lion-radio-group.js';
 
 - Make sure that to use a name attribute as it is necessary for the [lion-form](../form)'s serialization result.
 - If you have many options for a user to pick from, consider using [`lion-select`](../select) instead
-
-### Model value
-
-The `modelValue` of a `lion-radio-group` is string equal to the `choiceValue` of the `lion-radio` element that has been checked.
-
-Given the dinosaur example above, say that we were to select the last option (diplodocus).
-
-Then the `modelValue` of the `lion-radio-group` will look as follows:
-
-```js
-const groupElement = [parent].querySelector('lion-radio-group');
-groupElement.modelValue;
-  => "diplodocus";
-```
-
-### The `name` attribute
-
-The `name` attribute of a `lion-radio-group` automatically gets assigned to its `lion-radio` children. You can also specify names for the `lion-radio` elements, but if this name is different from the name assigned to `lion-radio-group`, then an exception will be thrown.
-
-Our recommendation would be to set the `name` attribute only on the `lion-radio-group` and not on the `lion-checkbox` elements.

packages/radio-group/src/LionRadioGroup.js

@@ -2,31 +2,13 @@ import { ChoiceGroupMixin } from '@lion/choice-input';
 import { LionFieldset } from '@lion/fieldset';
 
 /**
- * LionRadioGroup: extends the lion-fieldset
+ * A wrapper around multiple radios.
  *
- * <lion-radio-group name="radios">
- *   <label slot="label">My Radio</label>
- *   <lion-radio>
- *     <label slot="label">Male</label>
- *   </lion-radio>
- *   <lion-radio>
- *     <label slot="label">Female</label>
- *   </lion-radio>
- * </lion-radio-group>
- *
- * You can preselect an option by setting marking an lion-radio checked.
- *   Example:
- *   <lion-radio checked></lion-radio>
- *
- * It extends LionFieldset so it inherits it's features.
- *
- *
- * @customElement lion-radio-group
  * @extends {LionFieldset}
  */
-
 export class LionRadioGroup extends ChoiceGroupMixin(LionFieldset) {
   connectedCallback() {
+    // eslint-disable-next-line wc/guard-super-call
     super.connectedCallback();
     this._setRole('radiogroup');
   }

packages/radio-group/stories/index.stories.mdx

@@ -52,9 +52,30 @@ import '@lion/radio/lion-radio.js';
 import '@lion/radio-group/lion-radio-group.js';
 ```
 
+
+### Model value
+
+The `modelValue` of a `lion-radio-group` is string equal to the `choiceValue` of the `lion-radio` element that has been checked.
+
+Given the dinosaur example above, say that we were to select the last option (diplodocus).
+
+Then the `modelValue` of the `lion-radio-group` will look as follows:
+
+```js
+const groupElement = [parent].querySelector('lion-radio-group');
+groupElement.modelValue;
+  => "diplodocus";
+```
+
+### The `name` attribute
+
+The `name` attribute of a `lion-radio-group` automatically gets assigned to its `lion-radio` children. You can also specify names for the `lion-radio` elements, but if this name is different from the name assigned to `lion-radio-group`, then an exception will be thrown.
+
+Our recommendation would be to set the `name` attribute only on the `lion-radio-group` and not on the `lion-checkbox` elements.
+
 ## Examples
 
-## Pre-select
+### Pre-select
 
 You can pre-select an option by adding the checked attribute to the selected `lion-radio`.
 
@@ -76,7 +97,7 @@ You can pre-select an option by adding the checked attribute to the selected `li
 </lion-radio-group>
 ```
 
-## Disabled
+### Disabled
 
 You can disable a specific `lion-radio` option by adding the `disabled` attribute.
 
@@ -118,7 +139,7 @@ You can do the same thing for the entire group by setting the `disabled` attribu
 </lion-radio-group>
 ```
 
-## Validation
+### Validation
 
 <Story name="Validation">
   {() => {