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

package/data/components/micro-process-flow.md

@@ -0,0 +1,991 @@
+---
+component: fd-micro-process-flow
+title: Components/Micro Process Flow
+category: Components
+selector: fd-micro-process-flow
+cssFile: micro-process-flow.css
+sourcePath: packages/styles/stories/Components/micro-process-flow/micro-process-flow.stories.js
+tags: []
+dependencies: ["icon","menu","micro-process-flow","popover","status-indicator"]
+relatedComponents: ["icon","menu","micro-process-flow","popover","status-indicator"]
+stability: stable
+generatedAt: 2026-06-09T18:29:01.629Z
+---
+
+# Components/Micro Process Flow
+
+The micro process flow control enables you to visualize the state of individual items in a linear workflow. You can embed it into a list or a table.
+
+##Usage
+
+**Use micro process flow if:**
+
+- You need to show the state of each step in a linear, multi-step process.
+
+- The progress of multiple items needs to be displayed in a list or table.
+
+
+**Do not use the micro process flow if:**
+
+- You only need to show the state of a single-step process. Use the progress indicator or object status instead.
+
+- you want to visualize a complex non-linear workflow. Use the process flow instead.
+
+
+##Responsiveness
+The micro process flow is responsive and adapts to the size of its parent container. If the micro process flow is too long for the parent container’s width, you can choose how it should behave:
+
+- **Simple wrap:** Steps that don’t fit into the width of the parent container wrap to a new line.
+
+- **Overflow:** Navigation arrows appear on both sides of the micro process flow, with the number of hidden steps indicated next to each arrow. By clicking the navigation arrows, users can scroll horizontally through all of the steps in the micro process flow.
+
+##Layout
+The micro process flow acts as a generic container in which process steps are laid out linearly along the horizontal axis. The control provides the following layout options:
+
+- **Default: **the process steps appear as icons with a circular background. They use semantic colors and provide click events. You can choose from different icons provided by the SAP icon font.
+
+- **Custom: **the default steps can be replaced by other controls. Supported controls: status indicator, button, label, link, avatar.
+
+##Types
+
+- **With dependent steps (default)**: the steps come with a connector line that appears between the process step and the step that follows it. Use this type when the completion of a step is a precondition for the subsequent step. You can also indicate the state of the transition between two steps with a suitable icon.
+
+- **With independent steps**:  the steps are not connected and can be processed in any order. This type can be used when the user doesn’t need to perform the steps in a linear sequence.
+
+## Usage Guidelines
+
+**Use micro process flow if:**
+
+- You need to show the state of each step in a linear, multi-step process.
+
+- The progress of multiple items needs to be displayed in a list or table.
+
+## When Not To Use
+
+- You only need to show the state of a single-step process. Use the progress indicator or object status instead.
+
+- you want to visualize a complex non-linear workflow. Use the process flow instead.
+
+## Dependencies
+
+This component depends on the following CSS files:
+
+- `icon.css`
+- `menu.css`
+- `micro-process-flow.css`
+- `popover.css`
+- `status-indicator.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/micro-process-flow.css" rel="stylesheet">
+
+<!-- Include dependencies -->
+<link href="node_modules/fundamental-styles/dist/icon.css" rel="stylesheet">
+<link href="node_modules/fundamental-styles/dist/menu.css" rel="stylesheet">
+<link href="node_modules/fundamental-styles/dist/micro-process-flow.css" rel="stylesheet">
+<link href="node_modules/fundamental-styles/dist/popover.css" rel="stylesheet">
+<link href="node_modules/fundamental-styles/dist/status-indicator.css" rel="stylesheet">
+```
+
+## Basic Usage
+
+```html
+<div class="fd-micro-process-flow">
+    <div class="fd-micro-process-flow__overflow-container">
+        <div class="fd-micro-process-flow__wrapper">
+            <div class="fd-micro-process-flow__item">
+                <div class="fd-micro-process-flow__content">
+
+                </div>
+            </div>
+            <div class="fd-micro-process-flow__item fd-micro-process-flow__item--positive">
+                <div class="fd-micro-process-flow__content">
+                    <div class="fd-micro-process-flow__content-wrapper">
+                        <div class="fd-micro-process-flow__icon-container fd-micro-process-flow__focusable-item" tabindex="0">
+                            <i class="fd-micro-process-flow__icon sap-icon--pending" role="presentation"></i>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+            <div class="fd-micro-process-flow__item fd-micro-process-flow__item--information">
+                <div class="fd-micro-process-flow__content">
+                    <div class="fd-micro-process-flow__content-wrapper">
+                        <div class="fd-micro-process-flow__icon-container fd-micro-process-flow__focusable-item" tabindex="0">
+                            <i class="fd-micro-process-flow__icon sap-icon--phone" role="presentation"></i>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+            <div class="fd-micro-process-flow__item fd-micro-process-flow__item--negative">
+                <div class="fd-micro-process-flow__content">
+                    <div class="fd-micro-process-flow__content-wrapper">
+                        <div class="fd-micro-process-flow__icon-container fd-micro-process-flow__focusable-item" tabindex="0">
+                            <i class="fd-micro-process-flow__icon sap-icon--map" role="presentation"></i>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+            <div class="fd-micro-process-flow__item fd-micro-process-flow__item--critical">
+                <div class="fd-micro-process-flow__content">
+                    <div class="fd-micro-process-flow__content-wrapper">
+                        <div class="fd-micro-process-flow__icon-container fd-micro-process-flow__focusable-item" tabindex="0">
+                            <i class="fd-micro-process-flow__icon sap-icon--log" role="presentation"></i>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+## Modifiers
+
+| Class | Description |
+|-------|-------------|
+| `fd-micro-process-flow--independent-steps` | Style variant |
+
+## BEM Elements
+
+This component uses the following BEM elements:
+
+- `fd-micro-process-flow__connector`
+- `fd-micro-process-flow__connector--intermediate`
+- `fd-micro-process-flow__content`
+- `fd-micro-process-flow__content-wrapper`
+- `fd-micro-process-flow__focusable-item`
+- `fd-micro-process-flow__icon`
+- `fd-micro-process-flow__icon-container`
+- `fd-micro-process-flow__intermediary-item`
+- `fd-micro-process-flow__item`
+- `fd-micro-process-flow__item--critical`
+- `fd-micro-process-flow__item--information`
+- `fd-micro-process-flow__item--negative`
+- `fd-micro-process-flow__item--positive`
+- `fd-micro-process-flow__link-next`
+- `fd-micro-process-flow__link-previous`
+- `fd-micro-process-flow__overflow-container`
+- `fd-micro-process-flow__wrapper`
+
+## Related Components
+
+This component works with or depends on:
+
+- `icon`
+- `menu`
+- `micro-process-flow`
+- `popover`
+- `status-indicator`
+
+## Design Tokens
+
+Key CSS variables used by this component:
+
+- `--fdMicro_Process_Flow_Active_Icon_Color`
+- `--fdMicro_Process_Flow_Compact_Connector_Width`
+- `--fdMicro_Process_Flow_Compact_Item_Min_Width`
+- `--fdMicro_Process_Flow_Compact_Item_Width`
+- `--fdMicro_Process_Flow_Compact_Max_Container_Width`
+- `--fdMicro_Process_Flow_Connector_Width`
+- `--fdMicro_Process_Flow_Icon_Color`
+- `--fdMicro_Process_Flow_Icon_Font_Size`
+- `--fdMicro_Process_Flow_Item_Active_Background`
+- `--fdMicro_Process_Flow_Item_Active_Border_Color`
+- `--fdMicro_Process_Flow_Item_Background`
+- `--fdMicro_Process_Flow_Item_Border_Color`
+- `--fdMicro_Process_Flow_Item_Hover_Background`
+- `--fdMicro_Process_Flow_Item_Hover_Border_Color`
+- `--fdMicro_Process_Flow_Item_Min_Width`
+
+*...and 5 more*
+
+## Examples
+
+### Micro process flow with dependent steps (Default)
+
+```html
+<div class="fd-micro-process-flow">
+    <div class="fd-micro-process-flow__overflow-container">
+        <div class="fd-micro-process-flow__wrapper">
+            <div class="fd-micro-process-flow__item">
+                <div class="fd-micro-process-flow__content">
+
+                </div>
+            </div>
+            <div class="fd-micro-process-flow__item fd-micro-process-flow__item--positive">
+                <div class="fd-micro-process-flow__content">
+                    <div class="fd-micro-process-flow__content-wrapper">
+                        <div class="fd-micro-process-flow__icon-container fd-micro-process-flow__focusable-item" tabindex="0">
+                            <i class="fd-micro-process-flow__icon sap-icon--pending" role="presentation"></i>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+            <div class="fd-micro-process-flow__item fd-micro-process-flow__item--information">
+                <div class="fd-micro-process-flow__content">
+                    <div class="fd-micro-process-flow__content-wrapper">
+                        <div class="fd-micro-process-flow__icon-container fd-micro-process-flow__focusable-item" tabindex="0">
+                            <i class="fd-micro-process-flow__icon sap-icon--phone" role="presentation"></i>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+            <div class="fd-micro-process-flow__item fd-micro-process-flow__item--negative">
+                <div class="fd-micro-process-flow__content">
+                    <div class="fd-micro-process-flow__content-wrapper">
+                        <div class="fd-micro-process-flow__icon-container fd-micro-process-flow__focusable-item" tabindex="0">
+                            <i class="fd-micro-process-flow__icon sap-icon--map" role="presentation"></i>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+            <div class="fd-micro-process-flow__item fd-micro-process-flow__item--critical">
+                <div class="fd-micro-process-flow__content">
+                    <div class="fd-micro-process-flow__content-wrapper">
+                        <div class="fd-micro-process-flow__icon-container fd-micro-process-flow__focusable-item" tabindex="0">
+                            <i class="fd-micro-process-flow__icon sap-icon--log" role="presentation"></i>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+### Micro process flow with independent steps
+
+Add the \
+
+```html
+<div class="fd-micro-process-flow fd-micro-process-flow--independent-steps">
+    <div class="fd-micro-process-flow__overflow-container">
+        <div class="fd-micro-process-flow__wrapper">
+            <div class="fd-micro-process-flow__item">
+                <div class="fd-micro-process-flow__content">
+
+                </div>
+            </div>
+            <div class="fd-micro-process-flow__item fd-micro-process-flow__item--positive">
+                <div class="fd-micro-process-flow__content">
+                    <div class="fd-micro-process-flow__content-wrapper">
+                        <div class="fd-micro-process-flow__icon-container fd-micro-process-flow__focusable-item" tabindex="0">
+                            <i class="fd-micro-process-flow__icon sap-icon--pending" role="presentation"></i>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+            <div class="fd-micro-process-flow__item fd-micro-process-flow__item--information">
+                <div class="fd-micro-process-flow__content">
+                    <div class="fd-micro-process-flow__content-wrapper">
+                        <div class="fd-micro-process-flow__icon-container fd-micro-process-flow__focusable-item" tabindex="0">
+                            <i class="fd-micro-process-flow__icon sap-icon--phone" role="presentation"></i>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+            <div class="fd-micro-process-flow__item fd-micro-process-flow__item--negative">
+                <div class="fd-micro-process-flow__content">
+                    <div class="fd-micro-process-flow__content-wrapper">
+                        <div class="fd-micro-process-flow__icon-container fd-micro-process-flow__focusable-item" tabindex="0">
+                            <i class="fd-micro-process-flow__icon sap-icon--map" role="presentation"></i>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+            <div class="fd-micro-process-flow__item fd-micro-process-flow__item--critical">
+                <div class="fd-micro-process-flow__content">
+                    <div class="fd-micro-process-flow__content-wrapper">
+                        <div class="fd-micro-process-flow__icon-container fd-micro-process-flow__focusable-item" tabindex="0">
+                            <i class="fd-micro-process-flow__icon sap-icon--log" role="presentation"></i>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+### Micro process flow with custom steps
+
+```html
+<div class="fd-micro-process-flow">
+    <div class="fd-micro-process-flow__overflow-container">
+        <div class="fd-micro-process-flow__wrapper">
+            <div class="fd-micro-process-flow__item">
+                <div class="fd-micro-process-flow__content">
+                    <div class="fd-micro-process-flow__content-wrapper">
+                        <div class="fd-status-indicator fd-status-indicator--critical fd-status-indicator--md fd-micro-process-flow__focusable-item" aria-roledescription="Status Indicator" role="progressbar" aria-valuetext="50%" tabindex=0 aria-label="Euro Status Indicator Medium default size" focusable="true" title="50% with default medium size">
+                            <svg id="__shape0__box2-24" class="fd-status-indicator__svg" version="1.1" xlmns="http://www.w3.org/2000/svg" viewBox="0 0 26 25" preserveAspectRatio="xMidYMid meet" x="0" y="0" width="100%" height="100%">
+                                <svg xlmns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" overflow="visible" id="__path11">
+                                    <defs>
+                                        <linearGradient id="__path11-gradient" x1="0" y1="1" x2="0" y2="0">
+                                            <stop offset="0.5" stop-color="white"></stop>
+                                            <stop offset="0.5" stop-color="transparent"></stop>
+                                        </linearGradient>
+                                        <mask id="__path11-mask">
+                                            <path id="__path11-mask-shape" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                                                l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                                                c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                                                l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0" stroke="white" fill="url(#__path11-gradient)">
+                                            </path>
+                                        </mask>
+                                    </defs>
+                                    <path id="__path11-shape" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                                        l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                                        c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                                        l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0" stroke="#89919A " mask="url(#__path11-mask)">
+                                    </path>
+                                    <path id="__path11-shape-border" d="M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16
+                                        l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1
+                                        c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7
+                                        l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z" stroke-width="0.25" stroke="#89919A " fill="transparent">
+                                    </path>
+                                </svg>
+                            </svg>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+            <div class="fd-micro-process-flow__item fd-micro-process-flow__item--positive">
+                <div class="fd-micro-process-flow__content">
+                    <div class="fd-micro-process-flow__content-wrapper">
+                        <div class="fd-status-indicator fd-status-indicator--positive coreographed fd-status-indicator--md fd-micro-process-flow__focusable-item" aria-roledescription="Status Indicator" role="progressbar" aria-valuetext="70%" tabindex=0 aria-label="Status Indicator example for order dispatching" focusable="true" title="Fill object to form single filling pattern">
+                            <svg id="__shape0__box32-24-cart" class="fd-status-indicator__svg" version="1.1" xlmns="http://www.w3.org/2000/svg" viewBox="0 0 26 25" preserveAspectRatio="xMidYMid meet" x="0" y="0" width="100%" height="100%">
+                                <svg xlmns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" overflow="visible" id="__path32">
+                                    <defs>
+                                        <linearGradient id="__path32-gradient" x1="0" y1="1" x2="0" y2="0">
+                                            <stop offset="1" stop-color="white"></stop>
+                                            <stop offset="1" stop-color="transparent"></stop>
+                                        </linearGradient>
+                                        <mask id="__path32-mask">
+                                            <path id="__path32-mask-shape" d="M22.9,17.2c-1.7,0-3.2,1.2-3.5,2.8h-4.8c-0.4-1.6-1.8-2.8-3.6-2.8c-0.1,0-0.2,0-0.3,0l-0.5-1.7h16L30.5,5H7L5.8,1l0,0l0,0
+                                                l0-0.1L5.6,0.9l-5-0.4l0.2,1.7l3.4,0.3l4.7,15.4c-0.9,0.7-1.5,1.7-1.5,2.9c0,2,1.6,3.7,3.7,3.7c1.7,0,3.2-1.2,3.6-2.8h4.8
+                                                c0.4,1.6,1.8,2.8,3.5,2.8c2,0,3.7-1.6,3.7-3.7C26.6,18.8,24.9,17.2,22.9,17.2z" stroke-width="0" stroke="white" fill="url(#__path32-gradient)">
+                                            </path>
+                                        </mask>
+                                    </defs>
+                                    <path id="__path32-shape" d="M22.9,17.2c-1.7,0-3.2,1.2-3.5,2.8h-4.8c-0.4-1.6-1.8-2.8-3.6-2.8c-0.1,0-0.2,0-0.3,0l-0.5-1.7h16L30.5,5H7L5.8,1l0,0l0,0
+                                        l0-0.1L5.6,0.9l-5-0.4l0.2,1.7l3.4,0.3l4.7,15.4c-0.9,0.7-1.5,1.7-1.5,2.9c0,2,1.6,3.7,3.7,3.7c1.7,0,3.2-1.2,3.6-2.8h4.8
+                                        c0.4,1.6,1.8,2.8,3.5,2.8c2,0,3.7-1.6,3.7-3.7C26.6,18.8,24.9,17.2,22.9,17.2z" stroke-width="0" stroke="#89919A " mask="url(#__path32-mask)">
+                                    </path>
+                                    <path id="__path32-shape-border" d="M22.9,17.2c-1.7,0-3.2,1.2-3.5,2.8h-4.8c-0.4-1.6-1.8-2.8-3.6-2.8c-0.1,0-0.2,0-0.3,0l-0.5-1.7h16L30.5,5H7L5.8,1l0,0l0,0
+                                        l0-0.1L5.6,0.9l-5-0.4l0.2,1.7l3.4,0.3l4.7,15.4c-0.9,0.7-1.5,1.7-1.5,2.9c0,2,1.6,3.7,3.7,3.7c1.7,0,3.2-1.2,3.6-2.8h4.8
+                                        c0.4,1.6,1.8,2.8,3.5,2.8c2,0,3.7-1.6,3.7-3.7C26.6,18.8,24.9,17.2,22.9,17.2z" stroke-width="0.25" stroke="#89919A " fill="transparent">
+                                    </path>
+                                </svg>
+                            </svg>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+            <div class="fd-micro-process-flow__item fd-micro-process-flow__item--information">
+                <div class="fd-micro-process-flow__content">
+                    <div class="fd-micro-process-flow__content-wrapper">
+                        <div class="fd-status-indicator fd-status-indicator--critical coreographed fd-status-indicator--md fd-micro-process-flow__focusable-item" aria-roledescription="Status Indicator" role="progressbar" aria-valuetext="70%" tabindex=0 aria-label="Status Indicator example for order dispatching" focusable="true" title="Fill object to form single filling pattern">
+                            <svg id="__shape0__box29-24-factory" version="1.1" class="fd-status-indicator__svg" xlmns="http://www.w3.org/2000/svg" viewBox="0 0 26 25" preserveAspectRatio="xMidYMid meet" x="0" y="0" width="100%" height="100%">
+                                <svg xlmns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" overflow="visible" id="__path29">
+                                    <defs>
+                                        <linearGradient id="__path29-gradient" x1="0" y1="1" x2="0" y2="0">
+                                            <stop offset="1" stop-color="white"></stop>
+                                            <stop offset="1" stop-color="transparent"></stop>
+                                        </linearGradient>
+                                        <mask id="__path29-mask">
+                                            <path id="__path29-mask-shape" d="M19.6,12.9l0-3.7l-4.9,3.7V9.2l-5,3.9l-0.3,0l0-9.4H5.8v9.4H4.6V0.5H1l-0.3,24h23.6V9.3L19.6,12.9z M22.2,19.9H17v-2.4h5.2
+                                                V19.9z" stroke-width="0" stroke="white" fill="url(#__path29-gradient)">
+                                            </path>
+                                        </mask>
+                                    </defs>
+                                    <path id="__path29-shape" d="M19.6,12.9l0-3.7l-4.9,3.7V9.2l-5,3.9l-0.3,0l0-9.4H5.8v9.4H4.6V0.5H1l-0.3,24h23.6V9.3L19.6,12.9z M22.2,19.9H17v-2.4h5.2
+                                        V19.9z" stroke-width="0" stroke="#89919A " mask="url(#__path29-mask)">
+                                    </path>
+                                    <path id="__path29-shape-border" d="M19.6,12.9l0-3.7l-4.9,3.7V9.2l-5,3.9l-0.3,0l0-9.4H5.8v9.4H4.6V0.5H1l-0.3,24h23.6V9.3L19.6,12.9z M22.2,19.9H17v-2.4h5.2
+                                        V19.9z" stroke-width="0.25" stroke="#89919A " fill="transparent">
+                                    </path>
+                                </svg>
+                            </svg>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+            <div class="fd-micro-process-flow__item fd-micro-process-flow__item--positive">
+                <div class="fd-micro-process-flow__content">
+                    <div class="fd-micro-process-flow__content-wrapper">
+                        <div class="fd-status-indicator fd-status-indicator--critical coreographed fd-status-indicator--md fd-micro-process-flow__focusable-item" aria-roledescription="Status Indicator" role="progressbar" aria-valuetext="70%" tabindex=0 aria-label="Status Indicator example for order dispatching" focusable="true" title="Fill object to form single filling pattern">
+                            <svg id="__shape0__box30-24-truck" version="1.1" class="fd-status-indicator__svg" xlmns="http://www.w3.org/2000/svg" viewBox="0 0 45 25" preserveAspectRatio="xMidYMid meet" x="0" y="0" width="100%" height="100%">
+                                <svg xlmns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" overflow="visible" id="__path30">
+                                    <defs>
+                                        <linearGradient id="__path30-gradient" x1="0" y1="1" x2="0" y2="0">
+                                            <stop offset="0.5" stop-color="white"></stop>
+                                            <stop offset="0.5" stop-color="transparent"></stop>
+                                        </linearGradient>
+                                        <mask id="__path30-mask">
+                                            <path id="__path30-mask-shape" d="M44.2,13.1l-2.6-6.5c-0.1-0.2-0.6-1.9-2.2-1.9h-6V2.3c0-1-0.8-1.8-1.8-1.8H2.7c-1.1,0-1.9,0.9-1.9,1.9v18.4h3.3h0.5l0,0
+                                                c0,2,1.6,3.7,3.7,3.7c2,0,3.7-1.6,3.7-3.7l0,0h0.5h0.6l0,0c0,2,1.6,3.7,3.7,3.7c2,0,3.7-1.6,3.7-3.7l0,0h9.1h2.9l0,0
+                                                c0,2,1.6,3.7,3.7,3.7c2,0,3.7-1.6,3.7-3.7l0,0h4.5V13.1z" stroke-width="0" stroke="white" fill="url(#__path30-gradient)">
+                                            </path>
+                                        </mask>
+                                    </defs>
+                                    <path id="__path30-shape" d="M44.2,13.1l-2.6-6.5c-0.1-0.2-0.6-1.9-2.2-1.9h-6V2.3c0-1-0.8-1.8-1.8-1.8H2.7c-1.1,0-1.9,0.9-1.9,1.9v18.4h3.3h0.5l0,0
+                                        c0,2,1.6,3.7,3.7,3.7c2,0,3.7-1.6,3.7-3.7l0,0h0.5h0.6l0,0c0,2,1.6,3.7,3.7,3.7c2,0,3.7-1.6,3.7-3.7l0,0h9.1h2.9l0,0
+                                        c0,2,1.6,3.7,3.7,3.7c2,0,3.7-1.6,3.7-3.7l0,0h4.5V13.1z" stroke-width="0" stroke="#89919A " mask="url(#__path30-mask)">
+                                    </path>
+                                    <path id="__path30-shape-border" d="M44.2,13.1l-2.6-6.5c-0.1-0.2-0.6-1.9-2.2-1.9h-6V2.3c0-1-0.8-1.8-1.8-1.8H2.7c-1.1,0-1.9,0.9-1.9,1.9v18.4h3.3h0.5l0,0
+                                        c0,2,1.6,3.7,3.7,3.7c2,0,3.7-1.6,3.7-3.7l0,0h0.5h0.6l0,0c0,2,1.6,3.7,3.7,3.7c2,0,3.7-1.6,3.7-3.7l0,0h9.1h2.9l0,0
+                                        c0,2,1.6,3.7,3.7,3.7c2,0,3.7-1.6,3.7-3.7l0,0h4.5V13.1z" stroke-width="0.25" stroke="#89919A " fill="transparent">
+                                    </path>
+                                </svg>
+                            </svg>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+            <div class="fd-micro-process-flow__item fd-micro-process-flow__item--critical">
+                <div class="fd-micro-process-flow__content">
+                    <div class="fd-micro-process-flow__content-wrapper">
+                        <div class="fd-status-indicator coreographed fd-status-indicator--md fd-micro-process-flow__focusable-item" aria-roledescription="Status Indicator" role="progressbar" aria-valuetext="70%" tabindex=0 aria-label="Status Indicator example for order dispatching" focusable="true" title="Fill object to form single filling pattern">
+                            <svg id="__shape0__box31-24-plane" version="1.1" class="fd-status-indicator__svg" xlmns="http://www.w3.org/2000/svg" viewBox="0 0 26 25" preserveAspectRatio="xMidYMid meet" x="0" y="0" width="100%" height="100%">
+                                <svg xlmns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" overflow="visible" id="__path31">
+                                    <defs>
+                                        <linearGradient id="__path31-gradient" x1="0" y1="1" x2="0" y2="0">
+                                            <stop offset="0" stop-color="white"></stop>
+                                            <stop offset="0" stop-color="transparent"></stop>
+                                        </linearGradient>
+                                        <mask id="__path31-mask">
+                                            <path id="__path31-mask-shape" d="M8.8,24.5C8.8,24.5,8.8,24.5,8.8,24.5c-0.1,0-0.2-0.1-0.2-0.1l-2.9-4.9l-0.2-0.2l-4.8-2.9
+                                                c-0.1,0-0.1-0.1-0.1-0.2c0-0.1,0-0.1,0.1-0.2c0-0.1,0.9-1.2,1-1.4c0,0,0,0,0,0c0.1-0.1,0.2-0.1,0.2-0.1l4.7,1.6l5.5-6.7L2.3,2.8
+                                                C2.2,2.7,2.2,2.6,2.2,2.5l0.6-1.1C2.9,1.3,3,1.2,3.1,1.3l12.4,4.8l3.5-3.4c0.9-0.8,1.8-1.4,2.7-1.8c0.2-0.1,0.4-0.1,0.5-0.2
+                                                c0,0,1.1-0.4,1.8,0.3c0.7,0.7,0.3,1.7,0.3,1.8c-0.1,0.2-0.1,0.4-0.2,0.5c-0.4,0.9-1,1.8-1.8,2.7l-3.4,3.5l4.8,12.4
+                                                c0,0.1,0,0.2-0.1,0.3l-1.1,0.6c-0.1,0.1-0.2,0-0.3-0.1l-6.7-9.8l-6.7,5.5l1.6,4.7c0,0.1,0,0.2-0.1,0.2c0,0,0,0,0,0
+                                                c-0.1,0.1-1.3,1-1.4,1C8.9,24.5,8.8,24.5,8.8,24.5z" stroke-width="0" stroke="white" fill="url(#__path31-gradient)">
+                                            </path>
+                                        </mask>
+                                    </defs>
+                                    <path id="__path31-shape" d="M8.8,24.5C8.8,24.5,8.8,24.5,8.8,24.5c-0.1,0-0.2-0.1-0.2-0.1l-2.9-4.9l-0.2-0.2l-4.8-2.9
+                                        c-0.1,0-0.1-0.1-0.1-0.2c0-0.1,0-0.1,0.1-0.2c0-0.1,0.9-1.2,1-1.4c0,0,0,0,0,0c0.1-0.1,0.2-0.1,0.2-0.1l4.7,1.6l5.5-6.7L2.3,2.8
+                                        C2.2,2.7,2.2,2.6,2.2,2.5l0.6-1.1C2.9,1.3,3,1.2,3.1,1.3l12.4,4.8l3.5-3.4c0.9-0.8,1.8-1.4,2.7-1.8c0.2-0.1,0.4-0.1,0.5-0.2
+                                        c0,0,1.1-0.4,1.8,0.3c0.7,0.7,0.3,1.7,0.3,1.8c-0.1,0.2-0.1,0.4-0.2,0.5c-0.4,0.9-1,1.8-1.8,2.7l-3.4,3.5l4.8,12.4
+                                        c0,0.1,0,0.2-0.1,0.3l-1.1,0.6c-0.1,0.1-0.2,0-0.3-0.1l-6.7-9.8l-6.7,5.5l1.6,4.7c0,0.1,0,0.2-0.1,0.2c0,0,0,0,0,0
+                                        c-0.1,0.1-1.3,1-1.4,1C8.9,24.5,8.8,24.5,8.8,24.5z" stroke-width="0" stroke="#89919A " mask="url(#__path31-mask)">
+                                    </path>
+                                    <path id="__path31-shape-border" d="M8.8,24.5C8.8,24.5,8.8,24.5,8.8,24.5c-0.1,0-0.2-0.1-0.2-0.1l-2.9-4.9l-0.2-0.2l-4.8-2.9
+                                        c-0.1,0-0.1-0.1-0.1-0.2c0-0.1,0-0.1,0.1-0.2c0-0.1,0.9-1.2,1-1.4c0,0,0,0,0,0c0.1-0.1,0.2-0.1,0.2-0.1l4.7,1.6l5.5-6.7L2.3,2.8
+                                        C2.2,2.7,2.2,2.6,2.2,2.5l0.6-1.1C2.9,1.3,3,1.2,3.1,1.3l12.4,4.8l3.5-3.4c0.9-0.8,1.8-1.4,2.7-1.8c0.2-0.1,0.4-0.1,0.5-0.2
+                                        c0,0,1.1-0.4,1.8,0.3c0.7,0.7,0.3,1.7,0.3,1.8c-0.1,0.2-0.1,0.4-0.2,0.5c-0.4,0.9-1,1.8-1.8,2.7l-3.4,3.5l4.8,12.4
+                                        c0,0.1,0,0.2-0.1,0.3l-1.1,0.6c-0.1,0.1-0.2,0-0.3-0.1l-6.7-9.8l-6.7,5.5l1.6,4.7c0,0.1,0,0.2-0.1,0.2c0,0,0,0,0,0
+                                        c-0.1,0.1-1.3,1-1.4,1C8.9,24.5,8.8,24.5,8.8,24.5z" stroke-width="0.25" stroke="#89919A " fill="transparent">
+                                    </path>
+                                </svg>
+                            </svg>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+### Micro process flow with popover
+
+Information displayed in micro flow process items can be extended by adding popovers with additional context.
+
+```html
+<div class="fd-micro-process-flow">
+    <div class="fd-micro-process-flow__overflow-container">
+        <div class="fd-micro-process-flow__wrapper">
+            <div class="fd-micro-process-flow__item">
+                <div class="fd-micro-process-flow__content">
+                    <div class="fd-micro-process-flow__content-wrapper">
+                        <div class="fd-popover">
+                            <div class="fd-micro-process-flow__icon-container fd-micro-process-flow__focusable-item fd-popover__control" tabindex="0" aria-controls="popoverMPF1" aria-expanded="true" aria-haspopup="true" onclick="onPopoverClick('popoverMPF1');">
+                                <div class="fd-popover__body" aria-hidden="false" id="popoverMPF1">
+                                    <nav class="fd-menu" aria-label="options">
+                                        <ul class="fd-menu__list fd-menu__list--no-shadow">
+                                            <li class="fd-menu__item">
+                                                <a class="fd-menu__link" href="#">
+                                                    <span class="fd-menu__title">Option 1</span>
+                                                </a>
+                                            </li>
+                                            <li class="fd-menu__item">
+                                                <a class="fd-menu__link" href="#">
+                                                    <span class="fd-menu__title">Option 2</span>
+                                                </a>
+                                            </li>
+                                            <li class="fd-menu__item">
+                                                <a class="fd-menu__link" href="#">
+                                                    <span class="fd-menu__title">Option 3</span>
+                                                </a>
+                                            </li>
+                                        </ul>
+                                    </nav>
+                                </div>
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+                <div class="fd-micro-process-flow__item fd-micro-process-flow__item--positive">
+                    <div class="fd-micro-process-flow__content">
+                        <div class="fd-micro-process-flow__content-wrapper">
+                            <div class="fd-popover">
+                                <div class="fd-micro-process-flow__icon-container fd-micro-process-flow__focusable-item fd-popover__control" tabindex="0" aria-controls="popoverMPF2" aria-expanded="false" aria-haspopup="false" onclick="onPopoverClick('popoverMPF2');">
+                                    <i class="fd-micro-process-flow__icon sap-icon--pending" role="presentation"></i>
+                                </div>
+                                <div class="fd-popover__body" aria-hidden="true" id="popoverMPF2">
+                                    <nav class="fd-menu" aria-label="options">
+                                        <ul class="fd-menu__list fd-menu__list--no-shadow">
+                                            <li class="fd-menu__item">
+                                                <a class="fd-menu__link" href="#">
+                                                    <span class="fd-menu__title">Option 1</span>
+                                                </a>
+                                            </li>
+                                            <li class="fd-menu__item">
+                                                <a class="fd-menu__link" href="#">
+                                                    <span class="fd-menu__title">Option 2</span>
+                                                </a>
+                                            </li>
+                                            <li class="fd-menu__item">
+                                                <a class="fd-menu__link" href="#">
+                                                    <span class="fd-menu__title">Option 3</span>
+                                                </a>
+                                            </li>
+                                        </ul>
+                                    </nav>
+                                </div>
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+                <div class="fd-micro-process-flow__item fd-micro-process-flow__item--information">
+                    <div class="fd-micro-process-flow__content">
+                        <div class="fd-micro-process-flow__content-wrapper">
+                            <div class="fd-popover">
+                                <div class="fd-micro-process-flow__icon-container fd-micro-process-flow__focusable-item fd-popover__control" tabindex="0" aria-controls="popoverMPF3" aria-expanded="false" aria-haspopup="false" onclick="onPopoverClick('popoverMPF3');">
+                                    <i class="fd-micro-process-flow__icon sap-icon--phone" role="presentation"></i>
+                                </div>
+                                <div class="fd-popover__body" aria-hidden="true" id="popoverMPF3">
+                                    <nav class="fd-menu" aria-label="options">
+                                        <ul class="fd-menu__list fd-menu__list--no-shadow">
+                                            <li class="fd-menu__item">
+                                                <a class="fd-menu__link" href="#">
+                                                    <span class="fd-menu__title">Option 1</span>
+                                                </a>
+                                            </li>
+                                            <li class="fd-menu__item">
+                                                <a class="fd-menu__link" href="#">
+                                                    <span class="fd-menu__title">Option 2</span>
+                                                </a>
+                                            </li>
+                                            <li class="fd-menu__item">
+                                                <a class="fd-menu__link" href="#">
+                                                    <span class="fd-menu__title">Option 3</span>
+                                                </a>
+                                            </li>
+                                        </ul>
+                                    </nav>
+                                </div>
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+                <div class="fd-micro-process-flow__item fd-micro-process-flow__item--negative">
+                    <div class="fd-micro-process-flow__content">
+                        <div class="fd-micro-process-flow__content-wrapper">
+                            <div class="fd-popover">
+                                <div class="fd-micro-process-flow__icon-container fd-micro-process-flow__focusable-item fd-popover__control" tabindex="0" aria-controls="popoverMPF4" aria-expanded="false" aria-haspopup="false" onclick="onPopoverClick('popoverMPF4');">
+                                    <i class="fd-micro-process-flow__icon sap-icon--map" role="presentation"></i>
+                                </div>
+                                <div class="fd-popover__body" aria-hidden="true" id="popoverMPF4">
+                                    <nav class="fd-menu" aria-label="options">
+                                        <ul class="fd-menu__list fd-menu__list--no-shadow">
+                                            <li class="fd-menu__item">
+                                                <a class="fd-menu__link" href="#">
+                                                    <span class="fd-menu__title">Option 1</span>
+                                                </a>
+                                            </li>
+                                            <li class="fd-menu__item">
+                                                <a class="fd-menu__link" href="#">
+                                                    <span class="fd-menu__title">Option 2</span>
+                                                </a>
+                                            </li>
+                                            <li class="fd-menu__item">
+                                                <a class="fd-menu__link" href="#">
+                                                    <span class="fd-menu__title">Option 3</span>
+                                                </a>
+                                            </li>
+                                        </ul>
+                                    </nav>
+                                </div>
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+                <div class="fd-micro-process-flow__item fd-micro-process-flow__item--critical">
+                    <div class="fd-micro-process-flow__content">
+                        <div class="fd-micro-process-flow__content-wrapper">
+                            <div class="fd-popover">
+                                <div class="fd-micro-process-flow__icon-container fd-micro-process-flow__focusable-item fd-popover__control" tabindex="0" aria-controls="popoverMPF5" aria-expanded="false" aria-haspopup="false" onclick="onPopoverClick('popoverMPF5');">
+                                    <i class="fd-micro-process-flow__icon sap-icon--log" role="presentation"></i>
+                                </div>
+                                <div class="fd-popover__body" aria-hidden="true" id="popoverMPF5">
+                                    <nav class="fd-menu" aria-label="options">
+                                        <ul class="fd-menu__list fd-menu__list--no-shadow">
+                                            <li class="fd-menu__item">
+                                                <a class="fd-menu__link" href="#">
+                                                    <span class="fd-menu__title">Option 1</span>
+                                                </a>
+                                            </li>
+                                            <li class="fd-menu__item">
+                                                <a class="fd-menu__link" href="#">
+                                                    <span class="fd-menu__title">Option 2</span>
+                                                </a>
+                                            </li>
+                                            <li class="fd-menu__item">
+                                                <a class="fd-menu__link" href="#">
+                                                    <span class="fd-menu__title">Option 3</span>
+                                                </a>
+                                            </li>
+                                        </ul>
+                                    </nav>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+### Micro process flow with overflow
+
+```html
+<div class="fd-micro-process-flow">
+    <div class="fd-micro-process-flow__overflow-container">
+        <div class="fd-micro-process-flow__wrapper">
+            <div class="fd-micro-process-flow__item">
+                <div class="fd-micro-process-flow__content">
+
+                </div>
+            </div>
+            <div class="fd-micro-process-flow__item fd-micro-process-flow__item--positive">
+                <div class="fd-micro-process-flow__content">
+                    <div class="fd-micro-process-flow__content-wrapper">
+                        <div class="fd-micro-process-flow__icon-container fd-micro-process-flow__focusable-item" tabindex="0">
+                            <i class="fd-micro-process-flow__icon sap-icon--pending" role="presentation"></i>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+            <div class="fd-micro-process-flow__item fd-micro-process-flow__item--information">
+                <div class="fd-micro-process-flow__content">
+                    <div class="fd-micro-process-flow__content-wrapper">
+                        <div class="fd-micro-process-flow__icon-container fd-micro-process-flow__focusable-item" tabindex="0">
+                            <i class="fd-micro-process-flow__icon sap-icon--phone" role="presentation"></i>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+            <div class="fd-micro-process-flow__item fd-micro-process-flow__item--negative">
+                <div class="fd-micro-process-flow__content">
+                    <div class="fd-micro-process-flow__content-wrapper">
+                        <div class="fd-micro-process-flow__icon-container fd-micro-process-flow__focusable-item" tabindex="0">
+                            <i class="fd-micro-process-flow__icon sap-icon--map" role="presentation"></i>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+            <div class="fd-micro-process-flow__item fd-micro-process-flow__item--critical">
+                <div class="fd-micro-process-flow__content">
+                    <div class="fd-micro-process-flow__content-wrapper">
+                        <div class="fd-micro-process-flow__icon-container fd-micro-process-flow__focusable-item" tabindex="0">
+                            <i class="fd-micro-process-flow__icon sap-icon--log" role="presentation"></i>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+            <div class="fd-micro-process-flow__item fd-micro-process-flow__item--positive">
+                <div class="fd-micro-process-flow__content">
+                    <div class="fd-micro-process-flow__content-wrapper">
+                        <div class="fd-micro-process-flow__icon-container fd-micro-process-flow__focusable-item" tabindex="0">
+                            <i class="fd-micro-process-flow__icon sap-icon--opportunity" role="presentation"></i>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+            <div class="fd-micro-process-flow__item fd-micro-process-flow__item--negative">
+                <div class="fd-micro-process-flow__content">
+                    <div class="fd-micro-process-flow__content-wrapper">
+                        <div class="fd-micro-process-flow__icon-container fd-micro-process-flow__focusable-item" tabindex="0">
+                            <i class="fd-micro-process-flow__icon sap-icon--task" role="presentation"></i>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+            <div class="fd-micro-process-flow__item">
+                <div class="fd-micro-process-flow__content">
+                    <div class="fd-micro-process-flow__content-wrapper">
+                        <div class="fd-micro-process-flow__icon-container fd-micro-process-flow__focusable-item" tabindex="0">
+                            <i class="fd-micro-process-flow__icon sap-icon--lead" role="presentation"></i>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+        </div>
+    </div>
+    <a tabindex="0" role="button" type="button" class="fd-micro-process-flow__link-next">20</a>
+</div>
+<div class="fd-micro-process-flow">
+    <a tabindex="0" role="button" type="button" class="fd-micro-process-flow__link-previous">10</a>
+    <div class="fd-micro-process-flow__overflow-container">
+        <div class="fd-micro-process-flow__wrapper">
+            <div class="fd-micro-process-flow__item">
+                <div class="fd-micro-process-flow__content">
+
+                </div>
+            </div>
+            <div class="fd-micro-process-flow__item fd-micro-process-flow__item--positive">
+                <div class="fd-micro-process-flow__content">
+                    <div class="fd-micro-process-flow__content-wrapper">
+                        <div class="fd-micro-process-flow__icon-container fd-micro-process-flow__focusable-item" tabindex="0">
+                            <i class="fd-micro-process-flow__icon sap-icon--pending" role="presentation"></i>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+            <div class="fd-micro-process-flow__item fd-micro-process-flow__item--information">
+                <div class="fd-micro-process-flow__content">
+                    <div class="fd-micro-process-flow__content-wrapper">
+                        <div class="fd-micro-process-flow__icon-container fd-micro-process-flow__focusable-item" tabindex="0">
+                            <i class="fd-micro-process-flow__icon sap-icon--phone" role="presentation"></i>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+            <div class="fd-micro-process-flow__item fd-micro-process-flow__item--negative">
+                <div class="fd-micro-process-flow__content">
+                    <div class="fd-micro-process-flow__content-wrapper">
+                        <div class="fd-micro-process-flow__icon-container fd-micro-process-flow__focusable-item" tabindex="0">
+                            <i class="fd-micro-process-flow__icon sap-icon--map" role="presentation"></i>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+            <div class="fd-micro-process-flow__item fd-micro-process-flow__item--critical">
+                <div class="fd-micro-process-flow__content">
+                    <div class="fd-micro-process-flow__content-wrapper">
+                        <div class="fd-micro-process-flow__icon-container fd-micro-process-flow__focusable-item" tabindex="0">
+                            <i class="fd-micro-process-flow__icon sap-icon--log" role="presentation"></i>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+            <div class="fd-micro-process-flow__item fd-micro-process-flow__item--positive">
+                <div class="fd-micro-process-flow__content">
+                    <div class="fd-micro-process-flow__content-wrapper">
+                        <div class="fd-micro-process-flow__icon-container fd-micro-process-flow__focusable-item" tabindex="0">
+                            <i class="fd-micro-process-flow__icon sap-icon--opportunity" role="presentation"></i>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+            <div class="fd-micro-process-flow__item fd-micro-process-flow__item--negative">
+                <div class="fd-micro-process-flow__content">
+                    <div class="fd-micro-process-flow__content-wrapper">
+                        <div class="fd-micro-process-flow__icon-container fd-micro-process-flow__focusable-item" tabindex="0">
+                            <i class="fd-micro-process-flow__icon sap-icon--task" role="presentation"></i>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+            <div class="fd-micro-process-flow__item">
+                <div class="fd-micro-process-flow__content">
+                    <div class="fd-micro-process-flow__content-wrapper">
+                        <div class="fd-micro-process-flow__icon-container fd-micro-process-flow__focusable-item" tabindex="0">
+                            <i class="fd-micro-process-flow__icon sap-icon--lead" role="presentation"></i>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+        </div>
+    </div>
+    <a tabindex="0" role="button" type="button" class="fd-micro-process-flow__link-next">10</a>
+</div>
+```
+
+### Micro process flow with elements inserted between nodes
+
+```html
+<div class="fd-micro-process-flow">
+    <div class="fd-micro-process-flow__overflow-container">
+        <div class="fd-micro-process-flow__wrapper">
+            <div class="fd-micro-process-flow__item">
+                <div class="fd-micro-process-flow__content">
+
+                    <div class="fd-micro-process-flow__connector">
+                        <i class="sap-icon--color-critical sap-icon--syringe fd-micro-process-flow__intermediary-item" role="presentation"></i>
+                    </div>
+                </div>
+            </div>
+            <div class="fd-micro-process-flow__item fd-micro-process-flow__item--positive">
+                <div class="fd-micro-process-flow__content">
+                    <div class="fd-micro-process-flow__content-wrapper">
+                        <div class="fd-micro-process-flow__icon-container fd-micro-process-flow__focusable-item" tabindex="0">
+                            <i class="fd-micro-process-flow__icon sap-icon--pending" role="presentation"></i>
+                        </div>
+                    </div>
+                    <div class="fd-micro-process-flow__connector">
+                        <i class="sap-icon--color-critical sap-icon--syringe fd-micro-process-flow__intermediary-item" role="presentation"></i>
+                    </div>
+                </div>
+            </div>
+            <div class="fd-micro-process-flow__item fd-micro-process-flow__item--information">
+                <div class="fd-micro-process-flow__content">
+                    <div class="fd-micro-process-flow__content-wrapper">
+                        <div class="fd-micro-process-flow__icon-container fd-micro-process-flow__focusable-item" tabindex="0">
+                            <i class="fd-micro-process-flow__icon sap-icon--phone" role="presentation"></i>
+                        </div>
+                    </div>
+                    <div class="fd-micro-process-flow__connector">
+                        <i class="sap-icon--color-critical sap-icon--syringe fd-micro-process-flow__intermediary-item" role="presentation"></i>
+                    </div>
+                </div>
+            </div>
+            <div class="fd-micro-process-flow__item fd-micro-process-flow__item--negative">
+                <div class="fd-micro-process-flow__content">
+                    <div class="fd-micro-process-flow__content-wrapper">
+                        <div class="fd-micro-process-flow__icon-container fd-micro-process-flow__focusable-item" tabindex="0">
+                            <i class="fd-micro-process-flow__icon sap-icon--map" role="presentation"></i>
+                        </div>
+                    </div>
+                    <div class="fd-micro-process-flow__connector">
+                        <i class="sap-icon--color-critical sap-icon--syringe fd-micro-process-flow__intermediary-item" role="presentation"></i>
+                    </div>
+                </div>
+            </div>
+            <div class="fd-micro-process-flow__item fd-micro-process-flow__item--critical">
+                <div class="fd-micro-process-flow__content">
+                    <div class="fd-micro-process-flow__content-wrapper">
+                        <div class="fd-micro-process-flow__icon-container fd-micro-process-flow__focusable-item" tabindex="0">
+                            <i class="fd-micro-process-flow__icon sap-icon--log" role="presentation"></i>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+### Micro process flow with custom node width
+
+By default, the width of the item container is calculated based on the actual item width and the connector line. To change the width add inline style to the element with \
+
+```html
+<div class="fd-micro-process-flow">
+    <div class="fd-micro-process-flow__overflow-container">
+        <div class="fd-micro-process-flow__wrapper">
+            <div class="fd-micro-process-flow__item">
+                <div class="fd-micro-process-flow__content">
+
+                </div>
+            </div>
+            <div class="fd-micro-process-flow__item fd-micro-process-flow__item--positive">
+                <div class="fd-micro-process-flow__content">
+                    <div class="fd-micro-process-flow__content-wrapper">
+                        <div class="fd-micro-process-flow__icon-container fd-micro-process-flow__focusable-item" tabindex="0">
+                            <i class="fd-micro-process-flow__icon sap-icon--pending" role="presentation"></i>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+            <div class="fd-micro-process-flow__item fd-micro-process-flow__item--information">
+                <div class="fd-micro-process-flow__content">
+                    <div class="fd-micro-process-flow__content-wrapper">
+                        <div class="fd-micro-process-flow__icon-container fd-micro-process-flow__focusable-item" tabindex="0">
+                            <i class="fd-micro-process-flow__icon sap-icon--phone" role="presentation"></i>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+            <div class="fd-micro-process-flow__item fd-micro-process-flow__item--negative">
+                <div class="fd-micro-process-flow__content">
+                    <div class="fd-micro-process-flow__content-wrapper">
+                        <div class="fd-micro-process-flow__icon-container fd-micro-process-flow__focusable-item" tabindex="0">
+                            <i class="fd-micro-process-flow__icon sap-icon--map" role="presentation"></i>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+            <div class="fd-micro-process-flow__item fd-micro-process-flow__item--critical">
+                <div class="fd-micro-process-flow__content">
+                    <div class="fd-micro-process-flow__content-wrapper">
+                        <div class="fd-micro-process-flow__icon-container fd-micro-process-flow__focusable-item" tabindex="0">
+                            <i class="fd-micro-process-flow__icon sap-icon--log" role="presentation"></i>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </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/Components/micro-process-flow/micro-process-flow.stories.js`
+
+For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).