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

package/data/components/dynamic-side.md

@@ -0,0 +1,197 @@
+---
+component: fd-dynamic-side
+title: Layouts/Dynamic Side Content
+category: Layouts
+selector: fd-dynamic-side
+cssFile: dynamic-side.css
+sourcePath: packages/styles/stories/Layouts/dynamic-side-content/dynamic-side-content.stories.js
+tags: []
+dependencies: ["dynamic-side-content"]
+relatedComponents: ["dynamic-side-content"]
+stability: stable
+generatedAt: 2026-06-09T18:29:01.779Z
+---
+
+# Layouts/Dynamic Side Content
+
+Dynamic side content is a layout control that displays supplemental content in a separate area to support the users' understanding of the main content displayed.
+
+**The dynamic side content consists of two elements:**
+
+*  \
+
+## Dependencies
+
+This component depends on the following CSS files:
+
+- `dynamic-side-content.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/dynamic-side.css" rel="stylesheet">
+
+<!-- Include dependencies -->
+<link href="node_modules/fundamental-styles/dist/dynamic-side-content.css" rel="stylesheet">
+```
+
+## Basic Usage
+
+```html
+<div class="fd-dynamic-side">
+    <div class="fd-dynamic-side__side">
+        <div class="docs-layout-grid-bg docs-layout-grid-bg--color-6">Side</div>
+    </div>
+    <div class="fd-dynamic-side__main">
+        <div class="docs-layout-grid-bg docs-layout-grid-bg--color-9">Main</div>
+    </div>
+</div>
+```
+
+## Modifiers
+
+| Class | Description |
+|-------|-------------|
+| `fd-dynamic-side--below` | To display side content below the main content area, keep `fd-dynamic-side__side` as the last child element and add the `fd-dynamic-side--below` modifier class. |
+| `fd-dynamic-side--equal-split` | The equal split mode provides users with a 50:50 view of the main content and side content, which enables users to show more data i.e |
+| `fd-dynamic-side--md` | Style variant |
+| `fd-dynamic-side--sm` | To display the dynamic side content for specific screen sizes, use the respective modifier classes:
+
+| Size &nbsp;&nbsp; | Modifier class &nbsp;&nbsp; |
+| :--- |:--- |
+| Small &nbsp;&nbsp; | \ |
+| `fd-dynamic-side--xl` | Style variant |
+
+## BEM Elements
+
+This component uses the following BEM elements:
+
+- `fd-dynamic-side__main`
+- `fd-dynamic-side__side`
+
+## Related Components
+
+This component works with or depends on:
+
+- `dynamic-side-content`
+
+## Examples
+
+### Left
+
+To display side content from the left, put `fd-dynamic-side__side` as the first child element of `fd-dynamic-side`.
+
+```html
+<div class="fd-dynamic-side">
+    <div class="fd-dynamic-side__side">
+        <div class="docs-layout-grid-bg docs-layout-grid-bg--color-6">Side</div>
+    </div>
+    <div class="fd-dynamic-side__main">
+        <div class="docs-layout-grid-bg docs-layout-grid-bg--color-9">Main</div>
+    </div>
+</div>
+```
+
+### Right
+
+To display side content from the right, put `fd-dynamic-side__side` as the second child element of `fd-dynamic-side`.
+
+```html
+<div class="fd-dynamic-side">
+    <div class="fd-dynamic-side__main">
+        <div class="docs-layout-grid-bg docs-layout-grid-bg--color-9">Main</div>
+    </div>
+    <div class="fd-dynamic-side__side">
+        <div class="docs-layout-grid-bg docs-layout-grid-bg--color-6">Side</div>
+    </div>
+</div>
+```
+
+### Below
+
+To display side content below the main content area, keep `fd-dynamic-side__side` as the last child element and add the `fd-dynamic-side--below` modifier class.
+
+```html
+<div class="fd-dynamic-side fd-dynamic-side--below">
+    <div class="fd-dynamic-side__main">
+        <div class="docs-layout-grid-bg docs-layout-grid-bg--color-9">Main</div>
+    </div>
+    <div class="fd-dynamic-side__side">
+        <div class="docs-layout-grid-bg docs-layout-grid-bg--color-6">Side</div>
+    </div>
+</div>
+```
+
+### Equal split
+
+The equal split mode provides users with a 50:50 view of the main content and side content, which enables users to show more data i.e. for comparison purposes. To enable equal split mode, add the `fd-dynamic-side--equal-split` modifier class to the container.
+
+```html
+<div class="fd-dynamic-side fd-dynamic-side--equal-split">
+    <div class="fd-dynamic-side__main">
+        <div class="docs-layout-grid-bg docs-layout-grid-bg--color-9">Main</div>
+    </div>
+    <div class="fd-dynamic-side__side">
+        <div class="docs-layout-grid-bg docs-layout-grid-bg--color-6">Side</div>
+    </div>
+</div>
+```
+
+### Responsiveness
+
+To display the dynamic side content for specific screen sizes, use the respective modifier classes:
+
+| Size &nbsp;&nbsp; | Modifier class &nbsp;&nbsp; |
+| :--- |:--- |
+| Small &nbsp;&nbsp; | \
+
+```html
+<h4>On extra large screens, the main content area occupies 75% of the width.</h4>
+<div class="fd-dynamic-side fd-dynamic-side--xl">
+    <div class="fd-dynamic-side__side">
+        <div class="docs-layout-grid-bg docs-layout-grid-bg--color-6">Side</div>
+    </div>
+    <div class="fd-dynamic-side__main">
+        <div class="docs-layout-grid-bg docs-layout-grid-bg--color-9">Main</div>
+    </div>
+</div>
+<h4>On medium-sized screens, the main content area occupies 66.66% of the width.</h4>
+<div class="fd-dynamic-side fd-dynamic-side--md">
+    <div class="fd-dynamic-side__side">
+        <div class="docs-layout-grid-bg docs-layout-grid-bg--color-6">Side</div>
+    </div>
+    <div class="fd-dynamic-side__main">
+        <div class="docs-layout-grid-bg docs-layout-grid-bg--color-9">Main</div>
+    </div>
+</div>
+<h4>On small screens, the main content area occupies 100% of the width and the side content is hidden.</h4>
+<div class="fd-dynamic-side fd-dynamic-side--sm">
+    <div class="fd-dynamic-side__side">
+        <div class="docs-layout-grid-bg docs-layout-grid-bg--color-6">Side</div>
+    </div>
+    <div class="fd-dynamic-side__main">
+        <div class="docs-layout-grid-bg docs-layout-grid-bg--color-9">Main</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/Layouts/dynamic-side-content/dynamic-side-content.stories.js`
+
+For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).

