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

package/data/components/title.md

@@ -0,0 +1,153 @@
+---
+component: fd-title
+title: Components/Title
+category: Components
+selector: fd-title
+cssFile: title.css
+sourcePath: packages/styles/stories/Components/title/title.stories.js
+tags: []
+dependencies: ["title"]
+relatedComponents: ["title"]
+stability: stable
+generatedAt: 2026-06-09T18:29:01.368Z
+---
+
+# Components/Title
+
+A title component whose semantic level and visual appearance can be set separately, providing flexibility in design while adhering to accessibility best practices.
+
+## Dependencies
+
+This component depends on the following CSS files:
+
+- `title.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/title.css" rel="stylesheet">
+
+<!-- Include dependencies -->
+<link href="node_modules/fundamental-styles/dist/title.css" rel="stylesheet">
+```
+
+## Basic Usage
+
+```html
+<h1 class="fd-title fd-title--h1">Title Level 1</h1>
+<h2 class="fd-title fd-title--h2">Title Level 2</h2>
+<h3 class="fd-title fd-title--h3">Title Level 3</h3>
+<h4 class="fd-title fd-title--h4">Title Level 4</h4>
+<h5 class="fd-title fd-title--h5">Title Level 5</h5>
+<h6 class="fd-title fd-title--h6">Title Level 6</h6>
+```
+
+## Modifiers
+
+| Class | Description |
+|-------|-------------|
+| `fd-title--h` | There are 6 semantic levels of a heading element |
+| `fd-title--wrap` | Add the `--wrap` modifier to cause the overflow text to wrap instead. |
+
+## Related Components
+
+This component works with or depends on:
+
+- `title`
+
+## Design Tokens
+
+Key CSS variables used by this component:
+
+- `--fdTitle_Color`
+- `--fdTitle_Font_Family`
+- `--fdTitle_Font_Size`
+- `--h1`
+- `--h2`
+- `--h3`
+- `--h4`
+- `--h5`
+- `--h6`
+- `--sapFontHeader1Size`
+- `--sapFontHeader2Size`
+- `--sapFontHeader3Size`
+- `--sapFontHeader4Size`
+- `--sapFontHeader5Size`
+- `--sapFontHeader6Size`
+
+*...and 4 more*
+
+## Examples
+
+### Semantic Level
+
+There are 6 semantic levels of a heading element. There should only be one H1 on a page, and headings should only appear in ascending order without skipping a level; i.e. even if there are only 3 levels on a page, the order must be H1-H2-H3, and no other levels used.
+
+```html
+<h1 class="fd-title fd-title--h1">Title Level 1</h1>
+<h2 class="fd-title fd-title--h2">Title Level 2</h2>
+<h3 class="fd-title fd-title--h3">Title Level 3</h3>
+<h4 class="fd-title fd-title--h4">Title Level 4</h4>
+<h5 class="fd-title fd-title--h5">Title Level 5</h5>
+<h6 class="fd-title fd-title--h6">Title Level 6</h6>
+```
+
+### VisualLevel
+
+If a design requires it, the visual level can be set to something different than the semantic level. This allows the sequential order to be maintained while providing flexibility in appearance.
+
+```html
+<h1 class="fd-title fd-title--h6">Title Level 1</h1>
+<h2 class="fd-title fd-title--h5">Title Level 2</h2>
+<h3 class="fd-title fd-title--h4">Title Level 3</h3>
+<h4 class="fd-title fd-title--h3">Title Level 4</h4>
+<h5 class="fd-title fd-title--h2">Title Level 5</h5>
+<h6 class="fd-title fd-title--h1">Title Level 6</h6>
+```
+
+### Text Elision
+
+By default the Title text overflow will be elided when longer than its container.
+
+```html
+<h1 class="fd-title fd-title--h1">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
+<h2 class="fd-title fd-title--h2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
+<h3 class="fd-title fd-title--h3">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
+<h4 class="fd-title fd-title--h4">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h4>
+<h5 class="fd-title fd-title--h5">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h5>
+<h6 class="fd-title fd-title--h6">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h6>
+```
+
+### Text Wrapping
+
+Add the `--wrap` modifier to cause the overflow text to wrap instead.
+
+```html
+<h1 class="fd-title fd-title--h1 fd-title--wrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
+<h2 class="fd-title fd-title--h2 fd-title--wrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
+<h3 class="fd-title fd-title--h3 fd-title--wrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
+<h4 class="fd-title fd-title--h4 fd-title--wrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h4>
+<h5 class="fd-title fd-title--h5 fd-title--wrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h5>
+<h6 class="fd-title fd-title--h6 fd-title--wrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h6>
+```
+
+## 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/title/title.stories.js`
+
+For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).

package/data/components/titles.md

