@fundamental-styles/mcp 0.41.7-rc.8 → 0.41.7

package/data/components/form-item-7.md

@@ -0,0 +1,239 @@
+---
+component: fd-form-item
+title: Components/Forms/Textarea
+category: Components
+selector: fd-form-item
+cssFile: form-item.css
+sourcePath: packages/styles/stories/Components/Forms/textarea/textarea.stories.js
+generatedAt: 2026-05-28T16:01:41.676Z
+---
+
+# Components/Forms/Textarea
+
+The text area is an input component that allows the user to enter several lines of text.
+Use the text area if you want users to enter multiple lines of unformatted text.
+
+Do not use the text area if
+
+- You only want them to enter a single line of text, use the input component instead.
+- Users need to enter formatted text. Use the rich text editor instead.
+
+## Installation
+
+```bash
+npm install fundamental-styles
+```
+
+```html
+<!-- Include theme -->
+<link href="node_modules/fundamental-styles/dist/theming/sap_horizon.css" rel="stylesheet">
+
+<!-- Include component CSS -->
+<link href="node_modules/fundamental-styles/dist/form-item.css" rel="stylesheet">
+```
+
+## Basic Usage
+
+```html
+<div class="fd-form-item">
+    <label class="fd-form-label" for="textarea-1">Message:</label>
+    <textarea class="fd-textarea" id="textarea-1" placeholder="Write something here" rows="4" aria-required="false"></textarea>
+</div>
+```
+
+## States
+
+| Class | Description |
+|-------|-------------|
+| `is-error` | Error state |
+| `is-focus` | Focus state |
+| `is-information` | Information state |
+| `is-success` | Success state |
+| `is-warning` | Warning state |
+
+## Examples
+
+### Primary
+
+```html
+<div class="fd-form-item">
+    <label class="fd-form-label" for="textarea-1">Message:</label>
+    <textarea class="fd-textarea" id="textarea-1" placeholder="Write something here" rows="4" aria-required="false"></textarea>
+</div>
+```
+
+### Counter
+
+Textarea can have a counter to display the number of characters entered or left to type. The counter is displayed below the textarea.
+
+```html
+<div class="fd-form-item">
+    <label class="fd-form-label" for="textarea-2">Message</label>
+  
+    <textarea
+      class="fd-textarea"
+      id="textarea-2"
+      name="message"
+      rows="4"
+      maxlength="200"
+      aria-required="false"
+      placeholder="Write something here"
+      aria-labelledby="textarea-2-counter"
+    ></textarea>
+  
+    <div class="fd-textarea-counter" id="textarea-2-counter">
+      200 characters left
+    </div>
+  </div>
+```
+
+### DisabledAndReadOnly
+
+```html
+<div class="fd-form-item">
+    <label class="fd-form-label" for="textarea-7" aria-disabled="true">Message (Disabled)</label>
+    <textarea
+      class="fd-textarea"
+      rows="2"
+      id="textarea-7"
+      name="message-disabled"
+      aria-required="false"
+      disabled
+      aria-disabled="true">Disabled textarea
+    </textarea>
+</div>
+
+<br><br>
+
+<div class="fd-form-item">
+    <label class="fd-form-label" for="textarea-8">Message (Read-Only)</label>
+    <textarea
+      class="fd-textarea"
+      rows="2"
+      id="textarea-8"
+      name="message-readonly"
+      aria-required="false"
+      readonly
+      aria-readonly="true">Read Only textarea
+    </textarea>
+</div>
+
+<br><br>
+
+<div class="fd-form-item">
+    <label class="fd-form-label" for="textarea-9">Message (Read-Only & Focused)</label>
+    <textarea
+      class="fd-textarea is-focus"
+      rows="2"
+      id="textarea-9"
+      name="message-readonly-focus"
+      aria-required="false"
+      readonly
+      aria-readonly="true"
+    >Focused Read Only textarea</textarea>
+  </div>
+```
+
+### States
+
+As with any other input component, you can validate the fields and show the result as a value state of the component. Possible value states are error, warning, success, information, or neutral (none).
+
+```html
+<div class="fd-form-item">
+    <label class="fd-form-label" for="textarea-3">Success message:</label>
+    <div class="fd-popover">
+        <div class="fd-popover__control" aria-controls="popoverT51" aria-expanded="true" aria-haspopup="true">
+            <textarea 
+                class="fd-textarea is-success" 
+                rows="2"
+                id="textarea-3"
+                placeholder="Enter your message here"
+                aria-required="false"
+                aria-labelledby="textarea-3-count"
+                aria-describedby="textarea-3-message popoverT51"></textarea>
+            <div class="fd-textarea__sr-only" id="textarea-3-message">Value State Success</div>
+        </div>
+        <div class="fd-popover__body fd-popover__body--input-message-group fd-popover__body--no-arrow" aria-hidden="false" id="popoverT51">
+            <div class="fd-form-message fd-form-message--success">Your input was successfully saved.</div>
+        </div>
+    </div>
+    <div class="fd-textarea-counter" id="textarea-3-count">150 characters remaining</div>
+</div>
+
+<br><br>
+
+<div class="fd-form-item">
+    <label class="fd-form-label" for="textarea-4">Error message:</label>
+    <div class="fd-popover">
+        <div class="fd-popover__control" aria-controls="popoverT52" aria-expanded="true" aria-haspopup="true">
+            <textarea 
+                class="fd-textarea is-error" 
+                rows="2"
+                id="textarea-4" 
+                placeholder="Enter your message here"
+                aria-required="false"
+                aria-invalid="true"
+                aria-describedby="textarea-4-message popoverT52"></textarea>
+            <div class="fd-textarea__sr-only" id="textarea-4-message">Value State Error</div>
+        </div>
+        <div class="fd-popover__body fd-popover__body--input-message-group fd-popover__body--no-arrow" aria-hidden="false" id="popoverT52">
+            <div class="fd-form-message fd-form-message--error">Please correct the highlighted error.</div>
+        </div>
+    </div>
+</div>
+
+<br><br><br><br>
+
+<div class="fd-form-item">
+    <label class="fd-form-label" for="textarea-5">Warning message:</label>
+    <div class="fd-popover">
+        <div class="fd-popover__control" aria-controls="popoverT53" aria-expanded="true" aria-haspopup="true">
+            <textarea 
+                class="fd-textarea is-warning" 
+                rows="2"
+                id="textarea-5" 
+                placeholder="Enter your message here"
+                aria-required="false"
+                aria-describedby="textarea-5-message popoverT53"></textarea>
+            <div class="fd-textarea__sr-only" id="textarea-5-message">Value State Warning</div>
+        </div>
+        <div class="fd-popover__body fd-popover__body--input-message-group fd-popover__body--no-arrow" aria-hidden="false" id="popoverT53">
+            <div class="fd-form-message fd-form-message--warning">Please review your input for potential issues.</div>
+        </div>
+    </div>
+</div>
+
+<br><br><br><br>
+
+<div class="fd-form-item">
+    <label class="fd-form-label" for="textarea-6">Information message:</label>
+    <div class="fd-popover">
+        <div class="fd-popover__control" aria-controls="popoverT54" aria-expanded="true" aria-haspopup="true">
+            <textarea 
+                class="fd-textarea is-information" 
+                rows="2"
+                id="textarea-6" 
+                placeholder="Enter your message here"
+                aria-required="false"
+                aria-describedby="textarea-6-message popoverT54"></textarea>
+            <div class="fd-textarea__sr-only" id="textarea-6-message">Value State Information</div>
+        </div>
+        <div class="fd-popover__body fd-popover__body--input-message-group fd-popover__body--no-arrow" aria-hidden="false" id="popoverT54">
+            <div class="fd-form-message fd-form-message--information">This is additional information about your input.</div>
+        </div>
+    </div>
+</div>
+```
+
+## Accessibility
+
+- Use semantic HTML elements where appropriate
+- Include proper ARIA attributes for interactive elements
+- Ensure keyboard navigation support
+- Provide adequate color contrast
+
+## Source
+
+This documentation was automatically generated from: `packages/styles/stories/Components/Forms/textarea/textarea.stories.js`
+
+For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).

