@solid-design-system/mcp 0.0.1

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

@@ -0,0 +1,26 @@
+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
+<div class="flex gap-12 h-[100px] pt-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-tooltip content="Visually disabled" trigger="hover focus" size="sm">
+      <sd-radio-button value="2" visually-disabled>
+        <sd-icon name="system/image" slot="icon"></sd-icon>
+        Visually disabled
+      </sd-radio-button>
+    </sd-tooltip>
+
+    <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-group/info.md

@@ -0,0 +1,91 @@
+## Overview
+
+`<sd-radio-group>` — Used to group multiple `sd-radio` or `sd-radio-button` components so they function as a single form control.
+
+## API
+
+### Examples
+
+Use the components tool by passing the args `component` and `example` for any of these combinations:
+
+- component: sd-radio-group, example: size
+- component: sd-radio-group, example: label
+- component: sd-radio-group, example: orientation
+- component: sd-radio-group, example: required
+- component: sd-radio-group, example: help-text
+- component: sd-radio-group, example: disabled
+- component: sd-radio-group, example: invalid
+
+### Key Properties
+
+- prop.size: 'lg'|'md'|'sm', default='lg' — The radio group's size. This size will be applied to the label, all child radios and radio buttons.
+- prop.required: boolean, default=false — Ensures a child radio is checked before allowing the containing form to submit.
+- prop.orientation: 'horizontal'|'vertical', default='vertical' — The orientation property determines the alignment of the component's content or elements. It accepts two possible
+  values: 'horizontal' and 'vertical'. The default value is 'vertical'.
+  This property allows you to control the visual layout and arrangement of elements within the component, providing
+  flexibility in how the component is displayed based on your specific design needs.
+- prop.label: string, default='' — The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot
+  instead.
+- prop.helpText [attr: help-text]: string, default='' — The element help text. If you need to display HTML, use the `help-text` slot instead.
+- prop.name: string, default='option' — The name of the radio group, submitted as a name/value pair with form data.
+- prop.value: string, default='' — The current value of the radio group, submitted as a name/value pair with form data.
+- prop.form: string, default='' — By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
+  to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
+  the same document or shadow root for this to work.
+- prop.validity: — Gets the validity state object
+- prop.validationMessage: — Gets the validation message
+- prop.dir: 'ltr'|'rtl'|'auto' — The element's directionality.
+- prop.lang: string — The element's language.
+
+### Events
+
+- event.sd-change: Emitted when the radio group's selected value changes.
+- event.sd-input: Emitted when the radio group receives user input.
+- event.sd-invalid: Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+
+### Slots
+
+- slot.default: The default slot where `<sd-radio>` or `<sd-radio-button>` elements are placed.
+- slot.label: The radio group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.
+- slot.help-text: Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
+- slot.tooltip: An optional tooltip that helps describe the radio-group. Use this slot with the `sd-tooltip` component.
+
+### CSS Parts
+
+- part.form-control: The form control that wraps the label, input, and error text.
+- part.form-control-label: The label's wrapper.
+- part.form-control-input: The input's wrapper.
+- part.button-group: The button group that wraps radio buttons.
+- part.button-group\_\_base: The button group's `base` part.
+
+## Guidelines
+
+### Use Cases
+
+- Present options in forms where only one selection is allowed (e.g., gender selection, payment methods).
+- Provide clear and concise choices in settings or configuration panels.
+- Enable users to make a selection in surveys or questionnaires.
+- Offer options in filter panels where only one filter can be applied at a time.
+
+### Rules
+
+### Grouping and Labels
+
+- Group related options together using fieldsets and legends for better context and accessibility.
+- Provide a group label that states the category or describes the actions to take.
+
+### Selection Behavior
+
+- Provide a default selected option; never display options without a default selection.
+- Do not disable all choices in a group; if a selection is not applicable, consider hiding the group instead.
+- Use only when users need to select one option; for multiple selections, use checkboxes instead.
+
+### Background
+
+- Use with light background options such as white, neutral-100, or primary-100.
+
+### Accessibility
+
+- Ensure that the group label is short and concise as it may be read out when users enter the group.
+- Ensure radios are easily tappable on touch devices.
+- 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-group/stories/disabled.md

@@ -0,0 +1,10 @@
+Use the `disabled` attribute to disable an input radio. Clicks will be suppressed until the disabled state is removed.
+
+```html
+  <sd-radio-group name="radio-group" label="Disabled group" required>
+    <sd-radio value="1" disabled>Radio 1</sd-radio>
+    <sd-radio value="2" disabled>Radio 2</sd-radio>
+    <sd-radio value="3" disabled>Radio 3</sd-radio>
+  </sd-radio-group>
+</form>
+```

