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

package/data/components/off-screen.md

@@ -0,0 +1,87 @@
+---
+component: fd-off-screen
+title: Dev/Off Screen
+category: Dev
+selector: fd-off-screen
+cssFile: off-screen.css
+sourcePath: packages/styles/stories/Dev/off-screen/off-screen.stories.js
+tags: ["a11y"]
+dependencies: ["off-screen","text"]
+relatedComponents: ["off-screen","text"]
+stability: experimental
+generatedAt: 2026-06-09T18:29:01.680Z
+---
+
+# Dev/Off Screen
+
+> **🧪 EXPERIMENTAL**: This component is experimental and its API may change.
+
+For aria-live to read any change in element, we need to place element but it should not be visible to user.
+            At the same time, it can not be made \
+
+## Dependencies
+
+This component depends on the following CSS files:
+
+- `off-screen.css`
+- `text.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/off-screen.css" rel="stylesheet">
+
+<!-- Include dependencies -->
+<link href="node_modules/fundamental-styles/dist/off-screen.css" rel="stylesheet">
+<link href="node_modules/fundamental-styles/dist/text.css" rel="stylesheet">
+```
+
+## Basic Usage
+
+```html
+<div class="fd-off-screen" aria-live="polite">
+    This will be read, whenever this element changes.
+</div>
+<div class="fd-text">Text with aria-live is kept far left of the screen. so it will not be visible, but it will be read by screen reader.</div>
+```
+
+## Related Components
+
+This component works with or depends on:
+
+- `off-screen`
+- `text`
+
+## Examples
+
+### Primary
+
+For aria-live to read any change in element, we need to place element but it should not be visible to user.
+
+```html
+<div class="fd-off-screen" aria-live="polite">
+    This will be read, whenever this element changes.
+</div>
+<div class="fd-text">Text with aria-live is kept far left of the screen. so it will not be visible, but it will be read by screen reader.</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/Dev/off-screen/off-screen.stories.js`
+
+For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).

package/data/components/overflow.md

@@ -0,0 +1,97 @@
+---
+component: overflow
+title: Overflow
+category: overflow
+selector: 
+cssFile: 
+sourcePath: packages/common-css/stories/overflow/overflow.stories.js
+tags: []
+dependencies: []
+relatedComponents: []
+stability: stable
+generatedAt: 2026-06-09T18:29:01.665Z
+---
+
+# Overflow
+
+The overflow property controls what happens to content that is too big to fit into an area. <br>
+        The following values are available:
+        <ul>
+            <li><b>visible</b>: default value. The overflow is not clipped and the content renders outside the element's box</li>
+            <li><b>hidden</b>: the overflow is clipped to fit into the area, and the rest of the content will be hidden</li>
+            <li><b>scroll</b>: the overflow is clipped, and a scrollbar is added to see the rest of the content</li>
+            <li><b>auto</b>: the overflow is not clipped, scrollbars are added only when necessary</li>
+        </ul>
+
+## Basic Usage
+
+```html
+<div>
+    <div class="sap-overflow-visible">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </div>
+</div>
+```
+
+## Examples
+
+### OverflowVisible
+
+For overflow visible use: <code>.sap-overflow-visible</code>, <code>.sap-overflow-x-visible</code> or <code>.sap-overflow-y-visible</code> classes.
+
+```html
+<div>
+    <div class="sap-overflow-visible">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </div>
+</div>
+```
+
+### OverflowHidden
+
+For overflow hidden use: <code>.sap-overflow-hidden</code>, <code>.sap-overflow-x-hidden</code> or <code>.sap-overflow-y-hidden</code> classes.
+
+```html
+<div>
+    <div class="sap-overflow-hidden">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </div>
+</div>
+```
+
+### OverflowScroll
+
+For overflow scroll use: <code>.sap-overflow-scroll</code>, <code>.sap-overflow-x-scroll</code> or <code>.sap-overflow-y-scroll</code> classes.
+
+```html
+<div>
+    <div class="sap-overflow-scroll">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </div>
+</div>
+```
+
+### OverflowAuto
+
+For overflow auto use: <code>.sap-overflow-auto</code>, <code>.sap-overflow-x-auto</code> or <code>.sap-overflow-y-auto</code> classes.
+
+```html
+<div>
+    <div class="sap-overflow-auto">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </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/overflow/overflow.stories.js`
+
+For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).

package/data/components/padding.md