@@ -0,0 +1,83 @@
+---
+component: title
+title: Titles
+category: page-title
+selector: 
+cssFile: 
+sourcePath: packages/common-css/stories/page-title/title.stories.js
+tags: []
+dependencies: []
+relatedComponents: []
+stability: stable
+generatedAt: 2026-06-09T18:29:01.664Z
+---
+
+# Titles
+
+Page Title, Section Title, and Subsection Title can be used as building blocks for home pages. These elements follow a responsive spacing system for horizontal padding, which can be disabled using the <code>.no-inline-padding</code> modifier class.
+
+Typically, there is only one <b>Page Title</b> (optional), displayed in the content area above the group name. The top padding of a <b>Section Title</b> varies depending on whether a <b>Page Title</b> is present. Additionally, the vertical padding of a <b>Section Title</b> depends on its position — whether it is the first <b>Section Title</b> on the page or situated between sections. <br><b>Subsection Title</b> has no padding-top, but if there's no <b>Section Title</b>, than <b>Subsection Title</b> adds 1rem padding-top.
+
+## Basic Usage
+
+```html
+<div class="sap-page-title sap-bg-color-errorBackground">Page Title</div>
+<div class="sap-section-title sap-bg-color-informationBackground">Section Title (first, after Page Title)</div>
+<div class="sap-subsection-title sap-bg-color-warningBackground">Subsection Title</div>
+
+<div class="sap-section-title sap-bg-color-informationBackground">Section Title (between sections)</div>
+<div class="sap-subsection-title sap-bg-color-warningBackground">Subsection Title</div>
+```
+
+## Examples
+
+### Page Title, Section Title and Subsection Title
+
+The first <b>Section Title</b> under the <b>Page Title</b> has a 0.5rem top padding. Between sections, the top padding is 3rem for XL, L, and M screens, and 2rem for S screens.<br><br><b style="color: red">NOTE: The background color for the titles is added for illustration purposes.</b>
+
+```html
+<div class="sap-page-title sap-bg-color-errorBackground">Page Title</div>
+<div class="sap-section-title sap-bg-color-informationBackground">Section Title (first, after Page Title)</div>
+<div class="sap-subsection-title sap-bg-color-warningBackground">Subsection Title</div>
+
+<div class="sap-section-title sap-bg-color-informationBackground">Section Title (between sections)</div>
+<div class="sap-subsection-title sap-bg-color-warningBackground">Subsection Title</div>
+```
+
+### Section Title and Subsection Title (no Page Title)
+
+When there is no <b>Page Title</b>, the first <b>Section Title</b> has a top padding of 1.5rem. The padding between sections remains the same: 3rem for XL, L, and M screens, and 2rem for S screens. <br><br><b style="color: red">NOTE: The background color for the titles is added for illustration purposes.</b>
+
+```html
+<div class="sap-section-title sap-bg-color-informationBackground">Section Title (first)</div>
+<div class="sap-subsection-title sap-bg-color-warningBackground">Subsection Title</div>
+
+<div class="sap-section-title sap-bg-color-informationBackground">Section Title (between sections)</div>
+<div class="sap-subsection-title sap-bg-color-warningBackground">Subsection Title</div>
+```
+
+### NoInlinePadding
+
+To disable the responsive horizontal (inline) paddings add <code>.no-inline-padding</code> on the title element.
+
+```html
+<div class="sap-page-title no-inline-padding sap-bg-color-errorBackground">Page Title</div>
+<div class="sap-section-title no-inline-padding sap-bg-color-informationBackground">Section Title (first)</div>
+<div class="sap-subsection-title no-inline-padding sap-bg-color-warningBackground">Subsection Title</div>
+
+<div class="sap-section-title no-inline-padding sap-bg-color-informationBackground">Section Title (between sections)</div>
+<div class="sap-subsection-title no-inline-padding sap-bg-color-warningBackground">Subsection Title</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/page-title/title.stories.js`
+
+For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).

package/data/components/token.md

