@solid-design-system/mcp 0.0.1

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

@@ -0,0 +1,85 @@
+## Overview
+
+`<sd-teaser>` — Used to group related subjects in a container with an image, providing a preview of information and linking to further content.
+
+## API
+
+### Examples
+
+Use the components tool by passing the args `component` and `example` for any of these combinations:
+
+- component: sd-teaser, example: variant
+- component: sd-teaser, example: default-and-headline-slot
+- component: sd-teaser, example: media-slot
+- component: sd-teaser, example: meta-slot
+- component: sd-teaser, example: inset
+- component: sd-teaser, example: breakpoint
+- component: sd-teaser, example: reverse
+- component: sd-teaser, example: distribution
+
+### Key Properties
+
+- prop.variant: |'white'|'white border-neutral-400'|'neutral-100'|'primary'|'primary-100', default='white' — Variant of the teaser
+- prop.breakpoint: number, default=448 — Breakpoint where the teaser switches from `vertical` to `horizontal`. `0` is always `horizontal`, `9999` is always `vertical`.
+- prop.inset: boolean, default=false — The teaser's inner padding. This is always set in `white border-neutral-400`.
+- prop.reversedLayout [attr: reversed-layout]: boolean, default=false — Reverses the layout in horizontal variant
+- prop.dir: 'ltr'|'rtl'|'auto' — The element's directionality.
+- prop.lang: string — The element's language.
+
+### Slots
+
+- slot.default: An optional main content slot.
+- slot.media: An optional media slot.
+- slot.meta: An optional meta slot.
+- slot.headline: headline slot.
+
+### CSS Parts
+
+- part.base: The component's base wrapper.
+- part.media: The container that wraps the media.
+- part.content: The container that wraps the content.
+- part.meta: The container that wraps the meta.
+- part.headline: The container that wraps the headline.
+- part.main: The container that wraps the main content.
+
+## Guidelines
+
+### Use Cases
+
+- Display content and actions on a particular topic in a flexible layout.
+- Showcase new or featured products and services.
+- Display recent news or important updates.
+- Provide a brief overview of key features or benefits of a product or service.
+- Present upcoming events or webinars with concise details and links.
+- Offer a preview of blog posts, articles, or video content.
+
+### Rules
+
+### Content
+
+- Use brief, impactful headings to convey the message quickly; the main content should complement the corresponding heading.
+- Ensure that the information in each item is independent from others around it; avoid cross-referencing items placed close together.
+- Do not use the metadata slot as an image caption or to convey any other kind of information but metadata.
+
+### Layout and Orientation
+
+- Use a horizontal layout for an impactful, standalone teaser.
+- Prefer a vertical layout when placing a teaser within a block of text, so it flows naturally with surrounding copy.
+- Arrange multiple teasers in a grid for a cohesive user experience, maintaining consistent alignment and padding.
+- Use the “breakpoint” attribute to override default layout behavior across different screen sizes, but ensure the teaser adapts effectively.
+
+### Interaction
+
+- Use non-clickable teasers when their target should be conveyed over a CTA or a text link.
+- Avoid grouping [clickable](./?path=/docs/templates-teaser--docs#unclickable-teaser-with-button) and [non-clickable](./?path=/docs/templates-teaser--docs#clickable-teaser) items together, as this can negatively affect user expectations.
+
+### Background
+
+- Use light background options like white, neutral-100, primary-100, or use a primary background when inverted.
+
+### Accessibility
+
+- Include descriptive alt text or captions for images or video in the media slot, ensuring that non-text content is accessible.
+- For purely decorative images, ALT-tags should be left empty so that screen readers can bypass them and concentrate on conveying meaningful content.
+- Adopt a consistent, semantically correct heading hierarchy to enable quick scanning across multiple teasers on a page. Teaser headings should be the first item in the DOM, introducing a new thematic region and separating the following content from the previous region.
+- Ensure that each link target –especially clickable teasers that lack a dedicated action button or link element– clarifies its destination or function for screen readers.

package/metadata/packages/components/sd-teaser/stories/breakpoint.md

@@ -0,0 +1,28 @@
+Use the `breakpoint` attribute to change the teaser's layout at a specific breakpoint or enforce a specific layout:
+
+- `0` is always horizontal
+- `9999` is always vertical
+
+```html
+<div class="flex gap-8 flex-col">
+  <sd-teaser breakpoint="0">
+    <h3 slot="headline">Horizontal</h3>
+    <img slot="media" src="./placeholders/images/architecture.jpg" alt="" style="width:100%; height: auto;" />
+    <p>
+      Quis ut ex cupidatat proident cillum ullamco ea aute ad laborum aliqua incididunt sint ipsum. Elit enim
+      reprehenderit aliquip officia in minim. Eu ipsum pariatur dolor. Do ex in cupidatat anim aliqua sint voluptate
+      sunt nulla incididunt.
+    </p>
+  </sd-teaser>
+
+  <sd-teaser breakpoint="9999" class="w-[256px]">
+    <h3 slot="headline">Vertical</h3>
+    <img slot="media" src="./placeholders/images/architecture.jpg" alt="" style="width:100%; height: auto;" />
+    <p>
+      Quis ut ex cupidatat proident cillum ullamco ea aute ad laborum aliqua incididunt sint ipsum. Elit enim
+      reprehenderit aliquip officia in minim. Eu ipsum pariatur dolor. Do ex in cupidatat anim aliqua sint voluptate
+      sunt nulla incididunt.
+    </p>
+  </sd-teaser>
+</div>
+```

package/metadata/packages/components/sd-teaser/stories/default-and-headline-slot.md

@@ -0,0 +1,14 @@
+- The`header` and `default` slot are both required.
+- Use the `header` slot to display titles, it should always contain a `<h*>` element.
+- Use the `default` slot to display any content.
+
+```html
+<sd-teaser>
+  <h3 slot="headline">Lorem ipsum sic semper</h3>
+  <p>
+    Quis ut ex cupidatat proident cillum ullamco ea aute ad laborum aliqua incididunt sint ipsum. Elit enim
+    reprehenderit aliquip officia in minim. Eu ipsum pariatur dolor. Do ex in cupidatat anim aliqua sint voluptate sunt
+    nulla incididunt.
+  </p>
+</sd-teaser>
+```

package/metadata/packages/components/sd-teaser/stories/distribution.md

@@ -0,0 +1,13 @@
+Use the `--distribution-media` and `--distribution-content` CSS properties to adjust the teaser's layout.
+
+```html
+<sd-teaser style="--distribution-media: 20%; --distribution-content: 80%;">
+  <h3 slot="headline">Lorem ipsum sic semper</h3>
+  <img slot="media" src="./placeholders/images/architecture.jpg" alt="" style="width:100%; height: auto;" />
+  <p>
+    Quis ut ex cupidatat proident cillum ullamco ea aute ad laborum aliqua incididunt sint ipsum. Elit enim
+    reprehenderit aliquip officia in minim. Eu ipsum pariatur dolor. Do ex in cupidatat anim aliqua sint voluptate sunt
+    nulla incididunt.
+  </p>
+</sd-teaser>
+```

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

@@ -0,0 +1,12 @@
+Use the `inset` attribute to create a teaser with an inset padding if the context needs it.
+
+```html
+<sd-teaser inset variant="primary-100">
+  <h3 slot="headline">Teaser with inset Padding</h3>
+  <p>
+    Quis ut ex cupidatat proident cillum ullamco ea aute ad laborum aliqua incididunt sint ipsum. Elit enim
+    reprehenderit aliquip officia in minim. Eu ipsum pariatur dolor. Do ex in cupidatat anim aliqua sint voluptate sunt
+    nulla incididunt.
+  </p>
+</sd-teaser>
+```

package/metadata/packages/components/sd-teaser/stories/media-slot.md

@@ -0,0 +1,14 @@
+Teasers accept a `media` slot to display images or videos.
+**Accessibility Hint:** If the image doesn't contribute to the information delivered to the user, don't describe it in the alt attribute and leave it empty.
+
+```html
+<sd-teaser>
+  <h3 slot="headline">Lorem ipsum sic semper</h3>
+  <img slot="media" src="./placeholders/images/architecture.jpg" alt="" style="width:100%; height: auto;" />
+  <p>
+    Quis ut ex cupidatat proident cillum ullamco ea aute ad laborum aliqua incididunt sint ipsum. Elit enim
+    reprehenderit aliquip officia in minim. Eu ipsum pariatur dolor. Do ex in cupidatat anim aliqua sint voluptate sunt
+    nulla incididunt.
+  </p>
+</sd-teaser>
+```

package/metadata/packages/components/sd-teaser/stories/meta-slot.md

@@ -0,0 +1,16 @@
+Use the `meta` slot to add additional content to the teaser.
+
+```html
+<sd-teaser>
+  <h3 slot="headline">Lorem ipsum sic semper</h3>
+  <div slot="meta">
+    <time class="sd-meta sd-meta--pipe" datetime="2023-01-01">01.01.2023</time>
+    <span class="sd-meta">Author name</span>
+  </div>
+  <p>
+    Quis ut ex cupidatat proident cillum ullamco ea aute ad laborum aliqua incididunt sint ipsum. Elit enim
+    reprehenderit aliquip officia in minim. Eu ipsum pariatur dolor. Do ex in cupidatat anim aliqua sint voluptate sunt
+    nulla incididunt.
+  </p>
+</sd-teaser>
+```

package/metadata/packages/components/sd-teaser/stories/reverse.md

@@ -0,0 +1,14 @@
+Use the `reversed-layout` attribute to invert the horizontal layout.
+**Hint**: Only works with horizontal teasers.
+
+```html
+<sd-teaser reversed-layout>
+  <h3 slot="headline">Horizontal</h3>
+  <img slot="media" src="./placeholders/images/architecture.jpg" alt="" class="w-full h-auto" />
+  <p>
+    Quis ut ex cupidatat proident cillum ullamco ea aute ad laborum aliqua incididunt sint ipsum. Elit enim
+    reprehenderit aliquip officia in minim. Eu ipsum pariatur dolor. Do ex in cupidatat anim aliqua sint voluptate sunt
+    nulla incididunt.
+  </p>
+</sd-teaser>
+```

package/metadata/packages/components/sd-teaser/stories/variant.md

@@ -0,0 +1,34 @@
+Use the `variant` attribute to use the appropriate teaser for your context:
+
+- `white` (default)
+- `white border-neutral-400`
+- `neutral-100`
+- `primary-100`
+- `primary`
+
+```html
+<div class="grid grid-cols-2 gap-12">
+  <sd-teaser variant="white" inset>
+    <h3 slot="headline">Teaser with white background</h3>
+    <p class="sd-paragraph">Lorem ipsum dolor sit amet, consetetur sadi pscing elitr, sed diam nonumy eirmod tempor.</p>
+  </sd-teaser>
+  <sd-teaser variant="white border-neutral-400">
+    <h3 slot="headline">Teaser with white background and border neutral-400</h3>
+    <p class="sd-paragraph">Lorem ipsum dolor sit amet, consetetur sadi pscing elitr, sed diam nonumy eirmod tempor.</p>
+  </sd-teaser>
+  <sd-teaser variant="neutral-100" inset>
+    <h3 slot="headline">Teaser with neutral-100 background</h3>
+    <p class="sd-paragraph">Lorem ipsum dolor sit amet, consetetur sadi pscing elitr, sed diam nonumy eirmod tempor.</p>
+  </sd-teaser>
+  <sd-teaser variant="primary-100" inset>
+    <h3 slot="headline">Teaser with primary-100 background</h3>
+    <p class="sd-paragraph">Lorem ipsum dolor sit amet, consetetur sadi pscing elitr, sed diam nonumy eirmod tempor.</p>
+  </sd-teaser>
+  <sd-teaser variant="primary" inset>
+    <h3 slot="headline">Teaser with primary background</h3>
+    <p class="sd-paragraph sd-paragraph--inverted">
+      Lorem ipsum dolor sit amet, consetetur sadi pscing elitr, sed diam nonumy eirmod tempor.
+    </p>
+  </sd-teaser>
+</div>
+```

package/metadata/packages/components/sd-teaser-media/info.md

@@ -0,0 +1,86 @@
+## Overview
+
+`<sd-teaser-media>` — Used as a flexible container with image that groups related items and links them to further content.
+
+## API
+
+### Examples
+
+Use the components tool by passing the args `component` and `example` for any of these combinations:
+
+- component: sd-teaser-media, example: variant
+- component: sd-teaser-media, example: default-media-and-headline-slot
+- component: sd-teaser-media, example: meta-slot
+- component: sd-teaser-media, example: expandable-slot
+
+### Key Properties
+
+- prop.variant: |'white'|'neutral-100'|'primary'|'primary-100'|'gradient-light'|'gradient-dark', default='white' — Variant of the teaser
+- prop.open: boolean, default=false — Controls whether the expandable content is visible
+- prop.dir: 'ltr'|'rtl'|'auto' — The element's directionality.
+- prop.lang: string — The element's language.
+
+### Slots
+
+- slot.default: An optional main content slot.
+- slot.media: An optional media slot.
+- slot.meta: An optional meta slot.
+- slot.expandable: An optional expandable slot, <strong>not</strong> shown on small devices.
+- slot.headline: headline slot.
+
+### CSS Parts
+
+- part.base: The component's base wrapper.
+- part.media: The container that wraps the media.
+- part.content: The container that wraps the content.
+- part.meta: The container that wraps the meta.
+- part.headline: The container that wraps the headline.
+- part.expandable: The container that wraps the expandable.
+- part.main: The container that wraps the main content.
+- part.toggle: The button that toggles the expandable content.
+
+## Guidelines
+
+### Use Cases
+
+- Drive traffic to forms or services by providing short summaries and supportive imagery.
+- Highlight special offers or promotions with clear calls to action.
+- Promote upcoming events or webinars with engaging visuals, dates, and sign-up links.
+- Feature downloadable resources like e-books or whitepapers.
+- Showcase success stories, case studies, or team member profiles to build trust and credibility.
+- Offer quick previews of blog posts, news articles, or videos, encouraging users to explore further.
+
+### Rules
+
+### Content
+
+- Use brief, impactful headings to convey the message quickly; the main content should complement the corresponding heading.
+- Ensure that the information in each item is independent from others around it; avoid cross-referencing items placed close together.
+- Avoid placing essential information or actions in expandable teaser areas since they are only visible on click.
+
+### Media
+
+- Make sure images are high quality, clear, and relevant to the content; optimize performance by compressing them and implementing lazy loading.
+- Remember to include copyright information whenever necessary.
+- Avoid placing visual information at the bottom of the image, as it may be covered by text overlays.
+
+### Behaviour
+
+- Avoid adding action elements to the expandable slot content, as these actions are not accessible to all users; only those using a mouse can interact with them.
+
+### Styling
+
+- Adjust paddings and layouts as needed to ensure content is visible and accessible.
+
+### Background
+
+- Use light background options like white, neutral-100, primary-100, or use a primary background when inverted.
+
+### Accessibility
+
+- Adopt a consistent, semantically correct heading hierarchy to enable quick scanning across multiple teasers on a page. Teaser headings should be the first item in the DOM, introducing a new thematic region and separating the following content from the previous region.
+- Include descriptive alt text for the media slot, ensuring that non-text content is accessible.
+- For purely decorative images, ALT-tags should be left empty so that screen readers can bypass them and concentrate on conveying meaningful content.
+- Avoid placing essential information or actions in expandable teaser areas since they are only visible on click.
+- Verify that each link is announced in a way that conveys its unique destination or function to screen readers.
+- Ensure that the background images you choose for each teaser variant provide enough contrast with the text to maintain readability.

package/metadata/packages/components/sd-teaser-media/stories/default-media-and-headline-slot.md

@@ -0,0 +1,15 @@
+- Use the `default` slot to display main information and/or action elements below the headline.
+- Use the `media` slot to add an image to the teaser.
+- Use the `headline` slot to display titles. It should always contain a <h\*> element.
+  **Accessibility Hint:**
+- Please make sure to use semantically correct headline tags for the headline slot to provide accessible content.
+- The heading in a teaser should be the first item in the DOM. A heading introduces a new thematic region and separates the following content from the previous region.
+- If the image in a teaser doesn't contribute to the information delivered to the user, don't describe the image in the alt attribute and leave it empty.
+
+```html
+<sd-teaser-media variant="gradient-dark" class="max-w-[600px]">
+  <h3 slot="headline">Headline Media Teaser</h3>
+  <img slot="media" src="./placeholders/images/architecture.jpg" class="aspect-video object-cover" alt="Generic alt" />
+  <div class="slot slot--border slot--text slot--inverted h-12">Default slot</div>
+</sd-teaser-media>
+```

package/metadata/packages/components/sd-teaser-media/stories/expandable-slot.md

@@ -0,0 +1,10 @@
+Use the `expandable` slot to add content that only shows up on click. This slot should not contain any relevant action since it is only shown on click.
+**Accessibility Hint:** Avoid placing essential information or actions in expandable teaser areas since they are only visible on click.
+
+```html
+<sd-teaser-media variant="gradient-dark" class="max-w-[600px]">
+  <h3 slot="headline">Headline Media Teaser</h3>
+  <img slot="media" src="./placeholders/images/architecture.jpg" class="aspect-video object-cover" alt="Generic alt" />
+  <div slot="expandable">Expandable slot</div>
+</sd-teaser-media>
+```

package/metadata/packages/components/sd-teaser-media/stories/meta-slot.md

@@ -0,0 +1,9 @@
+Use the `meta` slot to add additional content to the teaser.
+
+```html
+<sd-teaser-media variant="gradient-dark" class="max-w-[600px]">
+  <h3 slot="headline">Headline Media Teaser</h3>
+  <div slot="meta" class="slot slot--border slot--text slot--inverted h-12">Meta slot</div>
+  <img slot="media" src="./placeholders/images/architecture.jpg" class="aspect-video object-cover" alt="Generic alt" />
+</sd-teaser-media>
+```

package/metadata/packages/components/sd-teaser-media/stories/variant.md

@@ -0,0 +1,78 @@
+Use the `variant` attribute to set the color variant:
+
+- `white (default)`
+- `primary`
+- `primary-100`
+- `neutral-100`
+- `gradient-dark`
+- `gradient-light`
+
+```html
+<div class="flex flex-col gap-12">
+  <sd-teaser-media variant="white" class="max-w-[600px]">
+    <h3 slot="headline">Headline Media Teaser (white – default)</h3>
+    <img
+      slot="media"
+      src="./placeholders/images/architecture.jpg"
+      class="aspect-video object-cover"
+      alt="Generic alt"
+    />
+    <p class="sd-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+  </sd-teaser-media>
+
+  <sd-teaser-media variant="primary" class="max-w-[600px]">
+    <h3 slot="headline">Headline Media Teaser (primary)</h3>
+    <img
+      slot="media"
+      src="./placeholders/images/architecture.jpg"
+      class="aspect-video object-cover"
+      alt="Generic alt"
+    />
+    <p class="sd-paragraph sd-paragraph--inverted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+  </sd-teaser-media>
+
+  <sd-teaser-media variant="primary-100" class="max-w-[600px]">
+    <h3 slot="headline">Headline Media Teaser (primary-100)</h3>
+    <img
+      slot="media"
+      src="./placeholders/images/architecture.jpg"
+      class="aspect-video object-cover"
+      alt="Generic alt"
+    />
+    <p class="sd-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+  </sd-teaser-media>
+
+  <sd-teaser-media variant="neutral-100" class="max-w-[600px]">
+    <h3 slot="headline">Headline Media Teaser (neutral-100)</h3>
+    <img
+      slot="media"
+      src="./placeholders/images/architecture.jpg"
+      class="aspect-video object-cover"
+      alt="Generic alt"
+    />
+    <p class="sd-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+  </sd-teaser-media>
+
+  <sd-teaser-media variant="gradient-dark" class="max-w-[600px]">
+    <h3 slot="headline">Headline Media Teaser (gradient-dark)</h3>
+    <img
+      slot="media"
+      src="./placeholders/images/architecture.jpg"
+      class="aspect-video object-cover"
+      alt="Generic alt"
+    />
+    <p class="sd-paragraph sd-paragraph--inverted">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+  </sd-teaser-media>
+
+  <sd-teaser-media variant="gradient-light" class="max-w-[600px]">
+    <h3 slot="headline">Headline Media Teaser (gradient-light)</h3>
+    <img
+      slot="media"
+      src="./placeholders/images/architecture.jpg"
+      class="aspect-video object-cover"
+      alt="Generic alt"
+    />
+    <p class="sd-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+  </sd-teaser-media>
+</div>
+```

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

@@ -0,0 +1,132 @@
+## Overview
+
+`<sd-textarea>` — Used to allow users to input and edit multiple lines of text.
+
+## API
+
+### Examples
+
+Use the components tool by passing the args `component` and `example` for any of these combinations:
+
+- component: sd-textarea, example: size
+- component: sd-textarea, example: rows
+- component: sd-textarea, example: label
+- component: sd-textarea, example: floating-label
+- component: sd-textarea, example: placeholder
+- component: sd-textarea, example: disabled
+- component: sd-textarea, example: visually-disabled
+- component: sd-textarea, example: readonly
+- component: sd-textarea, example: help-text
+- component: sd-textarea, example: required
+- component: sd-textarea, example: valid
+- component: sd-textarea, example: invalid
+- component: sd-textarea, example: min-length
+- component: sd-textarea, example: max-length
+
+### 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 textarea, submitted as a name/value pair with form data.
+- prop.value: string, default='' — The current value of the textarea, submitted as a name/value pair with form data.
+- prop.size: 'lg'|'md'|'sm', default='lg' — The textarea's size.
+- prop.label: string, default='' — The textarea's label. If you need to display HTML, use the `label` slot instead.
+- prop.helpText [attr: help-text]: string, default='' — The textarea's help text. If you need to display HTML, use the `help-text` slot instead.
+- prop.placeholder: string, default='' — Placeholder text to show as a hint when the input is empty.
+- prop.rows: number, default=4 — The number of rows to display by default.
+- prop.disabled: boolean, default=false — Disables the textarea.
+- prop.visuallyDisabled [attr: visually-disabled]: boolean, default=false — Styles the textarea as if it was disabled and enables aria-disabled
+- prop.readonly: boolean, default=false — Makes the textarea readonly.
+- 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 textarea a required field.
+- prop.floatingLabel [attr: floating-label]: boolean, default=false — Enables the floating label behavior for the input.
+- 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.autocapitalize: |'off'|'none'|'on'|'sentences'|'words'|'characters' — Controls whether and how text input is automatically capitalized as it is entered by the user.
+- prop.autocorrect: 'off'|'on' — Indicates whether the browser's autocorrect feature is on or off.
+- 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 textarea.
+- prop.inputmode: 'none'|'text' — 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.defaultValue: string, default='' — The default value of the form control. Primarily used for resetting the form control.
+- 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-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-invalid: Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+
+### Slots
+
+- slot.label: The textarea's label. 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 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.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.textarea: The internal `<textarea>` control.
+
+## Guidelines
+
+### Use Cases
+
+- Collect detailed user feedback or comments.
+- Enable users to write comprehensive reviews of products or services.
+- Gather extensive information about issues or requests.
+- Capture detailed responses in surveys or questionnaires.
+
+#### Default Textarea
+
+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 Textarea
+
+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
+
+### Content and Guidance
+
+- Inform users whenever minimum or maximum lengths are set; use the field's help text for this.
+- Use placeholder text as an addition to label as it should not include essential information required to complete the field correctly.
+- Use help text to provide hints or examples of expected inputs.
+
+### Behavior and Interaction
+
+- Provide real-time validation to help users correct errors as they type.
+- Provide a visible scrollbar when text overflows.
+- Adapt the size of the field to the expected length of user input.
+- Avoid including a "clear" button to prevent unwanted loss of user input.
+
+### Background
+
+- Use with light background options such as white, neutral-100, or primary-100.
+
+### 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-textarea/stories/disabled.md

@@ -0,0 +1,7 @@
+Use the `disabled` attribute to disable the textarea.
+
+```html
+<div class="w-[500px]">
+  <sd-textarea size="lg" label="Label" placeholder="Input text disabled" rows="4" spellcheck disabled></sd-textarea>
+</div>
+```

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

@@ -0,0 +1,8 @@
+Use the `floating-label` attribute to enable a floating label on the text-area.
+**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="flex gap-12">
+  <sd-textarea size="lg" label="Floating Label" floating-label rows="4" spellcheck class="w-full"></sd-textarea>
+</div>
+```

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

@@ -0,0 +1,11 @@
+Use the `help-text` attribute to provide an accessible help text for the textarea element.
+For help texts that contain HTML, use the `help-text` slot instead.
+
+```html
+<div class="flex gap-12">
+  <sd-textarea size="lg" label="Label" help-text="Help text attribute" rows="4" class="w-full"></sd-textarea>
+  <sd-textarea size="lg" label="Label" rows="4" spellcheck class="w-full">
+    <div slot="help-text" class="text-lg">Help text slot</div>
+  </sd-textarea>
+</div>
+```

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

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

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

@@ -0,0 +1,11 @@
+Use the `label` attribute to provide an accessible label for the textarea element.
+For labels that contain HTML, use the `label` slot instead.
+
+```html
+<div class="flex gap-12">
+  <sd-textarea size="lg" label="Label attribute" rows="4" spellcheck class="w-full"></sd-textarea>
+  <sd-textarea size="lg" rows="4" spellcheck class="w-full">
+    <div slot="label" class="text-lg">Label slot</div>
+  </sd-textarea>
+</div>
+```