@solid-design-system/mcp 0.0.1

package/metadata/packages/components/sd-spinner/stories/variants.md

@@ -0,0 +1,43 @@
+<sd-notification variant="warning" open class="mb-4">**Warning:** The `sd-spinner` will be deprecated in the future. Please use the `sd-loader` component instead.</sd-notification>
+**Known browser issues:**
+
+- The 'sd-spinner' component may experience spinner animation issues in Safari, causing them to appear wobbly.
+  /
+  export default {
+  title: 'Components/sd-spinner',
+  component: 'sd-spinner',
+  tags: ['!dev', 'autodocs'],
+  args: overrideArgs({ type: 'attribute', name: 'color', value: 'primary' }),
+  argTypes,
+  parameters: {
+  ...parameters,
+  design: {
+  type: 'figma',
+  url: 'https://www.figma.com/design/YDktJcseQIIQbsuCpoKS4V/Component-Docs?node-id=2115-17681&node-type=section&t=5PpAC3TA3kYF7ufX-0'
+  }
+  }
+  };
+  export const Default = {
+  render: (args: any) => {
+  return generateTemplate({ args });
+  }
+  };
+  /\*\*
+  Use the `color` attribute to set the spinner's color:
+- `currentColor` (default): used to inherit the `text-color` from the parent element
+- `primary`: used on light backgrounds
+- `white`: used on primary backgrounds
+
+```html
+<div class="flex flex-row items-center gap-12">
+  <div class="p-4">
+    <sd-spinner color="currentColor"></sd-spinner>
+  </div>
+  <div class="p-4">
+    <sd-spinner color="primary"></sd-spinner>
+  </div>
+  <div class="bg-primary p-4">
+    <sd-spinner color="white"></sd-spinner>
+  </div>
+</div>
+```

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

@@ -0,0 +1,80 @@
+## Overview
+
+`<sd-step>` — Used to determine a step in a process or task inside `sd-step-group`.
+
+## API
+
+### Examples
+
+Use the components tool by passing the args `component` and `example` for any of these combinations:
+
+- component: sd-step, example: size
+- component: sd-step, example: orientation
+- component: sd-step, example: horizontal-inline
+- component: sd-step, example: current
+- component: sd-step, example: waiting
+- component: sd-step, example: disabled
+- component: sd-step, example: as-link
+- component: sd-step, example: no-tail
+- component: sd-step, example: not-interactive
+- component: sd-step, example: icon
+- component: sd-step, example: label
+- component: sd-step, example: description
+- component: sd-step, example: description-and-label-using-attributes
+
+### Key Properties
+
+- prop.size: 'lg'|'sm'|'xs', default='lg' — The step's size.
+- prop.orientation: 'horizontal'|'vertical', default='horizontal' — Determines the orientation of the step.
+- prop.horizontalInline [attr: horizontal-inline]: boolean, default=false — Enables the horizontal inline variant for more compact layout.
+- prop.waiting: boolean, default=false — Sets the step to a waiting state.
+- prop.disabled: boolean, default=false — Sets the step to a disabled state.
+- prop.current: boolean, default=false — Sets the step to an active state.
+- prop.noTail [attr: no-tail]: boolean, default=false — Removes the tail from the step.
+- prop.notInteractive [attr: not-interactive]: boolean, default=false — Determines if the step is not interactive.
+- prop.label: string, default='' — The step's label overwriting the `label` slot. Use the `label` slot for complex label content.
+- prop.description: string, default='' — The step's description overwriting the `description` slot. Use the `description` slot for complex description content.
+- prop.index: number, default=1 — The step's number in a step-group
+- prop.href: string, default='' — When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.
+- 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 step's description.
+- slot.label: The step's label.
+- slot.circle-content: The content inside a step circle. This could be an icon or a number.
+
+### CSS Parts
+
+- part.base: The component's base wrapper.
+- part.circle-and-tail-container: The container that wraps the step's circle and tail.
+- part.circle: The circle that marks the step's state.
+- part.tail: The step's tail.
+- part.text-container: The container that wraps the step's label and description.
+- part.label: The step's label.
+- part.description: The step's description.
+
+## Guidelines
+
+### Rules
+
+### Content
+
+- Keep titles concise, typically between 1 to 2 words.
+- Provide a description when additional context is needed. Use the "default" slot for the description, or the "description" attribute if applicable.
+- Hide the title if desired, depending on design requirements.
+
+### Styling
+
+- Add a content icon to a non-interactive item using the "circle-content" slot.
+- Maintain consistency in icon usage, ensuring icons are either included on all steps or none.
+
+### Background
+
+- Use light background options such as white, neutral-100, or primary-100.