package/metadata/packages/components/sd-radio-group/stories/help-text.md

@@ -0,0 +1,12 @@
+Use the `help-text` attribute to add a descriptive “help text”.
+For help texts that contain HTML, use the `help-text` slot instead.
+
+```html
+<div class="flex gap-12">
+  <sd-radio-group orientation="vertical" value="1" help-text="Help text attribute" label="Group label" 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>
+  </sd-radio-group>
+</div>
+```

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

@@ -0,0 +1,23 @@
+The component gets the `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" label="Invalid group" 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>
+  </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.setCustomValidity('Please fill in this field.');
+      input.reportValidity();
+    }
+  );
+</script>
+```

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

@@ -0,0 +1,9 @@
+Use the `label` attribute to add a label on top.
+
+```html
+<sd-radio-group name="radio-group" value="1" label="Group label">
+  <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>
+```

package/metadata/packages/components/sd-radio-group/stories/orientation.md

@@ -0,0 +1,20 @@
+Use the `orientation` attribute to set the axis of the radio buttons:
+
+- `vertical` (default)
+- `horizontal`
+
+```html
+<div class="flex gap-12">
+  <sd-radio-group name="radio-group" orientation="vertical" value="1" label="Group label">
+    <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 name="radio-group" orientation="horizontal" value="1" label="Group label">
+    <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-group/stories/required.md

@@ -0,0 +1,28 @@
+Use the `required` attribute to mark the element as required. This can be used for form validation purposes.
+**Accessibility Hint:** To ensure screen-reader compatibility, consider including a statement such as "Fields marked with an asterisk (\*) are required" at the start of the form.
+
+```html
+<form id="required-form" class="flex flex-col gap-8">
+  <sd-radio-group name="radio-group" label="Required group" 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>
+  </sd-radio-group>
+  <div class="flex gap-2">
+    <sd-button class="w-min" type="submit">Submit</sd-button>
+    <sd-button class="w-min" type="reset" variant="secondary">Reset</sd-button>
+  </div>
+</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 form = document.getElementById('required-form');
+      form.addEventListener('submit', event => {
+        event.preventDefault();
+        alert('This field is valid!');
+      });
+    }
+  );
+</script>
+```

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

@@ -0,0 +1,20 @@
+Use the `size` attribute to change the size of the input radio. This attribute affects the font-size within the element, while the element itself remains the same size:
+
+- `lg` (default)
+- `sm`
+
+```html
+<div class="flex gap-12">
+  <sd-radio-group name="large-radio-group" size="lg" value="1" label="Group label">
+    <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 name="small-radio-group" size="sm" value="1" label="Group label">
+    <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-range/info.md

