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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (215) hide show
  1. package/data/AI_USAGE.md +425 -0
  2. package/data/CHANGELOG.md +53 -3
  3. package/data/component-catalog.json +62 -209
  4. package/data/components/README.md +281 -0
  5. package/data/components/action-bar.md +443 -0
  6. package/data/components/ai-busy-indicator.md +79 -0
  7. package/data/components/ai-loading-bar.md +66 -0
  8. package/data/components/avatar-btp.md +198 -0
  9. package/data/components/avatar-group.md +2660 -0
  10. package/data/components/avatar-product-switch.md +476 -0
  11. package/data/components/avatar.md +993 -0
  12. package/data/components/bar.md +574 -0
  13. package/data/components/border-radius.md +148 -0
  14. package/data/components/border.md +412 -0
  15. package/data/components/breadcrumb.md +546 -0
  16. package/data/components/button-2.md +440 -0
  17. package/data/components/button-action-sheet.md +292 -0
  18. package/data/components/button-ai.md +730 -0
  19. package/data/components/button-btp.md +223 -0
  20. package/data/components/button-button.md +233 -0
  21. package/data/components/button-counter.md +176 -0
  22. package/data/components/button-patterns.md +731 -0
  23. package/data/components/button-split.md +459 -0
  24. package/data/components/button.md +469 -0
  25. package/data/components/calendar.md +5784 -0
  26. package/data/components/card-card-media.md +707 -0
  27. package/data/components/card-card.md +2426 -0
  28. package/data/components/card-layouts.md +1201 -0
  29. package/data/components/card.md +2404 -0
  30. package/data/components/carousel.md +1506 -0
  31. package/data/components/code.md +139 -0
  32. package/data/components/component-reset.md +272 -0
  33. package/data/components/components-icons-businesssuiteinappsymbol-icons.md +85 -0
  34. package/data/components/components-icons-sap-icons.md +147 -0
  35. package/data/components/components-icons-tnt-icons.md +85 -0
  36. package/data/components/container-queries.md +221 -0
  37. package/data/components/container.md +227 -0
  38. package/data/components/dialog-docs-static-busy-indicator.md +165 -0
  39. package/data/components/dialog-docs-static-dialog.md +949 -0
  40. package/data/components/dialog-docs-static-patterns.md +147 -0
  41. package/data/components/dialog-docs-static-settings.md +528 -0
  42. package/data/components/dialog-docs-static.md +982 -0
  43. package/data/components/dialog.md +606 -0
  44. package/data/components/dynamic-page-dynamic-page.md +1914 -0
  45. package/data/components/dynamic-page.md +973 -0
  46. package/data/components/dynamic-side.md +197 -0
  47. package/data/components/elevation.md +110 -0
  48. package/data/components/feed-input.md +346 -0
  49. package/data/components/feed-list.md +580 -0
  50. package/data/components/fieldset-2.md +292 -0
  51. package/data/components/fieldset-forms.md +169 -0
  52. package/data/components/fieldset.md +381 -0
  53. package/data/components/flexible-column-layout.md +205 -0
  54. package/data/components/form-group.md +287 -0
  55. package/data/components/form-header.md +71 -0
  56. package/data/components/form-item-2.md +98 -0
  57. package/data/components/form-item-3.md +134 -0
  58. package/data/components/form-item-4.md +556 -0
  59. package/data/components/form-item-5.md +182 -0
  60. package/data/components/form-item-6.md +539 -0
  61. package/data/components/form-item-7.md +239 -0
  62. package/data/components/form-item-ai.md +158 -0
  63. package/data/components/form-item-file-uploader.md +445 -0
  64. package/data/components/form-item-forms.md +234 -0
  65. package/data/components/form-item-patterns.md +426 -0
  66. package/data/components/form-item.md +464 -0
  67. package/data/components/form-label-ai.md +126 -0
  68. package/data/components/form-label-layouts.md +306 -0
  69. package/data/components/form-label-patterns.md +1175 -0
  70. package/data/components/form-label-status-indicator.md +1083 -0
  71. package/data/components/form-label-step-input.md +620 -0
  72. package/data/components/form-label.md +2876 -0
  73. package/data/components/generic-tag.md +747 -0
  74. package/data/components/grid-list-grid-list.md +1185 -0
  75. package/data/components/grid-list.md +1449 -0
  76. package/data/components/heading.md +66 -0
  77. package/data/components/horizontal-navigation.md +568 -0
  78. package/data/components/icon-tab-bar-dev.md +190 -0
  79. package/data/components/icon-tab-bar.md +2620 -0
  80. package/data/components/icon.md +171 -0
  81. package/data/components/iconBusinessSuite.md +92 -0
  82. package/data/components/iconTnt.md +92 -0
  83. package/data/components/illustrated-message.md +439 -0
  84. package/data/components/info-label.md +348 -0
  85. package/data/components/input-group.md +2068 -0
  86. package/data/components/label.md +66 -0
  87. package/data/components/layout-grid.md +447 -0
  88. package/data/components/layout-panel.md +261 -0
  89. package/data/components/layouts-layout-grid.md +608 -0
  90. package/data/components/layouts-paddings.md +133 -0
  91. package/data/components/layouts-section.md +287 -0
  92. package/data/components/list-2.md +148 -0
  93. package/data/components/list-3.md +735 -0
  94. package/data/components/list-list.md +790 -0
  95. package/data/components/list-object-list.md +1225 -0
  96. package/data/components/list.md +1286 -0
  97. package/data/components/media-queries.md +168 -0
  98. package/data/components/menu.md +946 -0
  99. package/data/components/message-box-docs-static-ai.md +149 -0
  100. package/data/components/message-box-docs-static.md +527 -0
  101. package/data/components/message-page-upload-collection.md +678 -0
  102. package/data/components/message-page.md +256 -0
  103. package/data/components/message-strip.md +977 -0
  104. package/data/components/message-toast.md +119 -0
  105. package/data/components/micro-process-flow.md +991 -0
  106. package/data/components/navigation-menu.md +366 -0
  107. package/data/components/navigation-navigation.md +1245 -0
  108. package/data/components/navigation.md +2604 -0
  109. package/data/components/numeric-content.md +317 -0
  110. package/data/components/object-attribute.md +96 -0
  111. package/data/components/object-identifier.md +227 -0
  112. package/data/components/object-marker.md +202 -0
  113. package/data/components/object-number.md +327 -0
  114. package/data/components/object-status.md +1538 -0
  115. package/data/components/off-screen.md +87 -0
  116. package/data/components/overflow.md +97 -0
  117. package/data/components/padding.md +122 -0
  118. package/data/components/paddings.md +130 -0
  119. package/data/components/page.md +300 -0
  120. package/data/components/pagination.md +672 -0
  121. package/data/components/panel-layouts.md +345 -0
  122. package/data/components/panel.md +514 -0
  123. package/data/components/patterns-label.md +74 -0
  124. package/data/components/popover-2.md +906 -0
  125. package/data/components/popover-ai.md +466 -0
  126. package/data/components/popover-btp.md +886 -0
  127. package/data/components/popover-deprecated.md +308 -0
  128. package/data/components/popover-message-popover.md +683 -0
  129. package/data/components/popover-notification.md +1511 -0
  130. package/data/components/popover-patterns.md +1100 -0
  131. package/data/components/popover-popover.md +1862 -0
  132. package/data/components/popover-quick-view.md +385 -0
  133. package/data/components/popover-timepicker.md +1836 -0
  134. package/data/components/popover-user-menu.md +1303 -0
  135. package/data/components/popover.md +1938 -0
  136. package/data/components/progress-indicator.md +351 -0
  137. package/data/components/prompt-input-ai.md +226 -0
  138. package/data/components/prompt-input.md +226 -0
  139. package/data/components/rating-indicator.md +1469 -0
  140. package/data/components/resizable-card-layout.md +951 -0
  141. package/data/components/scrollbar.md +86 -0
  142. package/data/components/search-field.md +287 -0
  143. package/data/components/section.md +250 -0
  144. package/data/components/segmented-button.md +324 -0
  145. package/data/components/shellbar.md +2183 -0
  146. package/data/components/side-nav.md +1562 -0
  147. package/data/components/skeleton.md +243 -0
  148. package/data/components/slider.md +395 -0
  149. package/data/components/splitter.md +353 -0
  150. package/data/components/table.md +2749 -0
  151. package/data/components/tabs.md +658 -0
  152. package/data/components/text-text.md +380 -0
  153. package/data/components/text.md +253 -0
  154. package/data/components/tile.md +1132 -0
  155. package/data/components/time.md +818 -0
  156. package/data/components/title.md +153 -0
  157. package/data/components/titles.md +83 -0
  158. package/data/components/token.md +311 -0
  159. package/data/components/tokenizer.md +398 -0
  160. package/data/components/tool-header.md +1352 -0
  161. package/data/components/tool-layout.md +199 -0
  162. package/data/components/toolbar-ai.md +174 -0
  163. package/data/components/toolbar-btp.md +526 -0
  164. package/data/components/toolbar-title-bar.md +473 -0
  165. package/data/components/toolbar.md +432 -0
  166. package/data/components/tree.md +1031 -0
  167. package/data/components/typography.md +435 -0
  168. package/data/components/variant-management.md +360 -0
  169. package/data/components/vertical-nav.md +589 -0
  170. package/data/components/wizard.md +1429 -0
  171. package/data/examples/Components/dialog/device-specifications.example.html +39 -30
  172. package/data/examples/Components/shellbar/optional-items.example.html +210 -157
  173. package/data/examples/Components/shellbar/overflow-toolbar.example.html +202 -177
  174. package/data/examples/Components/shellbar/responsive-paddings.example.html +217 -146
  175. package/data/examples/Components/shellbar/responsiveness.example.html +825 -613
  176. package/data/examples/Components/user-menu/default.example.html +241 -83
  177. package/data/schemas/badge.schema.json +1 -1
  178. package/data/schemas/button-split.schema.json +1 -1
  179. package/data/schemas/component-frontmatter.schema.json +123 -0
  180. package/data/schemas/component-markdown.schema.json +81 -0
  181. package/data/schemas/counter.schema.json +1 -1
  182. package/data/schemas/dynamic-page.schema.json +1 -1
  183. package/data/schemas/dynamic-side-content.schema.json +1 -1
  184. package/data/schemas/facet.schema.json +1 -1
  185. package/data/schemas/fieldset.schema.json +1 -1
  186. package/data/schemas/flexible-column-layout.schema.json +1 -1
  187. package/data/schemas/form-group.schema.json +3 -2
  188. package/data/schemas/form-header.schema.json +1 -1
  189. package/data/schemas/form-label.schema.json +1 -0
  190. package/data/schemas/form-message.schema.json +1 -1
  191. package/data/schemas/grid-list.schema.json +1 -1
  192. package/data/schemas/input-group.schema.json +1 -1
  193. package/data/schemas/layout-panel.schema.json +1 -1
  194. package/data/schemas/page.schema.json +1 -1
  195. package/data/schemas/quick-view.schema.json +2 -1
  196. package/data/schemas/section.schema.json +1 -1
  197. package/data/schemas/side-nav.schema.json +1 -1
  198. package/data/schemas/splitter.schema.json +1 -1
  199. package/data/schemas/tabs.schema.json +1 -1
  200. package/data/schemas/tile.schema.json +1 -1
  201. package/data/schemas/tool-layout.schema.json +1 -1
  202. package/data/schemas/user-menu.schema.json +10 -0
  203. package/data/schemas/wizard.schema.json +1 -1
  204. package/package.json +1 -1
  205. package/src/data/load-catalog.d.ts +2 -0
  206. package/src/data/load-catalog.js +5 -1
  207. package/src/data/load-catalog.js.map +1 -1
  208. package/src/data/load-markdown-docs.d.ts +44 -0
  209. package/src/data/load-markdown-docs.js +179 -0
  210. package/src/data/load-markdown-docs.js.map +1 -0
  211. package/src/data/markdown-cache.d.ts +60 -0
  212. package/src/data/markdown-cache.js +218 -0
  213. package/src/data/markdown-cache.js.map +1 -0
  214. package/src/server.js +72 -1
  215. package/src/server.js.map +1 -1
