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

package/data/components/fieldset.md

@@ -0,0 +1,381 @@
+---
+component: fd-fieldset
+title: Components/Forms/Radio
+category: Components
+selector: fd-fieldset
+cssFile: fieldset.css
+sourcePath: packages/styles/stories/Components/Forms/radio/radio.stories.js
+tags: []
+dependencies: []
+relatedComponents: []
+stability: stable
+generatedAt: 2026-06-09T18:29:01.451Z
+---
+
+# Components/Forms/Radio
+
+Radio buttons provide users with a set of mutually exclusive options. They allow a user to select only one option from two or more choices. Each option is represented by a radio button. Consequently, radio buttons only work in groups.
+
+<b>Use the radio button if:</b>
+
+- You need to help users choose quickly between at least two clearly different choices.
+
+<b>Do not use the radio button if:</b>
+
+- You need to offer the user the option of multiple selection. In this case, use checkboxes instead because radio buttons are for single-selection contexts only.
+- You need to present more than 8 options. Use a dropdown box or list view.
+In special cases, there are only two mutually exclusive options. Combine them into a single checkbox or switch. For example, use a checkbox for “I agree” (for example, to terms and conditions) instead of two radio buttons for “I agree” and “I don't agree”.
+- The options are numbers with fixed steps. Use a slider control.
+
+## 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/fieldset.css" rel="stylesheet">
+
+```
+
+## Basic Usage
+
+```html
+<fieldset class="fd-fieldset" id="radio1">
+    <legend class="fd-fieldset__legend">Radio Buttons</legend>
+    <div class="fd-form__group">
+        <div class="fd-form-item">
+            <input type="radio" class="fd-radio" id="pDidh761" name="radio1" checked>
+            <label class="fd-radio__label" for="pDidh761">
+                <span class="fd-radio__text">Option 1</span>
+            </label>
+        </div>
+        <div class="fd-form-item">
+            <input type="radio" class="fd-radio" id="pDidh7612" name="radio1">
+            <label class="fd-radio__label" for="pDidh7612">
+                <span class="fd-radio__text">Option 2</span>
+            </label>
+        </div>
+        <div class="fd-form-item">
+            <input type="radio" class="fd-radio" id="pDidh764" name="radio1" disabled aria-disabled="true">
+            <label class="fd-radio__label" for="pDidh764">
+                <span class="fd-radio__text">Option 3 (disabled)</span>
+            </label>
+        </div>
+    </div>
+</fieldset>
+```
+
+## States
+
+| Class | Description |
+|-------|-------------|
+| `is-error` | Error state |
+| `is-hover` | Hover state |
+| `is-information` | Information state |
+| `is-readonly` | Readonly state |
+| `is-success` | Success state |
+| `is-warning` | Warning state |
+
+## BEM Elements
+
+This component uses the following BEM elements:
+
+- `fd-fieldset__legend`
+
+## Examples
+
+### Primary
+
+```html
+<fieldset class="fd-fieldset" id="radio1">
+    <legend class="fd-fieldset__legend">Radio Buttons</legend>
+    <div class="fd-form__group">
+        <div class="fd-form-item">
+            <input type="radio" class="fd-radio" id="pDidh761" name="radio1" checked>
+            <label class="fd-radio__label" for="pDidh761">
+                <span class="fd-radio__text">Option 1</span>
+            </label>
+        </div>
+        <div class="fd-form-item">
+            <input type="radio" class="fd-radio" id="pDidh7612" name="radio1">
+            <label class="fd-radio__label" for="pDidh7612">
+                <span class="fd-radio__text">Option 2</span>
+            </label>
+        </div>
+        <div class="fd-form-item">
+            <input type="radio" class="fd-radio" id="pDidh764" name="radio1" disabled aria-disabled="true">
+            <label class="fd-radio__label" for="pDidh764">
+                <span class="fd-radio__text">Option 3 (disabled)</span>
+            </label>
+        </div>
+    </div>
+</fieldset>
+```
+
+### Inline
+
+Try to align radio buttons vertically instead of horizontally, especially for long labels. Horizontal alignment is harder to read and localize. Consider horizontal alignment in cases of one-word labels, such as in the background color settings example above.
+
+In forms, always align radio buttons vertically instead of horizontally as the length of the labels may vary for different languages.
+
+Do not put two radio button groups right next to each other as it is difficult to determine which buttons belong to which group. Use group labels and padding to separate them.
+
+```html
+<fieldset class="fd-fieldset" id="radio4">
+    <legend class="fd-fieldset__legend">Inline Radio buttons</legend>
+    <div class="fd-form-group fd-form-group--inline">
+        <div class="fd-form-item">
+            <input type="radio" class="fd-radio" id="pDidh767" name="radio4" checked>
+            <label class="fd-radio__label" for="pDidh767">
+                <span class="fd-radio__text">Option 1</span>
+            </label>
+        </div>
+        <div class="fd-form-item">
+            <input type="radio" class="fd-radio" id="pDidh7618" name="radio4" >
+            <label class="fd-radio__label" for="pDidh7618">
+                <span class="fd-radio__text">Option 2</span>
+            </label>
+        </div>
+        <div class="fd-form-item">
+            <input type="radio" class="fd-radio" id="pDidh7619" name="radio4">
+            <label class="fd-radio__label" for="pDidh7619">
+                <span class="fd-radio__text">Option 3</span>
+            </label>
+        </div>
+    </div>
+</fieldset>
+```
+
+### InteractionStates
+
+A radio button can have different states that affect its appearance value states, such as “error” or “warning”, which are indicated using semantic colors
+
+```html
+<fieldset class="fd-fieldset" id="radio5a">
+    <legend class="fd-fieldset__legend">Default Interaction States</legend>
+    <div class="fd-form-group">
+        <div class="fd-form-item">
+            <input type="radio" class="fd-radio" id="iSpDidh761" name="radio5a">
+            <label class="fd-radio__label" for="iSpDidh761">
+                <span class="fd-radio__text">Default Radio Button</span>
+            </label>
+        </div>
+        <div class="fd-form-item">
+            <input type="radio" class="fd-radio" id="iSpDidh761cc" name="radio5a" checked>
+            <label class="fd-radio__label" for="iSpDidh761cc">
+                <span class="fd-radio__text">Default Checked Radio Button</span>
+            </label>
+        </div>
+        <div class="fd-form-item">
+            <input type="radio" class="fd-radio" id="iSpDidh761hov" name="radio5a">
+            <label class="fd-radio__label is-hover" for="iSpDidh761hov">
+                <span class="fd-radio__text">Default Hover Radio Button</span>
+            </label>
+        </div>
+    </div>
+</fieldset>
+<fieldset class="fd-fieldset" id="radio5b">
+    <legend class="fd-fieldset__legend">Success Interaction States</legend>
+    <div class="fd-form-group">
+        <div class="fd-form-item">
+            <input type="radio" class="fd-radio is-success" id="iSpDidh7612" name="radio5b">
+            <label class="fd-radio__label" for="iSpDidh7612">
+                <span class="fd-radio__text">Success Radio Button</span>
+            </label>
+        </div>
+        <div class="fd-form-item">
+            <input type="radio" class="fd-radio is-success" id="iSpDidh7612cc" name="radio5b" checked>
+            <label class="fd-radio__label" for="iSpDidh7612cc">
+                <span class="fd-radio__text">Success Checked Radio Button</span>
+            </label>
+        </div>
+        <div class="fd-form-item">
+            <input type="radio" class="fd-radio is-success" id="iSpDidh7612hov" name="radio5b">
+            <label class="fd-radio__label is-hover" for="iSpDidh7612hov">
+                <span class="fd-radio__text">Success Hover Radio Button</span>
+            </label>
+        </div>
+    </div>
+</fieldset>
+<fieldset class="fd-fieldset" id="radio5c">
+    <legend class="fd-fieldset__legend">Error Interaction States</legend>
+    <div class="fd-form-group">
+        <div class="fd-form-item">
+            <input type="radio" class="fd-radio is-error" id="iSpDidh7613" name="radio5c">
+            <label class="fd-radio__label" for="iSpDidh7613">
+                <span class="fd-radio__text">Error Radio Button</span>
+            </label>
+        </div>
+        <div class="fd-form-item">
+            <input type="radio" class="fd-radio is-error" id="iSpDidh7613cc" name="radio5c" checked>
+            <label class="fd-radio__label" for="iSpDidh7613cc">
+                <span class="fd-radio__text">Error Checked Radio Button</span>
+            </label>
+        </div>
+        <div class="fd-form-item">
+            <input type="radio" class="fd-radio is-error" id="iSpDidh7613hov" name="radio5c">
+            <label class="fd-radio__label is-hover" for="iSpDidh7613hov">
+                <span class="fd-radio__text">Error Hover Radio Button</span>
+            </label>
+        </div>
+    </div>
+</fieldset>
+<fieldset class="fd-fieldset" id="radio5d">
+    <legend class="fd-fieldset__legend">Warning Interaction States</legend>
+    <div class="fd-form-group">
+        <div class="fd-form-item">
+            <input type="radio" class="fd-radio is-warning" id="iSpDidh7614" name="radio5d">
+            <label class="fd-radio__label" for="iSpDidh7614">
+                <span class="fd-radio__text">Warning Radio Button</span>
+            </label>
+        </div>
+        <div class="fd-form-item">
+            <input type="radio" class="fd-radio is-warning" id="iSpDidh7614cc" name="radio5d" checked>
+            <label class="fd-radio__label" for="iSpDidh7614cc">
+                <span class="fd-radio__text">Warning Checked Radio Button</span>
+            </label>
+        </div>
+        <div class="fd-form-item">
+            <input type="radio" class="fd-radio is-warning" id="iSpDidh7614hov" name="radio5d">
+            <label class="fd-radio__label is-hover" for="iSpDidh7614hov">
+                <span class="fd-radio__text">Warning Hover Radio Button</span>
+            </label>
+        </div>
+    </div>
+</fieldset>
+<fieldset class="fd-fieldset" id="radio5e">
+    <legend class="fd-fieldset__legend">Information Interaction States</legend>
+    <div class="fd-form-group">
+        <div class="fd-form-item">
+            <input type="radio" class="fd-radio is-information" id="iSpDidh7615" name="radio5e">
+            <label class="fd-radio__label" for="iSpDidh7615">
+                <span class="fd-radio__text">Information Radio Button</span>
+            </label>
+        </div>
+        <div class="fd-form-item">
+            <input type="radio" class="fd-radio is-information" id="iSpDidh7615cc" name="radio5e" checked>
+            <label class="fd-radio__label" for="iSpDidh7615cc">
+                <span class="fd-radio__text">Information Checked Radio Button</span>
+            </label>
+        </div>
+        <div class="fd-form-item">
+            <input type="radio" class="fd-radio is-information" id="iSpDidh7615hov" name="radio5e">
+            <label class="fd-radio__label is-hover" for="iSpDidh7615hov">
+                <span class="fd-radio__text">Information Hover Radio Button</span>
+            </label>
+        </div>
+    </div>
+</fieldset>
+<fieldset class="fd-fieldset" id="radio5f">
+    <legend class="fd-fieldset__legend">Read-Only Interaction States</legend>
+    <div class="fd-form-group">
+        <div class="fd-form-item">
+            <input type="radio" class="fd-radio is-readonly" id="iSpDidh76erfg15" name="radio5f" aria-readonly="true" aria-description="This radio button is read-only and cannot be changed." onclick="return false;">
+            <label class="fd-radio__label" for="iSpDidh76erfg15">
+                <span class="fd-radio__text">ReadOnly Radio Button</span>
+            </label>
+        </div>
+        <div class="fd-form-item">
+            <input type="radio" class="fd-radio is-readonly" id="iSpDidh76erfg15cc" name="radio5f" aria-readonly="true" aria-description="This radio button is read-only and cannot be changed." onclick="return false;" checked>
+            <label class="fd-radio__label" for="iSpDidh76erfg15cc">
+                <span class="fd-radio__text">ReadOnly Checked Radio Button</span>
+            </label>
+        </div>
+        <div class="fd-form-item">
+            <input type="radio" class="fd-radio is-readonly" id="iSpDidh76erfg15hov" name="radio5f" aria-readonly="true" aria-description="This radio button is read-only and cannot be changed." onclick="return false;">
+            <label class="fd-radio__label is-hover" for="iSpDidh76erfg15hov">
+                <span class="fd-radio__text">ReadOnly Hover Radio Button</span>
+            </label>
+        </div>
+    </div>
+</fieldset>
+<fieldset class="fd-fieldset" id="radio5g">
+    <legend class="fd-fieldset__legend">Disabled States</legend>
+    <div class="fd-form-group">
+        <div class="fd-form-item">
+            <input type="radio" class="fd-radio" id="iSpDidh7611" name="radio5g" disabled aria-disabled="true">
+            <label class="fd-radio__label" for="iSpDidh7611">
+                <span class="fd-radio__text">Disabled Radio Button</span>
+            </label>
+        </div>
+        <div class="fd-form-item">
+            <input type="radio" class="fd-radio is-success" id="iSpDidh76121" name="radio5g" disabled aria-disabled="true">
+            <label class="fd-radio__label" for="iSpDidh76121">
+                <span class="fd-radio__text">Success Radio Button (disabled)</span>
+            </label>
+        </div>
+        <div class="fd-form-item">
+            <input type="radio" class="fd-radio is-error" id="iSpDidh76131" name="radio5g" disabled aria-disabled="true">
+            <label class="fd-radio__label" for="iSpDidh76131">
+                <span class="fd-radio__text">Error Radio Button (disabled)</span>
+            </label>
+        </div>
+        <div class="fd-form-item">
+            <input type="radio" class="fd-radio is-warning" id="iSpDidh76141" name="radio5g" disabled aria-disabled="true">
+            <label class="fd-radio__label" for="iSpDidh76141">
+                <span class="fd-radio__text">Warning Radio Button (disabled)</span>
+            </label>
+        </div>
+        <div class="fd-form-item">
+            <input type="radio" class="fd-radio is-information" id="iSpDidh76151" name="radio5g" disabled aria-disabled="true">
+            <label class="fd-radio__label" for="iSpDidh76151">
+                <span class="fd-radio__text">Information Radio Button (disabled)</span>
+            </label>
+        </div>
+    </div>
+</fieldset>
+```
+
+### TextTruncation
+
+By default, long radio label truncates with ellipsis. For this behaviour no modifier class is needed. For radio label that wraps on a new line to show the entire content, use \
+
+```html
+<fieldset class="fd-fieldset" id="radio1Truncation">
+    <legend class="fd-fieldset__legend">Radio Buttons</legend>
+    <div class="fd-form__group">
+        <div class="fd-form-item">
+            <input type="radio" class="fd-radio" id="pDidh761tt" name="radio1Truncation" checked>
+            <label class="fd-radio__label" for="pDidh761tt">
+                <span class="fd-radio__text">
+                    Field label  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.
+                </span>
+            </label>
+        </div>
+        <div class="fd-form-item">
+            <input type="radio" class="fd-radio" id="pDidh7612tt" name="radio2Truncation" checked>
+            <label class="fd-radio__label fd-radio__label--wrap" for="pDidh7612tt">
+                <span class="fd-radio__text">
+                    Field label  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.
+                </span>
+            </label>
+        </div>
+        <div class="fd-form-item">
+            <input type="radio" class="fd-radio" id="pDidh7612ttop" name="radio3Truncation" checked>
+            <label class="fd-radio__label fd-radio__label--wrap-top-aligned" for="pDidh7612ttop">
+                <span class="fd-radio__text">
+                    Field label  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.
+                </span>
+            </label>
+        </div>
+    </div>
+</fieldset>
+```
+
+## 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/radio/radio.stories.js`
+
+For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).