package/data/components/elevation.md

@@ -0,0 +1,110 @@
+---
+component: elevation
+title: Elevation
+category: elevation
+selector: 
+cssFile: 
+sourcePath: packages/common-css/stories/elevation/elevation.stories.js
+tags: []
+dependencies: []
+relatedComponents: []
+stability: stable
+generatedAt: 2026-06-09T18:29:01.667Z
+---
+
+# Elevation
+
+The z-index property specifies the stack order of an element. In order for z-index to work the elements need to be positioned: relative (default), absolute, fixed, sticky.
+<br><br>
+<b>CSS Class: </b>
+<code>.sap-elevation-<i style="color: red;">index</i></code><br><br>
+<b>SCSS Mixin: </b>
+<code>@include sap-elevation(<i style="color: red;">index</i>, <i style="color: red;">position</i>);</code><br><br>
+where:
+<ul>
+<li><code style="color: red;">index</code>: is an integer from 0 to 20</li>
+<li><code style="color: red;">position</code>: (optional) is one of the following : relative, absolute, fixed, sticky. If the property is omitted, the default value (relative) is applied.</li>
+</ul>
+
+## Basic Usage
+
+```html
+<style>
+    .sap-docs-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    }
+
+    .sap-docs-container div {
+    background: #69ADF8;
+    width: 4rem;
+    min-height: 4rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 0.5rem;
+    color: #fff;
+    }
+</style>
+<div class="sap-docs-container">
+    <div class="sap-elevation-0">0</div>
+    <div class="sap-elevation-1">1</div>
+    <div class="sap-elevation-2">2</div>
+    <div class="sap-elevation-3">3</div>
+    <div class="sap-elevation-4">4</div>
+    <div class="sap-elevation-5">5</div>
+    <div class="sap-elevation-auto">Auto</div>
+    <div class="sap-elevation-initial">Initial</div>
+    <div class="sap-elevation-inherit">Inherit</div>
+</div>
+```
+
+## Examples
+
+### Elevation
+
+```html
+<style>
+    .sap-docs-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    }
+
+    .sap-docs-container div {
+    background: #69ADF8;
+    width: 4rem;
+    min-height: 4rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 0.5rem;
+    color: #fff;
+    }
+</style>
+<div class="sap-docs-container">
+    <div class="sap-elevation-0">0</div>
+    <div class="sap-elevation-1">1</div>
+    <div class="sap-elevation-2">2</div>
+    <div class="sap-elevation-3">3</div>
+    <div class="sap-elevation-4">4</div>
+    <div class="sap-elevation-5">5</div>
+    <div class="sap-elevation-auto">Auto</div>
+    <div class="sap-elevation-initial">Initial</div>
+    <div class="sap-elevation-inherit">Inherit</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/common-css/stories/elevation/elevation.stories.js`
+
+For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).

