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

package/data/components/code.md

@@ -0,0 +1,139 @@
+---
+component: fd-code
+title: Components/Code
+category: Components
+selector: fd-code
+cssFile: code.css
+sourcePath: packages/styles/stories/Components/code/code.stories.js
+tags: []
+dependencies: ["code"]
+relatedComponents: ["code"]
+stability: stable
+generatedAt: 2026-06-09T18:29:01.331Z
+---
+
+# Components/Code
+
+The code component helps with formating and styling code snippets. It differantiates the code lines from the normal text.
+
+##Usage
+Use the code if: <br>
+- You want to display a block of code. <br>
+- You want to dispaly a line of code.
+
+## Usage Guidelines
+
+Use the code if: <br>
+- You want to display a block of code. <br>
+- You want to dispaly a line of code.
+
+## Dependencies
+
+This component depends on the following CSS files:
+
+- `code.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/code.css" rel="stylesheet">
+
+<!-- Include dependencies -->
+<link href="node_modules/fundamental-styles/dist/code.css" rel="stylesheet">
+```
+
+## Basic Usage
+
+```html
+<pre><code class="fd-code">apiVersion: extensions.name/v1alpha1
+    kind: Class
+    metadata:
+    name: fundamental-extension-management
+    spec:
+    cdmUrl: {{ url.path.version1 }}://{{ .subdomain.domain }}{{ .Values.cdmPath }}
+    description: This Extension adds Extension Management to Project1
+    displayName: Extension Management
+    supportsDynamicCdmUrls: false
+    multipleInstallations: false
+    image: "data:image/png;base64,sfg87sg98f7gs9d8g7s9fgdfg"
+    installableScopes:
+    - Cluster
+    extensionConfig:
+    extensionManagerServiceUrl: https://extension-manager-name.{{ .Values.landscapeDomainName }}/graphql
+</code></pre>
+```
+
+## Modifiers
+
+| Class | Description |
+|-------|-------------|
+| `fd-code--inline` | Inline Code is used to hightlight a short snippet code inside a paragraph. |
+
+## Related Components
+
+This component works with or depends on:
+
+- `code`
+
+## Design Tokens
+
+Key CSS variables used by this component:
+
+- `--inline`
+- `--sapFontSize`
+- `--sapNeutralBackground`
+
+## Examples
+
+### Code Block
+
+Code Block is a combination of multiple lines of code which can be displayed as a standalone element.
+
+```html
+<pre><code class="fd-code">apiVersion: extensions.name/v1alpha1
+    kind: Class
+    metadata:
+    name: fundamental-extension-management
+    spec:
+    cdmUrl: {{ url.path.version1 }}://{{ .subdomain.domain }}{{ .Values.cdmPath }}
+    description: This Extension adds Extension Management to Project1
+    displayName: Extension Management
+    supportsDynamicCdmUrls: false
+    multipleInstallations: false
+    image: "data:image/png;base64,sfg87sg98f7gs9d8g7s9fgdfg"
+    installableScopes:
+    - Cluster
+    extensionConfig:
+    extensionManagerServiceUrl: https://extension-manager-name.{{ .Values.landscapeDomainName }}/graphql
+</code></pre>
+```
+
+### InlineCode
+
+Inline Code is used to hightlight a short snippet code inside a paragraph.
+
+```html
+You can add inline code like here <code class="fd-code fd-code--inline">FundamentalExtension</code> and add mores
+<code class="fd-code fd-code--inline">ClassName</code>
+```
+
+## 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/code/code.stories.js`
+
+For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).

package/data/components/component-reset.md