package/data/components/wizard.md ADDED
@@ -0,0 +1,1429 @@
1
+ ---
2
+ component: fd-wizard
3
+ title: Components/Wizard
4
+ category: Components
5
+ selector: fd-wizard
6
+ cssFile: wizard.css
7
+ sourcePath: packages/styles/stories/Components/wizard/wizard.stories.js
8
+ tags: []
9
+ dependencies: ["action-sheet","bar","button","icon","popover","wizard"]
10
+ relatedComponents: ["action-sheet","bar","button","icon","popover","wizard"]
11
+ stability: stable
12
+ generatedAt: 2026-06-09T18:29:01.402Z
13
+ ---
14
+
15
+ # Components/Wizard
16
+
17
+
18
+
19
+ ## Dependencies
20
+
21
+ This component depends on the following CSS files:
22
+
23
+ - `action-sheet.css`
24
+ - `bar.css`
25
+ - `button.css`
26
+ - `icon.css`
27
+ - `popover.css`
28
+ - `wizard.css`
29
+
30
+ ## Installation
31
+
32
+ ```bash
33
+ npm install fundamental-styles
34
+ ```
35
+
36
+ ```html
37
+ <!-- Include theme -->
38
+ <link href="node_modules/fundamental-styles/dist/theming/sap_horizon.css" rel="stylesheet">
39
+
40
+ <!-- Include component CSS -->
41
+ <link href="node_modules/fundamental-styles/dist/wizard.css" rel="stylesheet">
42
+
43
+ <!-- Include dependencies -->
44
+ <link href="node_modules/fundamental-styles/dist/action-sheet.css" rel="stylesheet">
45
+ <link href="node_modules/fundamental-styles/dist/bar.css" rel="stylesheet">
46
+ <link href="node_modules/fundamental-styles/dist/button.css" rel="stylesheet">
47
+ <link href="node_modules/fundamental-styles/dist/icon.css" rel="stylesheet">
48
+ <link href="node_modules/fundamental-styles/dist/popover.css" rel="stylesheet">
49
+ <link href="node_modules/fundamental-styles/dist/wizard.css" rel="stylesheet">
50
+ ```
51
+
52
+ ## Basic Usage
53
+
54
+ ```html
55
+ <section class="fd-wizard">
56
+ <nav class="fd-wizard__navigation" aria-label="Wizard Navigation 1">
57
+ <ul class="fd-wizard__progress-bar">
58
+ <li class="fd-wizard__step fd-wizard__step--completed">
59
+ <div class="fd-wizard__step-wrapper">
60
+ <a class="fd-wizard__step-container" tabindex="0" aria-label="Step 1: One line">
61
+ <span class="fd-wizard__step-indicator">
62
+ <i class="fd-wizard__icon sap-icon--accept" role="presentation"></i>
63
+ </span>
64
+ <div class="fd-wizard__label-container">
65
+ <span class="fd-wizard__label">Step 1: One line</span>
66
+ </div>
67
+ </a>
68
+ <span class="fd-wizard__connector fd-wizard__connector--active"></span>
69
+ </div>
70
+ </li>
71
+ <li class="fd-wizard__step fd-wizard__step--current">
72
+ <div class="fd-wizard__step-wrapper">
73
+ <a class="fd-wizard__step-container" tabindex="0" aria-label="Step 2: Very long label that truncates on the second line" aria-current="step">
74
+ <span class="fd-wizard__step-indicator">2</span>
75
+ <div class="fd-wizard__label-container">
76
+ <span class="fd-wizard__label">
77
+ Step 2: Very long label that truncates on the second line
78
+ </span>
79
+ </div>
80
+ </a>
81
+ <span class="fd-wizard__connector"></span>
82
+ </div>
83
+ </li>
84
+ <li class="fd-wizard__step fd-wizard__step--upcoming">
85
+ <div class="fd-wizard__step-wrapper">
86
+ <a class="fd-wizard__step-container" tabindex="0" aria-label="Step 3: One line truncates" aria-disabled="true">
87
+ <span class="fd-wizard__step-indicator">3</span>
88
+ <div class="fd-wizard__label-container fd-wizard__label-container--optional">
89
+ <span class="fd-wizard__label">Step 3: One line truncates</span>
90
+ <span class="fd-wizard__optional-text">(Optional)</span>
91
+ </div>
92
+ </a>
93
+ <span class="fd-wizard__connector"></span>
94
+ </div>
95
+ </li>
96
+ <li class="fd-wizard__step fd-wizard__step--upcoming">
97
+ <div class="fd-wizard__step-wrapper">
98
+ <a class="fd-wizard__step-container" tabindex="0" aria-label="Step 4: Future Step" aria-disabled="true">
99
+ <span class="fd-wizard__step-indicator">4</span>
100
+ <div class="fd-wizard__label-container">
101
+ <span class="fd-wizard__label">Step 4: Future Step</span>
102
+ </div>
103
+ </a>
104
+ </div>
105
+ </li>
106
+ </ul>
107
+ </nav>
108
+ <section class="fd-wizard__content" id="wizard-section-1">
109
+ <div class="fd-wizard__step-content-container">
110
+ <div>
111
+ Sed fermentum, mi et tristique ullamcorper, sapien sapien faucibus sem, quis pretium nibh lorem malesuada diam. Nulla quis arcu aliquet, feugiat massa semper, volutpat diam. Nam vitae ante posuere, molestie neque sit amet, dapibus velit. Maecenas eleifend tempor lorem. Mauris vitae elementum mi, sed eleifend ligula. Nulla tempor vulputate dolor, nec dignissim quam convallis ut. Praesent vitae commodo felis, ut iaculis felis. Fusce quis eleifend sapien, eget facilisis nibh. Suspendisse est velit, scelerisque ut commodo eget, dignissim quis metus. Cras faucibus consequat gravida. Curabitur vitae quam felis. Phasellus ac leo eleifend, commodo tortor et, varius quam. Aliquam erat volutpat
112
+ </div>
113
+ <div class="fd-wizard__next-step">
114
+ <button class="fd-button fd-button--emphasized">Step 3</button>
115
+ </div>
116
+ </div>
117
+ </section>
118
+ <footer>
119
+ <div class="fd-bar fd-bar--page fd-bar--footer">
120
+ <div class="fd-bar__right">
121
+ <div class="fd-bar__element">
122
+ <button class="fd-button fd-button--transparent">Cancel</button>
123
+ </div>
124
+ </div>
125
+ </div>
126
+ </footer>
127
+ </section>
128
+ ```
129
+
130
+ ## BEM Elements
131
+
132
+ This component uses the following BEM elements:
133
+
134
+ - `fd-wizard__connector`
135
+ - `fd-wizard__connector--active`
136
+ - `fd-wizard__connector--branching`
137
+ - `fd-wizard__content`
138
+ - `fd-wizard__content--list`
139
+ - `fd-wizard__content--md`
140
+ - `fd-wizard__content--sm`
141
+ - `fd-wizard__content--xl`
142
+ - `fd-wizard__icon`
143
+ - `fd-wizard__label`
144
+ - `fd-wizard__label-container`
145
+ - `fd-wizard__label-container--optional`
146
+ - `fd-wizard__navigation`
147
+ - `fd-wizard__next-step`
148
+ - `fd-wizard__next-step--floating`
149
+ - `fd-wizard__optional-text`
150
+ - `fd-wizard__progress-bar`
151
+ - `fd-wizard__progress-bar--md`
152
+ - `fd-wizard__progress-bar--sm`
153
+ - `fd-wizard__progress-bar--xl`
154
+ - `fd-wizard__step`
155
+ - `fd-wizard__step--completed`
156
+ - `fd-wizard__step--current`
157
+ - `fd-wizard__step--no-label`
158
+ - `fd-wizard__step--stacked`
159
+ - `fd-wizard__step--stacked-top`
160
+ - `fd-wizard__step--upcoming`
161
+ - `fd-wizard__step-container`
162
+ - `fd-wizard__step-content-container`
163
+ - `fd-wizard__step-indicator`
164
+ - `fd-wizard__step-wrapper`
165
+
166
+ ## Related Components
167
+
168
+ This component works with or depends on:
169
+
170
+ - `action-sheet`
171
+ - `bar`
172
+ - `button`
173
+ - `icon`
174
+ - `popover`
175
+ - `wizard`
176
+
177
+ ## Design Tokens
178
+
179
+ Key CSS variables used by this component:
180
+
181
+ - `--active`
182
+ - `--branching`
183
+ - `--completed`
184
+ - `--current`
185
+ - `--fdWizard_Active_Step_Border_Color`
186
+ - `--fdWizard_Active_Step_Color`
187
+ - `--fdWizard_Active_Step_Icon_Color`
188
+ - `--fdWizard_Completed_Step_Border`
189
+ - `--fdWizard_Completed_Step_Color`
190
+ - `--fdWizard_Completed_Step_Icon_Color`
191
+ - `--fdWizard_Completed_Step_Label_Color`
192
+ - `--fdWizard_Connector_Active_Border_Color`
193
+ - `--fdWizard_Content_List_Background`
194
+ - `--fdWizard_Content_Solid_Background`
195
+ - `--fdWizard_Content_Transparent_Background`
196
+
197
+ *...and 5 more*
198
+
199
+ ## Examples
200
+
201
+ ### Default
202
+
203
+ The default wizard displays a walkthrough screen with forms split into sections. Once the user fills all of the necessary input fields, a button is displayed to go to the next section. A *Cancel* button is displayed in the footer, so the user can exit the wizard at any point during the process. However, if a user exits the wizard after adding their input, they will receive a warning that their information will be lost.
204
+
205
+ ```html
206
+ <section class="fd-wizard">
207
+ <nav class="fd-wizard__navigation" aria-label="Wizard Navigation 1">
208
+ <ul class="fd-wizard__progress-bar">
209
+ <li class="fd-wizard__step fd-wizard__step--completed">
210
+ <div class="fd-wizard__step-wrapper">
211
+ <a class="fd-wizard__step-container" tabindex="0" aria-label="Step 1: One line">
212
+ <span class="fd-wizard__step-indicator">
213
+ <i class="fd-wizard__icon sap-icon--accept" role="presentation"></i>
214
+ </span>
215
+ <div class="fd-wizard__label-container">
216
+ <span class="fd-wizard__label">Step 1: One line</span>
217
+ </div>
218
+ </a>
219
+ <span class="fd-wizard__connector fd-wizard__connector--active"></span>
220
+ </div>
221
+ </li>
222
+ <li class="fd-wizard__step fd-wizard__step--current">
223
+ <div class="fd-wizard__step-wrapper">
224
+ <a class="fd-wizard__step-container" tabindex="0" aria-label="Step 2: Very long label that truncates on the second line" aria-current="step">
225
+ <span class="fd-wizard__step-indicator">2</span>
226
+ <div class="fd-wizard__label-container">
227
+ <span class="fd-wizard__label">
228
+ Step 2: Very long label that truncates on the second line
229
+ </span>
230
+ </div>
231
+ </a>
232
+ <span class="fd-wizard__connector"></span>
233
+ </div>
234
+ </li>
235
+ <li class="fd-wizard__step fd-wizard__step--upcoming">
236
+ <div class="fd-wizard__step-wrapper">
237
+ <a class="fd-wizard__step-container" tabindex="0" aria-label="Step 3: One line truncates" aria-disabled="true">
238
+ <span class="fd-wizard__step-indicator">3</span>
239
+ <div class="fd-wizard__label-container fd-wizard__label-container--optional">
240
+ <span class="fd-wizard__label">Step 3: One line truncates</span>
241
+ <span class="fd-wizard__optional-text">(Optional)</span>
242
+ </div>
243
+ </a>
244
+ <span class="fd-wizard__connector"></span>
245
+ </div>
246
+ </li>
247
+ <li class="fd-wizard__step fd-wizard__step--upcoming">
248
+ <div class="fd-wizard__step-wrapper">
249
+ <a class="fd-wizard__step-container" tabindex="0" aria-label="Step 4: Future Step" aria-disabled="true">
250
+ <span class="fd-wizard__step-indicator">4</span>
251
+ <div class="fd-wizard__label-container">
252
+ <span class="fd-wizard__label">Step 4: Future Step</span>
253
+ </div>
254
+ </a>
255
+ </div>
256
+ </li>
257
+ </ul>
258
+ </nav>
259
+ <section class="fd-wizard__content" id="wizard-section-1">
260
+ <div class="fd-wizard__step-content-container">
261
+ <div>
262
+ Sed fermentum, mi et tristique ullamcorper, sapien sapien faucibus sem, quis pretium nibh lorem malesuada diam. Nulla quis arcu aliquet, feugiat massa semper, volutpat diam. Nam vitae ante posuere, molestie neque sit amet, dapibus velit. Maecenas eleifend tempor lorem. Mauris vitae elementum mi, sed eleifend ligula. Nulla tempor vulputate dolor, nec dignissim quam convallis ut. Praesent vitae commodo felis, ut iaculis felis. Fusce quis eleifend sapien, eget facilisis nibh. Suspendisse est velit, scelerisque ut commodo eget, dignissim quis metus. Cras faucibus consequat gravida. Curabitur vitae quam felis. Phasellus ac leo eleifend, commodo tortor et, varius quam. Aliquam erat volutpat
263
+ </div>
264
+ <div class="fd-wizard__next-step">
265
+ <button class="fd-button fd-button--emphasized">Step 3</button>
266
+ </div>
267
+ </div>
268
+ </section>
269
+ <footer>
270
+ <div class="fd-bar fd-bar--page fd-bar--footer">
271
+ <div class="fd-bar__right">
272
+ <div class="fd-bar__element">
273
+ <button class="fd-button fd-button--transparent">Cancel</button>
274
+ </div>
275
+ </div>
276
+ </div>
277
+ </footer>
278
+ </section>
279
+ ```
280
+
281
+ ### Customized
282
+
283
+ The wizard component can be customized with modifier classes. For instance, the example below has several modified elements:
284
+
285
+ | **Element** | <div style="margin-left: 2rem;"> **Modifier class** </div> | <div style="margin-left: 2rem;"> **Modification** </div> |
286
+ | :---- | :---- | :-------------- |
287
+ | \
288
+
289
+ ```html
290
+ <section class="fd-wizard">
291
+ <nav class="fd-wizard__navigation" aria-label="Wizard Navigation 2">
292
+ <ul class="fd-wizard__progress-bar fd-wizard__progress-bar--md">
293
+ <li class="fd-wizard__step fd-wizard__step--completed">
294
+ <div class="fd-wizard__step-wrapper">
295
+ <a class="fd-wizard__step-container" tabindex="0" aria-label="Step 1: One line">
296
+ <span class="fd-wizard__step-indicator">
297
+ <i class="fd-wizard__icon sap-icon--accept" role="presentation"></i>
298
+ </span>
299
+ <div class="fd-wizard__label-container">
300
+ <span class="fd-wizard__label">Step 1: One line</span>
301
+ </div>
302
+ </a>
303
+ <span class="fd-wizard__connector fd-wizard__connector--active"></span>
304
+ </div>
305
+ </li>
306
+ <li class="fd-wizard__step fd-wizard__step--current">
307
+ <div class="fd-wizard__step-wrapper">
308
+ <a class="fd-wizard__step-container" tabindex="0" aria-label="Step 2: Very long label that truncates on the second line" aria-current="step">
309
+ <span class="fd-wizard__step-indicator">2</span>
310
+ <div class="fd-wizard__label-container">
311
+ <span class="fd-wizard__label">
312
+ Step 2: Very long label that truncates on the second line
313
+ </span>
314
+ </div>
315
+ </a>
316
+ <span class="fd-wizard__connector"></span>
317
+ </div>
318
+ </li>
319
+ <li class="fd-wizard__step fd-wizard__step--upcoming">
320
+ <div class="fd-wizard__step-wrapper">
321
+ <a class="fd-wizard__step-container" tabindex="0" aria-label="Step 3: Branching" aria-disabled="true">
322
+ <span class="fd-wizard__step-indicator">3</span>
323
+ <div class="fd-wizard__label-container fd-wizard__label-container--optional">
324
+ <span class="fd-wizard__label">Step 3: Branching</span>
325
+ </div>
326
+ </a>
327
+ <span class="fd-wizard__connector fd-wizard__connector--branching"></span>
328
+ </div>
329
+ </li>
330
+ </ul>
331
+ </nav>
332
+ <section class="fd-wizard__content fd-wizard__content--list fd-wizard__content--md" id="wizard-section-2">
333
+ <div class="fd-wizard__step-content-container">
334
+ <div>
335
+ Sed fermentum, mi et tristique ullamcorper, sapien sapien faucibus sem, quis pretium nibh lorem malesuada diam. Nulla quis arcu aliquet, feugiat massa semper, volutpat diam. Nam vitae ante posuere, molestie neque sit amet, dapibus velit. Maecenas eleifend tempor lorem. Mauris vitae elementum mi, sed eleifend ligula. Nulla tempor vulputate dolor, nec dignissim quam convallis ut. Praesent vitae commodo felis, ut iaculis felis. Fusce quis eleifend sapien, eget facilisis nibh. Suspendisse est velit, scelerisque ut commodo eget, dignissim quis metus. Cras faucibus consequat gravida. Curabitur vitae quam felis. Phasellus ac leo eleifend, commodo tortor et, varius quam. Aliquam erat volutpat
336
+ </div>
337
+ <div class="fd-wizard__next-step">
338
+ <button class="fd-button fd-button--emphasized">Step 3</button>
339
+ </div>
340
+ </div>
341
+ </section>
342
+ <footer>
343
+ <div class="fd-bar fd-bar--page-m_l fd-bar--footer">
344
+ <div class="fd-bar__right">
345
+ <div class="fd-bar__element">
346
+ <button class="fd-button fd-button--transparent">Cancel</button>
347
+ </div>
348
+ </div>
349
+ </div>
350
+ </footer>
351
+ </section>
352
+ ```
353
+
354
+ ### Responsive
355
+
356
+ If there is sufficient horizontal space, all labels are shown.
357
+ However, when the width decreases, the step labels disappear. To hide the labels, add the \
358
+
359
+ ```html
360
+ <section class="fd-wizard">
361
+ <nav class="fd-wizard__navigation" aria-label="Wizard Navigation 3">
362
+ <ul class="fd-wizard__progress-bar fd-wizard__progress-bar--xl">
363
+ <li class="fd-wizard__step fd-wizard__step--completed">
364
+ <div class="fd-wizard__step-wrapper">
365
+ <a class="fd-wizard__step-container" tabindex="0" aria-label="Customer">
366
+ <span class="fd-wizard__step-indicator">
367
+ <i class="fd-wizard__icon sap-icon--person-placeholder" role="presentation"></i>
368
+ </span>
369
+ <div class="fd-wizard__label-container">
370
+ <span class="fd-wizard__label">Customer</span>
371
+ </div>
372
+ </a>
373
+ <span class="fd-wizard__connector fd-wizard__connector--active"></span>
374
+ </div>
375
+ </li>
376
+ <li class="fd-wizard__step fd-wizard__step--completed">
377
+ <div class="fd-wizard__step-wrapper">
378
+ <a class="fd-wizard__step-container" tabindex="0" aria-label="Contact">
379
+ <span class="fd-wizard__step-indicator">
380
+ <i class="fd-wizard__icon sap-icon--contacts" role="presentation"></i>
381
+ </span>
382
+ <div class="fd-wizard__label-container fd-wizard__label-container--optional">
383
+ <span class="fd-wizard__label">Contact</span>
384
+ <span class="fd-wizard__optional-text">(Optional)</span>
385
+ </div>
386
+ </a>
387
+ <span class="fd-wizard__connector fd-wizard__connector--active"></span>
388
+ </div>
389
+ </li>
390
+ <li class="fd-wizard__step fd-wizard__step--completed">
391
+ <div class="fd-wizard__step-wrapper">
392
+ <a class="fd-wizard__step-container" tabindex="0" aria-label="Payment">
393
+ <span class="fd-wizard__step-indicator">
394
+ <i class="fd-wizard__icon sap-icon--money-bills" role="presentation"></i>
395
+ </span>
396
+ <div class="fd-wizard__label-container">
397
+ <span class="fd-wizard__label">Payment</span>
398
+ </div>
399
+ </a>
400
+ <span class="fd-wizard__connector fd-wizard__connector--active"></span>
401
+ </div>
402
+ </li>
403
+ <li class="fd-wizard__step fd-wizard__step--current">
404
+ <div class="fd-wizard__step-wrapper">
405
+ <a class="fd-wizard__step-container" tabindex="0" aria-label="Bill To">
406
+ <span class="fd-wizard__step-indicator">
407
+ <i class="fd-wizard__icon sap-icon--batch-payments" role="presentation"></i>
408
+ </span>
409
+ <div class="fd-wizard__label-container">
410
+ <span class="fd-wizard__label">Bill To</span>
411
+ </div>
412
+ </a>
413
+ <span class="fd-wizard__connector fd-wizard__connector"></span>
414
+ </div>
415
+ </li>
416
+ <li class="fd-wizard__step fd-wizard__step--upcoming">
417
+ <div class="fd-wizard__step-wrapper">
418
+ <a class="fd-wizard__step-container" tabindex="0" aria-label="Ship To" aria-disabled="true">
419
+ <span class="fd-wizard__step-indicator">
420
+ <i class="fd-wizard__icon sap-icon--shipping-status" role="presentation"></i>
421
+ </span>
422
+ <div class="fd-wizard__label-container">
423
+ <span class="fd-wizard__label">Ship To</span>
424
+ </div>
425
+ </a>
426
+ </div>
427
+ </li>
428
+ </ul>
429
+ </nav>
430
+ <section class="fd-wizard__content fd-wizard__content--xl" id="wizard-section-3">
431
+ <div class="fd-wizard__step-content-container">
432
+ <div>
433
+ Sed fermentum, mi et tristique ullamcorper, sapien sapien faucibus sem, quis pretium nibh lorem malesuada diam. Nulla quis arcu aliquet, feugiat massa semper, volutpat diam. Nam vitae ante posuere, molestie neque sit amet, dapibus velit. Maecenas eleifend tempor lorem. Mauris vitae elementum mi, sed eleifend ligula. Nulla tempor vulputate dolor, nec dignissim quam convallis ut. Praesent vitae commodo felis, ut iaculis felis. Fusce quis eleifend sapien, eget facilisis nibh. Suspendisse est velit, scelerisque ut commodo eget, dignissim quis metus. Cras faucibus consequat gravida. Curabitur vitae quam felis. Phasellus ac leo eleifend, commodo tortor et, varius quam. Aliquam erat volutpat
434
+ </div>
435
+ <div class="fd-wizard__next-step">
436
+ <button class="fd-button fd-button--emphasized">Next Step</button>
437
+ </div>
438
+ </div>
439
+ </section>
440
+ <footer>
441
+ <div class="fd-bar fd-bar--page-m_l fd-bar--footer">
442
+ <div class="fd-bar__right">
443
+ <div class="fd-bar__element">
444
+ <button class="fd-button fd-button--transparent">Cancel</button>
445
+ </div>
446
+ </div>
447
+ </div>
448
+ </footer>
449
+ </section>
450
+
451
+ <section class="fd-wizard">
452
+ <nav class="fd-wizard__navigation" aria-label="Wizard Navigation 4">
453
+ <ul class="fd-wizard__progress-bar fd-wizard__progress-bar--xl">
454
+ <li class="fd-wizard__step fd-wizard__step--completed fd-wizard__step--no-label">
455
+ <div class="fd-wizard__step-wrapper">
456
+ <a class="fd-wizard__step-container" tabindex="0" aria-label="Customer">
457
+ <span class="fd-wizard__step-indicator">
458
+ <i class="fd-wizard__icon sap-icon--person-placeholder" role="presentation"></i>
459
+ </span>
460
+ <div class="fd-wizard__label-container">
461
+ <span class="fd-wizard__label">Customer</span>
462
+ </div>
463
+ </a>
464
+ <span class="fd-wizard__connector fd-wizard__connector--active"></span>
465
+ </div>
466
+ </li>
467
+ <li class="fd-wizard__step fd-wizard__step--completed fd-wizard__step--no-label">
468
+ <div class="fd-wizard__step-wrapper">
469
+ <a class="fd-wizard__step-container" tabindex="0" aria-label="Contact">
470
+ <span class="fd-wizard__step-indicator">
471
+ <i class="fd-wizard__icon sap-icon--contacts" role="presentation"></i>
472
+ </span>
473
+ <div class="fd-wizard__label-container fd-wizard__label-container--optional">
474
+ <span class="fd-wizard__label">Contact</span>
475
+ <span class="fd-wizard__optional-text">(Optional)</span>
476
+ </div>
477
+ </a>
478
+ <span class="fd-wizard__connector fd-wizard__connector--active"></span>
479
+ </div>
480
+ </li>
481
+ <li class="fd-wizard__step fd-wizard__step--completed fd-wizard__step--no-label">
482
+ <div class="fd-wizard__step-wrapper">
483
+ <a class="fd-wizard__step-container" tabindex="0" aria-label="Payment">
484
+ <span class="fd-wizard__step-indicator">
485
+ <i class="fd-wizard__icon sap-icon--money-bills" role="presentation"></i>
486
+ </span>
487
+ <div class="fd-wizard__label-container">
488
+ <span class="fd-wizard__label">Payment</span>
489
+ </div>
490
+ </a>
491
+ <span class="fd-wizard__connector fd-wizard__connector--active"></span>
492
+ </div>
493
+ </li>
494
+ <li class="fd-wizard__step fd-wizard__step--current fd-wizard__step--no-label">
495
+ <div class="fd-wizard__step-wrapper">
496
+ <a class="fd-wizard__step-container" tabindex="0" aria-label="Bill To">
497
+ <span class="fd-wizard__step-indicator">
498
+ <i class="fd-wizard__icon sap-icon--batch-payments" role="presentation"></i>
499
+ </span>
500
+ <div class="fd-wizard__label-container">
501
+ <span class="fd-wizard__label">Bill To</span>
502
+ </div>
503
+ </a>
504
+ <span class="fd-wizard__connector fd-wizard__connector"></span>
505
+ </div>
506
+ </li>
507
+ <li class="fd-wizard__step fd-wizard__step--upcoming fd-wizard__step--no-label">
508
+ <div class="fd-wizard__step-wrapper">
509
+ <a class="fd-wizard__step-container" tabindex="0" aria-label="Ship To" aria-disabled="true">
510
+ <span class="fd-wizard__step-indicator">
511
+ <i class="fd-wizard__icon sap-icon--shipping-status" role="presentation"></i>
512
+ </span>
513
+ <div class="fd-wizard__label-container">
514
+ <span class="fd-wizard__label">Ship To</span>
515
+ </div>
516
+ </a>
517
+ <span class="fd-wizard__connector fd-wizard__connector"></span>
518
+ </div>
519
+ </li>
520
+ <li class="fd-wizard__step fd-wizard__step--upcoming fd-wizard__step--no-label">
521
+ <div class="fd-wizard__step-wrapper">
522
+ <a class="fd-wizard__step-container" tabindex="0" aria-label="Products" aria-disabled="true">
523
+ <span class="fd-wizard__step-indicator">
524
+ <i class="fd-wizard__icon sap-icon--product" role="presentation"></i>
525
+ </span>
526
+ <div class="fd-wizard__label-container fd-wizard__label-container--optional">
527
+ <span class="fd-wizard__label">Products</span>
528
+ <span class="fd-wizard__optional-text">(Optional)</span>
529
+ </div>
530
+ </a>
531
+ <span class="fd-wizard__connector"></span>
532
+ </div>
533
+ </li>
534
+ <li class="fd-wizard__step fd-wizard__step--upcoming fd-wizard__step--no-label">
535
+ <div class="fd-wizard__step-wrapper">
536
+ <a class="fd-wizard__step-container" tabindex="0" aria-label="Additional Information" aria-disabled="true">
537
+ <span class="fd-wizard__step-indicator">
538
+ <i class="fd-wizard__icon sap-icon--course-program" role="presentation"></i>
539
+ </span>
540
+ <div class="fd-wizard__label-container">
541
+ <span class="fd-wizard__label">Additional Information</span>
542
+ </div>
543
+ </a>
544
+ </div>
545
+ </li>
546
+ </ul>
547
+ </nav>
548
+ <section class="fd-wizard__content fd-wizard__content--xl" id="wizard-section-4">
549
+ <div class="fd-wizard__step-content-container">
550
+ <div>
551
+ Sed fermentum, mi et tristique ullamcorper, sapien sapien faucibus sem, quis pretium nibh lorem malesuada diam. Nulla quis arcu aliquet, feugiat massa semper, volutpat diam. Nam vitae ante posuere, molestie neque sit amet, dapibus velit. Maecenas eleifend tempor lorem. Mauris vitae elementum mi, sed eleifend ligula. Nulla tempor vulputate dolor, nec dignissim quam convallis ut. Praesent vitae commodo felis, ut iaculis felis. Fusce quis eleifend sapien, eget facilisis nibh. Suspendisse est velit, scelerisque ut commodo eget, dignissim quis metus. Cras faucibus consequat gravida. Curabitur vitae quam felis. Phasellus ac leo eleifend, commodo tortor et, varius quam. Aliquam erat volutpat
552
+ </div>
553
+ <div class="fd-wizard__next-step">
554
+ <button class="fd-button fd-button--emphasized">Next Step</button>
555
+ </div>
556
+ </div>
557
+ </section>
558
+ <footer>
559
+ <div class="fd-bar fd-bar--page-m_l fd-bar--footer">
560
+ <div class="fd-bar__right">
561
+ <div class="fd-bar__element">
562
+ <button class="fd-button fd-button--transparent">Cancel</button>
563
+ </div>
564
+ </div>
565
+ </div>
566
+ </footer>
567
+ </section>
568
+
569
+ <section class="fd-wizard">
570
+ <nav class="fd-wizard__navigation" aria-label="Wizard Navigation 5">
571
+ <ul class="fd-wizard__progress-bar fd-wizard__progress-bar--xl">
572
+ <li class="fd-wizard__step fd-wizard__step--completed fd-wizard__step--stacked">
573
+ <div class="fd-wizard__step-wrapper">
574
+ <a class="fd-wizard__step-container" tabindex="0" aria-label="Customer">
575
+ <span class="fd-wizard__step-indicator">
576
+ <i class="fd-wizard__icon sap-icon--person-placeholder" role="presentation"></i>
577
+ </span>
578
+ <div class="fd-wizard__label-container">
579
+ <span class="fd-wizard__label">Customer</span>
580
+ </div>
581
+ </a>
582
+ <span class="fd-wizard__connector fd-wizard__connector--active"></span>
583
+ </div>
584
+ </li>
585
+ <li class="fd-wizard__step fd-wizard__step--completed fd-wizard__step--stacked">
586
+ <div class="fd-wizard__step-wrapper">
587
+ <a class="fd-wizard__step-container" tabindex="0" aria-label="Contact">
588
+ <span class="fd-wizard__step-indicator">
589
+ <i class="fd-wizard__icon sap-icon--contacts" role="presentation"></i>
590
+ </span>
591
+ <div class="fd-wizard__label-container fd-wizard__label-container--optional">
592
+ <span class="fd-wizard__label">Contact</span>
593
+ <span class="fd-wizard__optional-text">(Optional)</span>
594
+ </div>
595
+ </a>
596
+ <span class="fd-wizard__connector"></span>
597
+ </div>
598
+ </li>
599
+ <li class="fd-wizard__step fd-wizard__step--completed fd-wizard__step--stacked fd-wizard__step--stacked-top">
600
+ <div class="fd-wizard__step-wrapper">
601
+ <div class="fd-popover">
602
+ <div class="fd-popover__control">
603
+ <a
604
+ class="fd-wizard__step-container"
605
+ tabindex="0"
606
+ aria-label="Payment"
607
+ aria-controls="actionSheetDesktop"
608
+ aria-expanded="false"
609
+ aria-haspopup="true"
610
+ onclick="onPopoverClick('actionSheetDesktop');">
611
+ <span class="fd-wizard__step-indicator">
612
+ <i class="fd-wizard__icon sap-icon--money-bills" role="presentation"></i>
613
+ </span>
614
+ <div class="fd-wizard__label-container">
615
+ <span class="fd-wizard__label">Payment</span>
616
+ </div>
617
+ </a>
618
+ </div>
619
+ <div class="fd-popover__body" aria-hidden="true" id="actionSheetDesktop">
620
+ <ul
621
+ class="fd-action-sheet"
622
+ role="list"
623
+ aria-label="List of completed stacked steps">
624
+ <li class="fd-action-sheet__item" role="listitem">
625
+ <button class="fd-button fd-button--full-width fd-button--transparent fd-button--text-alignment-left">
626
+ <i class=" sap-icon--money-bills" role="presentation"></i>
627
+ <span class="fd-button__text">Payment</span>
628
+ </button>
629
+ </li>
630
+ <li class="fd-action-sheet__item" role="listitem">
631
+ <button class="fd-button fd-button--full-width fd-button--transparent fd-button--text-alignment-left">
632
+ <i class="sap-icon--contacts" role="presentation"></i>
633
+ <span class="fd-button__text">Contact</span>
634
+ </button>
635
+ </li>
636
+ <li class="fd-action-sheet__item" role="listitem">
637
+ <button class="fd-button fd-button--full-width fd-button--transparent fd-button--text-alignment-left">
638
+ <i class="sap-icon--person-placeholder" role="presentation"></i>
639
+ <span class="fd-button__text">Customer</span>
640
+ </button>
641
+ </li>
642
+ </ul>
643
+ </div>
644
+ </div>
645
+ <span class="fd-wizard__connector fd-wizard__connector--active"></span>
646
+ </div>
647
+ </li>
648
+ <li class="fd-wizard__step fd-wizard__step--current">
649
+ <div class="fd-wizard__step-wrapper">
650
+ <a class="fd-wizard__step-container" tabindex="0" aria-label="Bill To">
651
+ <span class="fd-wizard__step-indicator">
652
+ <i class="fd-wizard__icon sap-icon--batch-payments" role="presentation"></i>
653
+ </span>
654
+ <div class="fd-wizard__label-container">
655
+ <span class="fd-wizard__label">Bill To</span>
656
+ </div>
657
+ </a>
658
+ <span class="fd-wizard__connector fd-wizard__connector"></span>
659
+ </div>
660
+ </li>
661
+ <li class="fd-wizard__step fd-wizard__step--upcoming fd-wizard__step--stacked">
662
+ <div class="fd-wizard__step-wrapper">
663
+ <a class="fd-wizard__step-container" tabindex="0" aria-label="Ship To" aria-disabled="true">
664
+ <span class="fd-wizard__step-indicator">
665
+ <i class="fd-wizard__icon sap-icon--shipping-status" role="presentation"></i>
666
+ </span>
667
+ <div class="fd-wizard__label-container">
668
+ <span class="fd-wizard__label">Ship To</span>
669
+ </div>
670
+ </a>
671
+ <span class="fd-wizard__connector fd-wizard__connector"></span>
672
+ </div>
673
+ </li>
674
+ <li class="fd-wizard__step fd-wizard__step--upcoming fd-wizard__step--stacked">
675
+ <div class="fd-wizard__step-wrapper">
676
+ <a class="fd-wizard__step-container" tabindex="0" aria-label="Products" aria-disabled="true">
677
+ <span class="fd-wizard__step-indicator">
678
+ <i class="fd-wizard__icon sap-icon--product" role="presentation"></i>
679
+ </span>
680
+ <div class="fd-wizard__label-container fd-wizard__label-container--optional">
681
+ <span class="fd-wizard__label">Products</span>
682
+ <span class="fd-wizard__optional-text">(Optional)</span>
683
+ </div>
684
+ </a>
685
+ <span class="fd-wizard__connector"></span>
686
+ </div>
687
+ </li>
688
+ <li class="fd-wizard__step fd-wizard__step--upcoming fd-wizard__step--stacked">
689
+ <div class="fd-wizard__step-wrapper">
690
+ <a class="fd-wizard__step-container" tabindex="0" aria-label="Additional Information" aria-disabled="true">
691
+ <span class="fd-wizard__step-indicator">
692
+ <i class="fd-wizard__icon sap-icon--course-program" role="presentation"></i>
693
+ </span>
694
+ <div class="fd-wizard__label-container">
695
+ <span class="fd-wizard__label">Additional Information</span>
696
+ </div>
697
+ </a>
698
+ <span class="fd-wizard__connector"></span>
699
+ </div>
700
+ </li>
701
+ </ul>
702
+ </nav>
703
+ <section class="fd-wizard__content fd-wizard__content--xl" id="wizard-section-5">
704
+ <div class="fd-wizard__step-content-container">
705
+ <div>
706
+ Sed fermentum, mi et tristique ullamcorper, sapien sapien faucibus sem, quis pretium nibh lorem malesuada diam. Nulla quis arcu aliquet, feugiat massa semper, volutpat diam. Nam vitae ante posuere, molestie neque sit amet, dapibus velit. Maecenas eleifend tempor lorem. Mauris vitae elementum mi, sed eleifend ligula. Nulla tempor vulputate dolor, nec dignissim quam convallis ut. Praesent vitae commodo felis, ut iaculis felis. Fusce quis eleifend sapien, eget facilisis nibh. Suspendisse est velit, scelerisque ut commodo eget, dignissim quis metus. Cras faucibus consequat gravida. Curabitur vitae quam felis. Phasellus ac leo eleifend, commodo tortor et, varius quam. Aliquam erat volutpat
707
+ </div>
708
+ <div class="fd-wizard__next-step">
709
+ <button class="fd-button fd-button--emphasized">Next Step</button>
710
+ </div>
711
+ </div>
712
+ </section>
713
+ <footer>
714
+ <div class="fd-bar fd-bar--page-m_l fd-bar--footer">
715
+ <div class="fd-bar__right">
716
+ <div class="fd-bar__element">
717
+ <button class="fd-button fd-button--transparent">Cancel</button>
718
+ </div>
719
+ </div>
720
+ </div>
721
+ </footer>
722
+ </section>
723
+ ```
724
+
725
+ ### RevertedSteps
726
+
727
+ To indicate reverted steps, use combination of `fd-wizard__step--completed` and `fd-wizard__step--upcoming` classes.
728
+
729
+ ```html
730
+ <section class="fd-wizard">
731
+ <nav class="fd-wizard__navigation" aria-label="Wizard Navigation 3">
732
+ <ul class="fd-wizard__progress-bar fd-wizard__progress-bar--xl">
733
+ <li class="fd-wizard__step fd-wizard__step--completed">
734
+ <div class="fd-wizard__step-wrapper">
735
+ <a class="fd-wizard__step-container" tabindex="0" aria-label="Customer">
736
+ <span class="fd-wizard__step-indicator">
737
+ <i class="fd-wizard__icon sap-icon--person-placeholder" role="presentation"></i>
738
+ </span>
739
+ <div class="fd-wizard__label-container">
740
+ <span class="fd-wizard__label">Customer</span>
741
+ </div>
742
+ </a>
743
+ <span class="fd-wizard__connector fd-wizard__connector--active"></span>
744
+ </div>
745
+ </li>
746
+ <li class="fd-wizard__step fd-wizard__step--completed">
747
+ <div class="fd-wizard__step-wrapper">
748
+ <a class="fd-wizard__step-container" tabindex="0" aria-label="Contact">
749
+ <span class="fd-wizard__step-indicator">
750
+ <i class="fd-wizard__icon sap-icon--contacts" role="presentation"></i>
751
+ </span>
752
+ <div class="fd-wizard__label-container fd-wizard__label-container--optional">
753
+ <span class="fd-wizard__label">Contact</span>
754
+ <span class="fd-wizard__optional-text">(Optional)</span>
755
+ </div>
756
+ </a>
757
+ <span class="fd-wizard__connector fd-wizard__connector--active"></span>
758
+ </div>
759
+ </li>
760
+ <li class="fd-wizard__step fd-wizard__step--current">
761
+ <div class="fd-wizard__step-wrapper">
762
+ <a class="fd-wizard__step-container" tabindex="0" aria-label="Payment">
763
+ <span class="fd-wizard__step-indicator">
764
+ <i class="fd-wizard__icon sap-icon--money-bills" role="presentation"></i>
765
+ </span>
766
+ <div class="fd-wizard__label-container">
767
+ <span class="fd-wizard__label">Payment</span>
768
+ </div>
769
+ </a>
770
+ <span class="fd-wizard__connector fd-wizard__connector--active"></span>
771
+ </div>
772
+ </li>
773
+ <li class="fd-wizard__step fd-wizard__step--completed fd-wizard__step--upcoming">
774
+ <div class="fd-wizard__step-wrapper">
775
+ <a class="fd-wizard__step-container" tabindex="0" aria-label="Bill To">
776
+ <span class="fd-wizard__step-indicator">
777
+ <i class="fd-wizard__icon sap-icon--batch-payments" role="presentation"></i>
778
+ </span>
779
+ <div class="fd-wizard__label-container">
780
+ <span class="fd-wizard__label">Bill To</span>
781
+ </div>
782
+ </a>
783
+ <span class="fd-wizard__connector fd-wizard__connector"></span>
784
+ </div>
785
+ </li>
786
+ <li class="fd-wizard__step fd-wizard__step--upcoming">
787
+ <div class="fd-wizard__step-wrapper">
788
+ <a class="fd-wizard__step-container" tabindex="0" aria-label="Ship To" aria-disabled="true">
789
+ <span class="fd-wizard__step-indicator">
790
+ <i class="fd-wizard__icon sap-icon--shipping-status" role="presentation"></i>
791
+ </span>
792
+ <div class="fd-wizard__label-container">
793
+ <span class="fd-wizard__label">Ship To</span>
794
+ </div>
795
+ </a>
796
+ </div>
797
+ </li>
798
+ </ul>
799
+ </nav>
800
+ <section class="fd-wizard__content fd-wizard__content--xl" id="wizard-section-3">
801
+ <div class="fd-wizard__step-content-container">
802
+ <div>
803
+ Sed fermentum, mi et tristique ullamcorper, sapien sapien faucibus sem, quis pretium nibh lorem malesuada diam. Nulla quis arcu aliquet, feugiat massa semper, volutpat diam. Nam vitae ante posuere, molestie neque sit amet, dapibus velit. Maecenas eleifend tempor lorem. Mauris vitae elementum mi, sed eleifend ligula. Nulla tempor vulputate dolor, nec dignissim quam convallis ut. Praesent vitae commodo felis, ut iaculis felis. Fusce quis eleifend sapien, eget facilisis nibh. Suspendisse est velit, scelerisque ut commodo eget, dignissim quis metus. Cras faucibus consequat gravida. Curabitur vitae quam felis. Phasellus ac leo eleifend, commodo tortor et, varius quam. Aliquam erat volutpat
804
+ </div>
805
+ <div class="fd-wizard__next-step">
806
+ <button class="fd-button fd-button--emphasized">Next Step</button>
807
+ </div>
808
+ </div>
809
+ </section>
810
+ <footer>
811
+ <div class="fd-bar fd-bar--page-m_l fd-bar--footer">
812
+ <div class="fd-bar__right">
813
+ <div class="fd-bar__element">
814
+ <button class="fd-button fd-button--transparent">Cancel</button>
815
+ </div>
816
+ </div>
817
+ </div>
818
+ </footer>
819
+ </section>
820
+
821
+ <section class="fd-wizard">
822
+ <nav class="fd-wizard__navigation" aria-label="Wizard Navigation 4">
823
+ <ul class="fd-wizard__progress-bar fd-wizard__progress-bar--xl">
824
+ <li class="fd-wizard__step fd-wizard__step--completed fd-wizard__step--no-label">
825
+ <div class="fd-wizard__step-wrapper">
826
+ <a class="fd-wizard__step-container" tabindex="0" aria-label="Customer">
827
+ <span class="fd-wizard__step-indicator">
828
+ <i class="fd-wizard__icon sap-icon--person-placeholder" role="presentation"></i>
829
+ </span>
830
+ <div class="fd-wizard__label-container">
831
+ <span class="fd-wizard__label">Customer</span>
832
+ </div>
833
+ </a>
834
+ <span class="fd-wizard__connector fd-wizard__connector--active"></span>
835
+ </div>
836
+ </li>
837
+ <li class="fd-wizard__step fd-wizard__step--completed fd-wizard__step--no-label">
838
+ <div class="fd-wizard__step-wrapper">
839
+ <a class="fd-wizard__step-container" tabindex="0" aria-label="Contact">
840
+ <span class="fd-wizard__step-indicator">
841
+ <i class="fd-wizard__icon sap-icon--contacts" role="presentation"></i>
842
+ </span>
843
+ <div class="fd-wizard__label-container fd-wizard__label-container--optional">
844
+ <span class="fd-wizard__label">Contact</span>
845
+ <span class="fd-wizard__optional-text">(Optional)</span>
846
+ </div>
847
+ </a>
848
+ <span class="fd-wizard__connector fd-wizard__connector--active"></span>
849
+ </div>
850
+ </li>
851
+ <li class="fd-wizard__step fd-wizard__step--current fd-wizard__step--no-label">
852
+ <div class="fd-wizard__step-wrapper">
853
+ <a class="fd-wizard__step-container" tabindex="0" aria-label="Payment">
854
+ <span class="fd-wizard__step-indicator">
855
+ <i class="fd-wizard__icon sap-icon--money-bills" role="presentation"></i>
856
+ </span>
857
+ <div class="fd-wizard__label-container">
858
+ <span class="fd-wizard__label">Payment</span>
859
+ </div>
860
+ </a>
861
+ <span class="fd-wizard__connector fd-wizard__connector--active"></span>
862
+ </div>
863
+ </li>
864
+ <li class="fd-wizard__step fd-wizard__step--completed fd-wizard__step--upcoming fd-wizard__step--no-label">
865
+ <div class="fd-wizard__step-wrapper">
866
+ <a class="fd-wizard__step-container" tabindex="0" aria-label="Bill To">
867
+ <span class="fd-wizard__step-indicator">
868
+ <i class="fd-wizard__icon sap-icon--batch-payments" role="presentation"></i>
869
+ </span>
870
+ <div class="fd-wizard__label-container">
871
+ <span class="fd-wizard__label">Bill To</span>
872
+ </div>
873
+ </a>
874
+ <span class="fd-wizard__connector fd-wizard__connector"></span>
875
+ </div>
876
+ </li>
877
+ <li class="fd-wizard__step fd-wizard__step--upcoming fd-wizard__step--no-label">
878
+ <div class="fd-wizard__step-wrapper">
879
+ <a class="fd-wizard__step-container" tabindex="0" aria-label="Ship To" aria-disabled="true">
880
+ <span class="fd-wizard__step-indicator">
881
+ <i class="fd-wizard__icon sap-icon--shipping-status" role="presentation"></i>
882
+ </span>
883
+ <div class="fd-wizard__label-container">
884
+ <span class="fd-wizard__label">Ship To</span>
885
+ </div>
886
+ </a>
887
+ <span class="fd-wizard__connector fd-wizard__connector"></span>
888
+ </div>
889
+ </li>
890
+ <li class="fd-wizard__step fd-wizard__step--upcoming fd-wizard__step--no-label">
891
+ <div class="fd-wizard__step-wrapper">
892
+ <a class="fd-wizard__step-container" tabindex="0" aria-label="Products" aria-disabled="true">
893
+ <span class="fd-wizard__step-indicator">
894
+ <i class="fd-wizard__icon sap-icon--product" role="presentation"></i>
895
+ </span>
896
+ <div class="fd-wizard__label-container fd-wizard__label-container--optional">
897
+ <span class="fd-wizard__label">Products</span>
898
+ <span class="fd-wizard__optional-text">(Optional)</span>
899
+ </div>
900
+ </a>
901
+ <span class="fd-wizard__connector"></span>
902
+ </div>
903
+ </li>
904
+ <li class="fd-wizard__step fd-wizard__step--upcoming fd-wizard__step--no-label">
905
+ <div class="fd-wizard__step-wrapper">
906
+ <a class="fd-wizard__step-container" tabindex="0" aria-label="Additional Information" aria-disabled="true">
907
+ <span class="fd-wizard__step-indicator">
908
+ <i class="fd-wizard__icon sap-icon--course-program" role="presentation"></i>
909
+ </span>
910
+ <div class="fd-wizard__label-container">
911
+ <span class="fd-wizard__label">Additional Information</span>
912
+ </div>
913
+ </a>
914
+ </div>
915
+ </li>
916
+ </ul>
917
+ </nav>
918
+ <section class="fd-wizard__content fd-wizard__content--xl" id="wizard-section-4">
919
+ <div class="fd-wizard__step-content-container">
920
+ <div>
921
+ Sed fermentum, mi et tristique ullamcorper, sapien sapien faucibus sem, quis pretium nibh lorem malesuada diam. Nulla quis arcu aliquet, feugiat massa semper, volutpat diam. Nam vitae ante posuere, molestie neque sit amet, dapibus velit. Maecenas eleifend tempor lorem. Mauris vitae elementum mi, sed eleifend ligula. Nulla tempor vulputate dolor, nec dignissim quam convallis ut. Praesent vitae commodo felis, ut iaculis felis. Fusce quis eleifend sapien, eget facilisis nibh. Suspendisse est velit, scelerisque ut commodo eget, dignissim quis metus. Cras faucibus consequat gravida. Curabitur vitae quam felis. Phasellus ac leo eleifend, commodo tortor et, varius quam. Aliquam erat volutpat
922
+ </div>
923
+ <div class="fd-wizard__next-step">
924
+ <button class="fd-button fd-button--emphasized">Next Step</button>
925
+ </div>
926
+ </div>
927
+ </section>
928
+ <footer>
929
+ <div class="fd-bar fd-bar--page-m_l fd-bar--footer">
930
+ <div class="fd-bar__right">
931
+ <div class="fd-bar__element">
932
+ <button class="fd-button fd-button--transparent">Cancel</button>
933
+ </div>
934
+ </div>
935
+ </div>
936
+ </footer>
937
+ </section>
938
+
939
+ <section class="fd-wizard">
940
+ <nav class="fd-wizard__navigation" aria-label="Wizard Navigation 5">
941
+ <ul class="fd-wizard__progress-bar fd-wizard__progress-bar--xl">
942
+ <li class="fd-wizard__step fd-wizard__step--completed fd-wizard__step--stacked">
943
+ <div class="fd-wizard__step-wrapper">
944
+ <a class="fd-wizard__step-container" tabindex="0" aria-label="Customer">
945
+ <span class="fd-wizard__step-indicator">
946
+ <i class="fd-wizard__icon sap-icon--person-placeholder" role="presentation"></i>
947
+ </span>
948
+ <div class="fd-wizard__label-container">
949
+ <span class="fd-wizard__label">Customer</span>
950
+ </div>
951
+ </a>
952
+ <span class="fd-wizard__connector fd-wizard__connector--active"></span>
953
+ </div>
954
+ </li>
955
+ <li class="fd-wizard__step fd-wizard__step--completed fd-wizard__step--stacked fd-wizard__step--stacked-top">
956
+ <div class="fd-wizard__step-wrapper">
957
+ <a class="fd-wizard__step-container" tabindex="0" aria-label="Contact">
958
+ <span class="fd-wizard__step-indicator">
959
+ <i class="fd-wizard__icon sap-icon--contacts" role="presentation"></i>
960
+ </span>
961
+ <div class="fd-wizard__label-container fd-wizard__label-container--optional">
962
+ <span class="fd-wizard__label">Contact</span>
963
+ <span class="fd-wizard__optional-text">(Optional)</span>
964
+ </div>
965
+ </a>
966
+ <span class="fd-wizard__connector"></span>
967
+ </div>
968
+ </li>
969
+ <li class="fd-wizard__step fd-wizard__step--current">
970
+ <div class="fd-wizard__step-wrapper">
971
+ <div class="fd-popover">
972
+ <div class="fd-popover__control">
973
+ <a
974
+ class="fd-wizard__step-container"
975
+ tabindex="0"
976
+ aria-label="Payment"
977
+ aria-controls="actionSheetDesktop"
978
+ aria-expanded="false"
979
+ aria-haspopup="true"
980
+ onclick="onPopoverClick('actionSheetDesktop');">
981
+ <span class="fd-wizard__step-indicator">
982
+ <i class="fd-wizard__icon sap-icon--money-bills" role="presentation"></i>
983
+ </span>
984
+ <div class="fd-wizard__label-container">
985
+ <span class="fd-wizard__label">Payment</span>
986
+ </div>
987
+ </a>
988
+ </div>
989
+ <div class="fd-popover__body" aria-hidden="true" id="actionSheetDesktop">
990
+ <ul
991
+ class="fd-action-sheet"
992
+ role="list"
993
+ aria-label="List of completed stacked steps">
994
+ <li class="fd-action-sheet__item" role="listitem">
995
+ <button class="fd-button fd-button--full-width fd-button--transparent fd-button--text-alignment-left">
996
+ <i class=" sap-icon--money-bills" role="presentation"></i>
997
+ <span class="fd-button__text">Payment</span>
998
+ </button>
999
+ </li>
1000
+ <li class="fd-action-sheet__item" role="listitem">
1001
+ <button class="fd-button fd-button--full-width fd-button--transparent fd-button--text-alignment-left">
1002
+ <i class="sap-icon--contacts" role="presentation"></i>
1003
+ <span class="fd-button__text">Contact</span>
1004
+ </button>
1005
+ </li>
1006
+ <li class="fd-action-sheet__item" role="listitem">
1007
+ <button class="fd-button fd-button--full-width fd-button--transparent fd-button--text-alignment-left">
1008
+ <i class="sap-icon--person-placeholder" role="presentation"></i>
1009
+ <span class="fd-button__text">Customer</span>
1010
+ </button>
1011
+ </li>
1012
+ </ul>
1013
+ </div>
1014
+ </div>
1015
+ <span class="fd-wizard__connector fd-wizard__connector--active"></span>
1016
+ </div>
1017
+ </li>
1018
+ <li class="fd-wizard__step fd-wizard__step--completed fd-wizard__step--upcoming fd-wizard__step--stacked">
1019
+ <div class="fd-wizard__step-wrapper">
1020
+ <a class="fd-wizard__step-container" tabindex="0" aria-label="Bill To">
1021
+ <span class="fd-wizard__step-indicator">
1022
+ <i class="fd-wizard__icon sap-icon--batch-payments" role="presentation"></i>
1023
+ </span>
1024
+ <div class="fd-wizard__label-container">
1025
+ <span class="fd-wizard__label">Bill To</span>
1026
+ </div>
1027
+ </a>
1028
+ <span class="fd-wizard__connector fd-wizard__connector"></span>
1029
+ </div>
1030
+ </li>
1031
+ <li class="fd-wizard__step fd-wizard__step--upcoming fd-wizard__step--stacked">
1032
+ <div class="fd-wizard__step-wrapper">
1033
+ <a class="fd-wizard__step-container" tabindex="0" aria-label="Ship To" aria-disabled="true">
1034
+ <span class="fd-wizard__step-indicator">
1035
+ <i class="fd-wizard__icon sap-icon--shipping-status" role="presentation"></i>
1036
+ </span>
1037
+ <div class="fd-wizard__label-container">
1038
+ <span class="fd-wizard__label">Ship To</span>
1039
+ </div>
1040
+ </a>
1041
+ <span class="fd-wizard__connector fd-wizard__connector"></span>
1042
+ </div>
1043
+ </li>
1044
+ <li class="fd-wizard__step fd-wizard__step--upcoming fd-wizard__step--stacked">
1045
+ <div class="fd-wizard__step-wrapper">
1046
+ <a class="fd-wizard__step-container" tabindex="0" aria-label="Products" aria-disabled="true">
1047
+ <span class="fd-wizard__step-indicator">
1048
+ <i class="fd-wizard__icon sap-icon--product" role="presentation"></i>
1049
+ </span>
1050
+ <div class="fd-wizard__label-container fd-wizard__label-container--optional">
1051
+ <span class="fd-wizard__label">Products</span>
1052
+ <span class="fd-wizard__optional-text">(Optional)</span>
1053
+ </div>
1054
+ </a>
1055
+ <span class="fd-wizard__connector"></span>
1056
+ </div>
1057
+ </li>
1058
+ <li class="fd-wizard__step fd-wizard__step--upcoming fd-wizard__step--stacked">
1059
+ <div class="fd-wizard__step-wrapper">
1060
+ <a class="fd-wizard__step-container" tabindex="0" aria-label="Additional Information" aria-disabled="true">
1061
+ <span class="fd-wizard__step-indicator">
1062
+ <i class="fd-wizard__icon sap-icon--course-program" role="presentation"></i>
1063
+ </span>
1064
+ <div class="fd-wizard__label-container">
1065
+ <span class="fd-wizard__label">Additional Information</span>
1066
+ </div>
1067
+ </a>
1068
+ <span class="fd-wizard__connector"></span>
1069
+ </div>
1070
+ </li>
1071
+ </ul>
1072
+ </nav>
1073
+ <section class="fd-wizard__content fd-wizard__content--xl" id="wizard-section-5">
1074
+ <div class="fd-wizard__step-content-container">
1075
+ <div>
1076
+ Sed fermentum, mi et tristique ullamcorper, sapien sapien faucibus sem, quis pretium nibh lorem malesuada diam. Nulla quis arcu aliquet, feugiat massa semper, volutpat diam. Nam vitae ante posuere, molestie neque sit amet, dapibus velit. Maecenas eleifend tempor lorem. Mauris vitae elementum mi, sed eleifend ligula. Nulla tempor vulputate dolor, nec dignissim quam convallis ut. Praesent vitae commodo felis, ut iaculis felis. Fusce quis eleifend sapien, eget facilisis nibh. Suspendisse est velit, scelerisque ut commodo eget, dignissim quis metus. Cras faucibus consequat gravida. Curabitur vitae quam felis. Phasellus ac leo eleifend, commodo tortor et, varius quam. Aliquam erat volutpat
1077
+ </div>
1078
+ <div class="fd-wizard__next-step">
1079
+ <button class="fd-button fd-button--emphasized">Next Step</button>
1080
+ </div>
1081
+ </div>
1082
+ </section>
1083
+ <footer>
1084
+ <div class="fd-bar fd-bar--page-m_l fd-bar--footer">
1085
+ <div class="fd-bar__right">
1086
+ <div class="fd-bar__element">
1087
+ <button class="fd-button fd-button--transparent">Cancel</button>
1088
+ </div>
1089
+ </div>
1090
+ </div>
1091
+ </footer>
1092
+ </section>
1093
+ ```
1094
+
1095
+ ### Mobile
1096
+
1097
+ For mobile devices, add the \
1098
+
1099
+ ```html
1100
+ <h4>Next Step button after content</h4>
1101
+ <section class="fd-wizard">
1102
+ <nav class="fd-wizard__navigation" aria-label="Wizard Navigation 6">
1103
+ <ul class="fd-wizard__progress-bar fd-wizard__progress-bar--sm">
1104
+ <li class="fd-wizard__step fd-wizard__step--completed fd-wizard__step--stacked">
1105
+ <div class="fd-wizard__step-wrapper">
1106
+ <a class="fd-wizard__step-container" tabindex="0" aria-label="Customer">
1107
+ <span class="fd-wizard__step-indicator">
1108
+ <i class="fd-wizard__icon sap-icon--person-placeholder" role="presentation"></i>
1109
+ </span>
1110
+ <div class="fd-wizard__label-container">
1111
+ <span class="fd-wizard__label">Customer</span>
1112
+ </a>
1113
+ <span class="fd-wizard__connector fd-wizard__connector--active"></span>
1114
+ </li>
1115
+ <li class="fd-wizard__step fd-wizard__step--completed fd-wizard__step--stacked">
1116
+ <div class="fd-wizard__step-wrapper">
1117
+ <a class="fd-wizard__step-container" tabindex="0" aria-label="Contact">
1118
+ <span class="fd-wizard__step-indicator">
1119
+ <i class="fd-wizard__icon sap-icon--contacts" role="presentation"></i>
1120
+ </span>
1121
+ <div class="fd-wizard__label-container fd-wizard__label-container--optional">
1122
+ <span class="fd-wizard__label">Contact</span>
1123
+ <span class="fd-wizard__optional-text">(Optional)</span>
1124
+ </div>
1125
+ </a>
1126
+ <span class="fd-wizard__connector"></span>
1127
+ </div>
1128
+ </li>
1129
+ <li class="fd-wizard__step fd-wizard__step--completed fd-wizard__step--stacked fd-wizard__step--stacked-top">
1130
+ <div class="fd-wizard__step-wrapper">
1131
+ <div class="fd-popover">
1132
+ <div class="fd-popover__control">
1133
+ <a
1134
+ class="fd-wizard__step-container"
1135
+ tabindex="0"
1136
+ aria-label="Payment"
1137
+ aria-controls="actionSheetMobile1"
1138
+ aria-expanded="false"
1139
+ aria-haspopup="true"
1140
+ onclick="onPopoverClick('actionSheetMobile1');">
1141
+ <span class="fd-wizard__step-indicator">
1142
+ <i class="fd-wizard__icon sap-icon--money-bills" role="presentation"></i>
1143
+ </span>
1144
+ <div class="fd-wizard__label-container">
1145
+ <span class="fd-wizard__label">Payment</span>
1146
+ </div>
1147
+ </a>
1148
+ </div>
1149
+ <div class="fd-popover__body" aria-hidden="true" id="actionSheetMobile1">
1150
+ <ul
1151
+ class="fd-action-sheet"
1152
+ role="list"
1153
+ aria-label="List of completed stacked steps">
1154
+ <li class="fd-action-sheet__item" role="listitem">
1155
+ <button class="fd-button fd-button--full-width fd-button--transparent fd-button--text-alignment-left">
1156
+ <i class=" sap-icon--money-bills" role="presentation"></i>
1157
+ <span class="fd-button__text">Payment</span>
1158
+ </button>
1159
+ </li>
1160
+ <li class="fd-action-sheet__item" role="listitem">
1161
+ <button class="fd-button fd-button--full-width fd-button--transparent fd-button--text-alignment-left">
1162
+ <i class="sap-icon--contacts" role="presentation"></i>
1163
+ <span class="fd-button__text">Contact</span>
1164
+ </button>
1165
+ </li>
1166
+ <li class="fd-action-sheet__item" role="listitem">
1167
+ <button class="fd-button fd-button--full-width fd-button--transparent fd-button--text-alignment-left">
1168
+ <i class="sap-icon--person-placeholder" role="presentation"></i>
1169
+ <span class="fd-button__text">Customer</span>
1170
+ </button>
1171
+ </li>
1172
+ </ul>
1173
+ </div>
1174
+ </div>
1175
+ <span class="fd-wizard__connector fd-wizard__connector--active"></span>
1176
+ </div>
1177
+ </li>
1178
+ <li class="fd-wizard__step fd-wizard__step--current">
1179
+ <div class="fd-wizard__step-wrapper">
1180
+ <a class="fd-wizard__step-container" tabindex="0" aria-label="Bill To">
1181
+ <span class="fd-wizard__step-indicator">
1182
+ <i class="fd-wizard__icon sap-icon--batch-payments" role="presentation"></i>
1183
+ </span>
1184
+ <div class="fd-wizard__label-container">
1185
+ <span class="fd-wizard__label">Bill To</span>
1186
+ </div>
1187
+ </a>
1188
+ <span class="fd-wizard__connector fd-wizard__connector"></span>
1189
+ </div>
1190
+ </li>
1191
+ <li class="fd-wizard__step fd-wizard__step--upcoming fd-wizard__step--stacked">
1192
+ <div class="fd-wizard__step-wrapper">
1193
+ <a class="fd-wizard__step-container" tabindex="0" aria-label="Ship To" aria-disabled="true">
1194
+ <span class="fd-wizard__step-indicator">
1195
+ <i class="fd-wizard__icon sap-icon--shipping-status" role="presentation"></i>
1196
+ </span>
1197
+ <div class="fd-wizard__label-container">
1198
+ <span class="fd-wizard__label">Ship To</span>
1199
+ </div>
1200
+ </a>
1201
+ <span class="fd-wizard__connector fd-wizard__connector"></span>
1202
+ </div>
1203
+ </li>
1204
+ <li class="fd-wizard__step fd-wizard__step--upcoming fd-wizard__step--stacked">
1205
+ <div class="fd-wizard__step-wrapper">
1206
+ <a class="fd-wizard__step-container" tabindex="0" aria-label="Products" aria-disabled="true">
1207
+ <span class="fd-wizard__step-indicator">
1208
+ <i class="fd-wizard__icon sap-icon--product" role="presentation"></i>
1209
+ </span>
1210
+ <div class="fd-wizard__label-container fd-wizard__label-container--optional">
1211
+ <span class="fd-wizard__label">Products</span>
1212
+ <span class="fd-wizard__optional-text">(Optional)</span>
1213
+ </div>
1214
+ </a>
1215
+ <span class="fd-wizard__connector"></span>
1216
+ </div>
1217
+ </li>
1218
+ <li class="fd-wizard__step fd-wizard__step--upcoming fd-wizard__step--stacked">
1219
+ <div class="fd-wizard__step-wrapper">
1220
+ <a class="fd-wizard__step-container" tabindex="0" aria-label="Additional Information" aria-disabled="true">
1221
+ <span class="fd-wizard__step-indicator">
1222
+ <i class="fd-wizard__icon sap-icon--course-program" role="presentation"></i>
1223
+ </span>
1224
+ <div class="fd-wizard__label-container">
1225
+ <span class="fd-wizard__label">Additional Information</span>
1226
+ </div>
1227
+ </a>
1228
+ <span class="fd-wizard__connector"></span>
1229
+ </div>
1230
+ </li>
1231
+ </ul>
1232
+ </nav>
1233
+ <section class="fd-wizard__content fd-wizard__content--sm" id="wizard-section-6">
1234
+ <div class="fd-wizard__step-content-container">
1235
+ <div>
1236
+ Sed fermentum, mi et tristique ullamcorper, sapien sapien faucibus sem, quis pretium nibh lorem malesuada diam. Nulla quis arcu aliquet, feugiat massa semper, volutpat diam. Nam vitae ante posuere, molestie neque sit amet, dapibus velit. Maecenas eleifend tempor lorem. Mauris vitae elementum mi, sed eleifend ligula. Nulla tempor vulputate dolor, nec dignissim quam convallis ut. Praesent vitae commodo felis, ut iaculis felis.
1237
+ </div>
1238
+ <div class="fd-wizard__next-step">
1239
+ <button class="fd-button fd-button--emphasized">Next Step</button>
1240
+ </div>
1241
+ </div>
1242
+ </section>
1243
+ <footer>
1244
+ <div class="fd-bar fd-bar--page-s fd-bar--floating-footer">
1245
+ <div class="fd-bar__right">
1246
+ <div class="fd-bar__element">
1247
+ <button class="fd-button fd-button--transparent">Cancel</button>
1248
+ </div>
1249
+ </div>
1250
+ </div>
1251
+ </footer>
1252
+ </section>
1253
+ </div>
1254
+
1255
+ <h4>Next Step button above the floating footer</h4>
1256
+ <section class="fd-wizard">
1257
+ <nav class="fd-wizard__navigation" aria-label="Wizard Navigation 7">
1258
+ <ul class="fd-wizard__progress-bar fd-wizard__progress-bar--sm">
1259
+ <li class="fd-wizard__step fd-wizard__step--completed fd-wizard__step--stacked">
1260
+ <div class="fd-wizard__step-wrapper">
1261
+ <a class="fd-wizard__step-container" tabindex="0" aria-label="Customer">
1262
+ <span class="fd-wizard__step-indicator">
1263
+ <i class="fd-wizard__icon sap-icon--person-placeholder" role="presentation"></i>
1264
+ </span>
1265
+ <div class="fd-wizard__label-container">
1266
+ <span class="fd-wizard__label">Customer</span>
1267
+ </a>
1268
+ <span class="fd-wizard__connector fd-wizard__connector--active"></span>
1269
+ </div>
1270
+ </li>
1271
+ <li class="fd-wizard__step fd-wizard__step--completed fd-wizard__step--stacked">
1272
+ <div class="fd-wizard__step-wrapper">
1273
+ <a class="fd-wizard__step-container" tabindex="0" aria-label="Contact">
1274
+ <span class="fd-wizard__step-indicator">
1275
+ <i class="fd-wizard__icon sap-icon--contatcs" role="presentation"></i>
1276
+ </span>
1277
+ <div class="fd-wizard__label-container fd-wizard__label-container--optional">
1278
+ <span class="fd-wizard__label">Contact</span>
1279
+ <span class="fd-wizard__optional-text">(Optional)</span>
1280
+ </div>
1281
+ </a>
1282
+ <span class="fd-wizard__connector"></span>
1283
+ </div>
1284
+ </li>
1285
+ <li class="fd-wizard__step fd-wizard__step--completed fd-wizard__step--stacked fd-wizard__step--stacked-top">
1286
+ <div class="fd-wizard__step-wrapper">
1287
+ <div class="fd-popover">
1288
+ <div class="fd-popover__control">
1289
+ <a
1290
+ class="fd-wizard__step-container"
1291
+ tabindex="0"
1292
+ aria-label="Payment"
1293
+ aria-controls="actionSheetMobile2"
1294
+ aria-expanded="false"
1295
+ aria-haspopup="true"
1296
+ onclick="onPopoverClick('actionSheetMobile2');">
1297
+ <span class="fd-wizard__step-indicator">
1298
+ <i class="fd-wizard__icon sap-icon--money-bills" role="presentation"></i>
1299
+ </span>
1300
+ <div class="fd-wizard__label-container">
1301
+ <span class="fd-wizard__label">Payment</span>
1302
+ </div>
1303
+ </a>
1304
+ </div>
1305
+ <div class="fd-popover__body" aria-hidden="true" id="actionSheetMobile2">
1306
+ <ul
1307
+ class="fd-action-sheet"
1308
+ role="list"
1309
+ aria-label="List of completed stacked steps">
1310
+ <li class="fd-action-sheet__item" role="listitem">
1311
+ <button class="fd-button fd-button--full-width fd-button--transparent fd-button--text-alignment-left">
1312
+ <i class=" sap-icon--money-bills" role="presentation"></i>
1313
+ <span class="fd-button__text">Payment</span>
1314
+ </button>
1315
+ </li>
1316
+ <li class="fd-action-sheet__item" role="listitem">
1317
+ <button class="fd-button fd-button--full-width fd-button--transparent fd-button--text-alignment-left">
1318
+ <i class="sap-icon--contacts" role="presentation"></i>
1319
+ <span class="fd-button__text">Contact</span>
1320
+ </button>
1321
+ </li>
1322
+ <li class="fd-action-sheet__item" role="listitem">
1323
+ <button class="fd-button fd-button--full-width fd-button--transparent fd-button--text-alignment-left">
1324
+ <i class="sap-icon--person-placeholder" role="presentation"></i>
1325
+ <span class="fd-button__text">Customer</span>
1326
+ </button>
1327
+ </li>
1328
+ </ul>
1329
+ </div>
1330
+ </div>
1331
+ <span class="fd-wizard__connector fd-wizard__connector--active"></span>
1332
+ </div>
1333
+ </li>
1334
+ <li class="fd-wizard__step fd-wizard__step--current">
1335
+ <div class="fd-wizard__step-wrapper">
1336
+ <a class="fd-wizard__step-container" tabindex="0" aria-label="Bill To">
1337
+ <span class="fd-wizard__step-indicator">
1338
+ <i class="fd-wizard__icon sap-icon--batch-payments" role="presentation"></i>
1339
+ </span>
1340
+ <div class="fd-wizard__label-container">
1341
+ <span class="fd-wizard__label">Bill To</span>
1342
+ </div>
1343
+ </a>
1344
+ <span class="fd-wizard__connector fd-wizard__connector"></span>
1345
+ </div>
1346
+ </li>
1347
+ <li class="fd-wizard__step fd-wizard__step--upcoming fd-wizard__step--stacked">
1348
+ <div class="fd-wizard__step-wrapper">
1349
+ <a class="fd-wizard__step-container" tabindex="0" aria-label="Ship To" aria-disabled="true">
1350
+ <span class="fd-wizard__step-indicator">
1351
+ <i class="fd-wizard__icon sap-icon--shipping-status" role="presentation"></i>
1352
+ </span>
1353
+ <div class="fd-wizard__label-container">
1354
+ <span class="fd-wizard__label">Ship To</span>
1355
+ </div>
1356
+ </a>
1357
+ <span class="fd-wizard__connector fd-wizard__connector"></span>
1358
+ </div>
1359
+ </li>
1360
+ <li class="fd-wizard__step fd-wizard__step--upcoming fd-wizard__step--stacked">
1361
+ <div class="fd-wizard__step-wrapper">
1362
+ <a class="fd-wizard__step-container" tabindex="0" aria-label="Products" aria-disabled="true">
1363
+ <span class="fd-wizard__step-indicator">
1364
+ <i class="fd-wizard__icon sap-icon--product" role="presentation"></i>
1365
+ </span>
1366
+ <div class="fd-wizard__label-container fd-wizard__label-container--optional">
1367
+ <span class="fd-wizard__label">Products</span>
1368
+ <span class="fd-wizard__optional-text">(Optional)</span>
1369
+ </div>
1370
+ </a>
1371
+ <span class="fd-wizard__connector"></span>
1372
+ </div>
1373
+ </li>
1374
+ <li class="fd-wizard__step fd-wizard__step--upcoming fd-wizard__step--stacked">
1375
+ <div class="fd-wizard__step-wrapper">
1376
+ <a class="fd-wizard__step-container" tabindex="0" aria-label="Additional Information" aria-disabled="true">
1377
+ <span class="fd-wizard__step-indicator">
1378
+ <i class="fd-wizard__icon sap-icon--course-program" role="presentation"></i>
1379
+ </span>
1380
+ <div class="fd-wizard__label-container">
1381
+ <span class="fd-wizard__label">Additional Information</span>
1382
+ </div>
1383
+ </a>
1384
+ <span class="fd-wizard__connector"></span>
1385
+ </div>
1386
+ </li>
1387
+ </ul>
1388
+ </nav>
1389
+ <section class="fd-wizard__content fd-wizard__content--sm" id="wizard-section-7">
1390
+ <div class="fd-wizard__step-content-container">
1391
+ <div
1392
+ style="
1393
+ width:100%;
1394
+ background-image: url(assets/images/backgrounds/Godafoss_waterfall_in_northern_Iceland.jpg);
1395
+ height: 300px;
1396
+ background-size:cover;"
1397
+ role="img"
1398
+ aria-label="Image 4" />
1399
+ <div class="fd-wizard__next-step fd-wizard__next-step--floating">
1400
+ <button class="fd-button fd-button--emphasized">Next Step</button>
1401
+ </div>
1402
+ </div>
1403
+ </section>
1404
+ <footer>
1405
+ <div class="fd-bar fd-bar--page-s fd-bar--floating-footer">
1406
+ <div class="fd-bar__right">
1407
+ <div class="fd-bar__element">
1408
+ <button class="fd-button fd-button--transparent">Cancel</button>
1409
+ </div>
1410
+ </div>
1411
+ </div>
1412
+ </footer>
1413
+ </section>
1414
+ </div>
1415
+ </div>
1416
+ ```
1417
+
1418
+ ## Accessibility
1419
+
1420
+ - Use semantic HTML elements where appropriate
1421
+ - Include proper ARIA attributes for interactive elements
1422
+ - Ensure keyboard navigation support
1423
+ - Provide adequate color contrast
1424
+
1425
+ ## Source
1426
+
1427
+ This documentation was automatically generated from: `packages/styles/stories/Components/wizard/wizard.stories.js`
1428
+
1429
+ For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).