package/metadata/packages/components/sd-step/stories/as-link.md

@@ -0,0 +1,9 @@
+Use the `href` attribute to set a link for the step.
+
+```html
+<div class="w-min">
+  <sd-step href="https://solid-design-system.fe.union-investment.de/docs/?path=/docs/docs-general-introduction--docs">
+    <span slot="label">Step name</span>
+  </sd-step>
+</div>
+```

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

@@ -0,0 +1,9 @@
+Use the `current` attribute to set a step as the current step.
+
+```html
+<div class="w-min">
+  <sd-step current>
+    <span slot="label">Current</span>
+  </sd-step>
+</div>
+```

package/metadata/packages/components/sd-step/stories/description-and-label-using-attributes.md

@@ -0,0 +1,7 @@
+Use the `description` and `label` attributes to set the respective text on the step. These are used as alternatives to using the `default` and `label` slots.
+
+```html
+<div class="w-min">
+  <sd-step label="Label as attribute" description="Description as attribute"></sd-step>
+</div>
+```

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

@@ -0,0 +1,28 @@
+Use the ”default” slot to add a description to the step. Alternatively, you can use the description attribute.
+
+```html
+<div class="h-32 mb-16 w-[200px]">
+  <sd-step orientation="vertical" description="">
+    <span slot="label">Step name</span>
+    <p class="sd-paragraph">Description lorem ipsum sic semper</p>
+  </sd-step>
+</div>
+<div class="mb-16 w-[255px]">
+  <sd-step orientation="horizontal" horizontal-inline>
+    <span slot="label">Step name</span>
+    <p class="sd-paragraph">Description lorem ipsum sic semper</p>
+  </sd-step>
+</div>
+<div class="mb-8 w-[293px]">
+  <sd-step orientation="horizontal">
+    <span slot="label">Step name</span>
+    <p class="sd-paragraph">Description lorem ipsum sic semper</p>
+  </sd-step>
+</div>
+<div class="mb-8 h-[7em]">
+  <sd-step size="xs" orientation="vertical" class="pl-8">
+    <span slot="label">Step name</span>
+    <p class="sd-paragraph">Description lorem ipsum sic semper</p>
+  </sd-step>
+</div>
+```

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

@@ -0,0 +1,9 @@
+Use the `disabled` attribute to disable a step.
+
+```html
+<div class="w-min">
+  <sd-step disabled>
+    <span slot="label">Disabled</span>
+  </sd-step>
+</div>
+```

package/metadata/packages/components/sd-step/stories/horizontal-inline.md

@@ -0,0 +1,9 @@
+Use the `horizontal-inline` attribute to activate the inline option of the horizontal orientation.
+
+```html
+<div class="w-[255px]">
+  <sd-step orientation="horizontal" horizontal-inline>
+    <span slot="label">Horizontal inline</span>
+  </sd-step>
+</div>
+```

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

@@ -0,0 +1,10 @@
+Use the `circle-content` slot to add a content-icon in a non-interactive step.
+
+```html
+<div class="w-[220px]">
+  <sd-step not-interactive>
+    <sd-icon slot="circle-content" name="content/image" class="h-12 w-12"></sd-icon>
+    <span slot="label">Step name</span>
+  </sd-step>
+</div>
+```

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

