@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/panel-layouts.md ADDED
@@ -0,0 +1,345 @@
1
+ ---
2
+ component: fd-panel
3
+ title: Layouts/Margins
4
+ category: Layouts
5
+ selector: fd-panel
6
+ cssFile: panel.css
7
+ sourcePath: packages/styles/stories/Layouts/margins/margins.stories.js
8
+ tags: []
9
+ dependencies: ["margins","panel"]
10
+ relatedComponents: ["margins","panel"]
11
+ stability: stable
12
+ generatedAt: 2026-06-09T18:29:01.677Z
13
+ ---
14
+
15
+ # Layouts/Margins
16
+
17
+ The CSS margin properties are used to create space around elements, outside of any defined borders.
18
+ With CSS, you have full control over the margins. There are properties for setting the margin for each side of an element.
19
+ We now provide a number of predefined margin clases which add predefined margin values.
20
+
21
+ ## Dependencies
22
+
23
+ This component depends on the following CSS files:
24
+
25
+ - `margins.css`
26
+ - `panel.css`
27
+
28
+ ## Installation
29
+
30
+ ```bash
31
+ npm install fundamental-styles
32
+ ```
33
+
34
+ ```html
35
+ <!-- Include theme -->
36
+ <link href="node_modules/fundamental-styles/dist/theming/sap_horizon.css" rel="stylesheet">
37
+
38
+ <!-- Include component CSS -->
39
+ <link href="node_modules/fundamental-styles/dist/panel.css" rel="stylesheet">
40
+
41
+ <!-- Include dependencies -->
42
+ <link href="node_modules/fundamental-styles/dist/margins.css" rel="stylesheet">
43
+ <link href="node_modules/fundamental-styles/dist/panel.css" rel="stylesheet">
44
+ ```
45
+
46
+ ## Basic Usage
47
+
48
+ ```html
49
+ <div class="docs-column-flex docs-column-flex--align-start">
50
+ <div class="docs-layout-margins-paddings--secondary-bg">
51
+ <div class="docs-layout-margins-paddings docs-layout-margins-paddings--width docs-layout-margins-paddings--color-13 fd-margin--tiny">container(tiny)</div>
52
+ </div>
53
+ <div class="docs-layout-margins-paddings--secondary-bg">
54
+ <div class="docs-layout-margins-paddings docs-layout-margins-paddings--width docs-layout-margins-paddings--color-13 fd-margin--sm">container(sm)</div>
55
+ </div>
56
+ <div class="docs-layout-margins-paddings--secondary-bg">
57
+ <div class="docs-layout-margins-paddings docs-layout-margins-paddings--width docs-layout-margins-paddings--color-13 fd-margin--md">container(md)</div>
58
+ </div>
59
+ <div class="docs-layout-margins-paddings--secondary-bg">
60
+ <div class="docs-layout-margins-paddings docs-layout-margins-paddings--width docs-layout-margins-paddings--color-13 fd-margin--lg">container(lg)</div>
61
+ </div>
62
+ </div>
63
+ ```
64
+
65
+ ## Modifiers
66
+
67
+ | Class | Description |
68
+ |-------|-------------|
69
+ | `fd-panel--fixed` | Style variant |
70
+
71
+ ## BEM Elements
72
+
73
+ This component uses the following BEM elements:
74
+
75
+ - `fd-panel__header`
76
+ - `fd-panel__title`
77
+
78
+ ## Related Components
79
+
80
+ This component works with or depends on:
81
+
82
+ - `margins`
83
+ - `panel`
84
+
85
+ ## Design Tokens
86
+
87
+ Key CSS variables used by this component:
88
+
89
+ - `--borderless`
90
+ - `--fdPanel_Border_Radius`
91
+ - `--fdPanel_Content_Background_Color`
92
+ - `--fdPanel_Content_Border_Bottom_Color`
93
+ - `--fdPanel_Content_Border_Bottom_Left_Radius`
94
+ - `--fdPanel_Content_Border_Bottom_Right_Radius`
95
+ - `--fdPanel_Content_Border_Top_Left_Radius`
96
+ - `--fdPanel_Content_Border_Top_Right_Radius`
97
+ - `--fdPanel_Content_Padding_Block`
98
+ - `--fdPanel_Content_Padding_Inline`
99
+ - `--fdPanel_Flex_Direction`
100
+ - `--fdPanel_Header_Border_Bottom_Left_Radius`
101
+ - `--fdPanel_Header_Border_Bottom_Right_Radius`
102
+ - `--fdPanel_Header_Border_Color`
103
+ - `--fdPanel_Header_Border_Top_Left_Radius`
104
+
105
+ *...and 5 more*
106
+
107
+ ## Examples
108
+
109
+ ### All-Round Margin
110
+
111
+ All-round margin appears on all sides of the container they are applied to. Use \
112
+
113
+ ```html
114
+ <div class="docs-column-flex docs-column-flex--align-start">
115
+ <div class="docs-layout-margins-paddings--secondary-bg">
116
+ <div class="docs-layout-margins-paddings docs-layout-margins-paddings--width docs-layout-margins-paddings--color-13 fd-margin--tiny">container(tiny)</div>
117
+ </div>
118
+ <div class="docs-layout-margins-paddings--secondary-bg">
119
+ <div class="docs-layout-margins-paddings docs-layout-margins-paddings--width docs-layout-margins-paddings--color-13 fd-margin--sm">container(sm)</div>
120
+ </div>
121
+ <div class="docs-layout-margins-paddings--secondary-bg">
122
+ <div class="docs-layout-margins-paddings docs-layout-margins-paddings--width docs-layout-margins-paddings--color-13 fd-margin--md">container(md)</div>
123
+ </div>
124
+ <div class="docs-layout-margins-paddings--secondary-bg">
125
+ <div class="docs-layout-margins-paddings docs-layout-margins-paddings--width docs-layout-margins-paddings--color-13 fd-margin--lg">container(lg)</div>
126
+ </div>
127
+ </div>
128
+ ```
129
+
130
+ ### Single-Sided Margin Top
131
+
132
+ Single sided margins appear on only one of the sides of the element:
133
+
134
+ - top - displayed on top of the element
135
+ - end - displayed on the right side and in right-to-left mode on the left side of the element
136
+ - bottom - displayed on the bottom of the element
137
+ - begin - displayed on the left side and in right-to-left mode on the right side of the element.
138
+
139
+ Use \
140
+
141
+ ```html
142
+ <div class="docs-column-flex docs-column-flex--align-start">
143
+ <div class="docs-layout-margins-paddings--secondary-bg">
144
+ <div class="docs-layout-margins-paddings docs-layout-margins-paddings--width docs-layout-margins-paddings--color-13 fd-margin-top--tiny">container(tiny)</div>
145
+ </div>
146
+ <div class="docs-layout-margins-paddings--secondary-bg">
147
+ <div class="docs-layout-margins-paddings docs-layout-margins-paddings--width docs-layout-margins-paddings--color-13 fd-margin-top--sm">container(sm)</div>
148
+ </div>
149
+ <div class="docs-layout-margins-paddings--secondary-bg">
150
+ <div class="docs-layout-margins-paddings docs-layout-margins-paddings--width docs-layout-margins-paddings--color-13 fd-margin-top--md">container(md)</div>
151
+ </div>
152
+ <div class="docs-layout-margins-paddings--secondary-bg">
153
+ <div class="docs-layout-margins-paddings docs-layout-margins-paddings--width docs-layout-margins-paddings--color-13 fd-margin-top--lg">container(lg)</div>
154
+ </div>
155
+ </div>
156
+ ```
157
+
158
+ ### Single-Sided Margin End
159
+
160
+ ```html
161
+ <div class="docs-column-flex docs-column-flex--align-start">
162
+ <div class="docs-layout-margins-paddings--secondary-bg">
163
+ <div class="docs-layout-margins-paddings docs-layout-margins-paddings--width docs-layout-margins-paddings--color-13 fd-margin-end--tiny">container(tiny)</div>
164
+ </div>
165
+ <div class="docs-layout-margins-paddings--secondary-bg">
166
+ <div class="docs-layout-margins-paddings docs-layout-margins-paddings--width docs-layout-margins-paddings--color-13 fd-margin-end--sm">container(sm)</div>
167
+ </div>
168
+ <div class="docs-layout-margins-paddings--secondary-bg">
169
+ <div class="docs-layout-margins-paddings docs-layout-margins-paddings--width docs-layout-margins-paddings--color-13 fd-margin-end--md">container(md)</div>
170
+ </div>
171
+ <div class="docs-layout-margins-paddings--secondary-bg">
172
+ <div class="docs-layout-margins-paddings docs-layout-margins-paddings--width docs-layout-margins-paddings--color-13 fd-margin-end--lg">container(lg)</div>
173
+ </div>
174
+ </div>
175
+ ```
176
+
177
+ ### Single-Sided Margin Bottom
178
+
179
+ ```html
180
+ <div class="docs-column-flex docs-column-flex--align-start">
181
+ <div class="docs-layout-margins-paddings--secondary-bg">
182
+ <div class="docs-layout-margins-paddings docs-layout-margins-paddings--width docs-layout-margins-paddings--color-13 fd-margin-bottom--tiny">container(tiny)</div>
183
+ </div>
184
+ <div class="docs-layout-margins-paddings--secondary-bg">
185
+ <div class="docs-layout-margins-paddings docs-layout-margins-paddings--width docs-layout-margins-paddings--color-13 fd-margin-bottom--sm">container(sm)</div>
186
+ </div>
187
+ <div class="docs-layout-margins-paddings--secondary-bg">
188
+ <div class="docs-layout-margins-paddings docs-layout-margins-paddings--width docs-layout-margins-paddings--color-13 fd-margin-bottom--md">container(md)</div>
189
+ </div>
190
+ <div class="docs-layout-margins-paddings--secondary-bg">
191
+ <div class="docs-layout-margins-paddings docs-layout-margins-paddings--width docs-layout-margins-paddings--color-13 fd-margin-bottom--lg">container(lg)</div>
192
+ </div>
193
+ </div>
194
+ ```
195
+
196
+ ### Single-Sided Margin Begin
197
+
198
+ ```html
199
+ <div class="docs-column-flex docs-column-flex--align-start">
200
+ <div class="docs-layout-margins-paddings--secondary-bg">
201
+ <div class="docs-layout-margins-paddings docs-layout-margins-paddings--width docs-layout-margins-paddings--color-13 fd-margin-begin--tiny">container(tiny)</div>
202
+ </div>
203
+ <div class="docs-layout-margins-paddings--secondary-bg">
204
+ <div class="docs-layout-margins-paddings docs-layout-margins-paddings--width docs-layout-margins-paddings--color-13 fd-margin-begin--sm">container(sm)</div>
205
+ </div>
206
+ <div class="docs-layout-margins-paddings--secondary-bg">
207
+ <div class="docs-layout-margins-paddings docs-layout-margins-paddings--width docs-layout-margins-paddings--color-13 fd-margin-begin--md">container(md)</div>
208
+ </div>
209
+ <div class="docs-layout-margins-paddings--secondary-bg">
210
+ <div class="docs-layout-margins-paddings docs-layout-margins-paddings--width docs-layout-margins-paddings--color-13 fd-margin-begin--lg">container(lg)</div>
211
+ </div>
212
+ </div>
213
+ ```
214
+
215
+ ### Double-Sided Margin Top-Bottom
216
+
217
+ Double sided margins appear on two opposite sides of the element.
218
+
219
+ - top-bottom - displayed on top and bottom of the element
220
+ - begin-end - displayed on left and right side of the element
221
+
222
+ Use \
223
+
224
+ ```html
225
+ <div class="docs-column-flex docs-column-flex--align-start">
226
+ <div class="docs-layout-margins-paddings--secondary-bg">
227
+ <div class="docs-layout-margins-paddings docs-layout-margins-paddings--width docs-layout-margins-paddings--color-13 fd-margin-top-bottom--tiny">container(tiny)</div>
228
+ </div>
229
+ <div class="docs-layout-margins-paddings--secondary-bg">
230
+ <div class="docs-layout-margins-paddings docs-layout-margins-paddings--width docs-layout-margins-paddings--color-13 fd-margin-top-bottom--sm">container(sm)</div>
231
+ </div>
232
+ <div class="docs-layout-margins-paddings--secondary-bg">
233
+ <div class="docs-layout-margins-paddings docs-layout-margins-paddings--width docs-layout-margins-paddings--color-13 fd-margin-top-bottom--md">container(md)</div>
234
+ </div>
235
+ <div class="docs-layout-margins-paddings--secondary-bg">
236
+ <div class="docs-layout-margins-paddings docs-layout-margins-paddings--width docs-layout-margins-paddings--color-13 fd-margin-top-bottom--lg">container(lg)</div>
237
+ </div>
238
+ </div>
239
+ ```
240
+
241
+ ### Double-Sided Margin Begin-End
242
+
243
+ ```html
244
+ <div class="docs-column-flex docs-column-flex--align-start">
245
+ <div class="docs-layout-margins-paddings--secondary-bg">
246
+ <div class="docs-layout-margins-paddings docs-layout-margins-paddings--width docs-layout-margins-paddings--color-13 fd-margin-begin-end--tiny">container(tiny)</div>
247
+ </div>
248
+ <div class="docs-layout-margins-paddings--secondary-bg">
249
+ <div class="docs-layout-margins-paddings docs-layout-margins-paddings--width docs-layout-margins-paddings--color-13 fd-margin-begin-end--sm">container(sm)</div>
250
+ </div>
251
+ <div class="docs-layout-margins-paddings--secondary-bg">
252
+ <div class="docs-layout-margins-paddings docs-layout-margins-paddings--width docs-layout-margins-paddings--color-13 fd-margin-begin-end--md">container(md)</div>
253
+ </div>
254
+ <div class="docs-layout-margins-paddings--secondary-bg">
255
+ <div class="docs-layout-margins-paddings docs-layout-margins-paddings--width docs-layout-margins-paddings--color-13 fd-margin-begin-end--lg">container(lg)</div>
256
+ </div>
257
+ </div>
258
+ ```
259
+
260
+ ### NoMargin
261
+
262
+ No margin classes remove existing container margins. Use \
263
+
264
+ ```html
265
+ <div class="docs-column-flex docs-column-flex--align-start">
266
+ <div class="docs-layout-margins-paddings--secondary-bg">
267
+ <div class="docs-layout-margins-paddings docs-layout-margins-paddings--width docs-layout-margins-paddings--color-13 docs-layout-margins-paddings--margin fd-margin--none">container</div>
268
+ </div>
269
+ <div class="docs-layout-margins-paddings--secondary-bg">
270
+ <div class="docs-layout-margins-paddings docs-layout-margins-paddings--width docs-layout-margins-paddings--color-13 docs-layout-margins-paddings--margin fd-margin-top--none">container</div>
271
+ </div>
272
+ <div class="docs-layout-margins-paddings--secondary-bg">
273
+ container</div>
274
+ </div>
275
+ <div class="docs-layout-margins-paddings--secondary-bg">
276
+ <div class="docs-layout-margins-paddings docs-layout-margins-paddings--width docs-layout-margins-paddings--color-13 docs-layout-margins-paddings--margin fd-margin-bottom--none">container</div>
277
+ </div>
278
+ <div class="docs-layout-margins-paddings--secondary-bg">
279
+ container</div>
280
+ ```
281
+
282
+ ### ResponsiveMargin
283
+
284
+ The responsive margins class adds a margin around an element based on the width of the container the element is in. Use \
285
+
286
+ ```html
287
+ <div class="docs-column-flex docs-column-flex--align-start">
288
+ <div class="docs-layout-margins-paddings--secondary-bg">
289
+ <div class="docs-layout-margins-paddings docs-layout-margins-paddings--width docs-layout-margins-paddings--color-13 fd-margin-responsive--sm">container(sm)</div>
290
+ </div>
291
+ <div class="docs-layout-margins-paddings--secondary-bg">
292
+ <div class="docs-layout-margins-paddings docs-layout-margins-paddings--width docs-layout-margins-paddings--color-13 fd-margin-responsive--md">container(md)</div>
293
+ </div>
294
+ <div class="docs-layout-margins-paddings--secondary-bg">
295
+ <div class="docs-layout-margins-paddings docs-layout-margins-paddings--width docs-layout-margins-paddings--color-13 fd-margin-responsive--lg">container(lg)</div>
296
+ </div>
297
+ <div class="docs-layout-margins-paddings--secondary-bg">
298
+ <div class="docs-layout-margins-paddings docs-layout-margins-paddings--width docs-layout-margins-paddings--color-13 fd-margin-responsive--xl">container(xl)</div>
299
+ </div>
300
+ </div>
301
+ ```
302
+
303
+ ### Double-Sided Negative Margin Begin-End
304
+
305
+ The negative margin class adds a double sided negative margin to an element. This is useful when aligning elements with built-in paddings.
306
+ Use \
307
+
308
+ ```html
309
+ <div class="docs-column-flex docs-layout-margins-paddings--padded">
310
+ <div class="fd-panel fd-panel--fixed fd-margin-negative-begin-end--tiny">
311
+ <div class="fd-panel__header">
312
+ <h1 class="fd-panel__title" title="Panel header">Panel header</h1>
313
+ </div>
314
+ </div>
315
+
316
+ <div class="fd-panel fd-panel--fixed fd-margin-negative-begin-end--sm">
317
+ <div class="fd-panel__header">
318
+ <h1 class="fd-panel__title" title="Panel header">Panel header</h1>
319
+ </div>
320
+ </div>
321
+ <div class="fd-panel fd-panel--fixed fd-margin-negative-begin-end--md">
322
+ <div class="fd-panel__header">
323
+ <h1 class="fd-panel__title" title="Panel header">Panel header</h1>
324
+ </div>
325
+ </div>
326
+ <div class="fd-panel fd-panel--fixed fd-margin-negative-begin-end--lg">
327
+ <div class="fd-panel__header">
328
+ <h1 class="fd-panel__title" title="Panel header">Panel header</h1>
329
+ </div>
330
+ </div>
331
+ </div>
332
+ ```
333
+
334
+ ## Accessibility
335
+
336
+ - Use semantic HTML elements where appropriate
337
+ - Include proper ARIA attributes for interactive elements
338
+ - Ensure keyboard navigation support
339
+ - Provide adequate color contrast
340
+
341
+ ## Source
342
+
343
+ This documentation was automatically generated from: `packages/styles/stories/Layouts/margins/margins.stories.js`
344
+
345
+ For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).