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

package/data/components/form-item.md

@@ -0,0 +1,464 @@
+---
+component: fd-form-item
+title: Components/Forms/Input
+category: Components
+selector: fd-form-item
+cssFile: form-item.css
+sourcePath: packages/styles/stories/Components/Forms/input/input.stories.js
+tags: []
+dependencies: []
+relatedComponents: []
+stability: stable
+generatedAt: 2026-06-09T18:29:01.450Z
+---
+
+# Components/Forms/Input
+
+Inputs are used to collect data from the user and should always be paired with a label. When a field is required, the label should include an asterisk (*).
+
+A text input field allows users to enter and edit text or numeric values in one line. To help users enter a valid value, it provides additional features like “auto-complete”, “suggestions”, and “value help”.
+
+##Usage
+
+Use the input field if:
+
+- The user needs to enter a short, single-line text or numbers, dates or times.
+- The user needs to select one or more items from a list of items, such a a multi-input.
+- The user needs to find one or more items out of a list of items by searching for more than one attribute, such as a combobox.
+
+Do not use the input field if:
+
+- The user needs to enter long texts. In this case, use the textarea.
+- The user needs to carry out a search. In this case, use the search field.
+
+## Usage Guidelines
+
+Use the input field if:
+
+- The user needs to enter a short, single-line text or numbers, dates or times.
+- The user needs to select one or more items from a list of items, such a a multi-input.
+- The user needs to find one or more items out of a list of items by searching for more than one attribute, such as a combobox.
+
+Do not use the input field if:
+
+- The user needs to enter long texts. In this case, use the textarea.
+- The user needs to carry out a search. In this case, use the search field.
+
+## 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="input-default">Full Name</label>
+    <input class="fd-input" type="text" id="input-default" placeholder="e.g., Jane Doe" autocomplete="off">
+</div>
+
+<div class="fd-form-item">
+    <label class="fd-form-label" for="input-hover">Full Name (Hover State)</label>
+    <input class="fd-input is-hover" type="text" id="input-hover" placeholder="e.g., Jane Doe" autocomplete="off">
+</div>
+
+<div class="fd-form-item">
+    <label class="fd-form-label" for="input-focus">Full Name (Focus State)</label>
+    <input class="fd-input is-focus" type="text" id="input-focus" placeholder="e.g., Jane Doe" autocomplete="off">
+</div>
+
+<div class="fd-form-item">
+    <label class="fd-form-label fd-form-label--required" for="input-required">Email Address</label>
+    <input class="fd-input" type="email" id="input-required" placeholder="e.g., user@example.com" autocomplete="off" required aria-required="true">
+</div>
+
+<div class="fd-form-item">
+    <label class="fd-form-label" for="input-password">Password</label>
+    <input class="fd-input" type="password" id="input-password" autocomplete="off" required aria-required="true">
+</div>
+
+<div class="fd-form-item">
+    <label class="fd-form-label" for="input-error">Username (Error)</label>
+    <input class="fd-input is-error" type="text" id="input-error" placeholder="Invalid username" autocomplete="off" aria-invalid="true" aria-describedby="input-error-message">
+    <div class="fd-input__sr-only" id="input-error-message">You have entered invalid username.</div>
+</div>
+
+<div class="fd-form-item">
+    <label class="fd-form-label" for="input-error-hover">Username (Error + Hover)</label>
+    <input class="fd-input is-error is-hover" type="text" id="input-error-hover" placeholder="Invalid username" autocomplete="off" aria-invalid="true" aria-describedby="input-error-hover-message">
+    <div class="fd-input__sr-only" id="input-error-hover-message">You have entered invalid username.</div>
+</div>
+
+<div class="fd-form-item">
+    <label class="fd-form-label" for="input-error-focus">Username (Error + Focus)</label>
+    <input class="fd-input is-error is-focus" type="text" id="input-error-focus" placeholder="Invalid username" autocomplete="off" aria-invalid="true" aria-describedby="input-error-focus-message">
+    <div class="fd-input__sr-only" id="input-error-focus-message">You have entered invalid username.</div>
+</div>
+
+<div class="fd-form-item">
+    <label class="fd-form-label" for="input-success">Phone Number (Success)</label>
+    <input class="fd-input is-success" type="tel" id="input-success" placeholder="e.g., +1 555 123 4567" autocomplete="off" aria-describedby="input-success-message">
+    <div class="fd-input__sr-only" id="input-success-message">Entry successfully validated</div>
+</div>
+
+<div class="fd-form-item">
+    <label class="fd-form-label" for="input-success-hover">Phone Number (Success + Hover)</label>
+    <input class="fd-input is-success is-hover" type="tel" id="input-success-hover" placeholder="e.g., +1 555 123 4567" autocomplete="off" aria-describedby="input-success-hover-message">
+    <div class="fd-input__sr-only" id="input-success-hover-message">Entry successfully validated</div>
+</div>
+
+<div class="fd-form-item">
+    <label class="fd-form-label" for="input-success-focus">Phone Number (Success + Focus)</label>
+    <input class="fd-input is-success is-focus" type="tel" id="input-success-focus" placeholder="e.g., +1 555 123 4567" autocomplete="off" aria-describedby="input-success-focus-message">
+    <div class="fd-input__sr-only" id="input-success-focus-message">Entry successfully validated</div>
+</div>
+
+<div class="fd-form-item">
+    <label class="fd-form-label" for="input-warning">Security Answer (Warning)</label>
+    <input class="fd-input is-warning" type="text" id="input-warning" placeholder="e.g., Your first pet's name" autocomplete="off" aria-describedby="input-warning-message">
+    <div class="fd-input__sr-only" id="input-warning-message">Warning message</div>
+</div>
+
+<div class="fd-form-item">
+    <label class="fd-form-label" for="input-warning-hover">Security Answer (Warning + Hover)</label>
+    <input class="fd-input is-warning is-hover" type="text" id="input-warning-hover" placeholder="e.g., Your first pet's name" autocomplete="off" aria-describedby="input-warning-hover-message">
+    <div class="fd-input__sr-only" id="input-warning-hover-message">Warning message</div>
+</div>
+
+<div class="fd-form-item">
+    <label class="fd-form-label" for="input-warning-focus">Security Answer (Warning + Focus)</label>
+    <input class="fd-input is-warning is-focus" type="text" id="input-warning-focus" placeholder="e.g., Your first pet's name" autocomplete="off" aria-describedby="input-warning-focus-message">
+    <div class="fd-input__sr-only" id="input-warning-focus-message">Warning message</div>
+</div>
+
+<div class="fd-form-item">
+    <label class="fd-form-label" for="input-info">Notes (Info)</label>
+    <input class="fd-input is-information" type="text" id="input-info" placeholder="e.g., Optional comments" autocomplete="off" aria-describedby="input-info-message">
+    <div class="fd-input__sr-only" id="input-info-message">Informative message</div>
+</div>
+
+<div class="fd-form-item">
+    <label class="fd-form-label" for="input-info-hover">Notes (Info + Hover)</label>
+    <input class="fd-input is-information is-hover" type="text" id="input-info-hover" placeholder="e.g., Optional comments" autocomplete="off" aria-describedby="input-info-hover-message">
+    <div class="fd-input__sr-only" id="input-info-hover-message">Informative message</div>
+</div>
+
+<div class="fd-form-item">
+    <label class="fd-form-label" for="input-info-focus">Notes (Info + Focus)</label>
+    <input class="fd-input is-information is-focus" type="text" id="input-info-focus" placeholder="e.g., Optional comments" autocomplete="off" aria-describedby="input-info-focus-message">
+    <div class="fd-input__sr-only" id="input-info-focus-message">Informative message</div>
+</div>
+
+<div class="fd-form-item">
+    <label class="fd-form-label fd-form-label--disabled" for="input-disabled" aria-disabled="true">Organization</label>
+    <input class="fd-input" type="text" id="input-disabled" value="SAP" disabled>
+</div>
+
+<div class="fd-form-item">
+    <label class="fd-form-label" for="input-readonly">Country (Read-Only)</label>
+    <input class="fd-input" type="text" id="input-readonly" value="Canada" readonly>
+</div>
+
+<div class="fd-form-item fd-form-item--horizontal">
+    <label class="fd-form-label" for="input-horizontal">Department</label>
+    <input class="fd-input" type="text" id="input-horizontal" placeholder="e.g., Marketing">
+</div>
+
+<div class="fd-form-item fd-form-item--horizontal">
+    <label class="fd-form-label fd-form-label--required" for="input-horizontal-required">Employee ID</label>
+    <input class="fd-input" type="text" id="input-horizontal-required" placeholder="e.g., E12345" required aria-required="true">
+</div>
+```
+
+## Modifiers
+
+| Class | Description |
+|-------|-------------|
+| `fd-form-item--horizontal` | Style variant |
+
+## States
+
+| Class | Description |
+|-------|-------------|
+| `is-error` | Error state |
+| `is-focus` | Focus state |
+| `is-hover` | Hover state |
+| `is-information` | Information state |
+| `is-success` | Success state |
+| `is-warning` | Warning state |
+
+## Examples
+
+### Default
+
+The standard input component can be displayed by using `fd-input` class
+
+```html
+<div class="fd-form-item">
+    <label class="fd-form-label" for="input-default">Full Name</label>
+    <input class="fd-input" type="text" id="input-default" placeholder="e.g., Jane Doe" autocomplete="off">
+</div>
+
+<div class="fd-form-item">
+    <label class="fd-form-label" for="input-hover">Full Name (Hover State)</label>
+    <input class="fd-input is-hover" type="text" id="input-hover" placeholder="e.g., Jane Doe" autocomplete="off">
+</div>
+
+<div class="fd-form-item">
+    <label class="fd-form-label" for="input-focus">Full Name (Focus State)</label>
+    <input class="fd-input is-focus" type="text" id="input-focus" placeholder="e.g., Jane Doe" autocomplete="off">
+</div>
+
+<div class="fd-form-item">
+    <label class="fd-form-label fd-form-label--required" for="input-required">Email Address</label>
+    <input class="fd-input" type="email" id="input-required" placeholder="e.g., user@example.com" autocomplete="off" required aria-required="true">
+</div>
+
+<div class="fd-form-item">
+    <label class="fd-form-label" for="input-password">Password</label>
+    <input class="fd-input" type="password" id="input-password" autocomplete="off" required aria-required="true">
+</div>
+
+<div class="fd-form-item">
+    <label class="fd-form-label" for="input-error">Username (Error)</label>
+    <input class="fd-input is-error" type="text" id="input-error" placeholder="Invalid username" autocomplete="off" aria-invalid="true" aria-describedby="input-error-message">
+    <div class="fd-input__sr-only" id="input-error-message">You have entered invalid username.</div>
+</div>
+
+<div class="fd-form-item">
+    <label class="fd-form-label" for="input-error-hover">Username (Error + Hover)</label>
+    <input class="fd-input is-error is-hover" type="text" id="input-error-hover" placeholder="Invalid username" autocomplete="off" aria-invalid="true" aria-describedby="input-error-hover-message">
+    <div class="fd-input__sr-only" id="input-error-hover-message">You have entered invalid username.</div>
+</div>
+
+<div class="fd-form-item">
+    <label class="fd-form-label" for="input-error-focus">Username (Error + Focus)</label>
+    <input class="fd-input is-error is-focus" type="text" id="input-error-focus" placeholder="Invalid username" autocomplete="off" aria-invalid="true" aria-describedby="input-error-focus-message">
+    <div class="fd-input__sr-only" id="input-error-focus-message">You have entered invalid username.</div>
+</div>
+
+<div class="fd-form-item">
+    <label class="fd-form-label" for="input-success">Phone Number (Success)</label>
+    <input class="fd-input is-success" type="tel" id="input-success" placeholder="e.g., +1 555 123 4567" autocomplete="off" aria-describedby="input-success-message">
+    <div class="fd-input__sr-only" id="input-success-message">Entry successfully validated</div>
+</div>
+
+<div class="fd-form-item">
+    <label class="fd-form-label" for="input-success-hover">Phone Number (Success + Hover)</label>
+    <input class="fd-input is-success is-hover" type="tel" id="input-success-hover" placeholder="e.g., +1 555 123 4567" autocomplete="off" aria-describedby="input-success-hover-message">
+    <div class="fd-input__sr-only" id="input-success-hover-message">Entry successfully validated</div>
+</div>
+
+<div class="fd-form-item">
+    <label class="fd-form-label" for="input-success-focus">Phone Number (Success + Focus)</label>
+    <input class="fd-input is-success is-focus" type="tel" id="input-success-focus" placeholder="e.g., +1 555 123 4567" autocomplete="off" aria-describedby="input-success-focus-message">
+    <div class="fd-input__sr-only" id="input-success-focus-message">Entry successfully validated</div>
+</div>
+
+<div class="fd-form-item">
+    <label class="fd-form-label" for="input-warning">Security Answer (Warning)</label>
+    <input class="fd-input is-warning" type="text" id="input-warning" placeholder="e.g., Your first pet's name" autocomplete="off" aria-describedby="input-warning-message">
+    <div class="fd-input__sr-only" id="input-warning-message">Warning message</div>
+</div>
+
+<div class="fd-form-item">
+    <label class="fd-form-label" for="input-warning-hover">Security Answer (Warning + Hover)</label>
+    <input class="fd-input is-warning is-hover" type="text" id="input-warning-hover" placeholder="e.g., Your first pet's name" autocomplete="off" aria-describedby="input-warning-hover-message">
+    <div class="fd-input__sr-only" id="input-warning-hover-message">Warning message</div>
+</div>
+
+<div class="fd-form-item">
+    <label class="fd-form-label" for="input-warning-focus">Security Answer (Warning + Focus)</label>
+    <input class="fd-input is-warning is-focus" type="text" id="input-warning-focus" placeholder="e.g., Your first pet's name" autocomplete="off" aria-describedby="input-warning-focus-message">
+    <div class="fd-input__sr-only" id="input-warning-focus-message">Warning message</div>
+</div>
+
+<div class="fd-form-item">
+    <label class="fd-form-label" for="input-info">Notes (Info)</label>
+    <input class="fd-input is-information" type="text" id="input-info" placeholder="e.g., Optional comments" autocomplete="off" aria-describedby="input-info-message">
+    <div class="fd-input__sr-only" id="input-info-message">Informative message</div>
+</div>
+
+<div class="fd-form-item">
+    <label class="fd-form-label" for="input-info-hover">Notes (Info + Hover)</label>
+    <input class="fd-input is-information is-hover" type="text" id="input-info-hover" placeholder="e.g., Optional comments" autocomplete="off" aria-describedby="input-info-hover-message">
+    <div class="fd-input__sr-only" id="input-info-hover-message">Informative message</div>
+</div>
+
+<div class="fd-form-item">
+    <label class="fd-form-label" for="input-info-focus">Notes (Info + Focus)</label>
+    <input class="fd-input is-information is-focus" type="text" id="input-info-focus" placeholder="e.g., Optional comments" autocomplete="off" aria-describedby="input-info-focus-message">
+    <div class="fd-input__sr-only" id="input-info-focus-message">Informative message</div>
+</div>
+
+<div class="fd-form-item">
+    <label class="fd-form-label fd-form-label--disabled" for="input-disabled" aria-disabled="true">Organization</label>
+    <input class="fd-input" type="text" id="input-disabled" value="SAP" disabled>
+</div>
+
+<div class="fd-form-item">
+    <label class="fd-form-label" for="input-readonly">Country (Read-Only)</label>
+    <input class="fd-input" type="text" id="input-readonly" value="Canada" readonly>
+</div>
+
+<div class="fd-form-item fd-form-item--horizontal">
+    <label class="fd-form-label" for="input-horizontal">Department</label>
+    <input class="fd-input" type="text" id="input-horizontal" placeholder="e.g., Marketing">
+</div>
+
+<div class="fd-form-item fd-form-item--horizontal">
+    <label class="fd-form-label fd-form-label--required" for="input-horizontal-required">Employee ID</label>
+    <input class="fd-input" type="text" id="input-horizontal-required" placeholder="e.g., E12345" required aria-required="true">
+</div>
+```
+
+### States
+
+```html
+<!-- Default Input -->
+<div class="fd-form-item">
+    <label class="fd-form-label" for="input-default-field">Full Name</label>
+    <input
+    class="fd-input"
+    type="text"
+    id="input-default-field"
+    placeholder="e.g., Jane Doe"
+    autocomplete="off"
+    >
+</div>
+
+<!-- Success Input with Message -->
+<div class="fd-form-item">
+    <label class="fd-form-label" for="input-success-field">Email Address</label>
+    <div class="fd-popover">
+        <div class="fd-popover__control" aria-controls="success-message" aria-expanded="true" aria-haspopup="true">
+            <input
+            class="fd-input is-success"
+            type="email"
+            id="input-success-field"
+            placeholder="e.g., user@example.com"
+            autocomplete="off"
+            aria-describedby="success-message-input success-message"
+            >
+            <div class="fd-input__sr-only" id="success-message-input">Value State Success</div>
+        </div>
+        <div class="fd-popover__body fd-popover__body--input-message-group fd-popover__body--no-arrow" id="success-message">
+            <div class="fd-form-message fd-form-message--success">Email address looks good.</div>
+        </div>
+    </div>
+</div>
+
+<!-- Error Input with Message -->
+<div class="fd-form-item">
+    <label class="fd-form-label" for="input-error-field">Username</label>
+    <div class="fd-popover">
+        <div class="fd-popover__control" aria-controls="error-message-state" aria-expanded="true" aria-haspopup="true">
+            <input
+            class="fd-input is-error"
+            type="text"
+            id="input-error-field"
+            placeholder="e.g., johndoe123"
+            autocomplete="off"
+            aria-describedby="error-message-input error-message-state"
+            aria-invalid="true"
+            >
+            <div class="fd-input__sr-only" id="error-message-input">Value State Error</div>
+        </div>
+        <div class="fd-popover__body fd-popover__body--input-message-group fd-popover__body--no-arrow" id="error-message-state">
+            <div class="fd-form-message fd-form-message--error">Username must be at least 6 characters.</div>
+        </div>
+    </div>
+</div>
+
+<!-- Warning Input with Message -->
+<div class="fd-form-item">
+    <label class="fd-form-label" for="input-warning-field">Security Answer</label>
+    <div class="fd-popover">
+        <div class="fd-popover__control" aria-controls="warn-message" aria-expanded="true" aria-haspopup="true">
+            <input
+            class="fd-input is-warning"
+            type="text"
+            id="input-warning-field"
+            placeholder="e.g., Your first pet's name"
+            autocomplete="off"
+            aria-describedby="warn-message-input warn-message"
+            >
+            <div class="fd-input__sr-only" id="warn-message-input">Value State Warning</div>
+        </div>
+        <div class="fd-popover__body fd-popover__body--input-message-group fd-popover__body--no-arrow" id="warn-message">
+            <div class="fd-form-message fd-form-message--warning">Make sure this is easy for you to remember.</div>
+        </div>
+    </div>
+</div>
+<!-- Information Input with Message -->
+<div class="fd-form-item">
+    <label class="fd-form-label" for="input-info-field">Additional Notes</label>
+    <div class="fd-popover">
+        <div class="fd-popover__control" aria-controls="info-message" aria-expanded="true" aria-haspopup="true">
+            <input
+            class="fd-input is-information"
+            type="text"
+            id="input-info-field"
+            placeholder="Optional"
+            autocomplete="off"
+            aria-describedby="info-message-input info-message"
+            >
+            <div class="fd-input__sr-only" id="info-message-input">Value State Information</div>
+        </div>
+        <div class="fd-popover__body fd-popover__body--input-message-group fd-popover__body--no-arrow" id="info-message">
+            <div class="fd-form-message fd-form-message--information">You can leave this blank if not applicable.</div>
+        </div>
+    </div>
+</div>
+
+<!-- Disabled Input -->
+<div class="fd-form-item">
+    <label class="fd-form-label fd-form-label--disabled" for="input-disabled-field" aria-disabled="true">Organization</label>
+    <input
+    class="fd-input"
+    type="text"
+    id="input-disabled-field"
+    value="SAP"
+    placeholder="Organization"
+    autocomplete="off"
+    disabled
+    >
+</div>
+
+<!-- Read-Only Input -->
+<div class="fd-form-item">
+    <label class="fd-form-label" for="input-readonly-field">Country</label>
+    <input
+    class="fd-input"
+    type="text"
+    id="input-readonly-field"
+    value="Canada"
+    placeholder="Country"
+    autocomplete="off"
+    readonly
+    >
+</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/input/input.stories.js`
+
+For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).

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

@@ -0,0 +1,126 @@
+---
+component: fd-form-label
+title: AI/Patterns/Notice
+category: AI
+selector: fd-form-label
+cssFile: form-label.css
+sourcePath: packages/styles/stories/AI/Patterns/ai-notice/ai-notice.stories.js
+tags: ["ai","experimental"]
+dependencies: []
+relatedComponents: []
+stability: experimental
+generatedAt: 2026-06-09T18:29:01.697Z
+---
+
+# AI/Patterns/Notice
+
+> **🧪 EXPERIMENTAL**: This component is experimental and its API may change.
+
+The "AI Notice" pattern provides clear references about the quality and reliability of AI-generated results in written text. It is an essential part of the broader "messaging patterns" associated with AI services and integrates with other AI interaction patterns like explainability and feedback. This pattern helps users understand the trustworthiness of AI-generated content, enhancing transparency and confidence. It's especially useful in environments where AI-generated information is key, such as collaborative platforms, educational tools, content creation apps, and informational websites.
+<br><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-label.css" rel="stylesheet">
+
+```
+
+## Basic Usage
+
+```html
+<h4>For Joule</h4>
+<div>
+    <label class="fd-form-label">Created with <a href="#" class="fd-link" tabindex="0"><span class="fd-link__content">Joule</span></a>. Verify results before using them.</label>
+</div>
+<h4>For SAP Business AI</h4>
+<div>
+    <label class="fd-form-label fd-form-label--required" aria-required="true">Created with <a href="#" class="fd-link" tabindex="0"><span class="fd-link__content">SAP Business AI</span></a>. Verify results before using them.</label>
+</div>
+
+<h4>With Text Area</h4>
+<div class="fd-form-item">
+    <div class="fd-form-item__label-container">
+        <label class="fd-form-label" for="textarea-ai-1">How will you measure this goal? </label>
+        <button class="fd-button">
+            <i class="sap-icon--ai"></i>
+            <span class="fd-button__text">Revise</span>
+            <i class="sap-icon--slim-arrow-down"></i>
+        </button>
+        <div role="textbox" contenteditable="true" aria-multiline="true" class="fd-textarea fd-textarea--ai is-information" id="textarea-ai-1" placeholder="Write something here" rows="5"><p class="fd-ai-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum eligendi quae recusandae rem illum? <mark>Vel minus corrupti in numquam qui eius totam!</mark> Sequi aut molestiae minus inventore. Sapiente, officia possimus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos fugiat quas cum, voluptas consequuntur totam aliquam illum aspernatur corrupti consectetur sint eaque sequi magni alias aliquid saepe quod ab voluptates.</p>
+    </div>
+    <div class="fd-textarea-counter-container">
+        <label class="fd-form-label">Created with <a href="#" class="fd-link" tabindex="0"><span class="fd-link__content">Joule</span></a>. Verify results before using them.</label>
+        <div class="fd-textarea-counter">150 characters left</div>
+    </div>
+
+</div>
+</div>
+```
+
+## Modifiers
+
+| Class | Description |
+|-------|-------------|
+| `fd-form-label--required` | Style variant |
+
+## States
+
+| Class | Description |
+|-------|-------------|
+| `is-information` | Information state |
+
+## Examples
+
+### AINotice
+
+```html
+<h4>For Joule</h4>
+<div>
+    <label class="fd-form-label">Created with <a href="#" class="fd-link" tabindex="0"><span class="fd-link__content">Joule</span></a>. Verify results before using them.</label>
+</div>
+<h4>For SAP Business AI</h4>
+<div>
+    <label class="fd-form-label fd-form-label--required" aria-required="true">Created with <a href="#" class="fd-link" tabindex="0"><span class="fd-link__content">SAP Business AI</span></a>. Verify results before using them.</label>
+</div>
+
+<h4>With Text Area</h4>
+<div class="fd-form-item">
+    <div class="fd-form-item__label-container">
+        <label class="fd-form-label" for="textarea-ai-1">How will you measure this goal? </label>
+        <button class="fd-button">
+            <i class="sap-icon--ai"></i>
+            <span class="fd-button__text">Revise</span>
+            <i class="sap-icon--slim-arrow-down"></i>
+        </button>
+        <div role="textbox" contenteditable="true" aria-multiline="true" class="fd-textarea fd-textarea--ai is-information" id="textarea-ai-1" placeholder="Write something here" rows="5"><p class="fd-ai-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum eligendi quae recusandae rem illum? <mark>Vel minus corrupti in numquam qui eius totam!</mark> Sequi aut molestiae minus inventore. Sapiente, officia possimus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos fugiat quas cum, voluptas consequuntur totam aliquam illum aspernatur corrupti consectetur sint eaque sequi magni alias aliquid saepe quod ab voluptates.</p>
+    </div>
+    <div class="fd-textarea-counter-container">
+        <label class="fd-form-label">Created with <a href="#" class="fd-link" tabindex="0"><span class="fd-link__content">Joule</span></a>. Verify results before using them.</label>
+        <div class="fd-textarea-counter">150 characters left</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/AI/Patterns/ai-notice/ai-notice.stories.js`
+
+For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).