@@ -0,0 +1,7 @@
+Use the `label` attribute to hide or show the step label.
+
+```html
+<div class="w-min">
+  <sd-step label="Label"></sd-step>
+</div>
+```

package/metadata/packages/components/sd-step/stories/no-tail.md

@@ -0,0 +1,9 @@
+Use the `no-tail` attribute to remove the tail from a step.
+
+```html
+<div class="w-min">
+  <sd-step no-tail>
+    <span slot="label">Completed</span>
+  </sd-step>
+</div>
+```

package/metadata/packages/components/sd-step/stories/not-interactive.md

@@ -0,0 +1,9 @@
+Use the `not-interactive` attribute to make a step non-interactive.
+
+```html
+<div class="w-[220px]">
+  <sd-step not-interactive>
+    <span slot="label">Step name</span>
+  </sd-step>
+</div>
+```

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

@@ -0,0 +1,15 @@
+Use the `orientation` attribute to set the axis of a step:
+
+- `horizontal`(default)
+- `vertical`
+
+```html
+<div class="flex gap-24 w-min">
+  <sd-step orientation="horizontal">
+    <span slot="label">Horizontal</span>
+  </sd-step>
+  <sd-step orientation="vertical">
+    <span slot="label">Vertical</span>
+  </sd-step>
+</div>
+```

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

@@ -0,0 +1,19 @@
+Use the `size` attribute to set the size of a step:
+
+- `lg`(default)
+- `sm`
+- `xs` (only available with vertical orientation)
+
+```html
+<div class="flex gap-12 w-min-content">
+  <sd-step size="lg">
+    <span slot="label">Large</span>
+  </sd-step>
+  <sd-step size="sm">
+    <span slot="label">Small</span>
+  </sd-step>
+  <sd-step size="xs" orientation="vertical" class="pl-16">
+    <span slot="label">Extra Small</span>
+  </sd-step>
+</div>
+```

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

@@ -0,0 +1,9 @@
+Use the `waiting` attribute to set the step as a future step.
+
+```html
+<div class="w-min">
+  <sd-step waiting>
+    <span slot="label">Waiting</span>
+  </sd-step>
+</div>
+```

package/metadata/packages/components/sd-step-group/info.md

@@ -0,0 +1,74 @@
+## Overview
+
+`<sd-step-group>` — Used as navigation bar that guides users through the steps of a process or task.
+
+## API
+
+### Examples
+
+Use the components tool by passing the args `component` and `example` for any of these combinations:
+
+- component: sd-step-group, example: size
+- component: sd-step-group, example: orientation
+- component: sd-step-group, example: horizontal-inline
+- component: sd-step-group, example: active-step
+- component: sd-step-group, example: not-interactive
+- component: sd-step-group, example: icon
+- component: sd-step-group, example: manual-state
+
+### Key Properties
+
+- prop.size: 'lg'|'sm'|'xs', default='lg' — The step-groups's size.
+- prop.orientation: 'horizontal'|'vertical', default='horizontal' — Determines the orientation of the step-group.
+- prop.activeStep [attr: active-step]: number, default=0 — The active step in the step-group. If set to -1, steps have to be managed manually.
+- prop.notInteractive [attr: not-interactive]: boolean, default=false — Determines if the step-group is not interactive.
+- prop.label: string, default='' — A label to use in the step-group. This won't be displayed on the screen, but it will be announced by assistive
+  devices when interacting with the control and is strongly recommended.
+- prop.dir: 'ltr'|'rtl'|'auto' — The element's directionality.
+- prop.lang: string — The element's language.
+
+### Slots
+
+- slot.default: Used for grouping steps in the step group. Must be `<sd-step>` elements.
+
+### CSS Parts
+
+- part.base: The component's base wrapper.
+- part.body: The container that wraps the steps.
+
+## Guidelines
+
+### Use Cases
+
+- Break complex data input tasks, such as filling out forms, into smaller, manageable steps to reduce cognitive strain and improve the user experience.
+- Guide users through workflows that require completion of tasks in a specific order.
+- Divide surveys or questionnaires into steps to make navigation, review, and completion easier and more intuitive.
+
+### Rules
+
+### Content
+
+- Ensure each section has a clear and concise label that describes the task or content.
+- Keep each section manageable; avoid overloading it with too much information or too many tasks.
+
+### User Guidance
+
+- Make it clear to users that they are navigating a multistep process.
+- Indicate the user’s current position and provide feedback on completed steps to help track progress.
+- Provide clear error messages and guidance if users need to correct information before proceeding.
+
+### Navigation
+
+- Arrange sections in a logical, sequential order to guide users, commonly from left to right.
+- Maintain consistent navigation for all steps to avoid user errors; include an option to return to previous steps.
+- Prevent users from skipping sections unless it is absolutely necessary and clearly indicated.
+
+### Layout and Responsiveness
+
+- Use a consistent layout design across all steps to ensure a cohesive experience.
+- Use vertical or horizontal orientations, depending on what suits the process and viewport best.
+- Be aware that choosing a horizontal layout may cause layout issues, such as overflow on small viewports or when the page is zoomed in; consider this when deciding between horizontal and vertical layouts.
+
+### Background
+
+- Use light background options such as white, neutral-100, or primary-100.