@@ -0,0 +1,122 @@
+---
+component: padding
+title: Padding
+category: padding
+selector: 
+cssFile: 
+sourcePath: packages/common-css/stories/padding/padding.stories.js
+tags: []
+dependencies: []
+relatedComponents: []
+stability: stable
+generatedAt: 2026-06-09T18:29:01.663Z
+---
+
+# Padding
+
+The CSS padding properties are used to generate space around an element's content, inside of any defined borders.
+
+## Basic Usage
+
+```html
+<pre>
+    .custom-card {
+    background: var(--sapBackgroundColor);
+    width: 4rem;
+    height: 6rem;
+
+    @include sap-set-padding-x(1.5rem);
+    @include sap-set-padding-y(0.25rem);
+    }
+</pre>
+```
+
+## Examples
+
+### HelperMixins
+
+<table style="width: 100%; border-collapse: collapse; margin-top: 1rem;">
+    <tr>
+        <th style="padding: 0.25rem 0.75rem;">Mixin</th>
+        <th style="padding: 0.25rem 0.75rem;">Resultant CSS</th>
+        <th style="padding: 0.25rem 0.75rem;">$value</th>
+    </tr>
+    <tr>
+        <td style="padding: 0.25rem 0.75rem;">@include sap-set-padding-all($value)</td>
+        <td style="padding: 0.25rem 0.75rem;">padding: $value;</td>
+        <td style="padding: 0.25rem 0.75rem;">defined by the user</td>
+    </tr>
+    <tr>
+        <td style="padding: 0.25rem 0.75rem;">@include sap-set-padding-top($value)</td>
+        <td style="padding: 0.25rem 0.75rem;">padding-block-start: $value;</td>
+        <td style="padding: 0.25rem 0.75rem;">defined by the user</td>
+    </tr>
+    <tr>
+        <td style="padding: 0.25rem 0.75rem;">@include sap-set-padding-bottom($value)</td>
+        <td style="padding: 0.25rem 0.75rem;">padding-block-end: $value;</td>
+        <td style="padding: 0.25rem 0.75rem;">defined by the user</td>
+    </tr>
+    <tr>
+        <td style="padding: 0.25rem 0.75rem;">@include sap-set-padding-begin($value)</td>
+        <td style="padding: 0.25rem 0.75rem;">padding-inline-start: $value;</td>
+        <td style="padding: 0.25rem 0.75rem;">defined by the user</td>
+    </tr>
+    <tr>
+        <td style="padding: 0.25rem 0.75rem;">@include sap-set-padding-end($value)</td>
+        <td style="padding: 0.25rem 0.75rem;">padding-inline-end: $value;</td>
+        <td style="padding: 0.25rem 0.75rem;">defined by the user</td>
+    </tr>
+    <tr>
+        <td style="padding: 0.25rem 0.75rem;">@include sap-set-padding-x-equal($value)</td>
+        <td style="padding: 0.25rem 0.75rem;">padding-inline: $value;</td>
+        <td style="padding: 0.25rem 0.75rem;">defined by the user</td>
+    </tr>
+    <tr>
+        <td style="padding: 0.25rem 0.75rem;">@include sap-set-padding-y-equal($value)</td>
+        <td style="padding: 0.25rem 0.75rem;">padding-block: $value;</td>
+        <td style="padding: 0.25rem 0.75rem;">defined by the user</td>
+    </tr>
+    <tr>
+        <td style="padding: 0.25rem 0.75rem;">@include sap-set-padding-x($valueLeft, $valueRight)</td>
+        <td style="padding: 0.25rem 0.75rem;">padding-inline-start: $valueLeft;<br>padding-inline-end: $valueRight;</td>
+        <td style="padding: 0.25rem 0.75rem;">defined by the user</td>
+    </tr>
+    <tr>
+        <td style="padding: 0.25rem 0.75rem;">@include sap-set-padding-y($valueTop, $valueBottom)</td>
+        <td style="padding: 0.25rem 0.75rem;">padding-block-start: $valueTop;<br>padding-block-end: $valueBottom;</td>
+        <td style="padding: 0.25rem 0.75rem;">defined by the user</td>
+    </tr>
+    <tr>
+        <td style="padding: 0.25rem 0.75rem;">@include sap-padding($value, $side)</td>
+        <td style="padding: 0.25rem 0.75rem;">based on parameters</td>
+        <td style="padding: 0.25rem 0.75rem;">$value: tiny, small, medium, large or defined by the user <br> $side:
+            top, bottom, begin, end, x, y, inline, block, inline-start, inline-end, block-start, block-end
+        </td>
+    </tr>
+</table>
+
+```html
+<pre>
+    .custom-card {
+    background: var(--sapBackgroundColor);
+    width: 4rem;
+    height: 6rem;
+
+    @include sap-set-padding-x(1.5rem);
+    @include sap-set-padding-y(0.25rem);
+    }
+</pre>
+```
+
+## 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/padding/padding.stories.js`
+
+For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).

package/data/components/paddings.md

