@solid-design-system/mcp 0.0.1

package/metadata/packages/components/sd-progress-bar/info.md

@@ -0,0 +1,73 @@
+## Overview
+
+`<sd-progress-bar>` — Used to visually represent the progression of an activity.
+
+## API
+
+### Examples
+
+Use the components tool by passing the args `component` and `example` for any of these combinations:
+
+- component: sd-progress-bar, example: label
+- component: sd-progress-bar, example: value-max
+- component: sd-progress-bar, example: value-position
+- component: sd-progress-bar, example: loading
+- component: sd-progress-bar, example: custom-height
+- component: sd-progress-bar, example: value-formatter
+- component: sd-progress-bar, example: inverted
+
+### Key Properties
+
+- prop.value: number|null, default=null — The current progress value.
+- prop.max: number, default=100 — The maximum progress value.
+- prop.label: string, default='' — The progress bar's label. If you need to display HTML, use the `label` slot instead.
+- prop.valuePosition [attr: value-position]: 'right'|'bottom'|null, default=null — Displays the progress value on the right side of the indicator.
+- prop.inverted: boolean, default=false — Inverts the progress bar's colors.
+- prop.showLabel [attr: show-label]: boolean, default=false — Shows the label visually.
+- prop.valueFormatter: (value: number) => string — A function used to format the progress-bar's value.
+  The value of the progress-bar is passed as the only argument.
+  The function should return a string to display in the value-position part.
+- prop.dir: 'ltr'|'rtl'|'auto' — The element's directionality.
+- prop.lang: string — The element's language.
+
+### Slots
+
+- slot.label: The input's label. Alternatively, you can use the `label` attribute.
+
+### CSS Parts
+
+- part.base: The component's base wrapper.
+- part.value-right: Value's on the right side of the indicator.
+- part.value-bottom: Value's on the bottom of the indicator.
+- part.label: The label element.
+- part.bar: The progress bar's container.
+
+## Guidelines
+
+### Use Cases
+
+- Display the completion status of multi-step processes or task
+- Communicate the loading or processing state of an activity, such as file uploads or data syncing.
+
+### Rules
+
+### Behavior
+
+- Always reflect the actual progress accurately and avoid fake animations when real progress data is available.
+- Avoid using a progress bar for binary states and use a status indicator instead.
+- Pair the progress bar with a label or percentage to give users a clear sense of progress.
+
+### Value
+
+- If displaying a value with a long copy prefer the bottom value-position.
+
+### Background
+
+- Use light background options like white, neutral-100, primary-100, or use a primary background when inverted.
+
+### Accessibility
+
+- Never omit label on functional progress bars (file uploads, form steps, loading states).
+- The aria-hidden pattern is only appropriate when the progress information is either redundant or meaningless to screen reader users – for example, a visual scroll position tracker on a blog page.
+- The label attribute is required in code. It provides an accessible name for the progress bar and must always be set, even when not visually displayed. For decorative uses (e.g. a blog article scroll indicator), add aria-hidden="true" to remove it from the accessibility tree entirely. In this case label can be omitted.
+- Set a value for the label attribute to ensure aria-label and aria-description are set. Without it, the component defaults to aria-hidden="true", only appropriate for decorative progress bars (such as a scroll indicator).

package/metadata/packages/components/sd-progress-bar/stories/custom-height.md

@@ -0,0 +1,5 @@
+Use the CSS property `--height` to adjust the height of the progress bar.
+
+```html
+<div class="max-w-[300px]"><sd-progress-bar style="--height: 12px" value="35" max="100"></sd-progress-bar></div>
+```

package/metadata/packages/components/sd-progress-bar/stories/inverted.md

@@ -0,0 +1,9 @@
+Use the `inverted` attribute when displayed on primary background.
+
+```html
+<div class="p-4 bg-primary">
+  <div class="max-w-[300px]">
+    <sd-progress-bar inverted value="35" max="100"></sd-progress-bar>
+  </div>
+</div>
+```