package/metadata/packages/components/sd-step-group/stories/active-step.md

@@ -0,0 +1,17 @@
+Use the `active-step` attribute to set the current step.
+
+```html
+<sd-step-group size="lg" orientation="horizontal" active-step="0">
+  <sd-step size="lg" orientation="horizontal">
+    <p slot="label">Step 1</p>
+  </sd-step>
+
+  <sd-step size="lg" orientation="horizontal" current>
+    <p slot="label">Step 2</p>
+  </sd-step>
+
+  <sd-step size="lg" orientation="horizontal" waiting>
+    <p slot="label">Step 3</p>
+  </sd-step>
+</sd-step-group>
+```

package/metadata/packages/components/sd-step-group/stories/horizontal-inline.md

@@ -0,0 +1,17 @@
+Use the `horizontal-inline` attribute to activate the inline option of the horizontal orientation.
+
+```html
+<sd-step-group size="lg" orientation="horizontal" active-step="1" class="w-full" label="Orientation Label">
+  <sd-step size="lg" orientation="horizontal" horizontal-inline>
+    <p slot="label">Step 1</p>
+  </sd-step>
+
+  <sd-step size="lg" orientation="horizontal" horizontal-inline current>
+    <p slot="label">Step 2</p>
+  </sd-step>
+
+  <sd-step size="lg" orientation="horizontal" horizontal-inline waiting>
+    <p slot="label">Step 3</p>
+  </sd-step>
+</sd-step-group>
+```

package/metadata/packages/components/sd-step-group/stories/icon.md

@@ -0,0 +1,20 @@
+Use the `default` slot to add a content-icon.
+
+```html
+<sd-step-group size="lg" orientation="horizontal" active-step="0" not-interactive>
+  <sd-step size="lg" orientation="horizontal" not-interactive>
+    <sd-icon slot="circle-content" name="content/image" class="h-12 w-12"></sd-icon>
+    <div slot="label">Step 1</div>
+  </sd-step>
+
+  <sd-step size="lg" orientation="horizontal" not-interactive>
+    <sd-icon slot="circle-content" name="content/image" class="h-12 w-12"></sd-icon>
+    <div slot="label">Step 2</div>
+  </sd-step>
+
+  <sd-step size="lg" orientation="horizontal" not-interactive>
+    <sd-icon slot="circle-content" name="content/image" class="h-12 w-12"></sd-icon>
+    <div slot="label">Step 3</div>
+  </sd-step>
+</sd-step-group>
+```

package/metadata/packages/components/sd-step-group/stories/manual-state.md

