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

package/data/components/layouts-paddings.md

@@ -0,0 +1,133 @@
+---
+component: paddings
+title: Layouts/Paddings
+category: Layouts
+selector: 
+cssFile: 
+sourcePath: packages/styles/stories/Layouts/paddings/paddings.stories.js
+tags: []
+dependencies: ["paddings"]
+relatedComponents: ["paddings"]
+stability: stable
+generatedAt: 2026-06-09T18:29:01.681Z
+---
+
+# 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.
+
+## Dependencies
+
+This component depends on the following CSS files:
+
+- `paddings.css`
+
+## 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>
+```
+
+## Related Components
+
+This component works with or depends on:
+
+- `paddings`
+
+## Design Tokens
+
+Key CSS variables used by this component:
+
+- `--lg`
+- `--md`
+- `--none`
+- `--sm`
+- `--tiny`
+- `--xl`
+
+## 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>
+    <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>
+    <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>
+    <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>
+    <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>
+    <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>
+    <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/).

package/data/components/layouts-section.md

@@ -0,0 +1,287 @@
+---
+component: section
+title: Layouts/Section
+category: Layouts
+selector: 
+cssFile: 
+sourcePath: packages/styles/stories/Layouts/section/section.stories.js
+tags: ["non-f3"]
+dependencies: ["layout","layout-grid","layout-panel","section"]
+relatedComponents: ["layout","layout-grid","layout-panel","section"]
+stability: stable
+generatedAt: 2026-06-09T18:29:01.679Z
+---
+
+# Layouts/Section
+
+The section is a page-level structure container used to divide a page into stacked sections with appropriate padding applied. These should be used to separate large groups of content on a page.
+
+You will generally use a section inside a page container which will give you the appropriate side margins. Since a section is full-width by default it can be used as a well with background colors or images.
+
+Can hold two child types:
+- \
+
+## Dependencies
+
+This component depends on the following CSS files:
+
+- `layout.css`
+- `layout-grid.css`
+- `layout-panel.css`
+- `section.css`
+
+## Basic Usage
+
+```html
+<section class="fd-section">
+    .fd-section
+</section>
+<section class="fd-section">
+    .fd-section
+</section>
+<section class="fd-section">
+    .fd-section
+</section>
+```
+
+## Related Components
+
+This component works with or depends on:
+
+- `layout`
+- `layout-grid`
+- `layout-panel`
+- `section`
+
+## Design Tokens
+
+Key CSS variables used by this component:
+
+- `--bleed`
+- `--full-bleed`
+- `--no-border`
+- `--sapFontHeader2Size`
+- `--sapTitleColor`
+- `--sapToolbar_Background`
+
+## Examples
+
+### Section Structure
+
+```html
+<section class="fd-section">
+    .fd-section
+</section>
+<section class="fd-section">
+    .fd-section
+</section>
+<section class="fd-section">
+    .fd-section
+</section>
+```
+
+### With Layout Grid
+
+Shows an example with the grid span helper class.
+This is most appropriate when displaying a collection of content in a linear order.
+
+```html
+<section class="fd-section">
+    <div class="fd-container">
+        <div class="fd-row">
+            <div class="fd-col fd-col--4">
+                <div class="fd-layout-panel">
+                    <div class="fd-layout-panel__body">
+                        <p>.fd-layout-panel</p>
+                    </div>
+                </div>
+            </div>
+            <div class="fd-col fd-col--4">
+
+                <div class="fd-layout-panel">
+                    <div class="fd-layout-panel__body">
+                        <p>.fd-layout-panel</p>
+                    </div>
+                </div>
+            </div>
+            <div class="fd-col fd-col--4">
+                <div class="fd-layout-panel">
+                    <div class="fd-layout-panel__body">
+                        <p>.fd-layout-panel</p>
+                    </div>
+                </div>
+            </div>
+            <div class="fd-col fd-col--4">
+                <div class="fd-layout-panel">
+                    <div class="fd-layout-panel__body">
+                        <p>.fd-layout-panel</p>
+                    </div>
+                </div>
+            </div>
+            <div class="fd-col fd-col--4">
+                <div class="fd-layout-panel">
+                    <div class="fd-layout-panel__body">
+                        <p>.fd-layout-panel</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+```
+
+### With Panels
+
+Shows an alternate layout option using columns.
+This may be more appropriate depending on the need to maintain source order and structure.
+
+```html
+<section class="fd-section">
+    <div class="fd-layout-panel">
+        <div class="fd-layout-panel__header">
+            <div class="fd-layout-panel__head">
+                <h3 class="fd-layout-panel__title">
+                    .fd-layout-panel__title
+                </h3>
+                <p class="fd-layout-panel__description">
+                    .fd-layout-panel__description
+                </p>
+            </div>
+            <div class="fd-layout-panel__actions">
+                .fd-layout-panel__actions
+            </div>
+        </div>
+        <div class="fd-layout-panel__filters" id="">
+            .fd-layout-panel__filters
+        </div>
+        <div class="fd-layout-panel__body">
+            .fd-layout-panel__body
+        </div>
+        <div class="fd-layout-panel__footer">
+            .fd-layout-panel__footer
+        </div>
+    </div>
+</section>
+```
+
+### With Headers
+
+Header and title elements are available when necessary to label content groups.
+
+```html
+<section class="fd-section">
+    <div class="fd-section__header">
+        <h3 class="fd-section__title">Section title</h3>
+    </div>
+    <div class="fd-layout-panel">
+        <div class="fd-layout-panel__body">
+            fd-layout-panel
+        </div>
+    </div>
+</section>
+```
+
+### TestingSimpleSection
+
+```html
+<section class='fd-section '>
+    Simple Section
+</section>
+
+<section class='fd-section '>
+    <div class='fd-section__header'>
+        <h3 class='fd-section__title'>Section Title</h3>
+    </div>
+    Section Content
+</section>
+
+<section class='fd-section '>
+    <div class='fd-section__header'>
+        <h3 class='fd-section__title'>Title</h3>
+        <div class='fd-section__actions'>action section</div>
+    </div>
+    Section Content
+</section>
+
+<section class='fd-section '>
+    <div class='fd-section__header'>
+        <h3 class='fd-section__title'>Title</h3>
+        <div class='fd-section__actions'>action part</div>
+    </div>
+    Section Content
+    <div class='fd-section__footer'>footer part</div>
+</section>
+
+<section class='fd-section fd-section--full-bleed'>
+    <div class='fd-section__header'>
+        <h3 class='fd-section__title'>Title</h3>
+        <div class='fd-section__actions'>action part</div>
+    </div>
+    Section Content with Full Bleed
+    <div class='fd-section__footer'>footer part</div>
+</section>
+
+<section class='fd-section '>Simple Section</section>
+```
+
+### TestingSectionWithHeadlines
+
+```html
+<section class='fd-section '>
+    <div class='fd-section__header'>
+        <h2 class='fd-section__title'>section with h2 headline</h2>
+        <div class='fd-section__actions'>action part</div>
+    </div>
+    Section Content
+    <div class='fd-section__footer'>footer part</div>
+</section>
+
+<section class='fd-section '>
+    <div class='fd-section__header'>
+        <h3 class='fd-section__title'>section with h3 headline</h3>
+        <div class='fd-section__actions'>action part</div>
+    </div>
+    Section Content
+    <div class='fd-section__footer'>footer part</div>
+</section>
+
+<section class='fd-section '>
+    <div class='fd-section__header'>
+        <h4 class='fd-section__title'>section with h4 headline</h4>
+        <div class='fd-section__actions'>action part</div>
+    </div>
+    Section Content
+    <div class='fd-section__footer'>footer part</div>
+</section>
+
+<section class='fd-section '>
+    <div class='fd-section__header'>
+        <h5 class='fd-section__title'>section with h5 headline</h5>
+        <div class='fd-section__actions'>action part</div>
+    </div>
+    Section Content
+    <div class='fd-section__footer'>footer part</div>
+</section>
+
+<section class='fd-section '>
+    <div class='fd-section__header'>
+        <h6 class='fd-section__title'>section with h6 headline</h6>
+        <div class='fd-section__actions'>action part</div>
+    </div>
+    Section Content
+    <div class='fd-section__footer'>footer part</div>
+</section>
+```
+
+## 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/section/section.stories.js`
+
+For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).