package/metadata/packages/components/sd-progress-bar/stories/label.md

@@ -0,0 +1,16 @@
+Use the `label` attribute to add an accessible label to the progress bar. For labels that contain HTML, use the `label` slot instead.
+This label is visually hidden by default, to display it, use the `show-label` attribute.
+**Hint**: If no label is set the component receives an aria-hidden attribute of `true`.
+
+```html
+<style>
+  sd-progress-bar {
+    height: 100%;
+  }
+</style>
+<div class="flex flex-col md:flex-row gap-4 items-end">
+  <sd-progress-bar value="35" max="100" label="Label"></sd-progress-bar>
+  <sd-progress-bar value="35" max="100" label="Label" show-label></sd-progress-bar>
+  <sd-progress-bar value="35" max="100" show-label><div slot="label" class="text-lg">Label slot</div></sd-progress-bar>
+</div>
+```

package/metadata/packages/components/sd-progress-bar/stories/loading.md

@@ -0,0 +1,5 @@
+The progress bar will display an indeterminate animation automatically when no value is provided, or if is set to `null`, `undefined` or `NaN`.
+
+```html
+<div class="max-w-[300px]"><sd-progress-bar max="100"></sd-progress-bar></div>
+```

package/metadata/packages/components/sd-progress-bar/stories/value-formatter.md

@@ -0,0 +1,20 @@
+Use the `valueFormatter` to customize the display of the value in the progress bar. The function receives the current value as a parameter and should return a string to display in the value-position part.
+
+```html
+<div class="flex flex-col gap-4">
+  <div class="value-formatter-story-right">
+    <sd-progress-bar class="max-w-[300px]" value="4" max="10" value-position="right"></sd-progress-bar>
+  </div>
+  <div class="value-formatter-story-bottom max-w-[300px]">
+    <sd-progress-bar value="4" max="10" value-position="bottom"></sd-progress-bar>
+  </div>
+</div>
+<script>
+  Promise.all([customElements.whenDefined('sd-progress-bar')]).then(() => {
+    document.querySelector('.value-formatter-story-right sd-progress-bar').valueFormatter = value =>
+      value + ' of 10 MB';
+    document.querySelector('.value-formatter-story-bottom sd-progress-bar').valueFormatter = value =>
+      '€' + value + 'k of €10k spent';
+  });
+</script>
+```

package/metadata/packages/components/sd-progress-bar/stories/value-max.md

@@ -0,0 +1,6 @@
+Use the `value` and `max` attributes to set the progress value and maximum value of the progress bar.
+The default value is `0` and the default max is `100`. The component will calculate the percentage based on these two values.
+
+```html
+<div class="max-w-[300px]"><sd-progress-bar value="35" max="70"></sd-progress-bar></div>
+```

package/metadata/packages/components/sd-progress-bar/stories/value-position.md

@@ -0,0 +1,11 @@
+Use the `value-position` attribute to set the position of the value on the progress bar.
+
+- `right`
+- `bottom`
+
+```html
+<div class="flex flex-col gap-4">
+  <sd-progress-bar class="max-w-[300px]" value="35" max="100" value-position="right"></sd-progress-bar>
+  <sd-progress-bar class="max-w-[300px]" value="35" max="100" value-position="bottom"></sd-progress-bar>
+</div>
+```

package/metadata/packages/components/sd-quickfact/info.md