@@ -0,0 +1,23 @@
+Use `active-step` set as `-1` so the `sd-step-group` will not manage the step states automatically.
+States will have to be managed manually with `current`, `waiting`, `disabled` directly on the
+`sd-step` components.
+
+```html
+<sd-step-group size="lg" orientation="horizontal" active-step="-1" label="Manual State Label">
+  <sd-step size="lg" orientation="horizontal">
+    <p slot="label">Default</p>
+  </sd-step>
+
+  <sd-step size="lg" orientation="horizontal" current>
+    <p slot="label">Current</p>
+  </sd-step>
+
+  <sd-step size="lg" orientation="horizontal" disabled>
+    <p slot="label">Disabled</p>
+  </sd-step>
+
+  <sd-step size="lg" orientation="horizontal" waiting>
+    <p slot="label">Waiting</p>
+  </sd-step>
+</sd-step-group>
+```

package/metadata/packages/components/sd-step-group/stories/not-interactive.md

@@ -0,0 +1,17 @@
+Use the `not-interactive` attribute to create a non-interactive step group.
+
+```html
+<sd-step-group size="lg" orientation="horizontal" active-step="0" not-interactive>
+  <sd-step size="lg" orientation="horizontal">
+    <div slot="label">Step 1</div>
+  </sd-step>
+
+  <sd-step size="lg" orientation="horizontal" current>
+    <span slot="label">Step 2</span>
+  </sd-step>
+
+  <sd-step size="lg" orientation="horizontal" waiting>
+    <span slot="label">Step 3</span>
+  </sd-step>
+</sd-step-group>
+```

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

@@ -0,0 +1,39 @@
+Use the `orientation` attribute to set the axis of a step-group:
+
+- `horizontal`(default)
+- `vertical`
+  **Accessibility hint:** Be aware that choosing a horizontal step group layout may cause layout issues, such as overflow, on small viewports or when the page is zoomed in; consider this when deciding between horizontal and vertical layouts.
+
+```html
+<div class="flex flex-col space-y-12">
+  <sd-step-group size="lg" orientation="horizontal" active-step="1" class="w-full" label="Orientation Label">
+    <sd-step size="lg" orientation="horizontal">
+      <p slot="label">Step 1</p>
+    </sd-step>
+
+    <sd-step size="lg" orientation="horizontal" current>
+      <p slot="label">Step 2</p>
+    </sd-step>
+
+    <sd-step size="lg" orientation="horizontal" waiting>
+      <p slot="label">Step 3</p>
+    </sd-step>
+  </sd-step-group>
+
+  <div class="flex h-[20em] pl-[56px]">
+    <sd-step-group size="lg" orientation="vertical" active-step="1" class="w-full">
+      <sd-step size="lg" orientation="vertical">
+        <p slot="label">Step 1</p>
+      </sd-step>
+
+      <sd-step size="lg" orientation="vertical" current>
+        <p slot="label">Step 2</p>
+      </sd-step>
+
+      <sd-step size="lg" orientation="vertical" waiting>
+        <p slot="label">Step 3</p>
+      </sd-step>
+    </sd-step-group>
+  </div>
+</div>
+```

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

@@ -0,0 +1,53 @@
+Use the `size` attribute to set the size of the step-group:
+
+- `lg`(default)
+- `sm`
+- `xs` (only available with vertical orientation)
+
+```html
+<div class="flex flex-col space-y-12">
+  <sd-step-group size="lg" orientation="horizontal" active-step="1" class="w-full" label="Size Label">
+    <sd-step size="lg" orientation="horizontal">
+      <p slot="label">Step 1</p>
+    </sd-step>
+
+    <sd-step size="lg" orientation="horizontal" current>
+      <p slot="label">Step 2</p>
+    </sd-step>
+
+    <sd-step size="lg" orientation="horizontal" waiting>
+      <p slot="label">Step 3</p>
+    </sd-step>
+  </sd-step-group>
+
+  <sd-step-group size="sm" orientation="horizontal" active-step="1" class="w-full">
+    <sd-step size="sm" orientation="horizontal">
+      <p slot="label">Step 1</p>
+    </sd-step>
+
+    <sd-step size="sm" orientation="horizontal" current>
+      <p slot="label">Step 2</p>
+    </sd-step>
+
+    <sd-step size="sm" orientation="horizontal" waiting>
+      <p slot="label">Step 3</p>
+    </sd-step>
+  </sd-step-group>
+
+  <div class="h-[20em] pl-[56px]">
+    <sd-step-group size="xs" orientation="vertical" active-step="1" label="Extra Small">
+      <sd-step size="xs" orientation="vertical">
+        <p slot="label">Step 1</p>
+      </sd-step>
+
+      <sd-step size="xs" orientation="vertical" current>
+        <p slot="label">Step 2</p>
+      </sd-step>
+
+      <sd-step size="xs" orientation="vertical" waiting>
+        <p slot="label">Step 3</p>
+      </sd-step>
+    </sd-step-group>
+  </div>
+</div>
+```

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