@@ -0,0 +1,101 @@
+## Overview
+
+`<sd-range>` — Used to allow users to select a single or multiple values within a defined range using a slider.
+
+## API
+
+### Examples
+
+Use the components tool by passing the args `component` and `example` for any of these combinations:
+
+- component: sd-range, example: tooltip-formatter
+
+### Key Properties
+
+- prop.tooltipFormatter: (value: number) => string — A function used to format the tooltip's value.
+  The value of the thumb is passed as the only argument.
+  The function should return a string to display in the tooltip.
+- prop.name: string, default='' — The name of the range, submitted as a name/value pair with form data.
+- prop.label: string, default='' — The range's label. If you need to display HTML, use the `label` slot instead.
+- prop.helpText [attr: help-text]: string, default='' — The range's help text. If you need to display HTML, use the help-text slot instead.
+- prop.min: number, default=0 — The minimum acceptable value of the range.
+- prop.max: number, default=100 — The maximum acceptable value of the range.
+- prop.step: number, default=1 — The interval at which the range will increase and decrease.
+- prop.disabled: boolean, default=false — Disables the range.
+- prop.visuallyDisabled [attr: visually-disabled]: boolean, default=false — Disables the range visually.
+- prop.noTrackBar [attr: no-track-bar]: boolean, default=false — Disables the active track bar.
+- prop.tooltip: |'on-interaction'|'hidden'|'always-visible', default='on-interaction' — Defines the thumbs tooltip behaviour.
+- prop.defaultValue: string, default='' — The default value of the form control. Primarily used for resetting the form control.
+- prop.value: — The current values of the input (in ascending order) as a string of space separated values
+- prop.valueAsArray: — Gets or sets the current values of the range as an array of numbers
+- prop.validity: — Gets the validity state object
+- 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-change: Emitted when an alteration to the control's value is committed by the user.
+- event.sd-focus: Emitted when the control gains focus.
+- event.sd-input: Emitted when the control receives input.
+- event.sd-move: Emitted when the user moves a thumb, either via touch or keyboard. Use `Event.preventDefault()` to prevent movement.
+
+### Slots
+
+- slot.default: The default slot.
+- slot.help-text: Text that describes how to use the range. Alternatively, you can use the `help-text` attribute.
+- slot.label: The range's label. Alternatively, you can use the `label` attribute.
+- slot.scale-ticks: Used to display tick marks at specific intervals along the range.
+
+### CSS Parts
+
+- part.form-control: The form control that wraps the label, input, and help text.
+- part.form-control-label: The label's wrapper.
+- part.form-control-help-text: The help text's wrapper.
+- part.base: The component's base wrapper.
+- part.input-wrapper: The container that wraps the input track and ticks.
+- part.track-wrapper: The wrapper for the track.
+- part.track: The inactive track.
+- part.active-track: The active track.
+- part.track-click-helper: The element that increases the track clickable area.
+- part.thumb: The thumb(s) that the user can drag to change the range.
+- part.scale-ticks: The container that wraps the tick marks.
+
+## Guidelines
+
+### Use Cases
+
+- Adjust settings within a defined range (e.g., volume, brightness).
+- Filter results by specifying a price range or product parameters.
+- Select time intervals for scheduling or reminder tasks.
+- Set minimum and maximum inputs (e.g., age, quantity, distance).
+- Visualize progress by assigning milestones within a larger goal or process.
+
+### Rules
+
+### Labels and Value Display
+
+- Provide clear labels or tooltips indicating the current value or range.
+- Pair the slider with text labels or numeric indicators for precise adjustments.
+- Avoid relying solely on color or visuals; add a text representation for clarity.
+
+### Range Definition
+
+- Choose realistic minimum and maximum values for the intended use case.
+- Avoid extremely large intervals (e.g., 1 to 1,000,000) unless necessary, and label them thoroughly.
+- Use appropriate step sizes for fine control (e.g., increments of 5 or 10 for a price slider).
+- Enable two-handle sliders (min/max) if the scenario requires independent adjustments.
+
+### Context
+
+- Position the range component in an uncluttered area to facilitate easy interaction.
+- Reserve the component for relevant, contextually meaningful ranges (e.g., price filters, time spans).
+
+### Background
+
+- Use light background options like white, neutral-100 or primary-100.
+
+### Accessibility
+
+- Always provide a label for the range so that screenreaders correctly announce the component.
+- Provide alternative input methods like numeric input fields or a stepper, allowing users who struggle with dragging to manually set values.

package/metadata/packages/components/sd-range/stories/tooltip-formatter.md

@@ -0,0 +1,13 @@
+Use the `tooltipFormatter` to customize the display of the value inside the tooltip. The function received the thumb as the only argument and should return a string to display in the tooltip.
+
+```html
+<div class="min-h-20 tooltip-formatter">
+  <sd-range style label="Money spent" max="100" step="1" tooltip="on-interaction" value="25"> </sd-range>
+</div>
+<script>
+  Promise.all([customElements.whenDefined('sd-range')]).then(() => {
+    document.querySelector('.tooltip-formatter sd-range').tooltipFormatter = v =>
+      '€' + v.toLocaleString('en-US') + ' of €100 spent';
+  });
+</script>
+```

package/metadata/packages/components/sd-range-tick/info.md

@@ -0,0 +1,21 @@
+## Overview
+
+`<sd-range-tick>` — Used to represent a tick within `sd-range`.
+
+## API
+
+### Key Properties
+
+- prop.subtick: boolean, default=false — Whether the tick should be shown as a subtick.
+- prop.dir: 'ltr'|'rtl'|'auto' — The element's directionality.
+- prop.lang: string — The element's language.
+
+### Slots
+
+- slot.default: The tick's label
+
+### CSS Parts
+
+- part.base: The component's base wrapper.
+- part.label: The component's label.
+- part.line: The component's tick line.

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

