@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/info-label.md ADDED
@@ -0,0 +1,348 @@
1
+ ---
2
+ component: fd-info-label
3
+ title: Components/Info Label
4
+ category: Components
5
+ selector: fd-info-label
6
+ cssFile: info-label.css
7
+ sourcePath: packages/styles/stories/Components/info-label/info-label.stories.js
8
+ tags: ["btp"]
9
+ dependencies: ["icon","info-label"]
10
+ relatedComponents: ["icon","info-label"]
11
+ stability: stable
12
+ generatedAt: 2026-06-09T18:29:01.498Z
13
+ ---
14
+
15
+ # Components/Info Label
16
+
17
+ Info Label is a small non-interactive numeric or text-based label.
18
+ Its primary use is to add user-defined characteristic to an object.
19
+ Use the Info Label base class with following modifiers:
20
+
21
+ | **Accent** | **Modifier class** |
22
+ | :--------- | :---------------: |
23
+ | Accent 1 - Mango | \
24
+
25
+ ## Dependencies
26
+
27
+ This component depends on the following CSS files:
28
+
29
+ - `icon.css`
30
+ - `info-label.css`
31
+
32
+ ## Installation
33
+
34
+ ```bash
35
+ npm install fundamental-styles
36
+ ```
37
+
38
+ ```html
39
+ <!-- Include theme -->
40
+ <link href="node_modules/fundamental-styles/dist/theming/sap_horizon.css" rel="stylesheet">
41
+
42
+ <!-- Include component CSS -->
43
+ <link href="node_modules/fundamental-styles/dist/info-label.css" rel="stylesheet">
44
+
45
+ <!-- Include dependencies -->
46
+ <link href="node_modules/fundamental-styles/dist/icon.css" rel="stylesheet">
47
+ <link href="node_modules/fundamental-styles/dist/info-label.css" rel="stylesheet">
48
+ ```
49
+
50
+ ## Basic Usage
51
+
52
+ ```html
53
+ <span class="fd-info-label fd-info-label--accent-color-1">
54
+ <span class="fd-info-label__sr-only">Info Label</span>
55
+ <span class="fd-info-label__text">color 1</span>
56
+ </span>
57
+ <span class="fd-info-label fd-info-label--accent-color-2">
58
+ <span class="fd-info-label__sr-only">Info Label</span>
59
+ <span class="fd-info-label__text">color 2</span>
60
+ </span>
61
+ <span class="fd-info-label fd-info-label--accent-color-3">
62
+ <span class="fd-info-label__sr-only">Info Label</span>
63
+ <span class="fd-info-label__text">color 3</span>
64
+ </span>
65
+ <span class="fd-info-label fd-info-label--accent-color-4">
66
+ <span class="fd-info-label__sr-only">Info Label</span>
67
+ <span class="fd-info-label__text">color 4</span>
68
+ </span>
69
+ <span class="fd-info-label fd-info-label--accent-color-5">
70
+ <span class="fd-info-label__sr-only">Info Label</span>
71
+ <span class="fd-info-label__text">color 5</span>
72
+ </span>
73
+ <span class="fd-info-label fd-info-label--accent-color-6">
74
+ <span class="fd-info-label__sr-only">Info Label</span>
75
+ <span class="fd-info-label__text">color 6</span>
76
+ </span>
77
+ <span class="fd-info-label fd-info-label--accent-color-7">
78
+ <span class="fd-info-label__sr-only">Info Label</span>
79
+ <span class="fd-info-label__text">color 7</span>
80
+ </span>
81
+ <span class="fd-info-label fd-info-label--accent-color-8">
82
+ <span class="fd-info-label__sr-only">Info Label</span>
83
+ <span class="fd-info-label__text">color 8</span>
84
+ </span>
85
+ <span class="fd-info-label fd-info-label--accent-color-9">
86
+ <span class="fd-info-label__sr-only">Info Label</span>
87
+ <span class="fd-info-label__text">color 9</span>
88
+ </span>
89
+ <span class="fd-info-label fd-info-label--accent-color-10">
90
+ <span class="fd-info-label__sr-only">Info Label</span>
91
+ <span class="fd-info-label__text">color 10</span>
92
+ </span>
93
+ ```
94
+
95
+ ## Modifiers
96
+
97
+ | Class | Description |
98
+ |-------|-------------|
99
+ | `fd-info-label--accent-color-` | Style variant |
100
+ | `fd-info-label--display` | Style variant |
101
+
102
+ ## BEM Elements
103
+
104
+ This component uses the following BEM elements:
105
+
106
+ - `fd-info-label__icon`
107
+ - `fd-info-label__sr-only`
108
+ - `fd-info-label__text`
109
+
110
+ ## Related Components
111
+
112
+ This component works with or depends on:
113
+
114
+ - `icon`
115
+ - `info-label`
116
+
117
+ ## Design Tokens
118
+
119
+ Key CSS variables used by this component:
120
+
121
+ - `--accent-color-`
122
+ - `--display`
123
+ - `--fdInfoLabel_Background`
124
+ - `--fdInfoLabel_Background_Color_Accent_7`
125
+ - `--fdInfoLabel_Border_Color`
126
+ - `--fdInfoLabel_Border_Radius`
127
+ - `--fdInfoLabel_Color`
128
+ - `--fdInfoLabel_Color_Accent_7`
129
+ - `--fdInfoLabel_Height`
130
+ - `--fdInfoLabel_Icon_Size`
131
+ - `--fdInfoLabel_Label_Font_Size`
132
+ - `--fdInfoLabel_Margin`
133
+ - `--fdInfoLabel_Padding`
134
+ - `--fdInfo_Label_Background_Color1`
135
+ - `--fdInfo_Label_Background_Color10`
136
+
137
+ *...and 5 more*
138
+
139
+ ## Examples
140
+
141
+ ### ColorFlavors
142
+
143
+ ```html
144
+ <span class="fd-info-label fd-info-label--accent-color-1">
145
+ <span class="fd-info-label__sr-only">Info Label</span>
146
+ <span class="fd-info-label__text">color 1</span>
147
+ </span>
148
+ <span class="fd-info-label fd-info-label--accent-color-2">
149
+ <span class="fd-info-label__sr-only">Info Label</span>
150
+ <span class="fd-info-label__text">color 2</span>
151
+ </span>
152
+ <span class="fd-info-label fd-info-label--accent-color-3">
153
+ <span class="fd-info-label__sr-only">Info Label</span>
154
+ <span class="fd-info-label__text">color 3</span>
155
+ </span>
156
+ <span class="fd-info-label fd-info-label--accent-color-4">
157
+ <span class="fd-info-label__sr-only">Info Label</span>
158
+ <span class="fd-info-label__text">color 4</span>
159
+ </span>
160
+ <span class="fd-info-label fd-info-label--accent-color-5">
161
+ <span class="fd-info-label__sr-only">Info Label</span>
162
+ <span class="fd-info-label__text">color 5</span>
163
+ </span>
164
+ <span class="fd-info-label fd-info-label--accent-color-6">
165
+ <span class="fd-info-label__sr-only">Info Label</span>
166
+ <span class="fd-info-label__text">color 6</span>
167
+ </span>
168
+ <span class="fd-info-label fd-info-label--accent-color-7">
169
+ <span class="fd-info-label__sr-only">Info Label</span>
170
+ <span class="fd-info-label__text">color 7</span>
171
+ </span>
172
+ <span class="fd-info-label fd-info-label--accent-color-8">
173
+ <span class="fd-info-label__sr-only">Info Label</span>
174
+ <span class="fd-info-label__text">color 8</span>
175
+ </span>
176
+ <span class="fd-info-label fd-info-label--accent-color-9">
177
+ <span class="fd-info-label__sr-only">Info Label</span>
178
+ <span class="fd-info-label__text">color 9</span>
179
+ </span>
180
+ <span class="fd-info-label fd-info-label--accent-color-10">
181
+ <span class="fd-info-label__sr-only">Info Label</span>
182
+ <span class="fd-info-label__text">color 10</span>
183
+ </span>
184
+ ```
185
+
186
+ ### InfoLabelWithIcon
187
+
188
+ ```html
189
+ <span class="fd-info-label fd-info-label--accent-color-1">
190
+ <i role="presentation" aria-hidden="true" class="fd-info-label__icon sap-icon--dark-mode"></i>
191
+ <span class="fd-info-label__sr-only">Info Label</span>
192
+ <span class="fd-info-label__text">Color 1</span>
193
+ </span>
194
+ <span class="fd-info-label fd-info-label--accent-color-2">
195
+ <i role="presentation" aria-hidden="true" class="fd-info-label__icon sap-icon--dark-mode"></i>
196
+ <span class="fd-info-label__sr-only">Info Label</span>
197
+ <span class="fd-info-label__text">Color 2</span>
198
+ </span>
199
+ <span class="fd-info-label fd-info-label--accent-color-3">
200
+ <i role="presentation" aria-hidden="true" class="fd-info-label__icon sap-icon--dark-mode"></i>
201
+ <span class="fd-info-label__sr-only">Info Label</span>
202
+ <span class="fd-info-label__text">Color 3</span>
203
+ </span>
204
+ <span class="fd-info-label fd-info-label--accent-color-4">
205
+ <i role="presentation" aria-hidden="true" class="fd-info-label__icon sap-icon--dark-mode"></i>
206
+ <span class="fd-info-label__sr-only">Info Label</span>
207
+ <span class="fd-info-label__text">Color 4</span>
208
+ </span>
209
+ <span class="fd-info-label fd-info-label--accent-color-5">
210
+ <i role="presentation" aria-hidden="true" class="fd-info-label__icon sap-icon--dark-mode"></i>
211
+ <span class="fd-info-label__sr-only">Info Label</span>
212
+ <span class="fd-info-label__text">Color 5</span>
213
+ </span>
214
+ <span class="fd-info-label fd-info-label--accent-color-6">
215
+ <i role="presentation" aria-hidden="true" class="fd-info-label__icon sap-icon--dark-mode"></i>
216
+ <span class="fd-info-label__sr-only">Info Label</span>
217
+ <span class="fd-info-label__text">Color 6</span>
218
+ </span>
219
+ <span class="fd-info-label fd-info-label--accent-color-7">
220
+ <i role="presentation" aria-hidden="true" class="fd-info-label__icon sap-icon--dark-mode"></i>
221
+ <span class="fd-info-label__sr-only">Info Label</span>
222
+ <span class="fd-info-label__text">Color 7</span>
223
+ </span>
224
+ <span class="fd-info-label fd-info-label--accent-color-8">
225
+ <i role="presentation" aria-hidden="true" class="fd-info-label__icon sap-icon--dark-mode"></i>
226
+ <span class="fd-info-label__sr-only">Info Label</span>
227
+ <span class="fd-info-label__text">Color 8</span>
228
+ </span>
229
+ <span class="fd-info-label fd-info-label--accent-color-9">
230
+ <i role="presentation" aria-hidden="true" class="fd-info-label__icon sap-icon--dark-mode"></i>
231
+ <span class="fd-info-label__sr-only">Info Label</span>
232
+ <span class="fd-info-label__text">Color 9</span>
233
+ </span>
234
+ <span class="fd-info-label fd-info-label--accent-color-10">
235
+ <i role="presentation" aria-hidden="true" class="fd-info-label__icon sap-icon--dark-mode"></i>
236
+ <span class="fd-info-label__sr-only">Info Label</span>
237
+ <span class="fd-info-label__text">Color 10</span>
238
+ </span>
239
+ ```
240
+
241
+ ### DisplayModeInfoLabel
242
+
243
+ ```html
244
+ <span class="fd-info-label fd-info-label--accent-color-1 fd-info-label--display">
245
+ <span class="fd-info-label__sr-only">Info Label</span>
246
+ <span class="fd-info-label__text">color 1</span>
247
+ </span>
248
+ <span class="fd-info-label fd-info-label--accent-color-2 fd-info-label--display">
249
+ <span class="fd-info-label__sr-only">Info Label</span>
250
+ <span class="fd-info-label__text">color 2</span>
251
+ </span>
252
+ <span class="fd-info-label fd-info-label--accent-color-3 fd-info-label--display">
253
+ <span class="fd-info-label__sr-only">Info Label</span>
254
+ <span class="fd-info-label__text">color 3</span>
255
+ </span>
256
+ <span class="fd-info-label fd-info-label--accent-color-4 fd-info-label--display">
257
+ <span class="fd-info-label__sr-only">Info Label</span>
258
+ <span class="fd-info-label__text">color 4</span>
259
+ </span>
260
+ <span class="fd-info-label fd-info-label--accent-color-5 fd-info-label--display">
261
+ <span class="fd-info-label__sr-only">Info Label</span>
262
+ <span class="fd-info-label__text">color 5</span>
263
+ </span>
264
+ <span class="fd-info-label fd-info-label--accent-color-6 fd-info-label--display">
265
+ <span class="fd-info-label__sr-only">Info Label</span>
266
+ <span class="fd-info-label__text">color 6</span>
267
+ </span>
268
+ <span class="fd-info-label fd-info-label--accent-color-7 fd-info-label--display">
269
+ <span class="fd-info-label__sr-only">Info Label</span>
270
+ <span class="fd-info-label__text">color 7</span>
271
+ </span>
272
+ <span class="fd-info-label fd-info-label--accent-color-8 fd-info-label--display">
273
+ <span class="fd-info-label__sr-only">Info Label</span>
274
+ <span class="fd-info-label__text">color 8</span>
275
+ </span>
276
+ <span class="fd-info-label fd-info-label--accent-color-9 fd-info-label--display">
277
+ <span class="fd-info-label__sr-only">Info Label</span>
278
+ <span class="fd-info-label__text">color 9</span>
279
+ </span>
280
+ <span class="fd-info-label fd-info-label--accent-color-10 fd-info-label--display">
281
+ <span class="fd-info-label__sr-only">Info Label</span>
282
+ <span class="fd-info-label__text">color 10</span>
283
+ </span>
284
+
285
+ <span class="fd-info-label fd-info-label--accent-color-1 fd-info-label--display">
286
+ <i role="presentation" class="fd-info-label__icon sap-icon--dark-mode"></i>
287
+ <span class="fd-info-label__sr-only">Info Label</span>
288
+ <span class="fd-info-label__text">Color 1</span>
289
+ </span>
290
+ <span class="fd-info-label fd-info-label--accent-color-2 fd-info-label--display">
291
+ <i role="presentation" class="fd-info-label__icon sap-icon--dark-mode"></i>
292
+ <span class="fd-info-label__sr-only">Info Label</span>
293
+ <span class="fd-info-label__text">Color 2</span>
294
+ </span>
295
+ <span class="fd-info-label fd-info-label--accent-color-3 fd-info-label--display">
296
+ <i role="presentation" class="fd-info-label__icon sap-icon--dark-mode"></i>
297
+ <span class="fd-info-label__sr-only">Info Label</span>
298
+ <span class="fd-info-label__text">Color 3</span>
299
+ </span>
300
+ <span class="fd-info-label fd-info-label--accent-color-4 fd-info-label--display">
301
+ <i role="presentation" class="fd-info-label__icon sap-icon--dark-mode"></i>
302
+ <span class="fd-info-label__sr-only">Info Label</span>
303
+ <span class="fd-info-label__text">Color 4</span>
304
+ </span>
305
+ <span class="fd-info-label fd-info-label--accent-color-5 fd-info-label--display">
306
+ <i role="presentation" class="fd-info-label__icon sap-icon--dark-mode"></i>
307
+ <span class="fd-info-label__sr-only">Info Label</span>
308
+ <span class="fd-info-label__text">Color 5</span>
309
+ </span>
310
+ <span class="fd-info-label fd-info-label--accent-color-6 fd-info-label--display">
311
+ <i role="presentation" class="fd-info-label__icon sap-icon--dark-mode"></i>
312
+ <span class="fd-info-label__sr-only">Info Label</span>
313
+ <span class="fd-info-label__text">Color 6</span>
314
+ </span>
315
+ <span class="fd-info-label fd-info-label--accent-color-7 fd-info-label--display">
316
+ <i role="presentation" class="fd-info-label__icon sap-icon--dark-mode"></i>
317
+ <span class="fd-info-label__sr-only">Info Label</span>
318
+ <span class="fd-info-label__text">Color 7</span>
319
+ </span>
320
+ <span class="fd-info-label fd-info-label--accent-color-8 fd-info-label--display">
321
+ <i role="presentation" class="fd-info-label__icon sap-icon--dark-mode"></i>
322
+ <span class="fd-info-label__sr-only">Info Label</span>
323
+ <span class="fd-info-label__text">Color 8</span>
324
+ </span>
325
+ <span class="fd-info-label fd-info-label--accent-color-9 fd-info-label--display">
326
+ <i role="presentation" class="fd-info-label__icon sap-icon--dark-mode"></i>
327
+ <span class="fd-info-label__sr-only">Info Label</span>
328
+ <span class="fd-info-label__text">Color 9</span>
329
+ </span>
330
+ <span class="fd-info-label fd-info-label--accent-color-10 fd-info-label--display">
331
+ <i role="presentation" class="fd-info-label__icon sap-icon--dark-mode"></i>
332
+ <span class="fd-info-label__sr-only">Info Label</span>
333
+ <span class="fd-info-label__text">Color 10</span>
334
+ </span>
335
+ ```
336
+
337
+ ## Accessibility
338
+
339
+ - Use semantic HTML elements where appropriate
340
+ - Include proper ARIA attributes for interactive elements
341
+ - Ensure keyboard navigation support
342
+ - Provide adequate color contrast
343
+
344
+ ## Source
345
+
346
+ This documentation was automatically generated from: `packages/styles/stories/Components/info-label/info-label.stories.js`
347
+
348
+ For the latest updates and interactive examples, see [Storybook](https://sap.github.io/fundamental-styles/).