@@ -0,0 +1,79 @@
+## Overview
+
+`<sd-switch>` — Used to give control over an option that can be toggled on or off.
+
+## API
+
+### Examples
+
+Use the components tool by passing the args `component` and `example` for any of these combinations:
+
+- component: sd-switch, example: checked
+- component: sd-switch, example: disabled
+- component: sd-switch, example: required
+- component: sd-switch, example: invalid
+
+### Key Properties
+
+- prop.title: string, default='' — The `title` attribute specifies extra information about an element most often as a default browser tooltip text when the mouse moves over the element.
+- prop.name: string, default='' — The name of the switch, submitted as a name/value pair with form data.
+- prop.value: string — The current value of the switch, submitted as a name/value pair with form data.
+- prop.disabled: boolean, default=false — Disables the switch.
+- prop.checked: boolean, default=false — Draws the switch in a checked state.
+- prop.defaultChecked: boolean, default=false — The default value of the form control. Primarily used for resetting the form control.
+- 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.required: boolean, default=false — Makes the switch a required field.
+- 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 switch loses focus.
+- event.sd-change: Emitted when the checked state changes.
+- event.sd-focus: Emitted when the switch gains focus.
+- event.sd-input: Emitted when the switch receives input.
+
+### Slots
+
+- slot.default: The switch's label.
+- slot.tooltip: An optional tooltip that helps describe the switch. Use this slot with the `sd-tooltip` component.
+
+### CSS Parts
+
+- part.base: The component's base wrapper.
+- part.control: The square container that wraps the switch's state.
+- part.control--checked: Matches the control part when the switch is on.
+- part.control--unchecked: Matches the control part when the switch is off.
+- part.thumb: The circle that marks the switch's state.
+- part.label: The container that wraps the switch's label.
+
+## Guidelines
+
+### Use Cases
+
+- Allow users to switch between two states.
+- Use to enable or disable settings, such as turning notifications on or off.
+- Toggle features or functionalities within an application, applying changes immediately.
+
+### Rules
+
+### Content
+
+- Make sure both the label and action are clear by using appropriate text.
+- Place label text on top of the control, such as in a header, while action text should be placed to the right, next to the control.
+- Use adjectives to describe actions, as they are less ambiguous than verbs.
+- Limit use to binary choices, such as "on/off" or "yes/no".
+
+### Behavior
+
+- Use for actions that take effect immediately without requiring additional confirmation.
+- Ensure the visual state accurately reflects its functional state.
+- If it's unclear whether the component is showing a state or an action, use [sd-checkbox](./?path=/docs/components-sd-checkbox--docs) instead.
+
+### Accessibility
+
+- Consider alternatives to switches, as many users may find them confusing.
+- If the switch triggers dynamic changes (e.g., loading new content), provide a corresponding announcement.

package/metadata/packages/components/sd-switch/stories/checked.md

@@ -0,0 +1,5 @@
+Use the `checked` attribute to activate the switch.
+
+```html
+<sd-switch checked>Checked</sd-switch>
+```

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

@@ -0,0 +1,5 @@
+Use the `disabled` attribute to disable the switch. Clicks will be suppressed until the disabled state is removed.
+
+```html
+<sd-switch disabled>Disabled</sd-switch>
+```