package/data/components/form-item-ai.md

@@ -0,0 +1,158 @@
+---
+component: fd-form-item
+title: AI/Patterns/Progress Indicator
+category: AI
+selector: fd-form-item
+cssFile: form-item.css
+sourcePath: packages/styles/stories/AI/Patterns/ai-progress-indicator/ai-progress-indicator.stories.js
+tags: ["ai","experimental"]
+dependencies: []
+relatedComponents: []
+stability: experimental
+generatedAt: 2026-06-09T18:29:01.791Z
+---
+
+# AI/Patterns/Progress Indicator
+
+> **🧪 EXPERIMENTAL**: This component is experimental and its API may change.
+
+AI Progress Indicator provides information about the status of a user's request while they wait for the content to be generated. The main goal of this pattern is to keep the user engaged and informed, manage their expectations and show that the system is actively working. 
+        <br><br>
+<b>Use Progress Indicator: </b>
+<ul>
+    <li>when the duration of the AI generation process is uncertain</li>
+    <li>to show users that the system is actively working</li>
+    <li>when you need to keep users informed about the status of their request</li>
+    <li>to provide real-time updates on the progress of the AI task</li>
+</ul><br>
+<b>Do not use Progress Indicator: </b>
+<ul>
+    <li>for operations that take less than one second</li>
+    <li>when providing a time estimate for the process</li>
+    <li>in non-AI scenarios</li>
+</ul>
+<b>Note: The component is in an experimental state.</b>
+
+## Installation
+
+```bash
+npm install fundamental-styles
+```
+
+```html
+<!-- Include theme -->
+<link href="node_modules/fundamental-styles/dist/theming/sap_horizon.css" rel="stylesheet">
+
+<!-- Include component CSS -->
+<link href="node_modules/fundamental-styles/dist/form-item.css" rel="stylesheet">
+
+```
+
+## Basic Usage
+
+```html
+<h4>First loading time (while analyzing the request)</h4>
+<div class="fd-form-item">
+    <div class="fd-form-item__label-container">
+        <button class="fd-button">
+            <i class="sap-icon--stop"></i>
+            <span class="fd-button__text">Stop Generating</span>
+        </button>
+    </div>
+    <div class="fd-popover__control" aria-controls="popoverAI1" aria-expanded="false" aria-haspopup="true">
+        <div role="textbox" class="fd-textarea fd-textarea--ai is-information" id="textarea-ai-1" placeholder="Write something here" rows="5"><div role="progressbar" aria-valuetext="busy" aria-labelledby="ai-busy-indicator-text" class="fd-ai-busy-indicator">
+            <span class="sap-icon sap-icon--ai"></span>
+            <span id="ai-busy-indicator-text" class="fd-ai-busy-indicator__text">Analyzing request...</span>
+        </div>
+
+    </div>
+</div>
+</div>
+<h4>Second loading time (while generating the results)</h4>
+<div class="fd-form-item">
+    <div class="fd-form-item__label-container">
+        <button class="fd-button">
+            <i class="sap-icon--stop"></i>
+            <span class="fd-button__text">Stop Generating</span>
+        </button>
+    </div>
+    <div class="fd-popover__control" aria-controls="popoverAI1" aria-expanded="false" aria-haspopup="true">
+        <div role="textbox" class="fd-textarea fd-textarea--ai is-information" id="textarea-ai-1" placeholder="Write something here" rows="5"><p class="fd-ai-text fd-ai-text--loading">This is a text being generated inside a textarea lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum eligendi quae recusandae rem illum...</p>
+
+    </div>
+</div>
+</div>
+```
+
+## States
+
+| Class | Description |
+|-------|-------------|
+| `is-information` | Information state |
+
+## BEM Elements
+
+This component uses the following BEM elements:
+
+- `fd-form-item__label-container`
+
+## Examples
+
+### AIProgressIndicator
+
+AI Progress Indicator pattern extends the following components to enable new AI-specific interactions:
+<ul>
+    <li><b>AI button</b> (Stop generating Button): provides user the option to stop the generation at any given time.  For more information see AI button.</li>
+    <li><b>AI Icon</b>: AI icon with looped animation conveys to users that AI processes are actively underway. Text string keeps users updated on the status of their request. We advise the usage of the standard UI text ”Analyzing request...". For more information see AI busy indicator.</li>
+    <li><b>AI Busy Indicator</b>: informs the user about an ongoing operation powered by AI</li>
+    <li><b>AI Loading bar</b>: an animated gradient bar visually reinforces that the system is actively processing tasks. For more information see AI loading bar.</li>
+    <li><b>Text area</b></li>
+    <li><b>Rich text editor</b></li>
+</ul>
+
+```html
+<h4>First loading time (while analyzing the request)</h4>
+<div class="fd-form-item">
+    <div class="fd-form-item__label-container">
+        <button class="fd-button">
+            <i class="sap-icon--stop"></i>
+            <span class="fd-button__text">Stop Generating</span>
+        </button>
+    </div>
+    <div class="fd-popover__control" aria-controls="popoverAI1" aria-expanded="false" aria-haspopup="true">
+        <div role="textbox" class="fd-textarea fd-textarea--ai is-information" id="textarea-ai-1" placeholder="Write something here" rows="5"><div role="progressbar" aria-valuetext="busy" aria-labelledby="ai-busy-indicator-text" class="fd-ai-busy-indicator">
+            <span class="sap-icon sap-icon--ai"></span>
+            <span id="ai-busy-indicator-text" class="fd-ai-busy-indicator__text">Analyzing request...</span>
+        </div>
+
+    </div>
+</div>
+</div>
+<h4>Second loading time (while generating the results)</h4>
+<div class="fd-form-item">
+    <div class="fd-form-item__label-container">
+        <button class="fd-button">
+            <i class="sap-icon--stop"></i>
+            <span class="fd-button__text">Stop Generating</span>
+        </button>
+    </div>
+    <div class="fd-popover__control" aria-controls="popoverAI1" aria-expanded="false" aria-haspopup="true">
+        <div role="textbox" class="fd-textarea fd-textarea--ai is-information" id="textarea-ai-1" placeholder="Write something here" rows="5"><p class="fd-ai-text fd-ai-text--loading">This is a text being generated inside a textarea lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum eligendi quae recusandae rem illum...</p>
+
+    </div>
+</div>
+</div>
+```
+
+## Accessibility
+
+- Use semantic HTML elements where appropriate
+- Include proper ARIA attributes for interactive elements
+- Ensure keyboard navigation support
+- Provide adequate color contrast
+
+## Source
+
+This documentation was automatically generated from: `packages/styles/stories/AI/Patterns/ai-progress-indicator/ai-progress-indicator.stories.js`
+
+For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).