@solid-design-system/mcp 0.0.1

package/metadata/packages/components/sd-icon/stories/custom-libraries.md

@@ -0,0 +1,119 @@
+You can register additional icons to use with the `<sd-icon>` component through custom icon libraries. Icon files can exist locally or on a CORS-enabled endpoint (e.g. a CDN). There is no limit to how many icon libraries you can register and there is no cost associated with registering them, as individual icons are only requested when they're used.
+To register an additional icon library, use the `registerIconLibrary()` function that's exported from `utilities/icon-library.js`. At a minimum, you must provide a name and a resolver function. The resolver function translates an icon name to a URL where the corresponding SVG file exists. Refer to the examples below to better understand how it works.
+If necessary, a mutator function can be used to mutate the SVG element before rendering. This is necessary for some libraries due to the many possible ways SVGs are crafted. For example, icons should ideally inherit the current text color via currentColor, so you may need to apply fill="currentColor or stroke="currentColor" to the SVG element using this function.
+Here's an example that registers an icon library located in the `/assets/icons` directory.
+
+```html
+<script type="module">
+  import { registerIconLibrary } from '@solid-design-system/components/dist/components/icon/library';
+  registerIconLibrary('my-icons', {
+    resolver: name => `/assets/icons/${name}.svg`,
+    mutator: svg => svg.setAttribute('fill', 'currentColor')
+  });
+</script>
+```
+
+If you use the IIFE bundle, you have to access the `registerIconLibrary()` function from the `SolidComponents` global.
+
+```html
+<script src="https://solid-design-system.fe.union-investment.de/components/%COMPONENTS-VERSION%/cdn/solid-components.iife.js"></script>
+<script>
+  const { registerIconLibrary } = window['SolidComponents'];
+  registerIconLibrary('my-icons', {
+    resolver: name => `/assets/icons/${name}.svg`,
+    mutator: svg => svg.setAttribute('fill', 'currentColor')
+  });
+</script>
+```
+
+Please have in mind, that you have to make sure that `window['SolidComponents']` is available before you call `registerIconLibrary()` e. g. via polling or similar.
+To display an icon, set the library and name attributes of an <sd-icon> element.
+
+```html
+<!-- This will show the icon located at /assets/icons/smile.svg -->
+<sd-icon library="my-icons" name="smile"></sd-icon>
+```
+
+You can even version your icon libraries:
+
+```html
+<script type="module">
+  import { registerIconLibrary } from '@solid-design-system/components/unversioned/icon/library';
+  registerIconLibrary('my-icons-2-3-0', {
+    resolver: name => `/2-3-0/assets/icons/${name}.svg`,
+    mutator: svg => svg.setAttribute('fill', 'currentColor')
+  });
+</script>
+```
+
+If an icon is used before registration occurs, it will be empty initially but shown when registered.
+The following examples demonstrate how to register icons from Union Investment's Global Resources CDN. Checkout [Shoelace's Docs](https://shoelace.style/components/icon?id=icon-libraries)
+to examples of popular, open source icon libraries.
+
+```html
+<sd-icon name="system/image"> </sd-icon>
+
+<script type="module">
+  // ESM:
+  // import { registerIconLibrary } from '@solid-design-system/components/unversioned/icon/library';
+
+  // IIFE:
+  // const { registerIconLibrary } = window['SolidComponents'];
+
+  // preview-ignore:start
+  // Note on this script:
+  // - It's actual registration happens in preview.js, here it is replicated for the code preview.
+  // - To prevent errors, the registration is wrapped in a hidden conditional statement that is always false.
+  if (false) {
+    // preview-ignore:end
+    registerIconLibrary('global-resources', {
+      resolver: name => {
+        // split path and name
+        let path = name.split('/');
+        let iconName = path.pop();
+
+        // "system" and "system/colored" should both resolve to "system/colored", same for "content"
+        if (path.length === 1) {
+          path.push('colored');
+        }
+
+        return (
+          'https://global-resources.fe.union-investment.de/latest/scripts/services/svg/icons/' +
+          path.join('/') +
+          '/' +
+          iconName +
+          '.svg'
+        );
+      },
+
+      // We need currentColor as the main color for the icons
+      mutator: svg => {
+        const recoloredElements = {};
+        recoloredElements['currentColorFills'] = svg.querySelectorAll('[fill="#00358e"], [fill="#fff"]');
+        recoloredElements['currentColorStrokes'] = svg.querySelectorAll('[stroke="#00358e"], [stroke="#fff"]');
+        recoloredElements['greenFills'] = svg.querySelectorAll('[fill="#43b02a"]');
+        recoloredElements['greenStrokes'] = svg.querySelectorAll('[stroke="#43b02a"]');
+
+        recoloredElements.currentColorFills.forEach(filledElement => {
+          filledElement.setAttribute('fill', 'currentColor');
+        });
+
+        recoloredElements.currentColorStrokes.forEach(strokedElement => {
+          strokedElement.setAttribute('stroke', 'currentColor');
+        });
+
+        recoloredElements.greenFills.forEach(filledElement => {
+          filledElement.setAttribute('fill', 'var(--sd-color-accent, 45 157 0)');
+        });
+
+        recoloredElements.greenStrokes.forEach(strokedElement => {
+          strokedElement.setAttribute('stroke', 'var(--sd-color-accent, 45 157 0)');
+        });
+        return svg;
+      }
+    });
+    // preview-ignore:start
+  }
+  // preview-ignore:end
+</script>
+```

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

@@ -0,0 +1,12 @@
+Use the `label` attribute to announce non-decorative icons to assistive devices.
+
+```html
+<div class="flex gap-2">
+  <sd-button variant="tertiary" size="sm"
+    ><sd-icon name="union-investment/system/arrow-left" label="Back"></sd-icon
+  ></sd-button>
+  <sd-button variant="tertiary" size="sm"
+    ><sd-icon name="union-investment/system/arrow-right" label="Next"></sd-icon
+  ></sd-button>
+</div>
+```

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

@@ -0,0 +1,38 @@
+Solid ships with three public icon libraries, `default`, `sd-status-assets`, and `sd-multi-theming`:
+
+- `default`: The `default` icon library refers to the official CDN by Union Investment which is fed by Celum. It is provided by the brand department, therefore requests towards the icons itself need to be addressed accordingly. Checkout [content](?path=/story/components-sd-icon-libraries-default--content) and [system](?path=/story/components-sd-icon-libraries-default--system) for available icons.
+- `sd-status-assets`: This library contains icons specifically for status indicators like the `sd-status-badge` component. They are maintained by the Solid team. Checkout [status](?path=/story/components-sd-icon-libraries--status-library) for available icons.
+- `sd-multi-theming`: A smaller set of icons that is multi-theming compatible. They will automatically display the correct variant when the theme changes. They are maintained by the Solid team. Check out [content](?path=/story/components-sd-icon-libraries-multi-theming--content) and [system](?path=/story/components-sd-icon-libraries-multi-theming--system) for available icons.
+  <sd-notification variant="warning" open class="mt-4">The library <code>sd-multi-theming</code> is currently in public beta.</sd-notification>
+
+```html
+<div class="flex flex-col gap-12">
+  <div>
+    <h3 class="sd-headline sd-headline--size-base mb-4">Default Library</h3>
+    <div class="flex gap-6">
+      <sd-icon color="primary" name="union-investment/content/image"></sd-icon>
+      <sd-icon color="primary" name="union-investment/system/image"></sd-icon>
+    </div>
+  </div>
+
+  <div>
+    <h3 class="sd-headline sd-headline--size-base mb-4">Status Library</h3>
+    <div class="flex gap-6">
+      <sd-icon color="primary" library="sd-status-assets" name="status-check"></sd-icon>
+      <sd-icon color="primary" library="sd-status-assets" name="status-exclamation"></sd-icon>
+      <sd-icon color="primary" library="sd-status-assets" name="status-close"></sd-icon>
+    </div>
+  </div>
+
+  <div>
+    <h3 class="sd-headline sd-headline--size-base mb-4">Multi-Theming Library</h3>
+    <div class="flex gap-6">
+      <sd-icon color="primary" library="sd-multi-theming" name="system/image"></sd-icon>
+      <sd-icon class="sd-theme-bb" color="primary" library="sd-multi-theming" name="system/image"></sd-icon>
+      <sd-icon class="sd-theme-vb" color="primary" library="sd-multi-theming" name="system/image"></sd-icon>
+      <sd-icon class="sd-theme-sp" color="primary" library="sd-multi-theming" name="system/image"></sd-icon>
+      <sd-icon class="sd-theme-kid" color="primary" library="sd-multi-theming" name="system/image"></sd-icon>
+    </div>
+  </div>
+</div>
+```

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

@@ -0,0 +1,36 @@
+**Used to display icons.**
+Icons can be used to indicate an action or to represent content.
+**Related templates**:
+
+- [Tab Group with Icon and Badge](?path=/docs/templates-tab-group--docs#tab%20group%20with%20icon%20and%20badge)
+  /
+  export default {
+  title: 'Components/sd-icon',
+  tags: ['!dev', 'autodocs', 'skip-playwright'],
+  component: 'sd-icon',
+  args: overrideArgs([{ name: 'name', type: 'attribute', value: 'union-investment/content/image' }], args),
+  argTypes,
+  parameters: { ...parameters, docsOnly: true }
+  };
+  export const Default = {
+  render: (args: any) => {
+  return generateTemplate({ args });
+  }
+  };
+  /\*\*
+  Use the `name` attribute to change the icon. Checkout these lists of Union Investment's icons for available names:
+- [Content Icons](?path=/story/components-sd-icon-default--library-default-content)
+- [System Icons](?path=/story/components-sd-icon-default--library-default-system)
+
+```html
+<div class="flex flex-col gap-12">
+  <div class="flex gap-12">
+    <sd-icon name="union-investment/content/image" label="Simplified picture frame"></sd-icon>
+    <sd-icon name="union-investment/system/image" label="Very simplified picture frame"></sd-icon>
+  </div>
+  <div class="flex gap-12">
+    <sd-icon name="union-investment/content/alarm" label="Simplified alarm bell"></sd-icon>
+    <sd-icon name="union-investment/system/alarm" label="Very simplified alarm bell"></sd-icon>
+  </div>
+</div>
+```

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

@@ -0,0 +1,10 @@
+Icons are sized relative to the current font size. To change their size, set the `font-size` property on the icon itself or on a parent element.
+
+```html
+<div class="flex gap-6">
+  <sd-icon class="text-sm" name="union-investment/content/image" label="Small picture frame"></sd-icon>
+  <sd-icon name="union-investment/content/image" label="Picture frame which inherits the size"></sd-icon>
+  <sd-icon class="text-xl" name="union-investment/content/image" label="Extra large picture frame"></sd-icon>
+  <sd-icon style="font-size: 36px" name="union-investment/content/image" label="Even larger picture frame"></sd-icon>
+</div>
+```

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

@@ -0,0 +1,20 @@
+## Overview
+
+`<sd-include>` — Includes give you the power to embed external HTML files into the page.
+
+## API
+
+### Key Properties
+
+- prop.src: string — The location of the HTML file to include. Be sure you trust the content you are including as it will be executed as
+  code and can result in XSS attacks.
+- prop.mode: 'cors'|'no-cors'|'same-origin', default='cors' — The fetch mode to use.
+- prop.allowScripts [attr: allow-scripts]: boolean, default=false — Allows included scripts to be executed. Be sure you trust the content you are including as it will be executed as
+  code and can result in XSS attacks.
+- prop.dir: 'ltr'|'rtl'|'auto' — The element's directionality.
+- prop.lang: string — The element's language.
+
+### Events
+
+- event.sd-load: Emitted when the included file is loaded.
+- event.sd-error: Emitted when the included file fails to load due to an error.

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

@@ -0,0 +1,176 @@
+## Overview
+
+`<sd-input>` — Used to allow users to enter an input. It can be displayed in several ways, depending on the type.
+
+## API
+
+### Examples
+
+Use the components tool by passing the args `component` and `example` for any of these combinations:
+
+- component: sd-input, example: size
+- component: sd-input, example: label
+- component: sd-input, example: floating-label
+- component: sd-input, example: placeholder
+- component: sd-input, example: value
+- component: sd-input, example: disabled
+- component: sd-input, example: visually-disabled
+- component: sd-input, example: read-only
+- component: sd-input, example: help-text
+- component: sd-input, example: clearable
+- component: sd-input, example: icon
+- component: sd-input, example: toggle-password
+- component: sd-input, example: type
+- component: sd-input, example: required
+- component: sd-input, example: valid
+- component: sd-input, example: invalid
+- component: sd-input, example: pattern
+- component: sd-input, example: min-length
+- component: sd-input, example: max-length
+- component: sd-input, example: min
+- component: sd-input, example: max
+- component: sd-input, example: spin-buttons
+
+### Key Properties
+
+- prop.type: |'date'|'datetime-local'|'email'|'number'|'password'|'search'|'tel'|'text'|'time'|'url', default='text' — The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults
+  to `text`.
+- prop.size: 'lg'|'md'|'sm', default='lg' — The input's size.
+- prop.inputmode: |'none'|'text'|'decimal'|'numeric'|'tel'|'search'|'email'|'url' — Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual
+  keyboard on supportive devices.
+- prop.value: string, default='' — The current value of the input, submitted as a name/value pair with form data.
+- prop.defaultValue: string, default='' — The default value of the form control. Primarily used for resetting the form control.
+- prop.placeholder: string, default='' — Placeholder text to show as a hint when the input is empty.
+- prop.label: string, default='' — The input's label. If you need to display HTML, use the `label` slot instead.
+- prop.helpText [attr: help-text]: string, default='' — The input's help text. If you need to display HTML, use the `help-text` slot instead.
+- prop.clearable: boolean, default=false — Adds a clear button when the input is not empty.
+- prop.disabled: boolean, default=false — Disables the input.
+- prop.visuallyDisabled [attr: visually-disabled]: boolean, default=false — Styles the input as if it was disabled and enables aria-disabled
+- prop.readonly: boolean, default=false — Makes the input readonly.
+- prop.passwordToggle [attr: password-toggle]: boolean, default=false — Adds a button to toggle the password's visibility. Only applies to password types.
+- prop.passwordVisible [attr: password-visible]: boolean, default=false — Determines whether or not the password is currently visible. Only applies to password input types.
+- prop.spinButtons [attr: spin-buttons]: boolean, default=false — Hides the browser's built-in increment/decrement spin buttons for number inputs and displays custom buttons.
+- prop.minlength: number — The minimum length of input that will be considered valid.
+- prop.maxlength: number — The maximum length of input that will be considered valid.
+- prop.min: number|string — The input's minimum value. Only applies to date and number input types.
+- prop.max: number|string — The input's maximum value. Only applies to date and number input types.
+- 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.name: string, default='' — The name of the input, submitted as a name/value pair with form data.
+- 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.required: boolean, default=false — Makes the input a required field.
+- prop.floatingLabel [attr: floating-label]: boolean, default=false — Enables the floating label behavior for the input.
+- prop.pattern: string — A regular expression pattern to validate input against.
+- prop.step: number|'any' — Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is
+  implied, allowing any numeric value. Only applies to date and number input types.
+- prop.autocapitalize: |'off'|'none'|'on'|'sentences'|'words'|'characters' — Controls whether and how text input is automatically capitalized as it is entered by the user.
+- prop.autocomplete: string — Specifies what permission the browser has to provide assistance in filling out form field values. Refer to
+  [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.
+- prop.autofocus: boolean — Indicates that the input should receive focus on page load.
+- prop.enterkeyhint: |'enter'|'done'|'go'|'next'|'previous'|'search'|'send' — Used to customize the label or icon of the Enter key on virtual keyboards.
+- prop.styleOnValid [attr: style-on-valid]: boolean, default=false — Shows success styles if the validity of the input is valid.
+- prop.spellcheck: boolean, default=true — Enables spell checking on the input.
+- prop.valueAsDate: — Gets or sets the current value as a `Date` object. Returns `null` if the value can't be converted.
+- prop.valueAsNumber: — Gets or sets the current value as a number. Returns `NaN` if the value can't be converted.
+- 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-clear: Emitted when the clear button is activated.
+- event.sd-focus: Emitted when the control gains focus.
+- event.sd-input: Emitted when the control receives input.
+- event.sd-search: Emitted when the search button is activated.
+
+### Slots
+
+- slot.label: The input's label. Alternatively, you can use the `label` attribute.
+- slot.left: Used to prepend a presentational icon or similar element to the input.
+- slot.right: Used to append a presentational icon or similar element to the input.
+- slot.clear-icon: An icon to use in lieu of the default clear icon.
+- slot.show-password-icon: An icon to use in lieu of the default show password icon.
+- slot.hide-password-icon: An icon to use in lieu of the default hide password icon.
+- 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 input. Use this slot with the `sd-tooltip` component.
+
+### 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-input: The input's wrapper.
+- part.form-control-help-text: The help text's wrapper.
+- part.form-control-floating-label: The floating label text's wrapper.
+- part.base: The component's base wrapper.
+- part.border: The base part's absolutely positioned border. Allows for easy adjustment of border thickness without affecting component dimensions.
+- part.input: The internal `<input>` control.
+- part.left: The container that wraps the left.
+- part.clear-button: The clear button.
+- part.password-toggle-button: The password toggle button.
+- part.right: The container that wraps the right.
+- part.invalid-icon: The invalid icon.
+- part.valid-icon: The valid icon.
+- part.invalid-message: The invalid message.
+
+## Guidelines
+
+### Use Cases
+
+- Collect user data in forms, including names, emails, dates, and passwords.
+- Allow users to enter numerical values like quantities or prices.
+
+#### Default Input
+
+Use the “default” variant when clarity, scannability, and accessibility are your primary concerns.
+
+- Long or descriptive labels, helper text, or units are needed.
+- Forms with many fields that users must scan quickly.
+- Complex fields with adornments, counters, or tooltips.
+
+#### Floating Label Input
+
+Use the “floating-label” variant to conserve vertical space and streamline simple forms, while still keeping the label visible.
+
+- Compact layouts and simple fields.
+- Short labels (1–3 words); minimal helper text.
+- You want a clean look without duplicate placeholder text.
+
+### Rules
+
+### Variant Consistency
+
+- Do not mix the two variants (default / floating label) within the same product, flow or form. Read the use cases above to know when to use each type.
+
+### Labels and Placeholders
+
+- Use descriptive and concise labels.
+- Avoid using placeholder text as a substitute for labels.
+
+### User Guidance
+
+- Provide instructions within helper text for completing the field, such as password or character count (e.g., “maxlength” and ”minlength”...).
+- Offer additional guidance with tooltips or help text to guide users on the expected input format and prevent unclear or ambiguous interpretation.
+
+### Validation and Formatting
+
+- Use dynamic formatting to automatically format user input as they type.
+- Validate user entries in real-time to provide immediate feedback whenever possible.
+- Avoid using fields for actions that require immediate feedback; use buttons instead.
+
+### Input Types
+
+- Use appropriate field types for the given purpose (e.g., “email”, “password”, “number”). For custom autocomplete functionalities (e.g., search fields) use [sd-combobox](./?path=/docs/components-sd-combobox--docs).
+- Use for brief text input only. For longer inputs, such as comments or user feedback, use [sd-textarea](./?path=/docs/components-sd-textarea--docs) instead.
+
+### Accessibility
+
+- Ensure that focus moves in sequential order between input fields and other form elements. When an input field is focused, it should be clearly indicated.
+- Avoid disabled input fields. If needed, ensure that they remain in the regular tab order but cannot be activated, allowing screen readers to announce their state and purpose. Use the native disabled attribute or appropriate ARIA attributes (e.g., aria-disabled="true").
+- Ensure input fields are usable on all screen sizes. On smaller screens, consider using larger touch targets for input fields.
+- Placeholder text should offer a hint of what the user should write and must always go together with a label.
+- Prefer keeping the input enabled by default by relying on default values or by validating on submit.
+- 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.
+- Use “autocomplete” attribute to enable automated browser assistance when filling out forms.

package/metadata/packages/components/sd-input/stories/clearable.md

@@ -0,0 +1,7 @@
+Use the `clearable` attribute to add a clear button when the input has content.
+
+```html
+<div class="w-[250px]">
+  <sd-input label="Clearable" clearable spellcheck value="Input text"></sd-input>
+</div>
+```

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

@@ -0,0 +1,7 @@
+Use the `disabled` attribute to disable the input.
+
+```html
+<div class="w-[250px]">
+  <sd-input label="Label" value="Disabled" disabled></sd-input>
+</div>
+```

package/metadata/packages/components/sd-input/stories/floating-label.md

@@ -0,0 +1,8 @@
+Use the `floating-label` attribute to enable a floating label on the input.
+**Note:** Floating labels only work with the `label` attribute. The `label` slot is not supported. Only the `lg` and `md` sizes are available.
+
+```html
+<div class="w-[350px]">
+  <sd-input label="Floating Label" floating-label></sd-input>
+</div>
+```

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

@@ -0,0 +1,11 @@
+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 flex-rows gap-12">
+  <sd-input label="Label" help-text="Help text attribute"></sd-input>
+  <sd-input label="Label">
+    <div slot="help-text" class="text-lg">Help text slot</div>
+  </sd-input>
+</div>
+```

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

@@ -0,0 +1,13 @@
+Use the `left` or `right` slot to add system icons.
+
+```html
+<div class="flex flex-rows gap-12">
+  <sd-input label="Label" spellcheck>
+    <sd-icon label="landscape" name="system/image" slot="left"></sd-icon>
+  </sd-input>
+
+  <sd-input label="Label" spellcheck>
+    <sd-icon label="landscape" name="system/image" slot="right"></sd-icon>
+  </sd-input>
+</div>
+```

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

@@ -0,0 +1,14 @@
+The component gets `invalid` state when the form is not valid.
+
+```html
+<form id="invalid-form">
+  <sd-input id="invalid-input" class="w-[250px]" label="Label" style-on-valid placeholder="Placeholder text"></sd-input>
+</form>
+<script type="module">
+  await Promise.all([customElements.whenDefined('sd-input')]).then(() => {
+    const input = document.getElementById('invalid-input');
+    input.setCustomValidity('Error text');
+    input.reportValidity();
+  });
+</script>
+```

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

@@ -0,0 +1,11 @@
+Use the `label` attribute to give the input an accessible label.
+For labels that contain HTML, use the `label` slot instead.
+
+```html
+<div class="flex flex-row gap-12 items-baseline">
+  <sd-input label="Label attribute" spellcheck></sd-input>
+  <sd-input spellcheck>
+    <div slot="label" class="text-lg">Label slot</div>
+  </sd-input>
+</div>
+```

package/metadata/packages/components/sd-input/stories/max-length.md

@@ -0,0 +1,7 @@
+Use the `maxlength` attribute to set the maximum length of the input to be valid.
+
+```html
+<div class="w-[250px]">
+  <sd-input label="Maxlength" maxlength="25" help-text="25 is the maximum allowed characters" required></sd-input>
+</div>
+```

package/metadata/packages/components/sd-input/stories/max.md

@@ -0,0 +1,7 @@
+Use the `max` attribute to set the maximum number value of the input to be valid.
+
+```html
+<div class="w-[250px]">
+  <sd-input label="Max" type="number" max="5000" help-text="Maximum value is 5000" required></sd-input>
+</div>
+```

package/metadata/packages/components/sd-input/stories/min-length.md

@@ -0,0 +1,7 @@
+Use the `minlength` attribute to set the minimum length of the input to be valid.
+
+```html
+<div class="w-[250px]">
+  <sd-input label="Minlength" minlength="5" help-text="5 is the minimum allowed characters" required></sd-input>
+</div>
+```

package/metadata/packages/components/sd-input/stories/min.md

@@ -0,0 +1,7 @@
+Use the `min` attribute to set the minimum number value of the input to be valid.
+
+```html
+<div class="w-[250px]">
+  <sd-input label="Min" type="number" min="1000" help-text="Minimum value is 1000" required></sd-input>
+</div>
+```

package/metadata/packages/components/sd-input/stories/pattern.md

@@ -0,0 +1,7 @@
+Use the `pattern` attribute to use a regular expression to validate the input.
+
+```html
+<div class="w-[250px]">
+  <sd-input label="Pattern" pattern="[A-Za-z]{3,}" help-text="Required pattern is [A-Za-z]{3,}" required></sd-input>
+</div>
+```

package/metadata/packages/components/sd-input/stories/placeholder.md

@@ -0,0 +1,7 @@
+Use the `placeholder` attribute to add a placeholder.
+
+```html
+<div class="w-[250px]">
+  <sd-input placeholder="Placeholder example" label="Label" spellcheck></sd-input>
+</div>
+```

package/metadata/packages/components/sd-input/stories/read-only.md

@@ -0,0 +1,8 @@
+Use the `read-only` attribute to render an input as read only.
+Interaction is enabled, but the textarea cannot be edited. Events will be fired.
+
+```html
+<div class="w-[250px]">
+  <sd-input label="Label" value="Read only example" readonly></sd-input>
+</div>
+```

package/metadata/packages/components/sd-input/stories/required.md

@@ -0,0 +1,7 @@
+Use the `required` attribute to mark the element as required. This can be used for form validation purposes.
+
+```html
+<div class="w-[250px]">
+  <sd-input label="Label" required></sd-input>
+</div>
+```

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

@@ -0,0 +1,14 @@
+Use the `size` attribute to change the size:
+
+- `lg` (default)
+- `md`
+- `sm`
+  **Note:** On the `floating-label` variant “sm” size is not available.
+
+```html
+<div class="grid grid-cols-2 gap-12 content-end">
+  <sd-input size="lg" label="Label" placeholder="Large"></sd-input>
+  <sd-input size="md" label="Label" placeholder="Medium"></sd-input>
+  <sd-input size="sm" label="Label" placeholder="Small"></sd-input>
+</div>
+```

package/metadata/packages/components/sd-input/stories/spin-buttons.md

@@ -0,0 +1,14 @@
+Use the `spin-buttons` attribute display custom spin buttons for number inputs.
+
+```html
+<div class="w-[250px]">
+  <sd-input
+    label="Spin buttons"
+    type="number"
+    min="0"
+    max="100"
+    help-text="Min value is 0 and Max value is 100"
+    spin-buttons
+  ></sd-input>
+</div>
+```

package/metadata/packages/components/sd-input/stories/toggle-password.md

@@ -0,0 +1,8 @@
+Use the `password-toggle` attribute to add a toggle button that will show the password when activated.
+**Hint:** Only works with `type=password`.
+
+```html
+<div class="w-[250px]">
+  <sd-input type="password" label="Toggle password" password-toggle spellcheck></sd-input>
+</div>
+```