@@ -0,0 +1,84 @@
+## Overview
+
+`<sd-quickfact>` — Used to present brief information and expand to show additional content.
+
+## API
+
+### Examples
+
+Use the components tool by passing the args `component` and `example` for any of these combinations:
+
+- component: sd-quickfact, example: expandable
+- component: sd-quickfact, example: open
+- component: sd-quickfact, example: summary
+
+### Key Properties
+
+- prop.expandable: boolean, default=false — Determines if the quickfact is not interactive. When set to `true`, the quickfact will not expand or collapse.
+- prop.open: boolean, default=false — Indicates whether or not the accordion is open. You can toggle this attribute to show and hide the accordion, or you
+  can use the `show()` and `hide()` methods and this attribute will reflect the accordion' open state.
+- prop.summary: string — The summary to show in the header. If you need to display HTML, use the `summary` slot instead.
+- prop.dir: 'ltr'|'rtl'|'auto' — The element's directionality.
+- prop.lang: string — The element's language.
+
+### Events
+
+- event.sd-show: Emitted when the accordion opens.
+- event.sd-after-show: Emitted after the accordion opens and all animations are complete.
+- event.sd-hide: Emitted when the accordion closes.
+- event.sd-after-hide: Emitted after the accordion closes and all animations are complete.
+
+### Slots
+
+- slot.icon: Optional icon to show in the header. Works best with `<sd-icon>`.
+- slot.default: The accordion main content.
+- slot.summary: The accordion summary. Alternatively, you can use the `summary` attribute.
+- slot.expand-icon: Optional expand icon to use instead of the default. Works best with `<sd-icon>`.
+- slot.collapse-icon: Optional collapse icon to use instead of the default. Works best with `<sd-icon>`.
+
+### CSS Parts
+
+- part.icon: The container that wraps the icon.
+- part.base: The component's base wrapper.
+- part.header: The header that wraps both the summary and the expand/collapse icon.
+- part.summary: The container that wraps the summary.
+- part.summary-icon: The container that wraps the expand/collapse icons.
+- part.summary-border: The container that wraps the currently active accordions border.
+- part.content: The container that wraps the accordion content slot.
+- part.content\_\_slot: The accordion content slot.
+
+## Guidelines
+
+### Use Cases
+
+- Highlight important statistics or facts within a page to draw attention.
+- Summarize complex data into digestible pieces of information.
+- Emphasize critical points or findings alongside articles or reports.
+- Showcase key benefits or features of a product in promotional materials.
+
+### Rules
+
+### Content
+
+- Focus on one key piece of information per quick fact.
+- Ensure each quick fact can be understood independently, even when part of a group.
+- Avoid using in contexts where detailed explanations are required.
+
+### Behavior
+
+- Use the expandable attribute for supplementary information that isn’t essential for initial understanding.
+- Limit the number of quick facts on a single page to avoid overwhelming users.
+- Include a single quick fact when needed, even though they are typically presented in groups.
+
+### Icon and Responsiveness
+
+- Make sure the chosen content icon logically illustrates the key fact you want to communicate.
+- Adapt the style according to screen size (e.g., ≤ 414px width for mobile screens) to maintain responsiveness.
+
+### Background
+
+- Use light background options such as white, neutral-100, or primary-100.
+
+### Accessibility
+
+- Ensure that the summaries are short, concise and unique as they’re used as the label for the button.

package/metadata/packages/components/sd-quickfact/stories/expandable.md