@@ -0,0 +1,130 @@
+---
+component: paddings
+title: Layouts/Paddings
+category: Layouts
+selector: 
+cssFile: 
+sourcePath: packages/styles/stories/Layouts/paddings/paddings.stories.js
+generatedAt: 2026-05-28T15:51:35.742Z
+---
+
+# Layouts/Paddings
+
+The CSS padding properties are used to generate space around an element's content, inside of any defined borders.
+        With CSS, you have full control over the padding. There are properties for setting the padding for each side of an element.
+        We now provide a number of predefined padding clases which add predefined padding values.
+
+## Basic Usage
+
+```html
+<div class="docs-column-flex docs-column-flex--align-start">
+        <div class="docs-layout-margins-paddings--color-14 fd-padding">
+            <div class="docs-layout-margins-paddings docs-layout-margins-paddings--width docs-layout-grid-bg--color-7">container</div>
+        </div>
+    </div>
+```
+
+## Modifiers
+
+| Class | Description |
+|-------|-------------|
+| `--align-start` | Style variant |
+| `--color-` | Style variant |
+| `--lg` | Style variant |
+| `--md` | Style variant |
+| `--none` | Style variant |
+| `--padded` | Style variant |
+| `--sm` | Style variant |
+| `--tiny` | Style variant |
+| `--width` | The responsive padding class adds a double sided padding inside a container based on its width. Use \ |
+| `--width-lg` | Style variant |
+| `--width-md` | Style variant |
+| `--width-sm` | Style variant |
+| `--xl` | Style variant |
+
+## Examples
+
+### All-Round Padding
+
+All-round padding appears on all sides of the container they are applied to. Use \
+
+```html
+<div class="docs-column-flex docs-column-flex--align-start">
+        <div class="docs-layout-margins-paddings--color-14 fd-padding">
+            <div class="docs-layout-margins-paddings docs-layout-margins-paddings--width docs-layout-grid-bg--color-7">container</div>
+        </div>
+    </div>
+```
+
+### Double-Sided Padding
+
+Double sided paddings appear on two opposite sides of the element. Use \
+
+```html
+<div class="docs-column-flex docs-column-flex--align-start">
+        <div class="docs-layout-margins-paddings--color-14 fd-padding-begin-end--tiny">
+            <div class="docs-layout-margins-paddings docs-layout-margins-paddings--width docs-layout-grid-bg--color-7">container(tiny)</div>
+        </div>
+        <br />
+        <div class="docs-layout-margins-paddings--color-14 fd-padding-begin-end--sm">
+            <div class="docs-layout-margins-paddings  docs-layout-margins-paddings--width-sm docs-layout-grid-bg--color-7">container(sm)</div>
+        </div>
+        <br />
+        <div class="docs-layout-margins-paddings--color-14 fd-padding-begin-end--md">
+            <div class="docs-layout-margins-paddings docs-layout-margins-paddings--width-md docs-layout-grid-bg--color-7">container(md)</div>
+        </div>
+        <br />
+        <div class="docs-layout-margins-paddings--color-14 fd-padding-begin-end--lg">
+            <div class="docs-layout-margins-paddings docs-layout-margins-paddings--width-lg docs-layout-grid-bg--color-7">container(lg)</div>
+        </div>
+    </div>
+```
+
+### NoPadding
+
+No padding classes remove existing container paddings. Use \
+
+```html
+<div class="docs-column-flex docs-column-flex--align-start">
+        <div class="docs-layout-margins-paddings--color-14 docs-layout-margins-paddings--padded fd-padding--none">
+            <div class="docs-layout-margins-paddings docs-layout-margins-paddings--width docs-layout-grid-bg--color-7">container</div>
+        </div>
+    </div>
+```
+
+### ResponsivePadding
+
+The responsive padding class adds a double sided padding inside a container based on its width. Use \
+
+```html
+<div class="docs-column-flex docs-column-flex--align-start">
+        <div class="docs-layout-margins-paddings--color-14 fd-padding-responsive--sm">
+            <div class="docs-layout-margins-paddings docs-layout-margins-paddings--width-sm docs-layout-grid-bg--color-7">container(sm)</div>
+        </div>
+        <br />
+        <div class="docs-layout-margins-paddings--color-14 fd-padding-responsive--md">
+            <div class="docs-layout-margins-paddings docs-layout-margins-paddings--width-md docs-layout-grid-bg--color-7">container(md)</div>
+        </div>
+        <br />
+        <div class="docs-layout-margins-paddings--color-14 fd-padding-responsive--lg">
+            <div class="docs-layout-margins-paddings docs-layout-margins-paddings--width-md docs-layout-grid-bg--color-7">container(lg)</div>
+        </div>
+        <br />
+        <div class="docs-layout-margins-paddings--color-14 fd-padding-responsive--xl">
+            <div class="docs-layout-margins-paddings docs-layout-margins-paddings--width-lg docs-layout-grid-bg--color-7">container(xl)</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/paddings/paddings.stories.js`
+
+For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).