@@ -0,0 +1,87 @@
+## Overview
+
+`<sd-scrollable>` — Used as a container to create scrollable sections within the user interface.
+
+## API
+
+### Examples
+
+Use the components tool by passing the args `component` and `example` for any of these combinations:
+
+- component: sd-scrollable, example: orientation
+- component: sd-scrollable, example: scrollbar
+- component: sd-scrollable, example: buttons
+- component: sd-scrollable, example: shadows
+- component: sd-scrollable, example: inset
+- component: sd-scrollable, example: step
+
+### Key Properties
+
+- prop.orientation: 'horizontal'|'vertical'|'auto', default='horizontal' — Defines the scroll orientation
+- prop.scrollbars: boolean, default=false — Activates browser scrollbars
+- prop.buttons: boolean, default=false — Activates scroll buttons
+- prop.shadows: boolean, default=false — Activates a shadow as optional visual scroll indicator
+- prop.inset: boolean, default=false — Adds inset padding
+- prop.step: number, default=150 — The amount in px to be scrolled when clicking the buttons.
+- prop.dir: 'ltr'|'rtl'|'auto' — The element's directionality.
+- prop.lang: string — The element's language.
+
+### Events
+
+- event.start: Emitted when the start of the scrollable is reached.
+- event.end: Emitted when the end of the scrollable is reached.
+- event.eventName:
+- event.button-left: Emitted when the left button is clicked.
+- event.button-right: Emitted when the right button is clicked.
+- event.button-up: Emitted when the top button is clicked.
+- event.button-down: Emitted when the bottom button is clicked.
+
+### Slots
+
+- slot.default: The scrollable's content.
+- slot.icon-start: The scrollable's start icon.
+- slot.icon-end: The scrollable's end icon.
+
+### CSS Parts
+
+- part.base: The scrollable's base wrapper.
+- part.scroll-content: The scrollable's content.
+- part.button-start: The scrollable's start scroll button.
+- part.button-end: The scrollable's end scroll button.
+- part.button-left: The scrollable's left scroll button.
+- part.button-right: The scrollable's right scroll button.
+- part.button-top: The scrollable's top scroll button.
+- part.button-bottom: The scrollable's bottom scroll button.
+- part.shadow-left: The scrollable's left shadow.
+- part.shadow-right: The scrollable's right shadow.
+- part.shadow-top: The scrollable's top shadow.
+- part.shadow-bottom: The scrollable's bottom shadow.
+
+## Guidelines
+
+### Use Cases
+
+- Present long lists or detailed information that exceeds the visible area.
+
+### Rules
+
+### Content
+
+- Ensure critical information is not hidden within scrollable areas; users should not have to scroll to find essential content.
+
+### Behavior
+
+- Use visual cues like shadows or buttons to indicate scrollable content when simply cutting off hidden content isn't enough.
+- Avoid disabling scrollbars, as they provide essential visual cues for users.
+- Limit the use of scrollable containers; excessive scrolling can be frustrating for users.
+- Prefer vertical scrolling over horizontal scrolling, especially on mobile devices.
+
+### Responsiveness
+
+- Test whether your scrollable containers adapts well to different screen sizes and orientations.
+- Avoid setting fixed heights for scrollable containers if the content size can vary significantly.
+
+### Accessibility
+
+- Ensure keyboard users can access and scroll within the container making the container focusable (tabindex="0") and allow arrow keys to navigate through the content.
+- Verify that any interactive elements within the scrollable container receive a proper focus highlight and move into the visible frame.

package/metadata/packages/components/sd-scrollable/stories/buttons.md

@@ -0,0 +1,15 @@
+Use the `buttons` attribute to display buttons indicating scrollable content.
+
+```html
+<sd-scrollable orientation="vertical" buttons>
+  <div class="items-start h-max p-4 text-sm justify-start">
+    <p>
+      Union Investment has extended its lease with Converse, the footwear and apparel brand known for its deep
+      connection to youth culture, at 1 Lovejoy Wharf in Boston. The contract for around 20,000 sqm of state-of-the-art
+      office space was renewed long-term. The building has been part of the UniImmo: Global open-ended real estate fund
+      portfolio since 2016 and is the global headquarters of the lifestyle brand, which has been part of NIKE, Inc.
+      since 2003.
+    </p>
+  </div>
+</sd-scrollable>
+```

package/metadata/packages/components/sd-scrollable/stories/inset.md