@@ -0,0 +1,46 @@
+**Disclaimer:** Due to a bug with Storybook Controls, the `expandable` attribute controls might not behave as expected. Please refresh the page if you wish to reset the controls.
+You can follow this issue here: https://github.com/storybookjs/storybook/issues/28634
+/
+export default {
+title: 'Components/sd-quickfact',
+component: 'sd-quickfact',
+tags: ['!dev', 'autodocs'],
+args: overrideArgs([
+{
+type: 'slot',
+name: 'summary',
+value: `<div slot="summary" class="flex flex-col sm:gap-4"> <p class="text-base font-normal leading-normal sm:text-4xl sm:leading-tight">Lorem Ipsum</p>
+
+<div class="text-base font-normal leading-normal sm:text-xl">Con sectetur adipiscing elit</div></div>`
+},
+{
+type: 'slot',
+name: 'icon',
+value: `<sd-icon name="content/image" color="currentColor" aria-hidden="true" library="default" slot="icon"></sd-icon>`
+}
+]),
+argTypes,
+parameters: {
+...parameters,
+design: {
+type: 'figma',
+url: 'https://www.figma.com/design/YDktJcseQIIQbsuCpoKS4V/Component-Docs?node-id=2592-3469&node-type=section&t=5PpAC3TA3kYF7ufX-0'
+}
+}
+};
+export const Default = {
+render: (args: any) => {
+return generateTemplate({
+args
+});
+}
+};
+/**
+Use the `expandable` attribute to make the quickfact item expandable.
+
+```html
+<sd-quickfact expandable="" summary="Lorem Ipsum">
+  <sd-icon name="content/image" color="currentColor" aria-hidden="true" library="default" slot="icon"></sd-icon>
+  <div class="slot slot--border slot--text h-16">Default slot</div>
+</sd-quickfact>
+```

package/metadata/packages/components/sd-quickfact/stories/open.md

@@ -0,0 +1,15 @@
+Use the `open` attribute to set the state of the quickfact.
+
+```html
+<div class="flex flex-col gap-12">
+  <sd-quickfact expandable="" open summary="Open">
+    <sd-icon name="content/image" color="currentColor" aria-hidden="true" library="default" slot="icon"></sd-icon>
+    <div class="slot slot--border slot--text h-16">Default slot</div>
+  </sd-quickfact>
+
+  <sd-quickfact expandable="" summary="Closed">
+    <sd-icon name="content/image" color="currentColor" aria-hidden="true" library="default" slot="icon"></sd-icon>
+    <div class="slot slot--border slot--text h-16">Default slot</div>
+  </sd-quickfact>
+</div>
+```

package/metadata/packages/components/sd-quickfact/stories/summary.md

@@ -0,0 +1,13 @@
+Use the `summary` attribute to provide the text in the quickfact.
+For summaries that contain HTML, use the summary slot instead.
+
+```html
+<sd-quickfact>
+  <sd-icon name="content/image" color="currentColor" aria-hidden="true" library="default" slot="icon"></sd-icon>
+  <div slot="summary" class="flex flex-col sm:gap-4">
+    <p class="text-base font-normal leading-normal sm:text-4xl sm:leading-tight">Summary</p>
+    <div class="text-base font-normal leading-normal sm:text-xl">Description</div>
+  </div>
+  <div class="slot slot--border slot--text h-16">Default slot</div>
+</sd-quickfact>
+```

package/metadata/packages/components/sd-radio/info.md

@@ -0,0 +1,47 @@
+## Overview
+
+`<sd-radio>` — Used to allow the user to select a single option from a group.
+
+## API
+
+### Examples
+
+Use the components tool by passing the args `component` and `example` for any of these combinations:
+
+- component: sd-radio, example: size
+- component: sd-radio, example: disabled
+- component: sd-radio, example: visually-disabled
+- component: sd-radio, example: invalid
+
+### Key Properties
+
+- prop.size: 'lg'|'md'|'sm', default='lg' — The radio's size.
+- prop.disabled: boolean, default=false — A Boolean attribute which, if present, disables the radio.
+- prop.visuallyDisabled [attr: visually-disabled]: boolean, default=false — A Boolean attribute which, if present, disables the radio.
+- prop.value: string — The radio's value. When selected, the radio group will receive this value.
+- prop.invalid: boolean, default=false — A Boolean attribute which, if present, marks the radio Button valid or invalid
+- prop.dir: 'ltr'|'rtl'|'auto' — The element's directionality.
+- prop.lang: string — The element's language.
+
+### Events
+
+- event.sd-blur: Emitted when the control loses focus.
+- event.sd-focus: Emitted when the control gains focus.
+
+### Slots
+
+- slot.default: The radio's label.
+
+### CSS Parts
+
+- part.base: The component's base wrapper.
+- part.control--unchecked: The radio control when the radio is unchecked.
+- part.control--checked: The radio control when the radio is checked.
+- part.checked: The dot inside the radio component when the radio is checked.
+- part.label: The container that wraps the radio's label.
+
+## Guidelines
+
+### Accessibility
+
+- Use the "visually disabled" attribute to keep disabled elements focusable, hoverable, and able to show tooltips, as they’re otherwise removed from the tab order and inaccessible to screen readers.

package/metadata/packages/components/sd-radio/stories/disabled.md

@@ -0,0 +1,9 @@
+Use the `disabled` attribute to disable an input radio.
+
+```html
+<sd-radio-group label="Disabled radio in group" value="1">
+  <sd-radio value="1">Radio 1</sd-radio>
+  <sd-radio value="2" disabled>Radio 2</sd-radio>
+  <sd-radio value="3">Radio 3</sd-radio>
+</sd-radio-group>
+```

package/metadata/packages/components/sd-radio/stories/invalid.md

@@ -0,0 +1,22 @@
+The component gets “invalid” state when the form is not valid.
+For an invalid radio-group (since radios always come in groups) an error-text underneath the group is mandatory.
+
+```html
+<form id="invalid-form" class="flex flex-col gap-8">
+  <sd-radio-group name="radio-group" id="invalid-radio" required>
+    <sd-radio value="1">Radio 1</sd-radio>
+    <sd-radio value="2">Radio 2</sd-radio>
+    <sd-radio value="3">Radio 3</sd-radio>
+    <label slot="label">Invalid Group</label>
+  </sd-radio-group>
+</form>
+<script type="module">
+  // Wait for custom elements to be defined
+  await Promise.all([customElements.whenDefined('sd-radio-group'), customElements.whenDefined('sd-button')]).then(
+    () => {
+      const input = document.getElementById('invalid-radio');
+      input.reportValidity();
+    }
+  );
+</script>
+```

package/metadata/packages/components/sd-radio/stories/size.md

@@ -0,0 +1,26 @@
+Use the `size` attribute to change the size of the input radio (`md` equals `lg` but added for consistency reason on input elements):
+
+- `lg` (default)
+- `md`
+- `sm`
+  This attribute affects the font-size within the element, while the element itself remains the same size.
+
+```html
+<div class="flex gap-12">
+  <sd-radio-group size="lg" value="1">
+    <sd-radio value="1">Radio 1</sd-radio>
+    <sd-radio value="2">Radio 2</sd-radio>
+    <sd-radio value="3">Radio 3</sd-radio>
+  </sd-radio-group>
+  <sd-radio-group size="md" value="1">
+    <sd-radio value="1">Radio 1</sd-radio>
+    <sd-radio value="2">Radio 2</sd-radio>
+    <sd-radio value="3">Radio 3</sd-radio>
+  </sd-radio-group>
+  <sd-radio-group size="sm" value="1">
+    <sd-radio value="1">Radio 1</sd-radio>
+    <sd-radio value="2">Radio 2</sd-radio>
+    <sd-radio value="3">Radio 3</sd-radio>
+  </sd-radio-group>
+</div>
+```

package/metadata/packages/components/sd-radio/stories/visually-disabled.md

@@ -0,0 +1,11 @@
+Use the `visually-disabled` attribute to style the component as if it was disabled and enable `aria-disabled` to allow it to be reachable by screen readers.
+**Hint:** When using this attribute, make sure to provide ways to inform the user why the element is disabled and how to enable it. This can be done by using the `help-text` attribute or wrapping the element in a sd-tooltip.
+**Accessibility Hint:** Disabling elements is not recommended for accessibility reasons.
+
+```html
+<sd-radio-group label="Visually disabled" value="1">
+  <sd-tooltip content="Visually disabled" trigger="hover focus" size="sm">
+    <sd-radio value="1" visually-disabled>Radio 1</sd-radio>
+  </sd-tooltip>
+</sd-radio-group>
+```

package/metadata/packages/components/sd-radio-button/info.md

@@ -0,0 +1,81 @@
+## Overview
+
+`<sd-radio-button>` — Used to switch between different options by selecting a single option from a group.
+
+## API
+
+### Examples
+
+Use the components tool by passing the args `component` and `example` for any of these combinations:
+
+- component: sd-radio-button, example: size
+- component: sd-radio-button, example: checked
+- component: sd-radio-button, example: label
+- component: sd-radio-button, example: icon
+- component: sd-radio-button, example: disabled
+- component: sd-radio-button, example: visually-disabled
+
+### Key Properties
+
+- prop.size: 'lg'|'md'|'sm', default='lg' — The radio button's size.
+- prop.disabled: boolean, default=false — Disables the radio button.
+- prop.visuallyDisabled [attr: visually-disabled]: boolean, default=false — Styles the radio-button as if it was disabled and enables aria-disabled
+- prop.value: string — The radio's value. When selected, the radio group will receive this value.
+- prop.dir: 'ltr'|'rtl'|'auto' — The element's directionality.
+- prop.lang: string — The element's language.
+
+### Events
+
+- event.sd-blur: Emitted when the button loses focus.
+- event.sd-focus: Emitted when the button gains focus.
+
+### Slots
+
+- slot.default: The radio button's label.
+- slot.icon: A presentational icon.
+
+### CSS Parts
+
+- part.base: The component's base wrapper.
+- part.button: The internal `<button>` element.
+- part.button--checked: The internal button element when the radio button is checked.
+- part.icon: The container that wraps the icon.
+- part.label: The container that wraps the radio button's label.
+
+## Guidelines
+
+### Use Cases
+
+- Select one option from a group where one is already preselected.
+- Switch between groups of settings.
+- Filter views by a parent category.
+
+### Rules
+
+### Content
+
+- Include icons to support each option visually if possible.
+- Label each choice clearly.
+
+### Behavior
+
+- Don’t use as input method in forms, for they are not form elements. Use [sd-radio](./?path=/docs/components-sd-radio--docs) instead.
+- Slot inside of an [sd-radio-group](./?path=/docs/components-sd-radio-group--docs).
+- Use only in groups, as they are designed to allow the user to activate one of several options. To work with a single option, use [sd-checkbox](./?path=/docs/components-sd-checkbox--docs) instead.
+- Pre-select always a “default” value; there is no invalid state.
+- Limit the number of options in the group. Users should be able to retain all options available and not be overwhelmed by them.
+
+### Styling
+
+- All radio buttons in the group must be styled similarly, e.g., each one is labelled with both text and icon.
+- Avoid styling options only with icons if they are not common symbols, to prevent ambiguous interpretations.
+
+### Background
+
+- Use with light background options such as white, neutral-100, or primary-100.
+
+### Accessibility
+
+- Provide meaningful alternative text for icon-only radio buttons.
+- Communicate the group’s function—such as filtering or view switching—through clear context or labels.
+- Use the "visually disabled" attribute to keep disabled elements focusable, hoverable, and able to show tooltips, as they’re otherwise removed from the tab order and inaccessible to screen readers.

package/metadata/packages/components/sd-radio-button/stories/checked.md

@@ -0,0 +1,20 @@
+Use the `checked` attribute to set the state of the radio button to checked.
+
+```html
+<div class="flex gap-12">
+  <sd-radio-group value="1">
+    <sd-radio-button value="1">
+      <sd-icon name="system/image" slot="icon"></sd-icon>
+      Label
+    </sd-radio-button>
+    <sd-radio-button value="2">
+      <sd-icon name="system/image" slot="icon"></sd-icon>
+      Label
+    </sd-radio-button>
+    <sd-radio-button value="3">
+      <sd-icon name="system/image" slot="icon"></sd-icon>
+      Label
+    </sd-radio-button>
+  </sd-radio-group>
+</div>
+```

package/metadata/packages/components/sd-radio-button/stories/disabled.md

@@ -0,0 +1,20 @@
+Use the `disabled` attribute to disable an input radio button.
+
+```html
+<div class="flex gap-12">
+  <sd-radio-group value="1">
+    <sd-radio-button value="1">
+      <sd-icon name="system/image" slot="icon"></sd-icon>
+      Label
+    </sd-radio-button>
+    <sd-radio-button value="2" disabled>
+      <sd-icon name="system/image" slot="icon"></sd-icon>
+      Disabled
+    </sd-radio-button>
+    <sd-radio-button value="3">
+      <sd-icon name="system/image" slot="icon"></sd-icon>
+      Label
+    </sd-radio-button>
+  </sd-radio-group>
+</div>
+```

package/metadata/packages/components/sd-radio-button/stories/icon.md

@@ -0,0 +1,17 @@
+Use the `icon` slot to add system icons.
+
+```html
+<div class="flex gap-12">
+  <sd-radio-group value="1">
+    <sd-radio-button value="1">
+      <sd-icon label="landscape" name="system/image" slot="icon"></sd-icon>
+    </sd-radio-button>
+    <sd-radio-button value="2">
+      <sd-icon label="landscape" name="system/image" slot="icon"></sd-icon>
+    </sd-radio-button>
+    <sd-radio-button value="3">
+      <sd-icon label="landscape" name="system/image" slot="icon"></sd-icon>
+    </sd-radio-button>
+  </sd-radio-group>
+</div>
+```

package/metadata/packages/components/sd-radio-button/stories/label.md

@@ -0,0 +1,19 @@
+Use the `default` slot to add a label.
+
+```html
+<div class="flex gap-12">
+  <sd-radio-group value="1">
+    <sd-radio-button value="1">
+      <div>Label</div>
+    </sd-radio-button>
+
+    <sd-radio-button value="2">
+      <div>Label</div>
+    </sd-radio-button>
+
+    <sd-radio-button value="3">
+      <div>Label</div>
+    </sd-radio-button>
+  </sd-radio-group>
+</div>
+```

package/metadata/packages/components/sd-radio-button/stories/size.md

@@ -0,0 +1,54 @@
+Use the `size` attribute to change the size:
+
+- `lg` (default)
+- `md`
+- `sm`
+
+```html
+<div class="flex flex-col gap-12">
+  <sd-radio-group value="1" size="lg">
+    <sd-radio-button value="1">
+      <sd-icon name="system/image" slot="icon"></sd-icon>
+      Large
+    </sd-radio-button>
+    <sd-radio-button value="2">
+      <sd-icon name="system/image" slot="icon"></sd-icon>
+      Large
+    </sd-radio-button>
+    <sd-radio-button value="3">
+      <sd-icon name="system/image" slot="icon"></sd-icon>
+      Large
+    </sd-radio-button>
+  </sd-radio-group>
+
+  <sd-radio-group value="1" size="md">
+    <sd-radio-button value="1" size="md">
+      <sd-icon name="system/image" slot="icon"></sd-icon>
+      Medium
+    </sd-radio-button>
+    <sd-radio-button value="2" size="md">
+      <sd-icon name="system/image" slot="icon"></sd-icon>
+      Medium
+    </sd-radio-button>
+    <sd-radio-button value="3" size="md">
+      <sd-icon name="system/image" slot="icon"></sd-icon>
+      Medium
+    </sd-radio-button>
+  </sd-radio-group>
+
+  <sd-radio-group value="1" size="sm">
+    <sd-radio-button value="1">
+      <sd-icon name="system/image" slot="icon"></sd-icon>
+      Small
+    </sd-radio-button>
+    <sd-radio-button value="2">
+      <sd-icon name="system/image" slot="icon"></sd-icon>
+      Small
+    </sd-radio-button>
+    <sd-radio-button value="3">
+      <sd-icon name="system/image" slot="icon"></sd-icon>
+      Small
+    </sd-radio-button>
+  </sd-radio-group>
+</div>
+```