package/data/components/feed-input.md

@@ -0,0 +1,346 @@
+---
+component: fd-feed-input
+title: Components/Feed Input
+category: Components
+selector: fd-feed-input
+cssFile: feed-input.css
+sourcePath: packages/styles/stories/Components/feed-input/feed-input.stories.js
+tags: []
+dependencies: ["avatar","button","feed-input","icon","textarea"]
+relatedComponents: ["avatar","button","feed-input","icon","textarea"]
+stability: stable
+generatedAt: 2026-06-09T18:29:01.497Z
+---
+
+# Components/Feed Input
+
+The feed input is specifically designed for users to type their own notes or comments and post them to a corresponding feed.
+
+##Usage
+**Use the feed input if:**
+
+- A user needs to input small amounts of text without formatting.
+- You expect multiple instances, such as notes or feed entries.
+
+**Do not use the feed input if:**
+
+- The user needs to format the text (rich text editor).
+- You need only a single text box instance. In this case, use the **Textarea** component (for multiple lines) or the text control (for a single line).
+
+## Usage Guidelines
+
+**Use the feed input if:**
+
+- A user needs to input small amounts of text without formatting.
+- You expect multiple instances, such as notes or feed entries.
+
+## When Not To Use
+
+- The user needs to format the text (rich text editor).
+- You need only a single text box instance. In this case, use the **Textarea** component (for multiple lines) or the text control (for a single line).
+
+## Dependencies
+
+This component depends on the following CSS files:
+
+- `avatar.css`
+- `button.css`
+- `feed-input.css`
+- `icon.css`
+- `textarea.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/feed-input.css" rel="stylesheet">
+
+<!-- Include dependencies -->
+<link href="node_modules/fundamental-styles/dist/avatar.css" rel="stylesheet">
+<link href="node_modules/fundamental-styles/dist/button.css" rel="stylesheet">
+<link href="node_modules/fundamental-styles/dist/feed-input.css" rel="stylesheet">
+<link href="node_modules/fundamental-styles/dist/icon.css" rel="stylesheet">
+<link href="node_modules/fundamental-styles/dist/textarea.css" rel="stylesheet">
+```
+
+## Basic Usage
+
+```html
+<div class="fd-feed-input"
+    role="group"
+    aria-label="Feed input empty example">
+    <div class="fd-feed-input__container">
+
+        <textarea class="fd-textarea fd-feed-input__textarea"
+            placeholder="Post something here"
+            required
+            rows="1"></textarea>
+            <button class="fd-button fd-feed-input__submit-button"
+                disabled
+                role="button"
+                aria-disabled="true"
+                aria-label="Submit"
+                title="Submit">
+                <i role="presentation" aria-hidden="true" class="sap-icon--paper-plane"></i>
+            </button>
+```
+
+## States
+
+| Class | Description |
+|-------|-------------|
+| `is-disabled` | Disabled state |
+
+## BEM Elements
+
+This component uses the following BEM elements:
+
+- `fd-feed-input__container`
+- `fd-feed-input__submit-button`
+- `fd-feed-input__textarea`
+- `fd-feed-input__thumb`
+
+## Related Components
+
+This component works with or depends on:
+
+- `avatar`
+- `button`
+- `feed-input`
+- `icon`
+- `textarea`
+
+## Design Tokens
+
+Key CSS variables used by this component:
+
+- `--fdButton_Badge_Margin_Inline_Start`
+- `--fdButton_Badge_Size_Attention`
+- `--fdButton_Clickable_Height`
+- `--fdButton_Compact_Height`
+- `--fdButton_Min_Width`
+- `--fdButton_Padding_X`
+- `--fdFeed_Input_Placeholder_Font_Style`
+- `--sapElement_Height`
+- `--sapGroup_ContentBackground`
+- `--sapTextColor`
+
+## Examples
+
+### Default
+
+The default feed input displays an empty text field with an inactive submit button.
+
+```html
+<div class="fd-feed-input"
+    role="group"
+    aria-label="Feed input empty example">
+    <div class="fd-feed-input__container">
+
+        <textarea class="fd-textarea fd-feed-input__textarea"
+            placeholder="Post something here"
+            required
+            rows="1"></textarea>
+            <button class="fd-button fd-feed-input__submit-button"
+                disabled
+                role="button"
+                aria-disabled="true"
+                aria-label="Submit"
+                title="Submit">
+                <i role="presentation" aria-hidden="true" class="sap-icon--paper-plane"></i>
+            </button>
+```
+
+### With text
+
+The input with text displays some text, activating the submit button.
+
+```html
+<div class="fd-feed-input"
+    role="group"
+    aria-label="Feed input with one row text">
+    <div class="fd-feed-input__container">
+
+        <textarea class="fd-textarea fd-feed-input__textarea"
+            placeholder="Post something here"
+            required
+            rows="1">When there is text, the submit button becomes active.
+        </textarea>
+        <button
+            class="fd-button fd-feed-input__submit-button"
+            aria-label="Submit"
+            aria-disabled="false"
+            title="Submit"
+            role="button"
+            >
+            <i role="presentation" aria-hidden="true" class="sap-icon--feeder-arrow"></i>
+        </button>
+```
+
+### Disabled
+
+The disabled feed input displays a text field and submit button that users cannot interact with.
+
+```html
+<div class="fd-feed-input is-disabled"
+    role="group"
+    aria-label="Feed input disabled example">
+    <div class="fd-feed-input__container">
+
+        <textarea class="fd-textarea fd-feed-input__textarea"
+            placeholder="Post something here"
+            required
+            rows="1"
+            aria-disabled="true"
+            disabled>Disabled</textarea>
+            <button class="fd-button fd-feed-input__submit-button"
+                disabled
+                role="button"
+                aria-label="Submit"
+                aria-disabled="true"
+                title="Submit">
+                <i role="presentation" aria-hidden="true" class="sap-icon--feeder-arrow"></i>
+            </button>
+```
+
+### No thumbnail
+
+Although the default feed input has a thumbnail, it is possible to remove it. Without a thumbnail, the input area size increases automatically.
+
+```html
+<div class="fd-feed-input"
+    role="group"
+    aria-label="Feed input empty example">
+    <div class="fd-feed-input__container">
+        <textarea class="fd-textarea fd-feed-input__textarea"
+            placeholder="Post something here"
+            required
+            rows="1">Without user image
+        </textarea>
+        <button class="fd-button fd-feed-input__submit-button"
+            role="button"
+            aria-label="Submit"
+            title="Submit">
+            <i role="presentation" aria-hidden="true" class="sap-icon--feeder-arrow"></i>
+        </button>
+    </div>
+```
+
+### Generic thumbnail
+
+A generic thumbnail will be displayed if no image has been chosen by the user.
+
+```html
+<div class="fd-feed-input"
+    role="group"
+    aria-label="Feed input empty example">
+    <div class="fd-feed-input__container">
+        <div class="fd-avatar fd-avatar--s fd-avatar--placeholder fd-feed-input__thumb"
+            role="img"
+            aria-label="John Doe">
+            <i class="fd-avatar__icon sap-icon--person-placeholder" role="presentation" aria-hidden="true"></i>
+        </div>
+        <textarea class="fd-textarea fd-feed-input__textarea"
+            placeholder="Post something here"
+            required
+            rows="1">With generic user image
+        </textarea>
+        <button
+            class="fd-button fd-feed-input__submit-button"
+            role="button"
+            aria-label="Submit"
+            title="Submit">
+            <i role="presentation" aria-hidden="true" class="sap-icon--feeder-arrow"></i>
+        </button>
+```
+
+### Multiline
+
+The multiline feed input displays a text field with multiple lines of text, which expands until a maximum height is reached.
+
+```html
+<div class="fd-feed-input"
+    role="group"
+    aria-label="Feed input height growth">
+    <div class="fd-feed-input__container">
+
+        <textarea class="fd-textarea fd-feed-input__textarea"
+            placeholder="Post something here"
+            required
+            rows="4">With every line
+            "textarea" grows upward
+            until it reaches
+            the max height
+        </textarea>
+        <button class="fd-button fd-feed-input__submit-button"
+            role="button"
+            aria-disabled="false"
+            aria-label="Submit"
+            title="Submit">
+            <i role="presentation" aria-hidden="true" class="sap-icon--feeder-arrow"></i>
+        </button>
+```
+
+### Max height
+
+The max height feed input displays a text field with the maximum amount of text lines it can contain. Once the text field has reached the maximum height, a scrollbar appears to access the overflowing text.
+
+```html
+<div class="fd-feed-input"
+    role="group"
+    aria-label="Feed input over max height">
+    <div class="fd-feed-input__container">
+
+        <textarea
+            class="fd-textarea fd-feed-input__textarea"
+            placeholder="Post something here"
+            required
+            rows="18">X
+            X
+            X
+            X
+            X
+            X
+            X
+            X
+            X
+            X
+            X
+            X
+            X
+            X
+            X
+            X
+            X
+            X
+            X
+            X
+        </textarea>
+        <button class="fd-button fd-feed-input__submit-button"
+            role="button"
+            aria-disabled="false"
+            aria-label="Submit"
+            title="Submit">
+            <i role="presentation" aria-hidden="true" class="sap-icon--feeder-arrow"></i>
+        </button>
+```
+
+## 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/feed-input/feed-input.stories.js`
+
+For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).