@@ -0,0 +1,272 @@
+---
+component: reset
+title: Component Reset
+category: reset
+selector: 
+cssFile: 
+sourcePath: packages/common-css/stories/reset/reset.stories.js
+tags: []
+dependencies: []
+relatedComponents: []
+stability: stable
+generatedAt: 2026-06-09T18:29:01.652Z
+---
+
+# Component Reset
+
+
+
+## Basic Usage
+
+```html
+<style>
+    .demo {
+    gap: 2rem;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    }
+    .demo > div {
+    padding: 1.5rem;
+    min-width: 200px;
+    background: #fff;
+    }
+
+    /* Demonstrate reset effect */
+    .with-reset {
+    font-family: "72", "72full", Arial, Helvetica, sans-serif;
+    font-size: var(--sapFontSize);
+    line-height: normal;
+    color: var(--sapTextColor);
+    font-weight: normal;
+    box-sizing: border-box;
+    padding: 1.5rem;
+    margin: 0;
+    border: 0;
+    }
+
+    .without-reset ul {
+    padding-left: 2rem;
+    margin: 1rem 0;
+    }
+
+    .with-reset ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+    }
+
+    .demo-label {
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: #666;
+    margin-bottom: 1rem;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    }
+
+    .border-example-card {
+    background: #f7f8fa;
+    border: 0.0625rem solid #eaecee;
+    border-radius: 0.5rem;
+    padding: 1rem;
+    margin-block-end: 1rem;
+    }
+    .border-example-card h4 {
+    margin: 0 0 0.75rem 0;
+    color: #0a6ed1;
+    font-size: 0.9375rem;
+    font-weight: 600;
+    }
+    .border-example-card pre {
+    background: #fff;
+    border: 0.0625rem solid #e4e4e4;
+    border-radius: 0.25rem;
+    padding: 0.75rem 1rem;
+    margin: 0.5rem 0;
+    font-size: 0.875rem;
+    font-family: 'Courier New', Courier, monospace;
+    color: #32363a;
+    overflow-x: auto;
+    line-height: 1.5;
+    }
+</style>
+
+<div class="demo">
+    <div class="without-reset">
+        <div class="demo-label">Without Reset</div>
+        <ul>
+            <li>Default margin</li>
+            <li>Default padding</li>
+            <li>List style bullets</li>
+        </ul>
+    </div>
+    <div class="with-reset">
+        <div class="demo-label">With Reset</div>
+        <ul>
+            <li>No margin</li>
+            <li>No padding</li>
+            <li>No list style</li>
+        </ul>
+    </div>
+</div>
+
+<div class="border-example-card">
+    <h4>Reset Mixin</h4>
+    <pre>@mixin sap-reset {
+        font-family: "72", "72full", Arial, Helvetica, sans-serif;
+        font-size: var(--sapFontSize);
+        line-height: normal;
+        color: var(--sapTextColor);
+        font-weight: normal;
+        box-sizing: border-box;
+        padding: 0;
+        margin: 0;
+        border: 0;
+        text-indent: 0;
+        list-style-type: none;
+
+        &::before,
+        &::after {
+        box-sizing: inherit;
+        font-size: inherit;
+        }
+        }</pre>
+    </div>
+```
+
+## Examples
+
+### Mixin sap-reset
+
+The <code>sap-reset()</code> mixin can be added to any HTML element to remove some of the default styling coming from the browsers.
+
+```html
+<style>
+    .demo {
+    gap: 2rem;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    }
+    .demo > div {
+    padding: 1.5rem;
+    min-width: 200px;
+    background: #fff;
+    }
+
+    /* Demonstrate reset effect */
+    .with-reset {
+    font-family: "72", "72full", Arial, Helvetica, sans-serif;
+    font-size: var(--sapFontSize);
+    line-height: normal;
+    color: var(--sapTextColor);
+    font-weight: normal;
+    box-sizing: border-box;
+    padding: 1.5rem;
+    margin: 0;
+    border: 0;
+    }
+
+    .without-reset ul {
+    padding-left: 2rem;
+    margin: 1rem 0;
+    }
+
+    .with-reset ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+    }
+
+    .demo-label {
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: #666;
+    margin-bottom: 1rem;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    }
+
+    .border-example-card {
+    background: #f7f8fa;
+    border: 0.0625rem solid #eaecee;
+    border-radius: 0.5rem;
+    padding: 1rem;
+    margin-block-end: 1rem;
+    }
+    .border-example-card h4 {
+    margin: 0 0 0.75rem 0;
+    color: #0a6ed1;
+    font-size: 0.9375rem;
+    font-weight: 600;
+    }
+    .border-example-card pre {
+    background: #fff;
+    border: 0.0625rem solid #e4e4e4;
+    border-radius: 0.25rem;
+    padding: 0.75rem 1rem;
+    margin: 0.5rem 0;
+    font-size: 0.875rem;
+    font-family: 'Courier New', Courier, monospace;
+    color: #32363a;
+    overflow-x: auto;
+    line-height: 1.5;
+    }
+</style>
+
+<div class="demo">
+    <div class="without-reset">
+        <div class="demo-label">Without Reset</div>
+        <ul>
+            <li>Default margin</li>
+            <li>Default padding</li>
+            <li>List style bullets</li>
+        </ul>
+    </div>
+    <div class="with-reset">
+        <div class="demo-label">With Reset</div>
+        <ul>
+            <li>No margin</li>
+            <li>No padding</li>
+            <li>No list style</li>
+        </ul>
+    </div>
+</div>
+
+<div class="border-example-card">
+    <h4>Reset Mixin</h4>
+    <pre>@mixin sap-reset {
+        font-family: "72", "72full", Arial, Helvetica, sans-serif;
+        font-size: var(--sapFontSize);
+        line-height: normal;
+        color: var(--sapTextColor);
+        font-weight: normal;
+        box-sizing: border-box;
+        padding: 0;
+        margin: 0;
+        border: 0;
+        text-indent: 0;
+        list-style-type: none;
+
+        &::before,
+        &::after {
+        box-sizing: inherit;
+        font-size: inherit;
+        }
+        }</pre>
+    </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/reset/reset.stories.js`
+
+For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).

