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

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

@@ -0,0 +1,85 @@
+---
+component: iconTnt
+title: Components/Icons/TNT Icons
+category: Components
+selector: 
+cssFile: 
+sourcePath: packages/styles/stories/Components/Icons/icon/TNTIcons/iconTnt.stories.js
+tags: []
+dependencies: []
+relatedComponents: []
+stability: stable
+generatedAt: 2026-06-09T18:29:01.567Z
+---
+
+# Components/Icons/TNT 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 'SAP-icons-TNT' 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-TNT sap-icon-TNT--exceptions"></span>
+<span class="sap-icon-TNT sap-icon-TNT--exceptions"></span>
+<span class="sap-icon-TNT sap-icon-TNT--exceptions"></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-TNT sap-icon-TNT--exceptions"></span>
+<span class="sap-icon-TNT sap-icon-TNT--exceptions"></span>
+<span class="sap-icon-TNT sap-icon-TNT--exceptions"></span>
+```
+
+### Colors
+
+```html
+<span class="sap-icon-TNT sap-icon-TNT--exceptions"></span>
+<span class="sap-icon-TNT sap-icon-TNT--exceptions sap-icon-TNT--color-default"></span>
+<span class="sap-icon-TNT sap-icon-TNT--exceptions sap-icon-TNT--color-contrast sap-icon-TNT--background-contrast"></span>
+<span class="sap-icon-TNT sap-icon-TNT--exceptions sap-icon-TNT--color-non-interactive"></span>
+<span class="sap-icon-TNT sap-icon-TNT--exceptions sap-icon-TNT--color-tile"></span>
+<span class="sap-icon-TNT sap-icon-TNT--exceptions sap-icon-TNT--color-marker"></span>
+<span class="sap-icon-TNT sap-icon-TNT--exceptions sap-icon-TNT--color-critical"></span>
+<span class="sap-icon-TNT sap-icon-TNT--exceptions sap-icon-TNT--color-negative"></span>
+<span class="sap-icon-TNT sap-icon-TNT--exceptions sap-icon-TNT--color-neutral"></span>
+<span class="sap-icon-TNT sap-icon-TNT--exceptions sap-icon-TNT--color-positive"></span>
+<span class="sap-icon-TNT sap-icon-TNT--exceptions sap-icon-TNT--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/TNTIcons/iconTnt.stories.js`
+
+For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).

package/data/components/container-queries.md

