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

package/data/components/form-item-file-uploader.md

@@ -0,0 +1,445 @@
+---
+component: fd-form-item
+title: Components/File Uploader
+category: Components
+selector: fd-form-item
+cssFile: form-item.css
+sourcePath: packages/styles/stories/Components/file-uploader/file-uploader.stories.js
+tags: []
+dependencies: ["button","file-uploader","form-item","form-label","info-label","input","message-strip","object-status"]
+relatedComponents: ["button","file-uploader","form-item","form-label","info-label","input","message-strip","object-status"]
+stability: stable
+generatedAt: 2026-06-09T18:29:01.564Z
+---
+
+# Components/File Uploader
+
+The File Uploader component allows the user to select the files from the system to upload.
+It is an opinionated composition of the input and button components.
+
+##Usage
+
+Use the File Uploader if:
+
+* The user needs to select the files to upload by browsing the system folders.
+* The user needs to select the files based on specific file formats to upload.
+
+## Usage Guidelines
+
+Use the File Uploader if:
+
+* The user needs to select the files to upload by browsing the system folders.
+* The user needs to select the files based on specific file formats to upload.
+
+## Dependencies
+
+This component depends on the following CSS files:
+
+- `button.css`
+- `file-uploader.css`
+- `form-item.css`
+- `form-label.css`
+- `info-label.css`
+- `input.css`
+- `message-strip.css`
+- `object-status.css`
+
+## 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">
+
+<!-- Include dependencies -->
+<link href="node_modules/fundamental-styles/dist/button.css" rel="stylesheet">
+<link href="node_modules/fundamental-styles/dist/file-uploader.css" rel="stylesheet">
+<link href="node_modules/fundamental-styles/dist/form-item.css" rel="stylesheet">
+<link href="node_modules/fundamental-styles/dist/form-label.css" rel="stylesheet">
+<link href="node_modules/fundamental-styles/dist/info-label.css" rel="stylesheet">
+<link href="node_modules/fundamental-styles/dist/input.css" rel="stylesheet">
+<link href="node_modules/fundamental-styles/dist/message-strip.css" rel="stylesheet">
+<link href="node_modules/fundamental-styles/dist/object-status.css" rel="stylesheet">
+```
+
+## Basic Usage
+
+```html
+<div class="fd-form-item">
+    <label class="fd-form-label" id="browse_input1_label" >Upload Document</label>
+    <div class="fd-file-uploader">
+        <div class="fd-file-uploader__container">
+            <input
+            aria-labelledby="browse_input1_label"
+            class="fd-input fd-file-uploader__input"
+            onclick="browseFile('input1');"
+            title="Select a file"
+            type="text"
+            id="browse_input1"
+            autocomplete="off"
+            placeholder="Select a file"
+            >
+
+            <button
+                class="fd-button"
+                onclick="browseFile('input1');"
+                id="file-uploader-button-1"
+                aria-label="Select a file for uploading">
+                Browse...
+            </button>
+        </div>
+
+        <input
+        aria-labelledby="browse_input1_label"
+        hidden
+        id="input1"
+        class="fd-file-uploader__hidden"
+        type="file"
+        onchange="selectFile(this,'browse_input1')">
+    </div>
+</div>
+```
+
+## States
+
+| Class | Description |
+|-------|-------------|
+| `is-error` | Error state |
+| `is-information` | Information state |
+| `is-success` | Success state |
+| `is-warning` | Warning state |
+
+## Related Components
+
+This component works with or depends on:
+
+- `button`
+- `file-uploader`
+- `form-item`
+- `form-label`
+- `info-label`
+- `input`
+- `message-strip`
+- `object-status`
+
+## Design Tokens
+
+Key CSS variables used by this component:
+
+- `--horizontal`
+
+## Examples
+
+### Default
+
+File Uploader is a composition of the \
+
+```html
+<div class="fd-form-item">
+    <label class="fd-form-label" id="browse_input1_label" >Upload Document</label>
+    <div class="fd-file-uploader">
+        <div class="fd-file-uploader__container">
+            <input
+            aria-labelledby="browse_input1_label"
+            class="fd-input fd-file-uploader__input"
+            onclick="browseFile('input1');"
+            title="Select a file"
+            type="text"
+            id="browse_input1"
+            autocomplete="off"
+            placeholder="Select a file"
+            >
+
+            <button
+                class="fd-button"
+                onclick="browseFile('input1');"
+                id="file-uploader-button-1"
+                aria-label="Select a file for uploading">
+                Browse...
+            </button>
+        </div>
+
+        <input
+        aria-labelledby="browse_input1_label"
+        hidden
+        id="input1"
+        class="fd-file-uploader__hidden"
+        type="file"
+        onchange="selectFile(this,'browse_input1')">
+    </div>
+</div>
+```
+
+### After Selecting
+
+Once the user selects files, update the input and the hidden div to include the file names. The hidden div will announce the file names only once when the value changes.
+
+```html
+<div class="fd-form-item">
+    <label class="fd-form-label"  id="browse_input2_label" >Upload Document</label>
+    <div class="fd-file-uploader">
+        <div class="fd-file-uploader__container">
+            <input
+            aria-labelledby="browse_input2_label"
+            class="fd-input fd-file-uploader__input"
+            onclick="browseFile('input1');"
+            title="document.pdf"
+            type="text"
+            id="browse_input2"
+            autocomplete="off"
+            value="document.pdf"
+            >
+            <button
+                class="fd-button"
+                onclick="browseFile('input1');"
+                id="file-uploader-button-1"
+                aria-label="Select a file for uploading">Browse...
+            </button>
+        </div>
+        <div class="fd-file-uploader__hidden" aria-live="polite" aria-atomic="true">document.pdf</div>
+        <input
+        aria-labelledby="browse_input2_label"
+        hidden
+        id="input1"
+        class="fd-file-uploader__hidden"
+        type="file"
+        onchange="selectFile(this,'browse_input2')"
+        >
+    </div>
+</div>
+```
+
+### Status
+
+For Status File Uploader apply the corresponding status class `is-success`, `is-error`, `is-warning`, `is-information ` modifier to the input element.
+
+```html
+<div class="fd-form-item">
+    <label class="fd-form-label" id="browse_input7_label">Upload Document (Success)</label>
+    <div class="fd-file-uploader">
+        <div class="fd-file-uploader__container">
+            <input
+            aria-labelledby="browse_input7_label"
+            class="fd-input fd-file-uploader__input is-success"
+            onclick="browseFile('input2');"
+            id="browse_input7"
+            type="text"
+            title="Select a file"
+            placeholder="Select a file"
+            autocomplete="off"
+            >
+            <button
+                class="fd-button fd-file-uploader__button"
+                onclick="browseFile('input2');"
+                id="file-uploader-button-7"
+                aria-label="Select a file for uploading">Browse...
+            </button>
+        </div>
+
+        <input
+        aria-labelledby="browse_input7_label"
+        hidden
+        id="input6"
+        class="fd-file-uploader__hidden"
+        type="file"
+        onchange="selectFile(this,'browse_input7')">
+    </div>
+</div>
+<label class="fd-form-label" id="browse_input4_label">Upload Document (Error)</label>
+<div class="fd-file-uploader">
+    <div class="fd-file-uploader__container">
+        <input
+        aria-labelledby="browse_input4_label"
+        class="fd-input fd-file-uploader__input is-error"
+        onclick="browseFile('input2');"
+        id="browse_input4"
+        type="text"
+        title="Select a file"
+        placeholder="Select a file"
+        autocomplete="off"
+        >
+        <button
+            class="fd-button fd-file-uploader__button"
+            onclick="browseFile('input2');"
+            id="file-uploader-button-4"
+            aria-label="Select a file for uploading">Browse...
+        </button>
+    </div>
+
+    <input
+    aria-labelledby="browse_input4_label"
+    hidden
+    id="input3"
+    class="fd-file-uploader__hidden"
+    type="file"
+    onchange="selectFile(this,'browse_input4')">
+</div>
+<label class="fd-form-label" id="browse_input5_label">Upload Document (Warning)</label>
+<div class="fd-file-uploader">
+    <div class="fd-file-uploader__container">
+        <input
+        aria-labelledby="browse_input5_label"
+        class="fd-input fd-file-uploader__input is-warning"
+        onclick="browseFile('input2');"
+        id="browse_input5"
+        type="text"
+        title="Select a file"
+        placeholder="Select a file"
+        autocomplete="off"
+        >
+        <button
+            class="fd-button fd-file-uploader__button"
+            onclick="browseFile('input2');"
+            id="file-uploader-button-5"
+            aria-label="Select a file for uploading">Browse...
+        </button>
+    </div>
+
+    <input
+    aria-labelledby="browse_input5_label"
+    hidden
+    id="input4"
+    class="fd-file-uploader__hidden"
+    type="file"
+    onchange="selectFile(this,'browse_input5')">
+</div>
+<label class="fd-form-label" id="browse_input6_label">Upload Document (Information)</label>
+<div class="fd-file-uploader">
+    <div class="fd-file-uploader__container">
+        <input
+        aria-labelledby="browse_input6_label"
+        class="fd-input fd-file-uploader__input is-information"
+        onclick="browseFile('input2');"
+        id="browse_input3"
+        type="text"
+        title="Select a file"
+        placeholder="Select a file"
+        autocomplete="off"
+        >
+        <button
+            class="fd-button fd-file-uploader__button"
+            onclick="browseFile('input2');"
+            id="file-uploader-button-6"
+            aria-label="Select a file for uploading">Browse...
+        </button>
+    </div>
+
+    <input
+    aria-labelledby="browse_input6_label"
+    hidden
+    id="input5"
+    class="fd-file-uploader__hidden"
+    type="file"
+    onchange="selectFile(this,'browse_input6')">
+</div>
+```
+
+### File Uploader with File List
+
+<span class="fd-info-label fd-info-label--accent-color-3"><span class="fd-info-label__text">non-fiori 3</span></span><span style="margin-right: 0.5rem;"></span><span class="fd-info-label fd-info-label--accent-color-4"><span class="fd-info-label__text">CX</span></span>
+
+```html
+<div class="fd-form-item">
+    <div class="fd-file-uploader">
+        <div class="fd-file-uploader__container">
+            <input
+            class="fd-input fd-file-uploader__input"
+            title="Select a file"
+            type="text"
+            autocomplete="off"
+            placeholder="Select a file">
+            <button class="fd-button" title="Browse for a file" aria-label="Select a file for uploading">
+                Browse...
+            </button>
+        </div>
+
+        <input hidden class="fd-file-uploader__hidden" type="file">
+        <div class="fd-file-uploader__uploaded-files">
+            <p class="fd-file-uploader__label">No File Selected</p>
+        </div>
+    </div>
+</div>
+
+<hr><div class="fd-form-item">
+<div class="fd-file-uploader">
+    <div class="fd-file-uploader__container">
+        <input class="fd-input fd-file-uploader__input" title="Select a file" type="text" autocomplete="off" placeholder="Select a file">
+        <button class="fd-button" title="Browse for a file" aria-label="Select a file for uploading">
+            Browse...
+        </button>
+    </div>
+
+    <input aria-labelledby="browse_input1_label" hidden class="fd-file-uploader__hidden" type="file">
+
+    <div class="fd-file-uploader__uploaded-files">
+        <h3 class="fd-file-uploader__label">File Selected:</h3>
+        <ul class="fd-file-uploader__list">
+            <li class="fd-file-uploader__list-item">
+                <span class="fd-object-status fd-object-status--positive">
+                    <i class="fd-object-status__icon sap-icon--message-success" role="presentation"></i>
+                    <span class="fd-object-status__text">Filename.format</span>
+                </span>
+                <div class="fd-file-uploader__actions">
+                    <button title="Download File" aria-label="Download" class="fd-button fd-button--transparent">
+                        <i class="sap-icon--download"></i>
+                    </button>
+                    <button title="Delete File" aria-label="Delete" class="fd-button fd-button--transparent">
+                        <i class="sap-icon--decline"></i>
+                    </button>
+                </div>
+            </li>
+            <li class="fd-file-uploader__list-item">
+                <span class="fd-object-status fd-object-status--positive">
+                    <i class="fd-object-status__icon sap-icon--message-success" role="presentation"></i>
+                    <span class="fd-object-status__text">Verylonglonglonglonglonglongfilename.format</span>
+                </span>
+                <div class="fd-file-uploader__actions">
+                    <button title="Download File" aria-label="Download" class="fd-button fd-button--transparent">
+                        <i class="sap-icon--download"></i>
+                    </button>
+                    <button title="Delete File" aria-label="Delete" class="fd-button fd-button--transparent">
+                        <i class="sap-icon--decline"></i>
+                    </button>
+                </div>
+            </li>
+        </ul>
+
+        <h3 class="fd-file-uploader__label">Invalid Files:</h3>
+        <ul class="fd-file-uploader__list">
+            <li class="fd-file-uploader__list-item">
+                <span class="fd-object-status fd-object-status--negative">
+                    <i class="fd-object-status__icon sap-icon--message-error" role="presentation"></i>
+                    <span class="fd-object-status__text">Negative Object Status</span>
+                </span>
+            </li>
+            <li class="fd-file-uploader__list-item">
+                <div class="fd-message-strip fd-message-strip--error fd-message-strip--no-icon" role="alert">
+                    <p class="fd-message-strip__text">
+                        Example text: File with 12343 bytes is too big. Maximum of 1 byte are allowed.
+                    </p>
+                </div>
+            </li>
+        </ul>
+    </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/file-uploader/file-uploader.stories.js`
+
+For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).

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

@@ -0,0 +1,234 @@
+---
+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
+tags: []
+dependencies: []
+relatedComponents: []
+stability: stable
+generatedAt: 2026-06-09T18:29:01.515Z
+---
+
+# 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>
+
+<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>
+
+<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>
+
+    <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>
+
+        <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>
+
+            <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/).