package/data/components/components-icons-businesssuiteinappsymbol-icons.md

@@ -0,0 +1,85 @@
+---
+component: iconBusinessSuite
+title: Components/Icons/BusinessSuiteInAppSymbol Icons
+category: Components
+selector: 
+cssFile: 
+sourcePath: packages/styles/stories/Components/Icons/icon/BusinessSuiteInAppSymbols/iconBusinessSuite.stories.js
+tags: []
+dependencies: []
+relatedComponents: []
+stability: stable
+generatedAt: 2026-06-09T18:29:01.650Z
+---
+
+# Components/Icons/BusinessSuiteInAppSymbol Icons
+
+Icons are used to provide visual clarity, save screen space, and help guide users as they navigate an application. They are often used as visual elements within other components, although they can be used independently, given that they can be read by screen readers or have a tooltip for accessibility purposes. See [Project Confirguration](https://sap.github.io/fundamental-styles/?path=/docs/introduction-overview--page) for instructions on how to use the 'BusinessSuiteInAppSymbols' icon font on your page.
+
+##Usage
+**Use the icon if:**
+
+- You want to display an icon for illustrative purposes only, without interaction states, acting as a non-interactive icon/pictogram.
+- You intend to pair the icon with another method of communication i.e. with text or a tooltip.
+
+
+Note: If an icon needs to be selected or have any interaction states, it is recommended to use the transparent button style. See **Button** for more details on how to implement it.
+
+## Usage Guidelines
+
+**Use the icon if:**
+
+- You want to display an icon for illustrative purposes only, without interaction states, acting as a non-interactive icon/pictogram.
+- You intend to pair the icon with another method of communication i.e. with text or a tooltip.
+
+
+Note: If an icon needs to be selected or have any interaction states, it is recommended to use the transparent button style. See **Button** for more details on how to implement it.
+
+## Basic Usage
+
+```html
+<span class="sap-icon-businessSuiteInAppSymbols sap-icon-businessSuiteInAppSymbols--heart"></span>
+<span class="sap-icon-businessSuiteInAppSymbols sap-icon-businessSuiteInAppSymbols--heart"></span>
+<span class="sap-icon-businessSuiteInAppSymbols sap-icon-businessSuiteInAppSymbols--heart"></span>
+```
+
+## Examples
+
+### Sizes
+
+Icons don’t have predefined sizes because they align with the font size value. They are vector graphics, meaning they can be easily resized without compromising their appearance. And because icons are essentially a font, there are unlimited sizes.
+
+```html
+<span class="sap-icon-businessSuiteInAppSymbols sap-icon-businessSuiteInAppSymbols--heart"></span>
+<span class="sap-icon-businessSuiteInAppSymbols sap-icon-businessSuiteInAppSymbols--heart"></span>
+<span class="sap-icon-businessSuiteInAppSymbols sap-icon-businessSuiteInAppSymbols--heart"></span>
+```
+
+### Colors
+
+```html
+<span class="sap-icon-businessSuiteInAppSymbols sap-icon-businessSuiteInAppSymbols--heart"></span>
+<span class="sap-icon-businessSuiteInAppSymbols sap-icon-businessSuiteInAppSymbols--heart sap-icon-businessSuiteInAppSymbols--color-default"></span>
+<span class="sap-icon-businessSuiteInAppSymbols sap-icon-businessSuiteInAppSymbols--heart sap-icon-businessSuiteInAppSymbols--color-contrast sap-icon-businessSuiteInAppSymbols--background-contrast"></span>
+<span class="sap-icon-businessSuiteInAppSymbols sap-icon-businessSuiteInAppSymbols--heart sap-icon-businessSuiteInAppSymbols--color-non-interactive"></span>
+<span class="sap-icon-businessSuiteInAppSymbols sap-icon-businessSuiteInAppSymbols--heart sap-icon-businessSuiteInAppSymbols--color-tile"></span>
+<span class="sap-icon-businessSuiteInAppSymbols sap-icon-businessSuiteInAppSymbols--heart sap-icon-businessSuiteInAppSymbols--color-marker"></span>
+<span class="sap-icon-businessSuiteInAppSymbols sap-icon-businessSuiteInAppSymbols--heart sap-icon-businessSuiteInAppSymbols--color-critical"></span>
+<span class="sap-icon-businessSuiteInAppSymbols sap-icon-businessSuiteInAppSymbols--heart sap-icon-businessSuiteInAppSymbols--color-negative"></span>
+<span class="sap-icon-businessSuiteInAppSymbols sap-icon-businessSuiteInAppSymbols--heart sap-icon-businessSuiteInAppSymbols--color-neutral"></span>
+<span class="sap-icon-businessSuiteInAppSymbols sap-icon-businessSuiteInAppSymbols--heart sap-icon-businessSuiteInAppSymbols--color-positive"></span>
+<span class="sap-icon-businessSuiteInAppSymbols sap-icon-businessSuiteInAppSymbols--heart sap-icon-businessSuiteInAppSymbols--color-information"></span>
+```
+
+## 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/Icons/icon/BusinessSuiteInAppSymbols/iconBusinessSuite.stories.js`
+
+For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).

