chore(docs, styles): add .form-check-sm class to htmlcss radio button and add size variant on stories

.changeset/funny-rabbits-think.md

@@ -0,0 +1,6 @@
+---
+"@swisspost/design-system-documentation": minor
+"@swisspost/design-system-styles": minor
+---
+
+The CSS `.form-check-sm` class has been added to the Form Radio Button component and the variant size is added to the component's documunetation.

packages/documentation/src/stories/components/radio/radio.stories.ts

@@ -27,6 +27,7 @@ const meta: MetaComponent = {
     disabled: false,
     validation: 'null',
     requiredOptional: 'null',
+    size: 'null',
   },
   argTypes: {
     hiddenLegend: {
@@ -60,6 +61,21 @@ const meta: MetaComponent = {
         category: 'General',
       },
     },
+    size: {
+      name: 'Size',
+      description: 'Defines the size of the component.',
+      control: {
+        type: 'radio',
+        labels: {
+          'null': 'Default',
+          'form-check-sm': 'Small',
+        },
+      },
+      options: ['null', 'form-check-sm'],
+      table: {
+        category: 'General',
+      },
+    },
     checked: {
       name: 'Checked',
       description: 'When set to `true`, places the component in the checked state.',

packages/styles/src/components/radio-button.scss

@@ -123,3 +123,25 @@ tokens.$default-map: components.$post-radio-button;
     }
   }
 }
+
+.form-check-sm:not(.form-switch):has(input[type='radio']) {
+  > input[type='radio'] {
+    width: tokens.get('radio-button-small-icon-size');
+    height: tokens.get('radio-button-small-icon-size');
+
+    margin-inline: tokens.get('radio-button-small-icon-padding');
+    margin-block: calc(
+      tokens.get('radio-button-small-icon-padding') +
+        tokens.get('radio-button-small-icon-container-padding')
+    );
+
+    &::after {
+      width: tokens.get('radio-button-small-icon-dot');
+      height: tokens.get('radio-button-small-icon-dot');
+    }
+  }
+
+  > label {
+    padding-block: tokens.get('radio-button-small-label-padding-block');
+  }
+}