@@ -0,0 +1,311 @@
+---
+component: fd-token
+title: Components/Token
+category: Components
+selector: fd-token
+cssFile: token.css
+sourcePath: packages/styles/stories/Components/token/token.stories.js
+tags: []
+dependencies: ["input","token"]
+relatedComponents: ["input","token"]
+stability: stable
+generatedAt: 2026-06-09T18:29:01.368Z
+---
+
+# Components/Token
+
+Tokens are small items of information (similar to tags) that mainly serve to visualize previously selected items. The tokenizer is the container that handles the tokens. Tokens can be added, removed, selected, or deselected.
+
+##Usage
+- Use tokens only in the **Multi Input** component.
+
+The default token is displayed in grey with text, and a close button that will remove the token when selected.
+
+| **Modifier Class** | **Usage** |
+| -----: | :----- | 
+| \
+
+## Usage Guidelines
+
+- Use tokens only in the **Multi Input** component.
+
+The default token is displayed in grey with text, and a close button that will remove the token when selected.
+
+| **Modifier Class** | **Usage** |
+| -----: | :----- | 
+| \
+
+## Dependencies
+
+This component depends on the following CSS files:
+
+- `input.css`
+- `token.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/token.css" rel="stylesheet">
+
+<!-- Include dependencies -->
+<link href="node_modules/fundamental-styles/dist/input.css" rel="stylesheet">
+<link href="node_modules/fundamental-styles/dist/token.css" rel="stylesheet">
+```
+
+## Basic Usage
+
+```html
+<style>
+    .docs-tokens {
+    width: 100%;
+    }
+    .docs_tokens_item_wrapper {
+    display: flex;
+    }
+    .docs-tokens-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
+    column-gap: 0.1rem;
+    row-gap: 0.1rem;
+    padding: 1rem;
+    justify-items: right;
+    align-items: center;
+    }
+</style>
+
+<section class="docs-tokens">
+    <div class="docs-tokens-container">
+
+        <div>Regular</div>
+        <div>Selected</div>
+    </div>
+    <div class="docs-tokens-container">
+        <div>Normal</div>
+        <span class="fd-token" role="button" tabindex="0">
+            <span class="fd-token__text">tokenopolis</span>
+            <button class="fd-token__close" tabindex="-1" aria-label="Bibendum token close"></button>
+        </span>
+        <span class="fd-token fd-token--selected" role="button" tabindex="0">
+            <span class="fd-token__text">tokenopolis</span>
+            <button class="fd-token__close" tabindex="-1" aria-label="Bibendum token close"></button>
+        </span>
+    </div>
+    <div class="docs-tokens-container">
+        <div>Hover</div>
+        <span class="fd-token is-hover" role="button" tabindex="0">
+            <span class="fd-token__text">tokenopolis</span>
+            <button class="fd-token__close" tabindex="-1" aria-label="Bibendum token close"></button>
+        </span>
+        <span class="fd-token fd-token--selected is-hover" role="button" tabindex="0">
+            <span class="fd-token__text">tokenopolis</span>
+            <button class="fd-token__close" tabindex="-1" aria-label="Bibendum token close"></button>
+        </span>
+    </div>
+    <div class="docs-tokens-container">
+        <div>Focus</div>
+        <span class="fd-token is-focus" role="button" tabindex="0">
+            <span class="fd-token__text">tokenopolis</span>
+            <button class="fd-token__close" tabindex="-1" aria-label="Bibendum token close"></button>
+        </span>
+        <span class="fd-token fd-token--selected is-focus" role="button" tabindex="0">
+            <span class="fd-token__text">tokenopolis</span>
+            <button class="fd-token__close" tabindex="-1" aria-label="Bibendum token close"></button>
+        </span>
+    </div>
+    <div class="docs-tokens-container">
+        <div>Hover&Focus</div>
+        <span class="fd-token is-hover is-focus" role="button" tabindex="0">
+            <span class="fd-token__text">tokenopolis</span>
+            <button class="fd-token__close" tabindex="-1" aria-label="Bibendum token close"></button>
+        </span>
+        <span class="fd-token fd-token--selected is-hover is-focus" role="button" tabindex="0">
+            <span class="fd-token__text">tokenopolis</span>
+            <button class="fd-token__close" tabindex="-1" aria-label="Bibendum token close"></button>
+        </span>
+    </div>
+    <div class="docs-tokens-container">
+        <div>Read-only</div>
+        <span class="fd-token fd-token--readonly" role="button" tabindex="0">
+            <span class="fd-token__text">tokenopolis</span>
+        </span>
+        <span></span>
+        <!-- <span class="fd-token fd-token--selected fd-token--readonly" role="button" tabindex="0">
+        <span class="fd-token__text">tokenopolis</span>
+    </span> -->
+</div>
+<div class="docs-tokens-container">
+    <div>Display-only</div>
+    <span class="fd-token fd-token--display" role="presentation" tabindex="0">
+        <span class="fd-token__text">tokenopolis</span>
+    </span>
+    <span></span>
+</div>
+</section>
+```
+
+## Modifiers
+
+| Class | Description |
+|-------|-------------|
+| `fd-token--display` | The default token is displayed in grey with text, and a close button that will remove the token when selected |
+| `fd-token--readonly` | Style variant |
+| `fd-token--selected` | The default token is displayed in grey with text, and a close button that will remove the token when selected |
+
+## States
+
+| Class | Description |
+|-------|-------------|
+| `is-focus` | Focus state |
+| `is-hover` | Hover state |
+
+## BEM Elements
+
+This component uses the following BEM elements:
+
+- `fd-token__close`
+- `fd-token__text`
+
+## Related Components
+
+This component works with or depends on:
+
+- `input`
+- `token`
+
+## Design Tokens
+
+Key CSS variables used by this component:
+
+- `--disabled`
+- `--display`
+- `--fdToken_Background_Color`
+- `--fdToken_Background_Color_Hover`
+- `--fdToken_Background_Color_Read_Only`
+- `--fdToken_Border`
+- `--fdToken_Border_Color_Hover`
+- `--fdToken_Border_Color_Read_Only`
+- `--fdToken_Border_Color_Selected_Focus`
+- `--fdToken_Border_Radius`
+- `--fdToken_Close_Color`
+- `--fdToken_Close_Padding_Block`
+- `--fdToken_Close_Padding_Inline`
+- `--fdToken_Close_Width`
+- `--fdToken_Focus_Border_Radius`
+
+*...and 5 more*
+
+## Examples
+
+### Tokens
+
+The default token is displayed in grey with text, and a close button that will remove the token when selected. It is displayed in cozy mode, which is ideal for mobile and tablet screens.
+
+```html
+<style>
+    .docs-tokens {
+    width: 100%;
+    }
+    .docs_tokens_item_wrapper {
+    display: flex;
+    }
+    .docs-tokens-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
+    column-gap: 0.1rem;
+    row-gap: 0.1rem;
+    padding: 1rem;
+    justify-items: right;
+    align-items: center;
+    }
+</style>
+
+<section class="docs-tokens">
+    <div class="docs-tokens-container">
+
+        <div>Regular</div>
+        <div>Selected</div>
+    </div>
+    <div class="docs-tokens-container">
+        <div>Normal</div>
+        <span class="fd-token" role="button" tabindex="0">
+            <span class="fd-token__text">tokenopolis</span>
+            <button class="fd-token__close" tabindex="-1" aria-label="Bibendum token close"></button>
+        </span>
+        <span class="fd-token fd-token--selected" role="button" tabindex="0">
+            <span class="fd-token__text">tokenopolis</span>
+            <button class="fd-token__close" tabindex="-1" aria-label="Bibendum token close"></button>
+        </span>
+    </div>
+    <div class="docs-tokens-container">
+        <div>Hover</div>
+        <span class="fd-token is-hover" role="button" tabindex="0">
+            <span class="fd-token__text">tokenopolis</span>
+            <button class="fd-token__close" tabindex="-1" aria-label="Bibendum token close"></button>
+        </span>
+        <span class="fd-token fd-token--selected is-hover" role="button" tabindex="0">
+            <span class="fd-token__text">tokenopolis</span>
+            <button class="fd-token__close" tabindex="-1" aria-label="Bibendum token close"></button>
+        </span>
+    </div>
+    <div class="docs-tokens-container">
+        <div>Focus</div>
+        <span class="fd-token is-focus" role="button" tabindex="0">
+            <span class="fd-token__text">tokenopolis</span>
+            <button class="fd-token__close" tabindex="-1" aria-label="Bibendum token close"></button>
+        </span>
+        <span class="fd-token fd-token--selected is-focus" role="button" tabindex="0">
+            <span class="fd-token__text">tokenopolis</span>
+            <button class="fd-token__close" tabindex="-1" aria-label="Bibendum token close"></button>
+        </span>
+    </div>
+    <div class="docs-tokens-container">
+        <div>Hover&Focus</div>
+        <span class="fd-token is-hover is-focus" role="button" tabindex="0">
+            <span class="fd-token__text">tokenopolis</span>
+            <button class="fd-token__close" tabindex="-1" aria-label="Bibendum token close"></button>
+        </span>
+        <span class="fd-token fd-token--selected is-hover is-focus" role="button" tabindex="0">
+            <span class="fd-token__text">tokenopolis</span>
+            <button class="fd-token__close" tabindex="-1" aria-label="Bibendum token close"></button>
+        </span>
+    </div>
+    <div class="docs-tokens-container">
+        <div>Read-only</div>
+        <span class="fd-token fd-token--readonly" role="button" tabindex="0">
+            <span class="fd-token__text">tokenopolis</span>
+        </span>
+        <span></span>
+        <!-- <span class="fd-token fd-token--selected fd-token--readonly" role="button" tabindex="0">
+        <span class="fd-token__text">tokenopolis</span>
+    </span> -->
+</div>
+<div class="docs-tokens-container">
+    <div>Display-only</div>
+    <span class="fd-token fd-token--display" role="presentation" tabindex="0">
+        <span class="fd-token__text">tokenopolis</span>
+    </span>
+    <span></span>
+</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/Components/token/token.stories.js`
+
+For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).