package/data/components/flexible-column-layout.md

@@ -0,0 +1,205 @@
+---
+component: fd-flexible-column-layout
+title: Layouts/Flexible Column
+category: Layouts
+selector: fd-flexible-column-layout
+cssFile: flexible-column-layout.css
+sourcePath: packages/styles/stories/Layouts/flexible-column-layout/flexible-column-layout.stories.js
+tags: []
+dependencies: ["button","flexible-column-layout","icon"]
+relatedComponents: ["button","flexible-column-layout","icon"]
+stability: stable
+generatedAt: 2026-06-09T18:29:01.790Z
+---
+
+# Layouts/Flexible Column
+
+The flexible column layout is a layout control that displays multiple floorplans on a single page.
+This allows faster and more fluid navigation between multiple floorplans than the usual page-by-page navigation.
+The flexible column layout offers different layouts with up to three columns.
+Users can expand the column they want to focus on, switch between different layouts, and view the rightmost column in full screen mode.
+
+### Background Designs
+- \
+
+## Dependencies
+
+This component depends on the following CSS files:
+
+- `button.css`
+- `flexible-column-layout.css`
+- `icon.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/flexible-column-layout.css" rel="stylesheet">
+
+<!-- Include dependencies -->
+<link href="node_modules/fundamental-styles/dist/button.css" rel="stylesheet">
+<link href="node_modules/fundamental-styles/dist/flexible-column-layout.css" rel="stylesheet">
+<link href="node_modules/fundamental-styles/dist/icon.css" rel="stylesheet">
+```
+
+## Basic Usage
+
+```html
+<div class="fd-flexible-column-layout">
+
+    <div class="fd-flexible-column-layout__separator">
+        <button class="fd-button fd-button--transparent fd-flexible-column-layout__button"
+            aria-label="Expand">
+            <i class="sap-icon--slim-arrow-right" role="presentation"></i>
+        </button>
+    </div>
+
+    <div class="fd-flexible-column-layout__separator">
+        <button class="fd-button fd-button--transparent fd-flexible-column-layout__button"
+            aria-label="Expand">
+            <i class="sap-icon--slim-arrow-left" role="presentation"></i>
+        </button>
+    </div>
+
+</div>
+```
+
+## Modifiers
+
+| Class | Description |
+|-------|-------------|
+| `fd-flexible-column-layout--translucent` | Flexible Column Layout with translucent separators
+- Max width of the device: \ |
+| `fd-flexible-column-layout--transparent` | Flexible Column with transparent separators
+- Width of the device: Max: \ |
+
+## BEM Elements
+
+This component uses the following BEM elements:
+
+- `fd-flexible-column-layout__button`
+- `fd-flexible-column-layout__column`
+- `fd-flexible-column-layout__column--hidden`
+- `fd-flexible-column-layout__separator`
+
+## Related Components
+
+This component works with or depends on:
+
+- `button`
+- `flexible-column-layout`
+- `icon`
+
+## Design Tokens
+
+Key CSS variables used by this component:
+
+- `--fdFlexibleColumnLayoutToggleImage`
+- `--fdFlexibleColumnLayout_Background_Solid`
+- `--fdFlexibleColumnLayout_Background_Translucent`
+- `--fdFlexibleColumnLayout_Background_Transparent`
+- `--fdFlexibleColumnLayout_Border`
+- `--fdFlexibleColumnLayout_Toggle_Image_Color`
+- `--hidden`
+- `--translucent`
+- `--transparent`
+
+## Examples
+
+### ThreeColumnsLayout
+
+- Minimum width of the device: \
+
+```html
+<div class="fd-flexible-column-layout">
+
+    <div class="fd-flexible-column-layout__separator">
+        <button class="fd-button fd-button--transparent fd-flexible-column-layout__button"
+            aria-label="Expand">
+            <i class="sap-icon--slim-arrow-right" role="presentation"></i>
+        </button>
+    </div>
+
+    <div class="fd-flexible-column-layout__separator">
+        <button class="fd-button fd-button--transparent fd-flexible-column-layout__button"
+            aria-label="Expand">
+            <i class="sap-icon--slim-arrow-left" role="presentation"></i>
+        </button>
+    </div>
+
+</div>
+```
+
+### TwoColumnsLayout
+
+Flexible Column with transparent separators
+- Width of the device: Max: \
+
+```html
+<div class="fd-flexible-column-layout fd-flexible-column-layout--transparent">
+    <div class="fd-flexible-column-layout__column">
+
+        <div class="fd-flexible-column-layout__separator">
+            <button class="fd-button fd-button--transparent fd-flexible-column-layout__button"
+                aria-label="Expand">
+                <i class="sap-icon--slim-arrow-right" role="presentation"></i>
+            </button>
+        </div>
+
+        <div class="fd-flexible-column-layout__separator">
+            <button class="fd-button fd-button--transparent fd-flexible-column-layout__button"
+                aria-label="Expand">
+                <i class="sap-icon--slim-arrow-left" role="presentation"></i>
+            </button>
+        </div>
+
+    </div>
+</div>
+```
+
+### OneColumnsLayout
+
+Flexible Column Layout with translucent separators
+- Max width of the device: \
+
+```html
+<div class="fd-flexible-column-layout fd-flexible-column-layout--translucent">
+    <div class="fd-flexible-column-layout__column fd-flexible-column-layout__column--hidden">
+
+        <div class="fd-flexible-column-layout__separator">
+            <button class="fd-button fd-button--transparent fd-flexible-column-layout__button"
+                aria-label="Expand">
+                <i class="sap-icon--slim-arrow-right" role="presentation"></i>
+            </button>
+        </div>
+
+        <div class="fd-flexible-column-layout__separator">
+            <button class="fd-button fd-button--transparent fd-flexible-column-layout__button"
+                aria-label="Expand">
+                <i class="sap-icon--slim-arrow-left" role="presentation"></i>
+            </button>
+        </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/flexible-column-layout/flexible-column-layout.stories.js`
+
+For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).