package/data/components/list-2.md

@@ -0,0 +1,148 @@
+---
+component: fd-list
+title: Components/List/Subline
+category: Components
+selector: fd-list
+cssFile: list.css
+sourcePath: packages/styles/stories/Components/List/list/subline/subline-list.stories.js
+tags: []
+dependencies: []
+relatedComponents: []
+stability: stable
+generatedAt: 2026-06-09T18:29:01.589Z
+---
+
+# Components/List/Subline
+
+
+
+## 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/list.css" rel="stylesheet">
+
+```
+
+## Basic Usage
+
+```html
+<ul class="fd-list fd-list--subline" role="list">
+    <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--interractive">
+        <span class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--thumbnail" role="img" aria-label="Jane Doe"></span>
+        <div class="fd-list__content">
+            <div class="fd-list__title">List Item Title</div>
+            <div class="fd-list__subline">List Item Subline</div>
+            <div class="fd-list__subline">List Item Subline</div>
+        </div>
+    </li>
+    <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--interractive">
+        <span class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--thumbnail" role="img" aria-label="John Doe"></span>
+        <div class="fd-list__content">
+            <div class="fd-list__title">List Item Title</div>
+            <div class="fd-list__subline">List Item Subline</div>
+            <div class="fd-list__subline">List Item Subline</div>
+        </div>
+        <span class="fd-list__active-indicator sap-icon--sys-enter-2"></span>
+    </li>
+    <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--interractive">
+        <span class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--accent-color-10" aria-role="img" aria-label="John Doe">JD</span>
+        <div class="fd-list__content">
+            <div class="fd-list__title">List Item Title Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt, quod deleniti optio earum voluptatem in, nam et ratione aliquam error facilis expedita magnam repudiandae rerum sint blanditiis rem quo? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt, quod deleniti optio earum voluptatem in, nam et ratione aliquam error facilis expedita magnam repudiandae rerum sint blanditiis rem quo!</div>
+            <div class="fd-list__subline">List Item Subline Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia saepe doloribus nulla aliquid soluta aperiam, amet iste sint? Explicabo dicta doloremque amet minima perferendis. Necessitatibus reiciendis voluptatum id nesciunt earum! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt, quod deleniti optio earum voluptatem in, nam et ratione aliquam error facilis expedita magnam repudiandae rerum sint blanditiis rem quo.</div>
+            <div class="fd-list__subline">List Item Subline Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque asperiores id deleniti quae? Amet officia cum assumenda. Ab, dolores ea dignissimos, aliquid beatae magnam commodi, tenetur facere harum ex nemo? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt, quod deleniti optio earum voluptatem in, nam et ratione aliquam error facilis expedita magnam repudiandae rerum sint blanditiis rem quo.</div>
+        </div>
+    </li>
+    <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--interractive">
+        <span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="John Doe"></span>
+        <div class="fd-list__content">
+            <div class="fd-list__title fd-list__title--truncate">List Item Title Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt, quod deleniti optio earum voluptatem in, nam et ratione aliquam error facilis expedita magnam repudiandae rerum sint blanditiis rem quo? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt, quod deleniti optio earum voluptatem in, nam et ratione aliquam error facilis expedita magnam repudiandae rerum sint blanditiis rem quo!</div>
+            <div class="fd-list__subline fd-list__subline--truncate">List Item Subline Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia saepe doloribus nulla aliquid soluta aperiam, amet iste sint? Explicabo dicta doloremque amet minima perferendis. Necessitatibus reiciendis voluptatum id nesciunt earum! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt, quod deleniti optio earum voluptatem in, nam et ratione aliquam error facilis expedita magnam repudiandae rerum sint blanditiis rem quo.</div>
+            <div class="fd-list__subline fd-list__subline--truncate">List Item Subline Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque asperiores id deleniti quae? Amet officia cum assumenda. Ab, dolores ea dignissimos, aliquid beatae magnam commodi, tenetur facere harum ex nemo? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt, quod deleniti optio earum voluptatem in, nam et ratione aliquam error facilis expedita magnam repudiandae rerum sint blanditiis rem quo.</div>
+        </div>
+    </li>
+</ul>
+```
+
+## Modifiers
+
+| Class | Description |
+|-------|-------------|
+| `fd-list--subline` | This is structure of the custom list item is being used to display the accounts in USer Menu. |
+
+## BEM Elements
+
+This component uses the following BEM elements:
+
+- `fd-list__active-indicator`
+- `fd-list__content`
+- `fd-list__item`
+- `fd-list__item--interractive`
+- `fd-list__subline`
+- `fd-list__subline--truncate`
+- `fd-list__title`
+- `fd-list__title--truncate`
+
+## Examples
+
+### Custom List Item with Subline
+
+This is structure of the custom list item is being used to display the accounts in USer Menu.
+
+```html
+<ul class="fd-list fd-list--subline" role="list">
+    <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--interractive">
+        <span class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--thumbnail" role="img" aria-label="Jane Doe"></span>
+        <div class="fd-list__content">
+            <div class="fd-list__title">List Item Title</div>
+            <div class="fd-list__subline">List Item Subline</div>
+            <div class="fd-list__subline">List Item Subline</div>
+        </div>
+    </li>
+    <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--interractive">
+        <span class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--thumbnail" role="img" aria-label="John Doe"></span>
+        <div class="fd-list__content">
+            <div class="fd-list__title">List Item Title</div>
+            <div class="fd-list__subline">List Item Subline</div>
+            <div class="fd-list__subline">List Item Subline</div>
+        </div>
+        <span class="fd-list__active-indicator sap-icon--sys-enter-2"></span>
+    </li>
+    <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--interractive">
+        <span class="fd-avatar fd-avatar--sm fd-avatar--circle fd-avatar--accent-color-10" aria-role="img" aria-label="John Doe">JD</span>
+        <div class="fd-list__content">
+            <div class="fd-list__title">List Item Title Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt, quod deleniti optio earum voluptatem in, nam et ratione aliquam error facilis expedita magnam repudiandae rerum sint blanditiis rem quo? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt, quod deleniti optio earum voluptatem in, nam et ratione aliquam error facilis expedita magnam repudiandae rerum sint blanditiis rem quo!</div>
+            <div class="fd-list__subline">List Item Subline Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia saepe doloribus nulla aliquid soluta aperiam, amet iste sint? Explicabo dicta doloremque amet minima perferendis. Necessitatibus reiciendis voluptatum id nesciunt earum! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt, quod deleniti optio earum voluptatem in, nam et ratione aliquam error facilis expedita magnam repudiandae rerum sint blanditiis rem quo.</div>
+            <div class="fd-list__subline">List Item Subline Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque asperiores id deleniti quae? Amet officia cum assumenda. Ab, dolores ea dignissimos, aliquid beatae magnam commodi, tenetur facere harum ex nemo? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt, quod deleniti optio earum voluptatem in, nam et ratione aliquam error facilis expedita magnam repudiandae rerum sint blanditiis rem quo.</div>
+        </div>
+    </li>
+    <li role="listitem" tabindex="0" class="fd-list__item fd-list__item--interractive">
+        <span class="fd-avatar fd-avatar--sm fd-avatar--thumbnail" role="img" aria-label="John Doe"></span>
+        <div class="fd-list__content">
+            <div class="fd-list__title fd-list__title--truncate">List Item Title Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt, quod deleniti optio earum voluptatem in, nam et ratione aliquam error facilis expedita magnam repudiandae rerum sint blanditiis rem quo? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt, quod deleniti optio earum voluptatem in, nam et ratione aliquam error facilis expedita magnam repudiandae rerum sint blanditiis rem quo!</div>
+            <div class="fd-list__subline fd-list__subline--truncate">List Item Subline Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia saepe doloribus nulla aliquid soluta aperiam, amet iste sint? Explicabo dicta doloremque amet minima perferendis. Necessitatibus reiciendis voluptatum id nesciunt earum! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt, quod deleniti optio earum voluptatem in, nam et ratione aliquam error facilis expedita magnam repudiandae rerum sint blanditiis rem quo.</div>
+            <div class="fd-list__subline fd-list__subline--truncate">List Item Subline Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque asperiores id deleniti quae? Amet officia cum assumenda. Ab, dolores ea dignissimos, aliquid beatae magnam commodi, tenetur facere harum ex nemo? Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt, quod deleniti optio earum voluptatem in, nam et ratione aliquam error facilis expedita magnam repudiandae rerum sint blanditiis rem quo.</div>
+        </div>
+    </li>
+</ul>
+```
+
+## 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/List/list/subline/subline-list.stories.js`
+
+For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).