package/data/components/components-icons-sap-icons.md

@@ -0,0 +1,147 @@
+---
+component: icon
+title: Components/Icons/SAP Icons
+category: Components
+selector: 
+cssFile: 
+sourcePath: packages/styles/stories/Components/Icons/icon/SAPIcons/icon.stories.js
+tags: []
+dependencies: []
+relatedComponents: []
+stability: stable
+generatedAt: 2026-06-09T18:29:01.526Z
+---
+
+# Components/Icons/SAP Icons
+
+Icons are used to provide visual clarity, save screen space, and help guide users as they navigate an application. They are often used as visual elements within other components, although they can be used independently, given that they can be read by screen readers or have a tooltip for accessibility purposes. See [Project Confirguration](https://sap.github.io/fundamental-styles/?path=/docs/introduction--overview#icons) for instructions on how to use the SAP icon font on your page.
+
+##Usage
+**Use the icon if:**
+
+- You want to display an icon for illustrative purposes only, without interaction states, acting as a non-interactive icon/pictogram.
+- You intend to pair the icon with another method of communication i.e. with text or a tooltip.
+
+
+Note: If an icon needs to be selected or have any interaction states, it is recommended to use the transparent button style. See **Button** for more details on how to implement it.
+
+## Usage Guidelines
+
+**Use the icon if:**
+
+- You want to display an icon for illustrative purposes only, without interaction states, acting as a non-interactive icon/pictogram.
+- You intend to pair the icon with another method of communication i.e. with text or a tooltip.
+
+
+Note: If an icon needs to be selected or have any interaction states, it is recommended to use the transparent button style. See **Button** for more details on how to implement it.
+
+## Basic Usage
+
+```html
+<span class="sap-icon sap-icon--cart" role="presentation" aria-hidden="true" aria-label="cart"></span>
+<span class="sap-icon sap-icon--cart" role="presentation" aria-hidden="true" aria-label="cart"></span>
+<span class="sap-icon sap-icon--cart" role="presentation" aria-hidden="true" aria-label="cart"></span>
+<span class="sap-icon sap-icon--cart" role="presentation" aria-hidden="true" aria-label="cart"></span>
+<span class="sap-icon sap-icon--cart" role="presentation" aria-hidden="true" aria-label="cart"></span>
+```
+
+## States
+
+| Class | Description |
+|-------|-------------|
+| `is-focus` | Focus state |
+
+## Examples
+
+### Sizes
+
+Icons don’t have predefined sizes because they align with the font size value. They are vector graphics, meaning they can be easily resized without compromising their appearance. And because icons are essentially a font, there are unlimited sizes.
+
+```html
+<span class="sap-icon sap-icon--cart" role="presentation" aria-hidden="true" aria-label="cart"></span>
+<span class="sap-icon sap-icon--cart" role="presentation" aria-hidden="true" aria-label="cart"></span>
+<span class="sap-icon sap-icon--cart" role="presentation" aria-hidden="true" aria-label="cart"></span>
+<span class="sap-icon sap-icon--cart" role="presentation" aria-hidden="true" aria-label="cart"></span>
+<span class="sap-icon sap-icon--cart" role="presentation" aria-hidden="true" aria-label="cart"></span>
+```
+
+### Colors
+
+There are different semantic statuses that can be applied to the icon by adding a modifier class.<br><br>
+
+| **Status**      | **Modifier class**               |
+| --------------: | :------------------------------- |
+| Default         | \
+
+```html
+<h4>Design</h4>
+<span class="sap-icon sap-icon--da is-focus" tabindex="0" role="button" aria-label="diamond"></span>
+<span class="sap-icon sap-icon--da sap-icon--color-default" role="presentation" aria-label="diamond"></span>
+<span class="sap-icon sap-icon--da sap-icon--color-contrast" role="presentation" aria-hidden="true" aria-label="diamond"></span>
+<span class="sap-icon sap-icon--da sap-icon--color-non-interactive" role="presentation" aria-hidden="true" aria-label="diamond"></span>
+<span class="sap-icon sap-icon--da sap-icon--color-tile" role="presentation" aria-hidden="true" aria-label="diamond"></span>
+<span class="sap-icon sap-icon--da sap-icon--color-marker" role="presentation" aria-hidden="true" aria-label="diamond"></span>
+<span class="sap-icon sap-icon--da sap-icon--color-critical" role="presentation" aria-hidden="true" aria-label="diamond"></span>
+<span class="sap-icon sap-icon--da sap-icon--color-negative" role="presentation" aria-hidden="true" aria-label="diamond"></span>
+<span class="sap-icon sap-icon--da sap-icon--color-neutral" role="presentation" aria-hidden="true" aria-label="diamond"></span>
+<span class="sap-icon sap-icon--da sap-icon--color-positive" role="presentation" aria-hidden="true" aria-label="diamond"></span>
+<span class="sap-icon sap-icon--da sap-icon--color-information" role="presentation" aria-hidden="true" aria-label="diamond"></span>
+
+<h4>Custom colors</h4>
+<span class="sap-icon sap-icon--ai" role="button" aria-label="ai" tabindex="0"></span>
+<span class="sap-icon sap-icon--ai" role="presentation" aria-hidden="true" aria-label="ai"></span>
+<span class="sap-icon sap-icon--ai" role="presentation" aria-hidden="true" aria-label="ai"></span>
+<span class="sap-icon sap-icon--ai" role="presentation" aria-hidden="true" aria-label="ai"></span>
+<span class="sap-icon sap-icon--ai" role="presentation" aria-hidden="true" aria-label="ai"></span>
+<span class="sap-icon sap-icon--ai" role="presentation" aria-hidden="true" aria-label="ai"></span>
+<span class="sap-icon sap-icon--ai" role="presentation" aria-hidden="true" aria-label="ai"></span>
+<span class="sap-icon sap-icon--ai" role="presentation" aria-hidden="true" aria-label="ai"></span>
+<span class="sap-icon sap-icon--ai" role="presentation" aria-hidden="true" aria-label="ai"></span>
+<span class="sap-icon sap-icon--ai" role="presentation" aria-hidden="true" aria-label="ai"></span>
+<span class="sap-icon sap-icon--ai" role="presentation" aria-hidden="true" aria-label="ai"></span>
+```
+
+### Backgrounds
+
+There are different semantic statuses that can be applied to the icon background by adding a modifier class.<br><br>
+
+| **Status**      | **Modifier class**               |
+| --------------: | :------------------------------- |
+| Default         | \
+
+```html
+<span class="sap-icon sap-icon--video is-focus" role="button" aria-label="video" tabindex="0"></span>
+
+<span class="sap-icon sap-icon--wrench sap-icon--background-default" role="presentation" aria-hidden="true" aria-label="wrench"></span>
+
+<span class="sap-icon sap-icon--lightbulb sap-icon--background-contrast" role="presentation" aria-hidden="true" aria-label="lightbulb"></span>
+
+<span class="sap-icon sap-icon--employee sap-icon--background-non-interactive" role="presentation" aria-hidden="true" aria-label="employee"></span>
+
+<span class="sap-icon sap-icon--complete sap-icon--background-tile" role="presentation" aria-hidden="true" aria-label="complete"></span>
+
+<span class="sap-icon sap-icon--basket sap-icon--background-marker" role="presentation" aria-hidden="true" aria-label="basket"></span>
+
+<span class="sap-icon sap-icon--calendar sap-icon--background-critical" role="presentation" aria-hidden="true" aria-label="calendar"></span>
+
+<span class="sap-icon sap-icon--hint sap-icon--background-negative" role="presentation" aria-hidden="true" aria-label="hint"></span>
+
+<span class="sap-icon sap-icon--favorite sap-icon--background-neutral" role="presentation" aria-hidden="true" aria-label="favorite"></span>
+
+<span class="sap-icon sap-icon--home sap-icon--background-positive" role="presentation" aria-hidden="true" aria-label="home"></span>
+
+<span class="sap-icon sap-icon--database sap-icon--background-information" role="presentation" aria-hidden="true" aria-label="database"></span>
+```
+
+## 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/Icons/icon/SAPIcons/icon.stories.js`
+
+For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).