@@ -0,0 +1,221 @@
+---
+component: container-queries
+title: Container Queries
+category: container-queries
+selector: 
+cssFile: 
+sourcePath: packages/common-css/stories/container-queries/container-queries.stories.js
+tags: []
+dependencies: []
+relatedComponents: []
+stability: stable
+generatedAt: 2026-06-09T18:29:01.749Z
+---
+
+# Container Queries
+
+Container queries are similar to media queries, but they allow you to apply styles to an element based on the dimensions of the element's container rather than the device’s viewport. For more information please visit the <a target="_blank" title="MDN documentation website" href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_container_queries">MDN website</a>.   
+        <br><br><br>
+        <h3>Containment Context</h3>
+        To define a container, you need to specify the <code>container-type</code> property on the element. The container-type can accept three options: size, inline-size, and normal. <br>
+<table style="width: 100%; border-collapse: collapse; margin-top: 1rem;">
+    <tbody>
+    <tr>
+        <td style="padding: 0.25rem;"><b>normal</b></td>
+        <td style="padding: 0.25rem;">the element is not a query container for any container size, but it can be used to apply styles to the element</td>
+        <td style="padding: 0.25rem;"><code>.sap-container-type-normal</code></td>
+        <td style="padding: 0.25rem;"><code>@include sap-container-type(normal)</code></td>
+    </tr>
+    <tr>
+        <td style="padding: 0.25rem;"><b>size</b></td>
+        <td style="padding: 0.25rem;">the container will not assume the position it has on the viewport, you must explicitly set the height and width of the container</td>
+        <td style="padding: 0.25rem;"><code>.sap-container-type-size</code></td>
+        <td style="padding: 0.25rem;"><code>@include sap-container-type(size)</code></td>
+    </tr>
+    <tr>
+        <td style="padding: 0.25rem;"><b>inline-size</b></td>
+        <td style="padding: 0.25rem;">the element assumes the position it has on the viewport</td>
+        <td style="padding: 0.25rem;"><code>.sap-container-type-inline-size</code></td>
+        <td style="padding: 0.25rem;"><code>@include sap-container-type(inline-size)</code></td>
+    </tr>
+    </tbody>
+</table>
+<br>
+<h3>Mixins</h3>
+<table style="width: 60%; border-collapse: collapse; margin-top: 1rem;text-align: left;">
+    <tr>
+        <th style="padding: 0.25rem;">Mixin</th>
+        <th style="padding: 0.25rem;">Container width</th>
+    </tr>
+    <tr>
+        <td style="padding: 0.25rem;"><code>@include sap-container-query-sm()</code></td>
+        <td style="padding: 0.25rem;">max-width: 599px</td>
+    </tr>
+    <tr>
+        <td style="padding: 0.25rem;"><code>@include sap-container-query-md()</code></td>
+        <td style="padding: 0.25rem;">600px <= width <= 1023px</td>
+    </tr>
+    <tr>
+        <td style="padding: 0.25rem;"><code>@include sap-container-query-lg()</code></td>
+        <td style="padding: 0.25rem;">1024px <= width <= 1439px</td>
+    </tr>
+    <tr>
+        <td style="padding: 0.25rem;"><code>@include sap-container-query-xl()</code></td>
+        <td style="padding: 0.25rem;">min-width: 1440px</td>
+    </tr>
+    <tr>
+        <td style="padding: 0.25rem;"><code>@include sap-container-query-from($width)</code></td>
+        <td style="padding: 0.25rem;">user defined</td>
+    </tr>
+    <tr>
+        <td style="padding: 0.25rem;"><code>@include sap-container-query-until($width)</code></td>
+        <td style="padding: 0.25rem;">user defined</td>
+    </tr>
+</table>
+
+## Basic Usage
+
+```html
+<style>
+    .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="border-example-card">
+    <h4>Container Type</h4>
+    <pre>.article-container {
+        @include sap-container-type(inline-size);
+        }</pre>
+    </div>
+
+    <div class="border-example-card">
+        <h4>Container Query - Minimum Width</h4>
+        <pre>@include sap-container-query-from(640px) {
+            .article {
+            font-size: 20px;
+            }
+            }</pre>
+        </div>
+
+        <div class="border-example-card">
+            <h4>Container Query - Maximum Width</h4>
+            <pre>@include sap-container-query-to(640px) {
+                .article {
+                font-size: 16px;
+                }
+                }</pre>
+            </div>
+
+            <div class="border-example-card">
+                <h4>Container Query - Range</h4>
+                <pre>@include sap-container-query-between(480px, 768px) {
+                    .article {
+                    font-size: 18px;
+                    }
+                    }</pre>
+                </div>
+```
+
+## Examples
+
+### UsingTheMixins
+
+```html
+<style>
+    .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="border-example-card">
+    <h4>Container Type</h4>
+    <pre>.article-container {
+        @include sap-container-type(inline-size);
+        }</pre>
+    </div>
+
+    <div class="border-example-card">
+        <h4>Container Query - Minimum Width</h4>
+        <pre>@include sap-container-query-from(640px) {
+            .article {
+            font-size: 20px;
+            }
+            }</pre>
+        </div>
+
+        <div class="border-example-card">
+            <h4>Container Query - Maximum Width</h4>
+            <pre>@include sap-container-query-to(640px) {
+                .article {
+                font-size: 16px;
+                }
+                }</pre>
+            </div>
+
+            <div class="border-example-card">
+                <h4>Container Query - Range</h4>
+                <pre>@include sap-container-query-between(480px, 768px) {
+                    .article {
+                    font-size: 18px;
+                    }
+                    }</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/container-queries/container-queries.stories.js`
+
+For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).

package/data/components/container.md