@@ -0,0 +1,15 @@
+Use the `inset` attribute to adjust the inset padding.
+
+```html
+<sd-scrollable orientation="vertical" shadows inset>
+  <div class="items-start h-max p-4 text-sm justify-start">
+    <p>
+      Union Investment has extended its lease with Converse, the footwear and apparel brand known for its deep
+      connection to youth culture, at 1 Lovejoy Wharf in Boston. The contract for around 20,000 sqm of state-of-the-art
+      office space was renewed long-term. The building has been part of the UniImmo: Global open-ended real estate fund
+      portfolio since 2016 and is the global headquarters of the lifestyle brand, which has been part of NIKE, Inc.
+      since 2003.
+    </p>
+  </div>
+</sd-scrollable>
+```

package/metadata/packages/components/sd-scrollable/stories/orientation.md

@@ -0,0 +1,32 @@
+Use the `orientation` attribute to set the scroll direction of the component:
+
+- `horizontal` (default)
+- `vertical`
+- `auto`
+
+```html
+<div class="flex gap-12">
+  <sd-scrollable orientation="horizontal">
+    <div class="flex h-40 items-start w-max p-4 gap-1">
+      <sd-tag size="lg">Tag 1</sd-tag>
+      <sd-tag size="lg">Tag 2</sd-tag>
+      <sd-tag size="lg">Tag 3</sd-tag>
+      <sd-tag size="lg">Tag 4</sd-tag>
+      <sd-tag size="lg">Tag 5</sd-tag>
+      <sd-tag size="lg">Tag 6</sd-tag>
+    </div>
+  </sd-scrollable>
+
+  <sd-scrollable orientation="vertical" style="height:135px;">
+    <div class="self-start p-4 text-sm justify-start">
+      <p>
+        Union Investment has extended its lease with Converse, the footwear and apparel brand known for its deep
+        connection to youth culture, at 1 Lovejoy Wharf in Boston. The contract for around 20,000 sqm of
+        state-of-the-art office space was renewed long-term. The building has been part of the UniImmo: Global
+        open-ended real estate fund portfolio since 2016 and is the global headquarters of the lifestyle brand, which
+        has been part of NIKE, Inc. since 2003.
+      </p>
+    </div>
+  </sd-scrollable>
+</div>
+```

package/metadata/packages/components/sd-scrollable/stories/scrollbar.md

@@ -0,0 +1,15 @@
+Use the `scrollbars` attribute to display browser scrollbars.
+
+```html
+<sd-scrollable orientation="vertical" buttons scrollbars>
+  <div class="items-start h-max p-4 text-sm justify-start">
+    <p>
+      Union Investment has extended its lease with Converse, the footwear and apparel brand known for its deep
+      connection to youth culture, at 1 Lovejoy Wharf in Boston. The contract for around 20,000 sqm of state-of-the-art
+      office space was renewed long-term. The building has been part of the UniImmo: Global open-ended real estate fund
+      portfolio since 2016 and is the global headquarters of the lifestyle brand, which has been part of NIKE, Inc.
+      since 2003.
+    </p>
+  </div>
+</sd-scrollable>
+```

package/metadata/packages/components/sd-scrollable/stories/shadows.md

@@ -0,0 +1,15 @@
+Use the `shadows` attribute to display visual cues indicating scrollable content.
+
+```html
+<sd-scrollable orientation="vertical" shadows>
+  <div class="items-start h-max p-4 text-sm justify-start">
+    <p>
+      Union Investment has extended its lease with Converse, the footwear and apparel brand known for its deep
+      connection to youth culture, at 1 Lovejoy Wharf in Boston. The contract for around 20,000 sqm of state-of-the-art
+      office space was renewed long-term. The building has been part of the UniImmo: Global open-ended real estate fund
+      portfolio since 2016 and is the global headquarters of the lifestyle brand, which has been part of NIKE, Inc.
+      since 2003.
+    </p>
+  </div>
+</sd-scrollable>
+```

package/metadata/packages/components/sd-scrollable/stories/step.md

@@ -0,0 +1,15 @@
+Use the `step` attribute to set the amount of pixels to scroll when clicking the buttons.
+
+```html
+<sd-scrollable orientation="vertical" buttons step="50">
+  <div class="items-start h-max p-4 text-sm justify-start">
+    <p>
+      Union Investment has extended its lease with Converse, the footwear and apparel brand known for its deep
+      connection to youth culture, at 1 Lovejoy Wharf in Boston. The contract for around 20,000 sqm of state-of-the-art
+      office space was renewed long-term. The building has been part of the UniImmo: Global open-ended real estate fund
+      portfolio since 2016 and is the global headquarters of the lifestyle brand, which has been part of NIKE, Inc.
+      since 2003.
+    </p>
+  </div>
+</sd-scrollable>
+```