@@ -0,0 +1,227 @@
+---
+component: fd-container
+title: Components/Forms/Form Group
+category: Components
+selector: fd-container
+cssFile: container.css
+sourcePath: packages/styles/stories/Components/Forms/form-group/form-group.stories.js
+tags: []
+dependencies: []
+relatedComponents: []
+stability: stable
+generatedAt: 2026-06-09T18:29:01.566Z
+---
+
+# Components/Forms/Form Group
+
+Form groups are used to assemble form elements with labels, messages, and help containers.
+
+These components can be used alone. For example, the \
+
+## 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/container.css" rel="stylesheet">
+
+```
+
+## Basic Usage
+
+```html
+<div class="fd-form-group">
+    <div class="fd-form-item">
+        <label class="fd-form-label" for="input-1">Default input:</label>
+        <input class="fd-input" type="text" id="input-1" placeholder="Field placeholder text">
+    </div>
+</div>
+```
+
+## Examples
+
+### Default
+
+```html
+<div class="fd-form-group">
+    <div class="fd-form-item">
+        <label class="fd-form-label" for="input-1">Default input:</label>
+        <input class="fd-input" type="text" id="input-1" placeholder="Field placeholder text">
+    </div>
+</div>
+```
+
+### Required
+
+To indicate to the user that it's required to fill out an input field, add the \
+
+```html
+<div class="fd-form-group">
+    <div class="fd-form-item">
+        <label class="fd-form-label fd-form-label--required" for="input-1c">Required Input:</label>
+        <input class="fd-input" type="text" id="input-1c" placeholder="Field placeholder text">
+    </div>
+</div>
+```
+
+### Group header
+
+Form groups can be grouped together under a header with the \
+
+```html
+<div class="fd-form-group" role="group" aria-labelledby="basicGroupHeader">
+    <div class="fd-form-group__header">
+        <h4 class="fd-form-group__header-text" id="basicGroupHeader">Group Header</h4>
+    </div>
+</div>
+
+<div class="fd-form-group" role="group" aria-labelledby="noPaddingGroupHeader">
+    <div class="fd-form-group__header fd-form-group__header--no-padding">
+        <h4 class="fd-form-group__header-text" id="noPaddingGroupHeader">Group Header without inline padding</h4>
+    </div>
+</div>
+
+<div class="fd-form-group" role="group" aria-labelledby="noBorderGroupHeader">
+    <div class="fd-form-group__header fd-form-group__header--no-border">
+        <h4 class="fd-form-group__header-text" id="noBorderGroupHeader">Group Header without border</h4>
+    </div>
+</div>
+
+<div class="fd-form-group" role="group" aria-labelledby="noBorderNoPaddingGroupHeader">
+    <div class="fd-form-group__header fd-form-group__header--no-border fd-form-group__header--no-padding">
+        <h4 class="fd-form-group__header-text" id="noBorderNoPaddingGroupHeader">Group Header without border and padding</h4>
+    </div>
+</div>
+```
+
+### Group header (form grid)
+
+When group headers are displayed in a **Form Grid**, paddings are added to the groups.
+
+```html
+<form class="fd-container fd-form-layout-grid-container">
+    <div class="fd-row">
+        <!-- Group 1 -->
+        <div class="fd-form-group fd-form-group--with-spacing fd-col fd-col-md--6 fd-col-lg--6 fd-col-xl--6 fd-col--wrap" role="group" aria-labelledby="grid1GroupHeader">
+            <div class="fd-form-group__header" id="grid1GroupHeader">
+                <h4 class="fd-form-group__header-text">Personal Information</h4>
+            </div>
+
+            <div class="fd-form-item fd-row">
+                <div class="fd-col fd-col-md--2 fd-col-lg--4 fd-col-xl--12">
+                    <label class="fd-form-label" for="input-14-name">Full Name:</label>
+                </div>
+                <div class="fd-col fd-col-md--10 fd-col-lg--8 fd-col-xl--12">
+                    <input class="fd-input" type="text" id="input-14-name" placeholder="e.g., Amelia Perry" value="Amelia Perry">
+                </div>
+            </div>
+
+            <div class="fd-form-item fd-row">
+                <div class="fd-col fd-col-md--2 fd-col-lg--4 fd-col-xl--12">
+                    <label class="fd-form-label" for="input-14x-name">City of Residence:</label>
+                </div>
+                <div class="fd-col fd-col-md--10 fd-col-lg--8 fd-col-xl--12">
+                    <input class="fd-input" type="text" id="input-14x-name" placeholder="e.g., New York" value="New York">
+                </div>
+            </div>
+
+            <div class="fd-form-item fd-row">
+                <div class="fd-col fd-col-md--2 fd-col-lg--4 fd-col-xl--12">
+                    <label class="fd-form-label" for="input-14y-name">Job Title:</label>
+                </div>
+                <div class="fd-col fd-col-md--10 fd-col-lg--8 fd-col-xl--12">
+                    <input class="fd-input" type="text" id="input-14y-name" placeholder="e.g., Product Designer" value="Product Designer">
+                </div>
+            </div>
+        </div>
+
+        <!-- Group 2 -->
+        <div class="fd-form-group fd-form-group--with-spacing fd-col fd-col-md--6 fd-col-lg--6 fd-col-xl--6 fd-col--wrap" role="group" aria-labelledby="grid2GroupHeader">
+            <div class="fd-form-group__header">
+                <h4 class="fd-form-group__header-text" id="grid2GroupHeader">Contact Details</h4>
+            </div>
+
+            <div class="fd-form-item fd-row">
+                <div class="fd-col fd-col-md--2 fd-col-lg--4 fd-col-xl--12">
+                    <label class="fd-form-label" for="input-14a-name">Email Address:</label>
+                </div>
+                <div class="fd-col fd-col-md--10 fd-col-lg--8 fd-col-xl--12">
+                    <input class="fd-input" type="email" id="input-14a-name" placeholder="e.g., amelia.perry@example.com" value="amelia.perry@example.com">
+                </div>
+            </div>
+
+            <div class="fd-form-item fd-row">
+                <div class="fd-col fd-col-md--2 fd-col-lg--4 fd-col-xl--12">
+                    <label class="fd-form-label" for="input-14b-name">Phone Number:</label>
+                </div>
+                <div class="fd-col fd-col-md--10 fd-col-lg--8 fd-col-xl--12">
+                    <input class="fd-input" type="tel" id="input-14b-name" placeholder="e.g., +1 555 123 4567" value="+1 555 123 4567">
+                </div>
+            </div>
+
+            <div class="fd-form-item fd-row">
+                <div class="fd-col fd-col-md--2 fd-col-lg--4 fd-col-xl--12">
+                    <label class="fd-form-label" for="input-14c-name">LinkedIn Profile:</label>
+                </div>
+                <div class="fd-col fd-col-md--10 fd-col-lg--8 fd-col-xl--12">
+                    <input class="fd-input" type="url" id="input-14c-name" placeholder="e.g., linkedin.com/in/amelia-perry" value="linkedin.com/in/amelia-perry">
+                </div>
+            </div>
+        </div>
+
+        <!-- Group 3 -->
+        <div class="fd-form-group fd-form-group--with-spacing fd-col fd-col-md--6 fd-col-lg--6 fd-col-xl--6 fd-col--wrap" role="group" aria-labelledby="grid3GroupHeader">
+            <div class="fd-form-group__header">
+                <h class="fd-form-group__header-text" id="grid3GroupHeader">Security Questions</h>
+            </div>
+
+            <div class="fd-form-item fd-row">
+                <div class="fd-col fd-col-md--2 fd-col-lg--4 fd-col-xl--12">
+                    <label class="fd-form-label" for="input-14j-name">What was your childhood nickname?</label>
+                </div>
+                <div class="fd-col fd-col-md--10 fd-col-lg--8 fd-col-xl--12">
+                    <input class="fd-input" type="text" id="input-14j-name" placeholder="e.g., Mimi" value="Mimi">
+                </div>
+            </div>
+
+            <div class="fd-form-item fd-row">
+                <div class="fd-col fd-col-md--2 fd-col-lg--4 fd-col-xl--12">
+                    <label class="fd-form-label" for="input-14h-name">What was the name of your first pet?</label>
+                </div>
+                <div class="fd-col fd-col-md--10 fd-col-lg--8 fd-col-xl--12">
+                    <input class="fd-input" type="text" id="input-14h-name" placeholder="e.g., Charlie" value="Charlie">
+                </div>
+            </div>
+
+            <div class="fd-form-item fd-row">
+                <div class="fd-col fd-col-md--2 fd-col-lg--4 fd-col-xl--12">
+                    <label class="fd-form-label" for="input-14k-name">What city were you born in?</label>
+                </div>
+                <div class="fd-col fd-col-md--10 fd-col-lg--8 fd-col-xl--12">
+                    <input class="fd-input" type="text" id="input-14k-name" placeholder="e.g., Boston" value="Boston">
+                </div>
+            </div>
+        </div>
+
+    </div>
+</form>
+```
+
+## 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/Forms/form-group/form-group.stories.js`
+
+For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).